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

Posted 2023-03-14

【中文标题】HTML5 游戏（画布）- UI 技术？

【英文标题】：HTML5 Game (Canvas) - UI Techniques?

【发布时间】：2011-06-03 17:25:04

【问题描述】：

我正在使用 PhoneGap 为移动设备（android / iPhone / WebOS）构建 javascript / html5 游戏（使用 Canvas）。我目前正在尝试设计应该如何构建 UI 和游戏板以及它们应该如何交互，但我不确定最好的解决方案是什么。这是我能想到的-

使用 drawImage 和 fillText 之类的东西将 UI 直接构建到画布中 使用常规 DOM 对象在画布之外构建部分 UI，然后在 UI 元素需要与游戏板画布重叠时将 div 浮动在画布上。

还有没有其他我没想到的技术可以用来构建游戏 UI？另外，其中哪一种会被认为是“标准”方式（我知道 HTML5 游戏不是很流行，所以可能还没有“标准”方式）？最后，您会推荐/使用哪种方式？

非常感谢！

编辑

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

【问题讨论】：

这在 GameDev.StackExchange.com 上可能会更好

非常好。没想到，呵呵！我将投票结束这个问题并将其移至 SE 的 gamedev 部分。

【参考方案1】：

我认为这没有“标准”。这在很大程度上取决于您的 UI。我认为在大多数情况下使用 DOM 元素会更好，因为您不需要自己构建所有 UI 组件、事件等。它们可以使用 CSS 设置样式以实现所需的外观。如果这还不够，您可能需要自己构建界面元素，但您应该确保确实需要这样做。推出自己的解决方案可能需要大量工作。

【参考方案2】：

你可以用一百万种方法做到这一点。然而，您感觉最舒服，您的工程师也最有信心。

如果您正在寻找灵感或代码示例，这是我的一种方法。我有一个重复绘制菜单直到按下按钮的功能。当按钮被按下时，游戏加载并且旧的菜单点击事件监听器被移除并且新的游戏点击事件监听器被添加。我还结束了菜单的旧绘制循环并开始一个新的游戏绘制循环。以下是一些选定的 sn-ps，可让您了解其完成方式：

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) 
  // ...

通过这种方式，我能够将游戏绘图和游戏事件与菜单绘图和菜单事件分开。如果我想让它们看起来真的很漂亮，它还给了我在菜单中使用游戏/动画元素的余地。

（我也在双子游戏开发讨论中发布了这个）

【参考方案3】：

试试这个：

使用 Visual js，您可以像这样设置页面：

Visual-JS multiplatform game engine windows GUI - source editor

OnPage editor - for design

您将获得：

*99% 画布 2d

添加新对象

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

创建联盟（基本 - 矩形）

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

创建粒子

连接玩家（基本动作）

MultipEER（网络）*

本地明星

从视觉 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);   ;*

Download git