coco2d Javascript跨平台游戏开发:入门指南

翻译:有二

校对:glory, 子龙山人

原文:How To Make a Cross-Platform Game with Cocos2D Javascript Tutorial: Getting Started

这不是一张图片这是个游戏!用鼠标点击

你是否知道你可以做个COCO2D游戏,让这个游戏可以同时运行在IPhone, Mac, Andriod和Web中,并且它们都共享同一份代码吗? 不相信我吗?你试着点击右边上的截图,实际上这就是一个Coco2d游戏!

你可以做到的,你只需要采用一种新的神奇的Coco2D技术----Cocos2D Javascript。 它允许你写一次游戏代码,并能够以完全本地化app的速度在任何地方运行它。现在新技术的唯一问题就是文档不足,但是我们绝不会投降,我们可以弥补它。

在本教程中,你将采用cocos2d-javascript来移植raywenderlich.com的经典游戏Ninjas Going Pew-Pew. 当我学习新框架时,我就会想去实现这款游戏。因为这个游戏不仅简单,而且涵盖了游戏开发中的大部分重要思想。

这个教程适合以下2类人,一种是完全不懂Cocos2D, 还有一种是已经熟悉了Cocos2DIOS,并想学习Cocos2D Javascript。 但是,这个教程还是假设你是有一些Javascript基础的一类人。如果你没有接触过 Javascript,我推荐一本《Javascript:The Definitive Guide》,我就是通过阅读该书来学习这门语言的。

继续阅读并学习本教程,成为Cocos2D-Javascript大神吧!

关于Cocos2D Javascript

在你开始Coding 之前,先了解Cocos2D Javascript 是什么, 它是怎么工作的,这对你很重要。目前有三种Cocos2D变体(cocos2d-iphone, cocos2d-x, 和 coco2d-html5),它们一起共享了一套Javascript API。它的基本思想是,你只需要使用Javascript编写核心游戏玩法。

  • Cocos2d-iphone和cocos2d-x引用了一个叫做SpiderMonkey的库来运行你写的Javascript代码,但在幕后,所有的核心Cocos2D框架代码本身仍然是用OpenGL / objective - C / C + +编写,所以它还是跑得很快。
  • cocos2d-html 直接在浏览器中跑Javascript,正如你预想的那样。另外,CocosBuilder 场景编辑器完全兼容Javascript API。想要看一个完整的采用cocos2d Javascript编写的游戏例子,可以check out我在一月份的 One Game A Month 中提到的游戏: :Confinement.,这个游戏就是利用Javascript 绑定,能够在web ,ios, mac等等平台上运行。Cocos2D Javascript 绑定是一项很时髦的新技术,新技术出来都会有些问题。但它是未来,所以这绝对是值得学习和关注的!

先有JavaScript代码,还是先有框架?

总的来说,你编写一次Javascript代码,就能够采用上述任何游戏框架来运行它。但你必须先从某一个框架开始学习,在初学者中我发现最简单的是使用cocos2d-html5。

这是因为cocos2d-html5他本身就是用Javascript编写的,所以当你调试的时候,可以进入框架内部查看代码。查看框架代码是很有必要的,这能让我们更好地了解错误原因。你将要在本教程中学习的内容,就是用cocos2d-html5先做出一个游戏(web版)并把这代码放到上述其他框架中运行(使之能够同时运行在Android,ios上面)。

入门指南:

首先:在这里下载starter project,解压zip文件, 你将会看到下面目录结构:

im1

Starter project包含以下文件夹:

  • Art: 制作SimpleGame游戏时所需要的图片目录-一个怪物,一个忍者,和他的忍者飞镖。
  • Platform: 存放每种框架代码的四个空目录,在教程后面将会填充这些空目录。现在我给你列出这些空目录,只是为了目录结构的完整。
  • Sounds: 背景音乐 和“pew-pew”声音效果,这些文件的作者是 truly。
  • 注意,Starter project 没有包含任何的代码,因为那是你的工作。

Hello ,Cocos2D-Javascript!

你准备好最后看到这个神奇的跨平台的Javascript代码了吗?让我们试一试,并创建一个简单的Cocos2D场景显示Hero精灵。当你引用art目录中的images 及Cocos2D-Javascript中的其他资源,你必须用特殊的数组包含他们,数组取名为g_ressources(是的,这命名是有意义的),以致框架能加载他们,所以第一步是添加英雄精灵到特殊的数组中。用你喜欢的编辑器创建一个新文件,文件名为Cocos2DSimpleGame\Src\resource.js(最近我使用的的Sublime Text2),并用以下内容修改文件中的内容。

var dirArt = "Art/";
var s_