HTML5游戏（画布） - UI技巧？ [英] HTML5 Game (Canvas) - UI Techniques?

问题描述

我正在使用PhoneGap为移动（Android / iPhone / WebOS）构建JavaScript / HTML5游戏（使用Canvas）。我目前正在设计如何UI和游戏板应该建立，以及他们应该如何交互，但我不知道最好的解决方案是什么。这是我可以想到的 -

I'm in the process of building a JavaScript / HTML5 game (using Canvas) for mobile (Android / iPhone/ WebOS) with PhoneGap. I'm currently trying to design out how the UI and playing board should be built and how they should interact but I'm not sure what the best solution is. Here's what I can think of -

1. 使用drawImage和fillText等东西在画布上建立UI


2. 使用常规DOM对象在canvas外部构建UI部分，然后在UI元素需要与游戏画布重叠时在canvas上浮动一个div。

有没有其他可能的技术，我可以用来构建游戏UI，我没有想过？另外，哪些将被认为是标准的方式（我知道HTML5游戏不是很受欢迎，所以可能不是一个标准的方式）？最后，你会推荐/使用哪种方式？

Are there any other possible techniques I can use for building the game UI that I haven't thought of? Also, which of these would be considered the "standard" way (I know HTML5 games are not very popular so there probably isn't a "standard" way yet)? And finally, which way would YOU recommend / use?

提前非常感谢！

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

I've moved this question over to gamedev.stackoverflow.com. You can find the new question here: http://gamedev.stackexchange.com/questions/7090/html5-game-canvas-ui-techniques/7115#7115

推荐答案

不认为有一个标准为这。它高度取决于你的UI。我认为使用DOM元素在大多数情况下更好，因为你不需要自己构建所有的UI组件，事件等。他们可以用CSS样式来实现所需的外观。如果这还不够，你可能需要自己构建接口元素，但是你应该确保这是真正需要的。这可能是一个巨大的工作量来卷自己的解决方案。

I do not think that there is a "standard" for this. It highly depends on your UI. I think using the DOM elements is better in most cases, since you do not need to build all of the UI components, events, etc. yourself. They can be styled with CSS to achieve the desired look. If this is not enough, you'll probably need to build the interface elements yourself, but you should make sure that this is really needed. It is probably a huge amount of work to roll your own solution.

这篇关于HTML5游戏（画布） - UI技巧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！