HTML5游戏（画布）- UI技术？

Question

我正在构建一个使用Canvas的JavaScript / HTML5游戏（用于移动设备：Android / iPhone / WebOS），并使用PhoneGap。目前，我正在尝试设计如何构建UI和游戏棋盘以及它们之间的交互方式，但我不确定最佳解决方案是什么。以下是我能想到的：

1. 使用drawImage和fillText等工具直接将UI构建到canvas中
2. 在canvas之外构建UI的部分，然后当UI元素需要重叠到游戏棋盘画布上时，在canvas上覆盖一个div。

还有其他可能的技术可用于构建游戏UI吗？此外，哪种方法被认为是“标准”方法（我知道HTML5游戏并不是很受欢迎，所以可能还没有“标准”方法）？最后，你会推荐/使用哪种方法？

非常感谢提前！

编辑

我将此问题转移到gamedev.stackoverflow.com。您可以在此处找到新问题：https://gamedev.stackexchange.com/questions/7090/html5-game-canvas-ui-techniques/7115#7115

- Jason L.

---

这个问题可能更适合在GameDev.StackExchange.com上讨论。 - AttackingHobo

非常好的观点。我甚至没有想到，嗯！我会投票关闭这个问题并将它移动到SE的游戏开发部分。 - Jason L.

Answer 1

你可以用无数种方法来完成。选择最舒适和工程师最有信心的方式。

如果你正在寻找灵感或代码示例，这是我处理的一种方式。我有一个函数，重复绘制菜单，直到按下按钮为止。当按下按钮时，游戏加载，旧菜单点击事件侦听器被删除，并添加了新的游戏点击事件侦听器。我还结束了旧的菜单绘制循环，并开始新的游戏绘制循环。以下是一些选定的片段，以让您了解如何完成此操作：

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

这样可以将游戏的绘制和事件与菜单的绘制和事件分开。这也使我有余地在菜单中使用游戏/动画元素，以使它们看起来非常漂亮。（我也在双胞胎游戏开发讨论区发布了这个帖子）

- Simon Sarris

Answer 2

我认为这方面没有“标准”。这高度取决于你的 UI。大多数情况下，使用 DOM 元素更好，因为你不需要自己构建所有的 UI 组件、事件等等。它们可以用 CSS 进行样式设计以达到所需的外观。如果这还不够，你可能需要自己构建界面元素，但你应该确保这真的是必要的。很可能需要花费大量的工作量来实现你自己的方案。

- jwueller

Answer 3

试试这个：

使用Visual js，您可以设置如下页面：

Visual-JS多平台游戏引擎Windows GUI-源编辑器

OnPage编辑器-用于设计

您将获得：

*99％画布2D

添加新对象

创建网络摄像头组件（NUI或普通）

创建碰撞（基本-矩形）

创建文本框（移动虚拟键盘）

创建粒子

附加播放器（基本运动）

MultipEER（网络）*

localStarage

使用Visual js创建的应用程序始终在所有浏览器（移动/桌面）上工作。 网络-WebRTC-多对多

请在以下网址在线尝试： https://jsfiddle.net/user/zlatnaspirala/fiddles/

API看起来像这样：

Visual JS 0.5的应用程序编程接口文档 >

GAME_OBJECT是该框架中的主要对象。

1) Adding new game object (name will be 'GO' ):   

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT("GO" ,
x , y , w , h , speed )

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT( "GO" ,
45   , 45 , 10 , 10 , 10)


// 2) Adding image or animation : 

// DRAW TYPE can be   // 'DRAW_FRAME' no animation   // 'LOOP' playing
animation  // this number '1111123123' is ID  can be any number 
//ANIMATION (  surf ,TYPE_, FrameIndex ,source , PARENT , ID , blink_
, min_ , max_ , step , speed_ , opacity_  )
HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION(
SURF , "DRAW_FRAME" , 6 , RESOURCE.Tiles  , 1111123123 , "no" ,
1,11,1,1,1) 


3)Disable draging   GO.DRAG = false;

//  RESOURCE.NAMEOFFOLDERANIMATION

add folder "Tiles"  with images in folder /res/ and run node res.js   

// refresh page and you will get

RESOURCE.Tiles ready for use !   
// MAKE MODULE ACCESS EASY  var

STARTER = HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER");    

STARTER.GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION( SURF ,
"DRAW_FRAME" , 6 , RESOURCE.Tiles  , 1111123123 , "no" , 1,11,1,1,1) 


//DRAG initial value is true GO.DRAG = false;
//setup quard height  =  width  GO.POSITION.DIMENSION.H = GO.POSITION.DIMENSION.W;

4) EVENTS  FOR MOUSE AND MOBILE TOUCH HANDLED
//CLICK OR TOUCH START  GO.TAP = function(){  

//this make point directing to the game object instance   
//  this.NAME or this.ANIMATION.CURRENT_FRAME   };


GO.TOUCH_DOWN = function(){  

STARTER.DESTROY_OBJECT("GO")        console.log("THIS MUST BE TERMINATED
ON MOUSE DOWN or TOUCH_DOWN  : " + this.NAME);
//this.DESTROY_ME_AFTER_X_SECUND( 100 );    //console.log("THIS MUST BE
TERMINATED ON CLICK : " + this.NAME);      };

GO.TOUCH_MOVE = function(){  
console.log("HOVER ON OBJECT OR MOBILE TOUCH_MOVE  : " + this.NAME);   };

GO.TOUCH_UP = function(){  
console.log("MOUSE UP ON OBJECT OR MOBILE TOUCH_UP  : " + this.NAME);   };*

下载 git

- Nikola Lukic