【教程】历上最简单的游戏编程入门教程（基于cocos2d-js)

浏览数：45 / 时间：2015年06月09日

前言：

大家好。我是一个游戏开发者。曾就职于cocos2d-x这个手机游戏引擎的开发的公司。

在这边我准备了一个最简单的教程，想告诉大家制作一个游戏有多简单。

回忆起当年刚刚步入游戏这个行业，我也抱着非常多的疑问。

所以如果大家对游戏有兴趣的朋友，可以在下面留言。

这个教程我会讲的非常通俗易懂。争取几句话之内就让你看到一个效果。

另外教程里面有丰富的图文讲解。我保证你学完之后掌握了做游戏的真髓。

你完全可以马上开始做自己的游戏。并且能够让你的游戏在网页上，ios，android

还有pc平台上跑起来。

准备：

在制作游戏之前我们需要下载两个东西。
游戏引擎：http://pan.baidu.com/s/1gdpCMob
（感谢cocos2d-js，本模板取材于cocos2d-js）

游戏编辑器：webstorm
http://www.jetbrains.com/webstorm/download/

由于这个编辑器是收费的，所以大家可以尝试这边的序列号：http://hi.baidu.com/zstar_sky/item/0a956a8835191310c31627c3

第一话：运行起来第一个游戏

到了这一步你已经马上就可以看到一个游戏跑在你眼前了，如果你已经安装好了webstorm，且下载好我们的游戏引擎。

那我们就来看看效果。这里最好希望你安装了google浏览器chrom。

步骤一：打开webstorm

你会看到如上界面，我们点击红线位置来打开我们的引擎看看

打开引擎你会看到如下的界面，注意找到我这个index.html的文件位置。见证奇迹的时刻到来了。

现在请你用右键单击index.html
在右键菜单之中选择。

你的浏览器就会自动弹出来。你看做一个游戏没有这么难吧。接下来不要走开。我来告诉你只要你耐心看几分钟。就会知道这样一个简单的场景是怎么制作的。然后就是你发挥你的潜能的时候了。不要犹豫，运用你的潜能赶紧来开始你心目中期待已久的旅程吧

第二话：我们工作环境和游戏目录结构介绍

好的，我想说你肯定想要告诉我。你对于做游戏还是很陌生对不对。是啊！天才不是一夜而成的。幸运的是你有一个好的想到。来给你指引。如果你觉得有些疲倦不妨稍作休息。如果你已经兴奋的要整装待发了。那我我就先带你看看几个你将来会一直和他打招呼的几个你的工作区域。

我们从上到下来看看。我在此申明你不需要很好的英语也不需要什么高级的数学知识。你要做的就是根据我说的步骤一步一步做下来。就会掌握做游戏的精髓。
废话不说！

第一个区域是我红线框勾画出来的 res 区域。其实对应英文的 “resource” 意思是资源区

顾名思义这个区域是用来方所有我们游戏中用到的图片资源的。比如你的背景图片，主角的图片，按钮的图片。

如果你是一个爱动手的人，且足够细心。你会发现之前你下载好的引擎中也有一个res的目录。对！webstorm的项目目录和引擎里面的目录结构是一样的。所以你要添加自己的图片。你应该知道怎么做了吧。大胆的把你喜欢的图片拖到这个文件夹下。

第三话：游戏的最开始

看到这么多秘密麻麻的代码你是不是眼花缭乱了。不要急。我们来给它减肥一下。

你可以先下载我这边提供的这个空模板文件：

http://pan.baidu.com/s/1bn3XRP1

这样能让你看清楚。一个空的游戏项目是什么样的。然后我们开始往里卖弄一点一点的填空。

还记得我说过我们项目中的结构和引擎下的结构是一一对应的吧。现在就请你找到引擎下面的src目录下的app.js文件。

把你刚才下载的文件替换掉它。

第4话：加载图片到游戏里

