[英]HTML5 Game (Canvas) - UI Techniques?
我正在使用PhoneGap开发用于移动设备(Android / iPhone / WebOS)的JavaScript / HTML5游戏(使用Canvas)。 我目前正在尝试设计UI和游戏板的构建方式以及它们之间的交互方式,但我不确定最佳解决方案是什么。 这是我能想到的-
我有没有想到的其他可用来构建游戏UI的技术? 另外,其中哪一种将被视为“标准”方式(我知道HTML5游戏不是很流行,因此可能还没有“标准”方式)? 最后,您会推荐/使用哪种方式?
提前谢谢了!
编辑
我已经将此问题移至gamedev.stackoverflow.com。 您可以在这里找到新问题: https : //gamedev.stackexchange.com/questions/7090/html5-game-canvas-ui-techniques/7115#7115
您可以做到一百万种方式。 但是,您会感到最舒适,工程师也会感到最有信心。
如果您正在寻找灵感或代码示例,这是我的一种方法。 我有一个反复绘制菜单直到按下按钮的功能。 按下按钮后,将加载游戏,并删除旧的菜单单击事件侦听器,并添加新的游戏单击事件侦听器。 我还结束了菜单的旧绘制循环并开始了新的游戏绘制循环。 以下是一些精选的片段,让您了解其操作方法:
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) {
// ...
}
这样,我就可以将游戏绘图和游戏事件与菜单绘图和菜单事件分开。 如果我想让菜单看起来更漂亮,这也让我有余地在菜单中使用游戏/动画元素。
(我也在双胞胎gamedev讨论中发布了此内容)
我认为这没有“标准”。 这在很大程度上取决于您的UI。 我认为在大多数情况下使用DOM元素会更好,因为您不需要自己构建所有UI组件,事件等。 可以使用CSS设置样式,以实现所需的外观。 如果这还不够,那么您可能需要自己构建接口元素,但是您应该确保确实需要这样做。 推出自己的解决方案可能需要大量工作。
尝试这个 :
使用Visual js,您可以像这样设置页面:
Visual-JS多平台游戏引擎Windows GUI-源代码编辑器
你会得到 :
* 99%帆布2D
添加新对象
创建网络摄像头组件(nui或普通)
创建合并(基本-矩形)
创建文本框(用于移动设备的虚拟键盘)
创建粒子
Atach播放器(基本运动)
MultipEER(网络)*
本地星空
通过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); };*
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.