【问题标题】:Designing a user interface in Canvas using HTML5使用 HTML5 在 Canvas 中设计用户界面
【发布时间】:2012-04-19 18:01:39
【问题描述】:

我在画布上设计了一个小游戏,我想为它添加一个界面(只是一个标准的东西,带有声音切换和其他设置等菜单选项)。

在 Angry Birds html5 (http://chrome.angrybirds.com) 中,除了 canvas 之外,他们没有任何 html 元素来处理他们的界面。

我只是想知道,我的整个游戏都用 html5 画布设计,然后完全使用 div 等 html 元素和 css 样式设计用户界面,这对我来说是不是不好的做法?

我想另一种方法是编写某种碰撞系统来确定用户在屏幕上点击的位置。

我希望有人可以在这里指出正确的方向,并告诉我哪种方法(纯画布或带有 html 元素)最适合我的画布游戏。我 100% 关心的是性能,测试两者都需要几天时间,而且会非常痛苦。enter code here

【问题讨论】:

  • 是的,自己对标准丰富的 UI 元素进行随意、不完整的模拟是一种不好的做法。您总是无法使您的实现以与操作系统级别或浏览器级别小部件相同的方式工作(例如,基于 Flash 的滚动条不适用于鼠标滚轮,或者不支持系统级别的平滑滚动设置)并且您的用户将遭受违反期望和减少交互的痛苦。然而,这是一个主观的(虽然是常见的)意见,而不是 Stack Overflow 围绕设计的一个硬性答案。投票结束,因为没有明确的回答。

标签: html canvas interface


【解决方案1】:

确定用户在画布上单击的位置并不难。我使用库gee,这使它变得非常容易。只需按照 API 中的示例创建您的 gee 画布并始终访问鼠标位置(g.mouseX、g.mouseY)和鼠标操作(g.mousedrag、g.mousedown、g.mouseover、ecc...)。当然,它还处理动画的自动刷新(g.draw)。

关于您的问题:是否使用 CSS 在画布中或外部制作 UI 取决于您。通常,您不需要关心用户界面的性能,也没有“更好的方法”:您的性能取决于您实现代码的方式。糟糕的实现可能会导致性能滞后,无论您使用何种技术来连接它。

【讨论】:

  • 非常强大的库,但不幸的是,我的目标是在创建我的画布游戏时不使用任何外部库。
  • 那么您可以将其内容集成到您自己的游戏中,或者使用js处理程序自己实现它...
猜你喜欢
  • 1970-01-01
  • 2014-12-21
  • 1970-01-01
  • 1970-01-01
  • 2010-11-29
  • 2015-12-18
  • 2013-03-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多