CuteShooter开发笔记

Adamspz

一、CuteShooter简介

基于Cocos Creator2.4.2开发
1、游戏演示


2、游戏法则


二、CuteShooter开发规划

1、工程目录规划

游戏工程创建好之后，将脚本、图片、音频、动画、场景等资源分袂保留在把分歧的目录，目录布局规划为Animations、Audios、Prefabs、Scenes、Scripts、Textures等目录，如下图所示。



资源目录布局

2、场景规划和搭建


3、界面设计和框架


三、CuteShooter具体实现

1、添加游戏节点

游戏使用多个Canvas画布，此中Canvas为游戏的主场景画布，UICanvas则负责游戏中UI界面。
节点层级说明如下：

• Canvas：游戏界面画布。
  
• Canvas/sBg：图片资源，游戏布景。
  
• Canvas/sMap：图片资源，游戏地图。
  
• Canvas/sWall：图片资源，游戏地图中的围墙。
  
• UICanvas/UIJoyStick：图片资源，手柄控制器。
  
• UICanvas/UIInput：图片资源，输入按钮。
  
• UICanvas/UIFailed：游戏掉败界面。
  
• UICanvas/UIWin：游戏胜利界面。
  
• UICanvas/Layout：玩家血量。
  

2、制作序列帧动画

一共需要制作四个动画，分袂是playerIdle（角色空闲）、playerRun（角色奔跑）、playerDeath（角色死亡）、EnemyRun。
以playerIdle为例，在Player空节点下，添加一个图片节点，定名为Animation，并给该Animation节点添加一个动画组件。在动画编纂器中的属性节点添加cc.Sprite.spriteFrame，把残剩的图片添加为分歧的关键帧，WrapMode为Loop，即循环播放。



制作动画

clip 文件的参数

sample：定义当前动画数据每秒的帧率，默认为 60，这个参数会影响时间轴上每两个整数秒刻度之间的帧数量（也就是两秒之内有多少格）。
speed：当前动画的播放速度，默认为 1
duration：当动画播放速度为 1 的时候，动画的持续时间
real time：动画从开始播放到结束，真正持续的时间
wrap mode：循环模式

3、制作角色刀兵

把刀兵资源图片sGun拉到Player的字节下，把sGun的锚点Anchor的改为（0,0.5），则选择sGun时就不是以中心旋转，而是以尾部旋转。



制作角色刀兵

4、制作基于Tiled的地图

在2D游戏的开发中，地图一般使用图片资源。把布景sBg、地图sMap、围墙sWall分袂拖动到Canvas节点下。
在布景sBg的节点里，把Sprite的Type属性改为TILED，像瓦块一样地平铺。并给布景sBg添加Widget组件，Top/Bottom/Left/Right都设置为0px，使其贴合屏幕四周，不至于在分歧屏幕的适配时呈现黑边。
找到围墙sWall的图片资源，双击进入Sprite编纂器的Editor Window，把边界设置为30。在Canvas下的sWall节点，把Sprite的Type改为SLICED（九宫格）。



Sprite编纂器

5、创建碰撞体

为了避免角色在游戏过程中，跑到围墙外，在此需要给围墙sWall添加碰撞体。找到围墙sWall节点，添加组件-物理组件-Rigid Body，Type改为Static。然后，在围墙sWall的四周，分袂添加四个组件-碰撞组件-BoxCollider。



添加碰撞体

5、制作UI界面

使用分歧的Canvas来实现UI界面和游戏界面分手，优化时，可按照分歧Canvas采用分歧的优化策略。也能让分歧开发者做分歧的Canvas，对于协作开发也有好处。



UI界面

（1）创建摇杆
添加一个空节点，定名为UIJoyStick，并为其添加Widge组件进行屏幕适配。把摇杆的布景图JoystickPlate放置在其父节点UIJoyStick节点之下，添加Widget组件，使其保持在屏幕的左下方。摇杆图片Joystick则放置在JoystickPlate节点之下。
（2）创建射击按钮
添加一个空节点，定名为UIInput，并为其添加Widge组件，使其保持在屏幕的右下方。在此节点下添加四个图片节点，设置为btn，Size Mode为Trimmed。添加Button组件，并把Transition设置为COLOR，即按钮按下之后会有颜色变化。
（3）创建结算UI
添加一个空节点，定名为UIFailed，游戏掉败界面，并添加Widget组件填充整个界面。再添加一个BlockInputEvents组件，该组件将拦截所有输入事件，防止输入穿透到屏幕下方的其他节点，一般用于屏幕上层UI的布景。
在UIFailed节点之下，添加一个Label节点，定名为Failed，用于显示游戏掉败。并添加一个Button组件，定名为Retry，让玩家可以从头开始游戏，把按钮的图片添加进Button组件的spriteFrame，并把Transition设置为COLOR。
同理，创建游戏胜利界面。
（4）创建玩家血量
在UICanvas节点下添加Layout节点，定名为，并添加Widget组件，使其在屏幕的左上角适配。Layout是一种容器布局组件，把Type属性改为Horizontal（程度），这样，其节点下添加的子节点就可横向排布，即让玩家血量横向排布显示。

Type：布局类型，撑持 NONE（默认布局）, HORIZONTAL（程度布局），VERTICAL（垂直布局） 和 GRID（风格布局）。
ResizeMode：缩放模式，撑持 NONE（子物体和容器的大小变化互不影响），CHIDREN （子物体大小会随着容器的大小而变化（垂直布局时子物体随容器高度变化，程度布局时子物体随容器宽度变化））和 CONTAINER（容器的大小会随着子物体的大小变化）。

未完待续。。。。。。