如何开始在 Chrome 上制作《愤怒的小鸟》等游戏

发布于 2024-11-06 05:07:48 字数 250 浏览 9 评论 0原文

http://chrome.angrybirds.com/

据说基于浏览器的应用程序是使用 Canvas 2D 或 Web 完成的GL。

我尝试使用“检查元素”按钮使用 chrome 查看源代码,但我的 chrome 每次都会崩溃。

我只是想找出如何开始开发如此出色的游戏。寻找在线资源、书籍和针对初学者的具体技巧。

http://chrome.angrybirds.com/

The browser based app is said to be done using Canvas 2D or Web GL.

I tried to view source using chrome by using "Inspect Element" button, but my chrome crashes each time.

I am just trying to find out how one can begin to develop such awesome games. Looking for pointers to online resources,books, and specific tips for beginners.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

攒眉千度 2024-11-13 05:07:48

如果您想要一本书,Foundation HTML5 Canvas: For Games and Entertainment 刚刚出版。它相当基础,但如果您对 JavaScript 和 Canvas 完全陌生,它会对您很有用。

节奏更快的介绍是 Mozilla Canvas 教程,非常清晰。

为了掌握从绘制事物到能够与它们交互的过程,我建议我自己编写关于此事的教程,此处

对于一本关于 Javascript 的一般书籍(无论您以前的经验如何),可能值得阅读 Javascript:好的部分

至于一般建议,我给你 Ira Glass 的话:

没有人会把这件事告诉那些
初学者,希望有人告诉我。全部
我们从事创造性工作的人,我们得到
因为我们有很好的品味。
但存在这样的差距。对于第一个
你做了几年东西,只是
没那么好。就是想努力做好事
它有潜力,但事实并非如此。但
你的品味,吸引你的东西
进入游戏,依然是杀手锏。和
你的品味就是你工作的原因
让你失望了。很多人从来没有
过了这个阶段,他们就退出了。最多
我认识的人做的事情很有趣,
创意工作经历了多年
这。我们知道我们的工作没有
我们想要的这个特别的东西
有。我们都会经历这个。如果
你刚刚开始或者你正在
还处于这个阶段,你必须知道
这是正常的也是最重要的
你能做的就是做很多工作。
给自己设定一个最后期限,这样
每周你都会完成一个故事。
只需要通过一个卷
你将缩小这一差距的工作,
你的工作将会和你的一样好
野心。我花了更长的时间才弄清楚
我比任何人都知道如何做到这一点
曾经见过。这需要一段时间。它是
正常需要一段时间。你刚刚
一定要奋力拼搏。

If you want a book, Foundation HTML5 Canvas: For Games and Entertainment just came out. It is fairly basic but will be useful to you if you are completely new to JavaScript and Canvas.

A faster-paced introduction would be the Mozilla Canvas tutorial, which is very clear.

To get a grasp on going from drawing things to being able to interact with them, I'd suggest my own tutorials on the matter, here.

For a general book on Javascript (regardless of your prior experience), it is probably worth reading Javascript: The Good Parts

As for general advice, I give you the words of Ira Glass:

Nobody tells this to people who are
beginners, I wish someone told me. All
of us who do creative work, we get
into it because we have good taste.
But there is this gap. For the first
couple years you make stuff, it’s just
not that good. It’s trying to be good,
it has potential, but it’s not. But
your taste, the thing that got you
into the game, is still killer. And
your taste is why your work
disappoints you. A lot of people never
get past this phase, they quit. Most
people I know who do interesting,
creative work went through years of
this. We know our work doesn’t have
this special thing that we want it to
have. We all go through this. And if
you are just starting out or you are
still in this phase, you gotta know
its normal and the most important
thing you can do is do a lot of work.
Put yourself on a deadline so that
every week you will finish one story.
It is only by going through a volume
of work that you will close that gap,
and your work will be as good as your
ambitions. And I took longer to figure
out how to do this than anyone I’ve
ever met. It’s gonna take awhile. It’s
normal to take awhile. You’ve just
gotta fight your way through.