好！现在我们来写4行代码。
我保证这四行代码能让你看到你想要的效果。
你可以先拷拷贝我这四行代码到我之前教你的写代码的区域

var size = cc.director.getWinSize();

this.background = cc.Sprite.create("res/HelloWorld.png");

this.background.setPosition(cc.p(size.width / 2,size.height / 2));
this.addChild(this.background, 0);
写完之后效果如下：

你可能注意到了，里面有几行注释用的中文。他们是来帮助别人读懂你的程序具体写了些什么。不过难道这些无关的文字不会影响我们的游戏吗？

在写程序的时候我们用
// 来让一行文字变为注释语言。他们是不会对整个程序有任何影响的。

如果你有多行语言需要注释起来的话。我们就用这样一个形式让他们变成注释。
/*
多行
要
注释
*/

第五话：游戏世界，坐标

如果你足够幸运的话，应该已经看到我们游戏的背景图片出现在屏幕上了。
那么你来看看你都做了什么。

在看代码之前我需要你做几个思维训练，你首先自己想象一下一个游戏是怎么做出来的。这样思维训练是非常的重要。所有伟大的事情都是由一个设想而来的。

显而易见的是我们的游戏画面上都会充斥着各式各样的东西。有文字，有图片甚至是一些特效等。

那我们首先要知道怎么把我们想要的东西放到屏幕上的准确位置。我们屏幕其实是一个以屏幕左下角为原点，横向为X轴，纵向为Y轴的坐标系。如果你还是不是很清楚也没有关系。我们还有很多例子会让你慢慢来熟悉这些。

第六话：代码基础

回到我们的代码

//获取屏幕尺寸
var size = cc.director.getWinSize();

这行代码的意思是是获取屏幕的长和宽的数据。
然后我们给你这个数据起一个名字叫size。

为什么要起一个名字呢？其实就和显示生活中一样。比如你我都有名字。这样有人日后要叫你帮个忙做件事儿，或者找你吃饭。他就能准确的叫到你“某某某，我们一起去吃饭吧！”
而不会叫到别人。

我有一个提议，对于初学者，你不需要了解所有细节。你只要知道什么是有有用的就好了。

var 我要起一个新名字了。

size 被取的名字

然后我们来看看给我们的数据齐了名字的好处。
比如我们要让size告诉我们你的宽度是多少。
那在程序中size就会这么表示他的宽度。

size.width

同理size的长度是

size.height

第七话：真刀实战看看导入图片的每一行代码的意思

前面花了一点时间来讲解了一下我们这个编程语言javascript的基本概念。还有我们引擎的基本概念。可能对于完全没有编程经验的朋友来说有一些枯燥。不过后面的教程会变得迥然不同。我不会给你灌输过多的理论了。我来教你做填空题。其实就算经验在丰富的编程大师也都是在每天填空。时间是有限的我们要做的一切就是把别人已经做好的东西改一改。来实现我们想要的东西就好。

下面三行代码是创建一张贴图，然后放到屏幕的某个位置上。

var background = cc.Sprite.create("res/HelloWorld.png");
background.setPosition(cc.p(300,400));
this.addChild(background);

第一行代码我们就是创建了一张图片并且给他取了一个名字叫background（背景）
var background = cc.Sprite.create("res/HelloWorld.png");

我们要关心的只有（"res/HelloWorld.png"）括号里面的这个部分的代码。它的意思是你用你res文件夹下的HelloWorld.png这张图片来创建了游戏里的这张图片。
所以你要是有自己喜欢的背景图。完全可以拖动到引擎下面的res这个文件夹里面。然后依葫芦画瓢在游戏中用到你的图片。

第二行代码：
background.setPosition(cc.p(300,400));
大家都知道我们的背景图片是一张正方形图片。
这行代码的意思就是：我们叫background这张图片。你！站到坐标点的(300,400)这个点上。（其实是矩形图片的中心到(300,400)点上）
300代表x坐标为300
400代表y坐标为400
现在你可以想到了吧。我们要关心的就是来改变括号里面的这个数字。就可以把图片放到任意位置。

