1、Welcome,项目实战：,技术负责人：喻灵犀 QQ：453124178,中文名：橡皮怪-勇闯地下室 英文名：Basement-Master 类 型：益智休闲类 平 台：IOS，Android 主 角：橡皮怪 玩家人数：单人 游戏画面：简易卡通成就：2013年10月在苹果App Store上线，随后连续15周在排行榜保持前十名，尽管没有炫酷的动画效果，没有复杂的规则玩法，没有众多的关卡挑战，却意外获得玩家青睐，短时间内下载量就突破200万次。,项目简介：,操作指南：,1，游戏开始后，通过点击屏幕控制主角移动（左右跳或原地跳），躲避地刺。2，尽量保持平和的心情，点的时候不要太快，精确计算每次的跳
2、跃节奏。3，每躲避一根地刺得一分，直至倒计时结束。统计得分及最高纪录。,不服来战！,199,我们需要用到的工具：,游戏开发引擎,调试工具,游戏资源：,显示字体：,显示图片：,游戏音乐：,Cocos2d-JS 基础知识 JavaScript 基本语法 浏览器 的调试功能,准备知识点：,这些都不会，我好紧张！,Step_1：新建项目,Just follow me ! ! !,双击桌面上的cocos_creator 引擎图标：,你将进入引擎的 控制面板界面,引擎主界面介绍：,资源管理器：,项目仓库： 里面存放了我们游戏项目所有需要用到的所有资源，通常包括：外部导入-图片，字体，视频，音频，动画等.内
3、部创建-场景，脚本，预制件，帧动画等,完整的项目工程：,层级管理器：,游戏项目的工程图纸：清晰的显示游戏场景中各组件的显示层级和 归属关系。,场景编辑器：,项目工地： 静态展示场景内各个组建加载后的显示效果， 方便我们随时观察及时修改。,属性检查器：,游戏设置中心：游戏中所有组件关键数值及相互之间的绑定关系调节。,控制台&动画编辑器,控制台：主要显示错误信息,动画编辑器：主要用于编辑帧动画,控件库：,可以快速创建常用的的组件，如果觉得遮挡视线，可以点击该功能模块的右上角选择“关闭”,Step_2:导入资源,方式一：直接拖入,方式二： 访问根目录再导入 此种方式更稳妥。,导入完成效果,Step_
4、3:创建场景,在 Cocos Creator 中，游戏场景（Scene）是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体。游戏场景中一般会包括以下内容： 场景图像和文字（Sprite，Label） 角色 以组件形式附加在场景节点上的游戏逻辑脚本当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各种各样开发者设置的逻辑功能。所以除了资源以外，游戏场景是一切内容创作的基础，让我们现在就新建一个场景。,创建游戏场景步骤： 在资源管理器中点击选中assets目录，确保我们的场景会被创建在这个目录下 点击资源管理器左上角的加号按钮，在弹出的菜单中选择“文
5、件夹”，重命名Scene，用于管理场景文件 右键点击Scene，“新建 Scene”,创建游戏场景步骤： 创建了新的场景文件 ，对其重命名为welcome 双击 welcome， 就会在场景编辑器和层级编辑器中打开这个场景。注意：开发中需要经常 Ctrl+S 保存,打开场景后，层级管理器中会显示当前场景中的所有节点和他们的层级关系。目前新建的场景中只有一个Canvas节点，即画布节点或渲染根节点。点击选中Canvas，可以在属性检查器中看到他的属性,了解Canvas:,Design Resolution属性规定了游戏的设计分辨率，Fit Height和Fit Width规定了在不同尺寸的屏幕上
6、运行时，我们将如何缩放Canvas以适配不同的分辨率。由于提供了多分辨率适配的功能，我们一般会将场景中的所有负责图像显示的节点都放在Canvas下面。这样当Canvas的scale（缩放）属性改变时，所有作为其子节点的图像也会跟着一起缩放以适应不同屏幕的大小。,Step_4:搭建开始界面,添加背景图片：,拖拽assets/res/Texture/IndexBg资源到Canvas节点上，直到Canvas节点显示橙色高亮，表示将会添加一个以IndexBg为贴图资源的子节点。,同样的方式 添加游戏LOGO和开始按钮图标,创建脚本，为按钮添加动态提示效果，并添加跳转场景进入游戏的逻辑：,首先在资源管理
7、器中右键点击assets文件夹，选择新建-文件夹new folder 右键点击New Folder，选择重命名，将其改名为scripts，之后我们所有的脚本都会存放在这里。 右键点击scripts文件夹，选择新建-JavaScript，创建一个JavaScript脚本 将新建脚本的名字改为Welcome。双击这个脚本，打开代码编辑器。 注意： Cocos Creator 中脚本名称就是组件的名称，这个命名是大小写敏感的！如果组件名称的大小写不正确，将无法正确通过名称使用组件！,在脚本中添加音乐和按钮两个属性， 然后点Canvas后将脚本拖入其属性检查器区域，完成脚本与组件的绑定,找canvas
8、的属性列表 下的子列表Welcome。 拖入对应的组件，完成绑定。,按之前的方式再创建一个场景，重命名为game. 然后在Welcome脚本中的onLoad方法中添加以下内容：,运行一下吧!,Step_5:主角登场,VS,双击game场景， 依次将背景图片assert/res/texture/GameBG 及主角assert/res/texture/normal（重命名为player） 拖入层级管理器。,在层级管理器中选中主角， 设置器坐标：（-230,210）,为主角添加动画：1,资源管理器 中新建文件夹 重命名为anim,为主角添加动画：2,为主角添加动画：3,只改变第二帧的缩放比例,为主
9、角添加动画：4,资源管理器 文件夹script 右键新建javaScript 重命名Player,双 击 后 编 辑 以 下 内 容,为主角绑定脚本：,在层级管理器中选中player组件， 在属性检查器最下方点击添加组件 选中添加用户脚本组件中的Player,运行一下， 看主角是否有了动画效果？,Step_6:主角移动逻辑,新建脚本，重命名为Main,然后双击场景game，再点中canvas,将脚本Main与之进行绑定,双击 Main脚本，打开后 添加内容，然后在 属性检查器 中 做好相应的 引用,在onLoad方法中添加内容， 设置背景音乐和音效的播放 为屏幕添加触摸监听事件：,为玩家操作设
10、置侦听：,继续在Main脚本中添加内容：,继续在Main脚本中添加内容：,添加主角移动逻辑：根据用户点击位置 实现原地跳跃或横跨 跳跃,在浏览器中运行游戏，用鼠标点击屏幕的左边或右边。看看怪物是不是已经 可以跳跃了呢？,Step_7:限时功能实现,新建场景，重命名为over，双击进入场景 点击canvas,调节尺寸,鼠标右键canvas创建节点创建UI节点文字（Label）重命名gameoverLab设置字体颜色 字体 尺寸,同样的方式添加本轮得分文本和最高分文本,双击game场景， 在该场景中创建 倒计时文timeLab和得分文本scoreLab,增加Game脚本属性内容,添加倒计时逻辑：,
11、运行一下吧！,Step_8:配角地刺登场,将资源管理器中的地刺资源：res/texture/dici拖入Canvas之下,创建Dici脚本 并绑定dici组件,制作地刺的预制件：,在Dici脚本中添加死亡音效,绑定音效资源,新建文件夹prefab, 将层级管理器中的 dici组件拖入 该文件夹下,保留预制件， 并删除层级管理器中的 dici组件,为屏幕设置触摸监听事件 实现每次点击屏幕，地刺 向上移动。定义noteBox方法返回地刺 在世界坐标中的包围盒， 用于与主角进行碰撞检测,添加地刺移动的 触发事件：,在main脚本中， 添加属性成员， 并在属性检查 器中做好相关引用,在Main脚本添加
12、 创建地刺的方法 NewDici，并在onLoad方法中 通过循环调用创建 8根地刺,运行一下吧！ 看看每次跳跃时， 地刺能否移动,Step_9: 添加主角遇刺死亡逻辑,在Dici脚本中添加帧计时器方法，为 地刺与主角添加碰撞检测,运行一下， 看看主角遇刺后 游戏是否能正常结束！,Step_10:添加记分逻辑,Main脚本, setInputControl方法中 添加分数累加逻辑并实时保存得分数据， 用于后续游戏结束时 结算并统计最高分 纪录。,双击进入 over场景右键点中Canvas 创建节点创建UI节点Button(按钮) 重命名btnPlay,设置按钮文本,新建脚本，重命名为Over，在脚本中写入得分逻辑,将编写好的Over 脚本与over场景 中的Canvas绑定， 并做好相关组件 的引用,杀青了！,给地刺加个动画可好？,中途要上厕所，暂停一下可不可以？,倒计时换成进度条会不会酷一点？,破纪录了放个烟花什么的不过分吧？,脑,点,子,Thanks,