旧城空念 2024-11-13 05:07:48

当您“查看源代码”(而不是使用“检查元素”)时,第一个元标记显示

name="gwt:property" content="html.renderer=webgl"

“所以我可以得出结论,确实正在使用 WebGL”。 (WebGL 实际上使用了 canvas 元素,所以从技术上来说答案是“Canvas and Web GL”而不是“Canvas or Web GL”。但我猜它并不不使用 javascript canvas 2D API。)

当我使用 Ctrl+Shift+I 并单击“Elements”时,DOM 树显示 id 为“forplay-root”的

一个子 元素。但我不知道如何验证它是否用于 WebGL 或更传统的画布 2D 调用。

学习 WebGL 是一个非常好的学习 WebGL 的网站。特别是,请查看经验教训

我不知道为什么该页面会使您的 Chrome 页面崩溃。您使用的是全新版本的 Chrome 吗?发布版本直到最近才支持 WebGL。 (但这并不能解释崩溃......您只是看不到该操作。)您可能需要提交 Chrome 的错误报告。

When you "view source" (as opposed to using "Inspect Element"), the first meta tag says

name="gwt:property" content="html.renderer=webgl"

So I would conclude that WebGL is indeed being used. (WebGL in fact uses the canvas element, so the answer is technically "Canvas and Web GL" rather than "Canvas or Web GL". But I'm guessing it doesn't use the javascript canvas 2D API.)

When I use Ctrl+Shift+I and click 'Elements', the DOM tree shows that the <div> whose id is "forplay-root" has a child <canvas> element. But I don't know how to verify if it is being used for WebGL or more conventional canvas 2D calls.

A very nice site for learning WebGL is Learning WebGL. In particular, take a look at The Lessons.

I don't know why the page crashes your Chrome page. Are you using a brand-new version of Chrome? The release version didn't support WebGL till fairly recently. (But that wouldn't explain the crash... you just wouldn't see the action.) You may need to submit a bug report for Chrome.

老子叫无熙 2024-11-13 05:07:48

愤怒的小鸟移植是使用 GWT ForPlay 库 http://code.google.com/p/forplay 完成的/

它的奇妙之处在于,您可以用 Java 编写游戏,并从同一源为 Android、WebGL 和 Flash 进行编译。这真是太棒了。请查看 ForPlay 上的 Google I/O 2011 演示,了解更多详细信息 http://www.youtube.com /watch?v=F_sbusEUz5w

The Angry Birds port was done using the GWT ForPlay library http://code.google.com/p/forplay/

The fancy thing about it is that you can write your game in Java and compile it for Android, WebGL and Flash from the same source. Which is pretty awesome. Check out the Google I/O 2011 presentation on ForPlay for more details http://www.youtube.com/watch?v=F_sbusEUz5w

一指流沙 2024-11-13 05:07:48

对于这样的游戏,我会开始研究如何拥有相同的物理特性,因此 Box2D 是最好的起点。
http://box2d.org/
有各种 javascript 端口可供查看。

For a game like that, I would start looking at how to have the same physics, so Box2D is the best starting point.
http://box2d.org/
There are various javascript ports to look at.

不必在意 2024-11-13 05:07:48

该移植可以使用流行的 libgdx 跨平台库来完成。它用 java 编码,但允许您在桌面上调试和玩游戏。您基本上在核心项目中编写一次代码,然后它就会链接到其他四个项目 - dektop、Html5、android 和 iOS。 Html5版本是借助gwt完成的,而iOS版本是借助robovm完成的。您可以在这里查看:libgdx.badlogicgames.com

The port might be done using the popular libgdx cross-platform library. Its coded in java, but allows you to debug and play the game in your desktop. You basically write the code once in a core-project and it gets linked to four other projects-dektop, Html5, android and iOS. The Html5 version is done with the help of gwt, while the iOS one is done with robovm. You can have a look at it here: libgdx.badlogicgames.com.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文