最后一行代码：
this.addChild(background);
这行代码才是真正的让图片出现在游戏里。

如果你觉得不好理解，我和你说的更简单一点。
第一行代码相当于，怀孕！没错！肚子里有了宝宝了。
第二行代码相当于，我们决定了让孩子在哪家医院出生。
第三行代码相当于，表示宝宝生出来了。

ps：background.setPosition(cc.p(size.width / 2,size.height / 2)); 这么写就表示图片的中心点和屏幕的中心重合。背景图就正好在整个图片的正中央了

第八话：在游戏中加入文本框

大家知道了如何在游戏中贴图。可能有的人想问做游戏除了贴图还会用到什么元素。
我总结了一下得出，做游戏就会用到三个元素。

贴图，文字，按钮。

所以学好数理化走遍天下都不怕！

依葫芦画瓢，你要做的还是这个工作。

//添加一个行文字
var label = cc.LabelTTF.create("我是文字", "Arial", 38);
label.x = 300;
label.y = 300;
label.setColor(cc.color(219, 112, 147));
this.addChild(label);

我们还是一行一行代码来看，有刚才的经验你可能知道。我们做了一个文字显示框并且给他起了一个名字叫label。
然后你也知道我们要关注的只有括号里面的几个参数。("我是文字", "Arial", 38);

他们从左到右分别是：”你要显示的文字“，”字体名字“，字体号码

第二和第三行代码可以一起看.

label.x = 300;
label.y = 300;

还记的我们之前设置背景图坐标的方法吗？
这个是另一种方法，指定要把我们文字添加到屏幕中的哪个位置上。大家可以依照喜好使用任意一种。

第四行代码是设置文字的颜色
label.setColor(cc.color(219, 112, 147));
你只要关心的是(219, 112, 147)这里面的三个数字。
他们代表三原色，就是（红，绿，蓝）三个颜色的混合色。
比如你要调制出红色，你只要去网上搜索红色rgb值

替换括号里面的三个数字就好了。

第九话：添加主角进来

好了有了背景，有了文字。现在我们来把这个游戏的主角加起来，让他动动看。
你可以看到引擎下面res文件夹下面有“attack1.png” 他就是我们的主角

//创建一个精灵角色
var sprite = cc.Sprite.create("res/attack1.png");
sprite.setPosition(cc.p(size.width / 2,size.height / 2));
this.addChild(sprite, 0);
上面的代码是不是很熟悉。我们把主角的第一张图片添加到了游戏里面。

之前我不想说的太多，现在实际成熟了，因为经历了之前的学习，现在你已经是一个具备制作游戏知识的达人了。所以我再和你说一说进阶一点的东西。

var sprite = cc.Sprite.create("res/attack1.png");
这行代码之前只要大家关心括号里面的内容，但是cc.Sprite.create()到底是什么意思

我们之前一直说贴图，其实在这个游戏引擎里面我们有专业术语叫精灵（Sprite）
而我们一直叫的文字，在游戏中我们成为标签（Label）

那cc.Sprite.就表示我们要生的这个孩子的身份了。它的身份是一个精灵。
只有精灵我们才可以赋予给它贴图的能力。

而如果是cc.Label那意味着它只负责掌握文字显示的能力。如果你赋予它贴图的话。那么整个游戏世界就会奔溃。这样你就只能看到一片黑漆漆的屏幕了。

cc.Sprite.create中的create是一个命令。也就是我们的咒语。create是创造的意思。合起来创造一个精灵吧！

第十话：像gif一样的序列动画怎么播放（上）

不知道你注意到没有引擎的res目录下面有 “attack1.png”和 “attack2.png”
两张图片，是主角的不同动作。对！这些图片如果连续起来，用一个计时器
每0.5秒钟切换一张图片的话，那不是就成了动画。

