【图片】【教程】原创：小白学会游戏学编程最好入门教程【游戏编程吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：9,988贴子：
【教程】原创：小白学会游戏学编程最好入门教程收藏
大家好。我是一个游戏开发者。也曾经参与手机游戏引擎的开发。在这边我准备了一个最简单的教程，想告诉大家制作一个游戏有多简单。回忆起当年刚刚步入游戏这个行业，我也抱着非常多的疑问。所以如果大家对游戏有兴趣的朋友，可以在下面留言。这个教程我会讲的非常通俗易懂。争取几句话之内就让你看到一个效果。另外教程里面有丰富的图文讲解。我保证你学完之后掌握了做游戏的真髓。你完全可以马上开始做自己的游戏。
游戏编程说难也不难,说容易也不容易,如果你从来没有接触过游戏编程,建议你选一家培训机构学习;达内专注游戏编程培训已有15年,在游戏编程培训行业内口碑还是相对比较不错..
在制作游戏之前我们需要下载两个东西。游戏引擎：（感谢cocos2d-js，本模板取材于cocos2d-js）游戏编辑器：webstorm
到了这一步你已经马上就可以看到一个游戏跑在你眼前了，如果你已经安装好了webstorm，且下载好我们的游戏引擎。那我们就来看看效果。这里最好希望你安装了google浏览器chrom。步骤一：打开webstorm你会看到如上界面，我们点击红线位置来打开我们的引擎看看
打开引擎你会看到如下的界面，注意找到我这个index.html的文件位置。见证奇迹的时刻到来了。
现在请你用右键单击index.html在右键菜单之中选择。你的浏览器就会自动弹出来。你看做一个游戏没有这么难吧。接下来不要走开。我来告诉你只要你耐心看几分钟。就会知道这样一个简单的场景是怎么制作的。然后就是你发挥你的潜能的时候了。不要犹豫，运用你的潜能赶紧来开始你心目中期待已久的旅程吧
好的，我想说你肯定想要告诉我。你对于做游戏还是很陌生对不对。是啊！天才不是一夜而成的。幸运的是你有一个好的想到。来给你指引。如果你觉得有些疲倦不妨稍作休息。如果你已经兴奋的要整装待发了。那我我就先带你看看几个你将来会一直和他打招呼的几个你的工作区域。
我们从上到下来看看。我在此申明你不需要很好的英语也不需要什么高级的数学知识。你要做的就是根据我说的步骤一步一步做下来。就会掌握做游戏的精髓。废话不说！第一个区域是我红线框勾画出来的 res 区域。其实对应英文的 “resource” 意思是资源区顾名思义这个区域是用来方所有我们游戏中用到的图片资源的。比如你的背景图片，主角的图片，按钮的图片。如果你是一个爱动手的人，且足够细心。你会发现之前你下载好的引擎中也有一个res的目录。对！webstorm的项目目录和引擎里面的目录结构是一样的。所以你要添加自己的图片。你应该知道怎么做了吧。大胆的把你喜欢的图片拖到这个文件夹下。
经过上面的学习你已经对游戏有了一定的掌控权了。如果你尝试一下替换下面HelloWorld.png图片为你喜欢的背景，再重新在浏览器里面打开或者刷新游戏。看看图片是否是你想要的背景。（当然你要足够心细，不要把图片的名字，大小写弄错了）现在我们来看啊看你第二个区域src区域。这个区域就是我们来编写游戏的区域。你只要关注app.js这个文件。其它的可以忽略了。
看到这么多秘密麻麻的代码你是不是眼花缭乱了。不要急。我们来给它减肥一下。你可以先下载我这边提供的这个空模板文件：这样能让你看清楚。一个空的游戏项目是什么样的。然后我们开始往里卖弄一点一点的填空。还记得我说过我们项目中的结构和引擎下的结构是一一对应的吧。现在就请你找到引擎下面的src目录下的app.js文件。把你刚才下载的文件替换掉它。
游戏编程培训东方博宜电脑培训学校,专业电脑培训机构,合格学员免费推荐找工作游戏编程培训,以业为导向,全真企业实战案例教学!
下面开始我们开始动真格的了。我会让你接触到一些真刀真枪的代码。如果你的按照我之前的步骤一步一步做下来。然后替换了我给你的app.js模板，那么你应该会看到这个界面.你会发现我已经给你标注了一个区域。你只要把代码写在这个里面就好了。（其它的地方不能乱写哦）
好！现在我们来写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坐标为300400代表y坐标为400现在你可以想到了吧。我们要关心的就是来改变括号里面的这个数字。就可以把图片放到任意位置。最后一行代码：this.addChild(background);这行代码才是真正的让图片出现在游戏里。如果你觉得不好理解，我和你说的更简单一点。第一行代码相当于，怀孕！没错！肚子里有了宝宝了。第二行代码相当于，我们决定了让孩子在哪家医院出生。第三行代码相当于，表示宝宝生出来了。
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是创造的意思。合起来创造一个精灵吧！
不知道你注意到没有引擎的res目录下面有 “attack1.png”和 “attack2.png”两张图片，是主角的不同动作。对！这些图片如果连续起来，用一个计时器每0.5秒钟切换一张图片的话，那不是就成了动画。那还等什么呢？让我们来制作动画吧！等一下似乎你忽略了什么！这么多图片我们的程序读取来的及吗？这里补充一个计算机的小知识。其实我们的图片是放在res这个文件夹下面的（也就是硬盘里）。我们的程序是以极高的速度在运行的。但是我们要去读取res文件夹下的图片到程序来是需要花比较多的时间。也就是很有可能我们程序已经执行到下一步了。图片却还没有读取进来。这样我们的程序找不到图片于是屏幕上就出现不了我们想要的效果。解决的方法是。我们在程序执行之前，先把所有的图片读好储存在缓存里面。这样当我们要使用的时候，就不要再去硬盘上读取了。上面说了一大堆废话就是为了科普。其实预加载图片资源其实非常简单就是在res目录下的resource.js文件夹里面写如下代码var g_resources =[];然后把你要预加载的图片下载这个中括号里面。记住用逗号隔开。最后一个字符串后面不要加逗号。所以完整版就这样var g_resources =["res/attack1.png","res/attack1.png"];
好了大功告成，该让我们的主角动起来了。还记得我们的思路吗？做一个计时器然后让这一套序列图片每隔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手机上玩。
多谢楼主分享经验，看起来不是很复杂，比学数据结构、算法分析简单少少。想问楼主这是做电脑游戏还是网页游戏？
真心感谢楼主的分享
好帖，顶起来
我是软件专业的在校大学生，目前学习c语言，Java，数据结构，SQL数据，希望能独立制作一款简单的pc平台2D动作游戏，我还需要哪些知识，该如何去实现？
求这引擎API文件。。。。。。
登录百度帐号推荐应用从零开始学游戏编程――可视化编程游戏开发工具学习指南_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
从零开始学游戏编程――可视化编程游戏开发工具学习指南
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩9页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢怎样系统学习游戏编程？ - 知乎833被浏览80703分享邀请回答8620 条评论分享收藏感谢收起13412 条评论分享收藏感谢收起查看更多回答