【图片】【教程】原创：小白学会游戏学编程最好入门教程【游戏编程吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：11,385贴子：
【教程】原创：小白学会游戏学编程最好入门教程收藏
大家好。我是一个游戏开发者。也曾经参与手机游戏引擎的开发。在这边我准备了一个最简单的教程，想告诉大家制作一个游戏有多简单。回忆起当年刚刚步入游戏这个行业，我也抱着非常多的疑问。所以如果大家对游戏有兴趣的朋友，可以在下面留言。这个教程我会讲的非常通俗易懂。争取几句话之内就让你看到一个效果。另外教程里面有丰富的图文讲解。我保证你学完之后掌握了做游戏的真髓。你完全可以马上开始做自己的游戏。
在制作游戏之前我们需要下载两个东西。游戏引擎：（感谢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文件。把你刚才下载的文件替换掉它。
博为峰作为上市企业,14年间培训入门编程15万余名,免费试学,0元入学,口碑看得见
下面开始我们开始动真格的了。我会让你接触到一些真刀真枪的代码。如果你的按照我之前的步骤一步一步做下来。然后替换了我给你的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文件。。。。。。
登录百度帐号开发 | 手把手带你入门小游戏，打飞机也有逆天操作!_【快资讯】
开发 | 手把手带你入门小游戏，打飞机也有逆天操作!
自从 12 月 25 日小游戏功能开放以来，越来越多的游戏从业者都开始重新审视小程序平台。其中，也有不少游戏公司和开发者，都在考虑做一款小游戏。那么，小游戏开发，应该利用哪些工具呢?如何新建一个小游戏项目，并在真机进行调试、测试呢?今天，知晓程序就给大家带来小游戏开发入门的那些事儿。无引擎创建小游戏想要单纯体验小游戏开发的流程，我们可以先单纯地创建一个小游戏开始。与小程序一样，开发同样需要用到「微信开发者工具」。我们可以到官方文档，下载到最新版的微信开发者工具。关注「知晓程序」，回复「工具」，获取开发者工具下载地址。需要注意的是，目前小游戏不提供公开注册。但可以在新建项目时，选择「AppID」下方的体验「小游戏」，即可跳过小游戏 AppID 的填写。而且，与小程序不同的是，即使不填写 AppID，开发者也可以真机调试、体验小游戏。下面，我们一起来看看如何利用「微信开发者工具」，创建小游戏项目吧。1. 使用微信开发者工具新建小游戏项目下载好微信开发者工具后，用微信扫码登录创建小程序项目。填写小程序项目信息:项目目录自行选择，建议在无中文路径下选择新建空文件夹。这里知晓君新建了一个「test」文件夹。AppID 处点选体验「小游戏」，项目名称可以自行填写，建议为纯英文。点击「确定」即可。进入微信开发者工具，可以看到工具栏、模拟器、编辑器和调试器四大版块。模拟器中有模拟器配置选项，我们可以修改模拟器中的显示分辨率，倍数，网络等。在开发中，我们需要考虑各种手机分辨率的问题，避免内容显示不完整等状况发生。我们最常用到的是工具栏中的「编译」和「预览」。当我们改动代码后重新「编译」，模拟器就会做出相应更新，具体应用在下文会提到。可能大家已经发现，在新建的项目中微信帮我们内置了一款「飞机大战」小游戏 Demo。在文档树中的就是这款小游戏需要用到的代码和素材文件。其中入口文件和配置文件:game.js 和 game.json。game.js 引入并初始化包含整个小游戏的游戏场景、参与者(玩家飞机和敌方飞机)、游戏逻辑的主函数的 main.js。2. 改动代码试试「飞机大战」中，玩家每隔 20 帧射一次，每隔 60 帧生成新的敌机。每帧检查玩家和敌机是否死亡，玩家死亡游戏结束，敌机死亡分数 +1。只有玩家可以射击，且射击方式固定，通过躲避敌机生存。了解了它的设定，我们现在就可以自己修改一些参数，来体验这些改动带来的改变。首先打开文档树中的 js 文件夹，选择 main.js，定位到第 145 行代码处，这段代码的功能是控制子弹射击速度。我们将 databus.frame % 20 === 0 中的 20 更改为 5 ，然后保存更改(在 Windows 中快捷键为 ctrl+s，Mac 中快捷键为 command+s)，或点击工具栏中的「编译」。改动后的这段代码如下:if ( databus.frame % 5 === 0 ) { this.player.shoot() this.music.playShoot() }同理，我们依旧在 main.js 中定位到第 42 行，将 databus.frame % 30 === 0 中的 30 修改为 5，敌机数量增加。改动后代码如下:enemyGenerate() { if (databus.frame % 5 === 0 ) { let enemy = databus.pool.getItemByClass('enemy', Enemy) enemy.init(6) databus.enemys.push(enemy) } }如果我们想一次性发射三发子弹可以吗?答案是肯定的。选择文档树中 js 文件夹中的 index.js 文件，定位到第 115 行。我们将 this.x + this.width / 2 – bullet.width / 2 赋值给 middle 变量，添加循环，middle 左右各移动 30 位置再加弹孔。改动后代码如下:shoot() { for (let i = 0; i 事实上，当我们改为三发子弹齐发时，只需把飞机停放住，这游戏就能一直进行下去…如果你想直接修改「飞机大战」初始分数也十分简单，这里不做详解，大家可以自己研究体验一下。使用引擎创建小游戏刚才我们已经尝试在「微信开发者工具」中，完整地体验新建小游戏项目的方法。但我们都知道，游戏开发是离不开框架的。接下来，我们就以白鹭(Egret)引擎为例，讲解如何利用引擎，进行小游戏开发。既然是要使用白鹭引擎，那么 Egret Launcher 就是必不可少的了。我们可以到白鹭官方下载最新版本的 Egret Launcher。除此之外，如果想要调试小游戏，或是提交小游戏审核，同样需要「微信开发者工具」。使用最新的 Egret Launcher 创建 5.1.2 及以上版本的项目，项目名字叫作「test」。新建时缩放模式选择fixedWidth。在新建好的项目上点击「发布设置」。「发布设置」中已经默认填写了微信「小游戏开发辅助」的 AppID，无需更改，仅用于调试项目。项目名称填写「test」。首次选择会需要下载一个支持包，安装即可。目前的这款预置的小游戏操作性还不高，我们会在未来的小游戏开发教程中，着重讲解使用白鹭引擎开发小游戏的方法。你一直寻找的IT达人——大学霸
Android手机游戏开发入门教程
Android手机游戏开发入门教程
视频观看地址：56.com/u92/v_MTExMzE3NjE3.html（复制）
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！}