那还等什么呢？让我们来制作动画吧！

等一下似乎你忽略了什么！这么多图片我们的程序读取来的及吗？

这里补充一个计算机的小知识。其实我们的图片是放在res这个文件夹下面的（也就是硬盘里）。
我们的程序是以极高的速度在运行的。
但是我们要去读取res文件夹下的图片到程序来是需要花比较多的时间。
也就是很有可能我们程序已经执行到下一步了。图片却还没有读取进来。这样我们的程序找不到图片于是屏幕上就出现不了我们想要的效果。

解决的方法是。我们在程序执行之前，先把所有的图片读好储存在缓存里面。这样当我们要使用的时候，就不要再去硬盘上读取了。

上面说了一大堆废话就是为了科普。其实预加载图片资源其实非常简单
就是在res目录下的resource.js文件夹里面写如下代码
var g_resources =
[

];

然后把你要预加载的图片下载这个中括号里面。记住用逗号隔开。最后一个字符串后面不要加逗号。
所以完整版就这样
var g_resources =
[
"res/attack1.png",
"res/attack1.png"
];

第十一话：像gif一样的序列动画怎么播放（下）

好了大功告成，该让我们的主角动起来了。还记得我们的思路吗？做一个计时器然后让这一套序列图片每隔0.5秒钟切换到下一张。
当切换到最后一张的时候我们再回到第一张。如此反复切换。角色是不是就动起来了。

游戏中写一个计时器的格式如下
this.schedule (callback_fn, interval, repeat, delay) ;
翻译成中文就是
this.schedule (“倒计时完成通知”, “倒计时时间”, “重复执行计时器的次数”,“ 第一次执行需要推迟多少秒开启计时器”) ;

然后真实代码是下面这样。大家还记的//表示注释吧。你应该习惯看这样的注释文字。我将把每一行都写上注释

this.schedule
(
function ()
{
//每次倒计时完成后会回到这个大括号来执行你接下来要执行的任务
},
0.5, //倒计时0.5秒
10, //这边重新开启计时器10次
0 //第一次延迟多少秒打开计时器
);

接下来我们会接触到一点逻辑思维。我们的目标是让第一次播放的图片为
attack1.png
第二次为
attack2.png
然后再回过来播放第一张图片
attack1.png

大家注意到没有“attack”和“.png”部分都是这些图片的共同点。不同的只是最后的序列号

那我们就给这个序列号起一个名字（申明一个变量）
叫picIndex 并且让它等于1（就是我们先播放的是第一张图片）
代码如下

var picIndex = 1;

然后我们会在每次计时器完成的时候让picIndex加一
程序里写作：
picIndex = picIndex+1；

然后把“attack” picIndex ".png" 这三个字符拼接起来是不是就是
“attack2.png"
程序里写作：
"res/attack"+picIndex+".png"

最后让我们的主角切换到第二张图片。就完成了第一个动画的切换。
所以我们在我们的回调函数里面添加如下代码

this.schedule
(
function ()
{
picIndex = picIndex+1；

sprite.setTexture("res/attack"+picIndex+".png");//切换人物的图片
},
0.5, //倒计时0.5秒
10, //这边重新开启计时器10次
0 //第一次延迟多少秒打开计时器
);

最后我们在播放完第二张图片的时候要回过来播放第一张图片。
“attack1.png"
而不是随着picIndex不停的累加最后到3
拼接起来的字段 “attack3.png"
我们的资源是没有这张图片的。

所以就要做一个判断程序如下

如果picIndex超过2
那么我们就让picIndex 回到等于1;
程序写成如下形式

if(picIndex >2)
{
picIndex = 1;
}

最后我们把它加到适当的位置。整个程序就是这样子的，你拷贝到你的项目里面看看主角动起来了没有

var picIndex = 1;

this.schedule
(
function ()
{
picIndex = picIndex+1；
if(picIndex >2)
{
picIndex = 1;
}
sprite.setTexture("res/attack"+picIndex+".png");//切换人物的图片
},
0.5, //倒计时0.5秒
10, //这边重新开启计时器10次
0 //第一次延迟多少秒打开计时器
);

第十二话：添加一个按钮，和简单的动画实现

前面的花了很大精力在讲解动画。像gif那样通过切换图片播放动画的原理。这种动画在游戏术语中叫“序列帧动画”。其实cocos2d-js用来做一些简单的动画。比如移动，旋转，形变的动画只要两行代码。
现在我们来教大家写一个按钮，然后我们通过点击按钮，让人物移动起来。

我们先再屏幕中做一个按钮。
第一部分；创建菜单，并且添加到当前游戏场景。

var menu = cc.Menu.create(); //创建一个菜单
menu.x = 0;
menu.y = 0;
this.addChild(menu);

什么是menu是一个看不见摸不着的东西，它的功能就是唯一用来陈放按钮的控件。
如果你不能理解一点关系都没有。以后你只要照抄上面几行代码，可以保证你万无一失。
你只要记住按钮都是先加载到菜单里面，再把菜单添加到游戏里。按钮才可以在屏幕中出现。

下面的代码才是一个按钮，
你注意看我在每一行代码后面的注释。就能理解了。非常简单。

var button = cc.MenuItemImage.create //创建一个按钮
(
"res/CloseNormal.png", //按钮没有按下去时候的图片
"res/CloseSelected.png", //按钮按下去后显示的图片。
function ()
{
/*按钮按下去之后，要执行的程序写在这个区域 */
},
this /*定义按钮是在当前这个游戏场景中响应交互（一个游戏可以有很多场景） */
);
button.setPosition(cc.p(size.width/2,size.height/2)); //设置按钮在屏幕中央位置

menu.addChild(button);

/*把按钮添加到菜单里面，因为菜单刚才已经添加到当前游戏里面了。所以把按钮添加到菜单里就会在游戏中显示出来*/

最后我们让按钮被点击下去之后。来执行主角的移动动画

//创建移动动画
var move = cc.MoveBy.create(
1.0, //一秒钟内移动到指定地点
cc.p(-10,10) // 沿着x轴向左移动10个单位
沿着x轴向上移动10个单位
);

现在我们来执行动画。我们的目标是让主角向左斜后方移动一段距离，再移动回来

sprite.runAction( //让主角执行动画
cc.Sequence.create //让多个动画按照顺序执行
(
move, //先执行移动的动画
move.reverse() /*然后再执行原动画完全相反的动画（为了让主角再移动回到原来位置）*/
)
);

最后我们把这个移动动画添加到按钮按下去之后的响应函数区域里。
所以上述所有的代码连结起来就是

第十三话：背景音乐和音效

到这边我们已经做出来一个最简单的游戏。等等，还缺点啥。对了，我们的游戏是有背景音乐的，还有按下去按钮要是还能有一个按钮的音效那就更加完美了。

现在我们来尝试的添加以下背景音乐

很简单,在最下面空白区域写上这么一行代码。重新载入游戏看看是否有背景音乐开始播放了。

cc.audioEngine.playMusic("res/千年缘.mp3", true);

最后我们让按钮在点击之后有一个被点击的音效。

我们用control+F然后搜索到下面字段。

var move = cc.MoveBy.create(1.0,cc.p(-10,10));

然后我们在这一行之前加入以下代码。来播放音效

cc.audioEngine.playEffect("res/press.mp3", false);

到这边一个完整的游戏制作教程你就学会了。你可以立刻开始动手来制作属于你自己的游戏。
如果你们做好了游戏，可以那我过来告诉我，我用了你的引擎做出了自己的游戏。我将为你感到无比较傲。
以后有机会我还会告诉你们怎么把游戏分享给你的小伙伴玩。怎么打包到android和ios手机上玩。