cocos（ts）游戏开发入门、一 （接苹果）

为了让小孩子对编程有兴趣，让他们直接接触游戏开发或许是好的方式，又考虑到用最简单的方式来引导他们入门，于是弄了几篇儿童游戏开发入门，但是开发游戏还是比较有局限性，比如开发之后不能比较方便分享给其他朋友玩。于是开始找其他合适的游戏引擎，一开始用godot，因为这个开发工具文件不大，绿色程序也不需要安装，还开源免费，而且运行速度也比较快，使用的dg脚本也比较接近，可惜生成h5端还是比较多问题，之后考虑了，由于它比较新，相对教程源码还是比较少，不太适合新手学习，最后选择了cocos，开发完之后可以直接发链接给朋友，不管电脑手机平板，只要能浏览网页就可以直接玩开发的游戏了，最中腰的是比较多教程和源码供给学习。

cocos在实际开发中还存在一些问题，比如版本不一样，提供的方法类也有差异，导致网上收集到的大部分源码不能直接使用，而且在网上找到的大部分视频教程也都比较复杂，根本不适合刚入门的小孩子学习，于是只能自己写一下比较简单的。

一，开发环境

下载cocos并安装：

Cocos - The world's top 2D&3D , game / smart /AR/VR/ /

打开之后再下载一个版本的编辑器，这里下载的是：cocos .7.3

下载：

安装都只要一路next

接下来我们来做一个简单的游戏，游戏界面如下：

二，创建一个的项目

1，并把本课程用到的素材先放在资源文件夹，如图

2，把gb2背景图片通过鼠标拉到下边：

这个时候发现我们的背景图片已经显示在窗口上了，但是发现可比可显示区域小，我们可以选择这张图片，然后通过便器的拉伸功能把图片拉到指定位置如下：

注：鼠标右键可以用来移动界面位置，而左键可以用来选择物品

可以通过图片边沿的8个点，用鼠标来拉伸。

3，接下来把apple和lanzi这2个图片也跟bg2背景图片一样直接拉到下边

发现篮子过大，我们可以缩小一下：

先选中层管理的lanzi节点

这时候就可以在右边看到对应的属性检测器，并把他们分别改成0.15

这个时候我们的场景基本上做好了，可以按下ctrl+s保存一下场景

4，添加篮子脚本

在资源下添加一个ts文件夹然后添加一个脚本组件名字为lanzi并打开它，如下图

lanzi脚本的代码如下：

import { __private, _decorator, Component, input, Input, KeyCode, Node } from 'cc';
const { ccclass, property } = _decorator;@ccclass('lanzi')
export class lanzi extends Component {start() {//开始，这里的代码是游戏开始的时候运行一次input.on(Input.EventType.KEY_DOWN,this.onKeyDown,this);//注册事件}update(deltaTime: number) {}_speed = 100;//定义速度onKeyDown (event) {if(event.keyCode == KeyCode.ARROW_RIGHT){const pos = this.node.getPosition();//获取当前节点的坐标，即获取篮子的坐标pos.x += this._speed; //每按下一次x坐标加100this.node.setPosition(pos);//设置这个做点的坐标console.log("向右");}if(event.keyCode == KeyCode.ARROW_LEFT){const pos = this.node.getPosition();//获取当前节点的坐标，即获取篮子的坐标pos.x -= this._speed;this.node.setPosition(pos);console.log("向左");}}
}

然后在层管理器选择lanzi节点，把这个脚本拉到它的属性检查器上，如下图

这个时候就可以在属性检查器上看到lanzi这个组件，说明脚本已经跟节点关联了

然后ctrl+s保存一下这个场景

这个时候点一下运行按钮看看效果吧

运行时候自动打开浏览器，鼠标点一下游戏，确定游戏焦点之后，就可以开始操作，这个时候就可以发现篮子可以通过左右键来控制了

5，用4同样的方法创建apple.ts脚本，并把它挂在apple节点上

脚本内容如下：

import { _decorator, Component, Node, Vec3, view } from 'cc';
const { ccclass, property } = _decorator;@ccclass('apple')
export class apple extends Component {_view_h = 0;//屏幕的高_view_w = 0;//屏幕的宽_speed = 5;//苹果下落速度_curPos = new Vec3(0,0,0);start() {this._view_h = view.getVisibleSize().y //获取屏幕的高this._view_w = view.getVisibleSize().x //获取屏幕的宽this._curPos.y = this._view_h/2; //指定三维参数，用来设置苹果开始位置在屏幕最顶端this.node.setPosition(this._curPos); //设置苹果开始位置在屏幕最顶端}update(deltaTime: number) {const pos = this.node.getPosition();//获取当前节点的坐标，即获取苹果的坐标if(pos.y<-this._view_h/2){ //如果苹果下落到最下边，即从上边重新来一次pos.y = this._view_h/2pos.x = this.random(-this._view_w/2,this._view_w/2)//根据屏幕范围获取随机x坐标}pos.y -= this._speed; //苹果y坐标自减this.node.setPosition(pos); //设置苹果坐标}//自定义随机函数random(mini,maxi){return Math.round(Math.random()*(maxi-mini)+mini)}
}

6，在画布下添加一个 Label

并将它的名字改为score并将它的属性检查器的设置为score:0，并将其拖到画布的左上角

如下图：

自此界面以及界面动画和界面操作已完成

7，接下来开始做游戏规则逻辑

在资源文件夹添加一个脚本，改名为.ts，然后将其挂到画布上

的脚本如下：

import { _decorator, Component, Node , Rect, view, Vec3, UITransform, Label} from 'cc';
const { ccclass, property } = _decorator;@ccclass('gameManage')
export class gameManage extends Component {start() {}//获取物品的矩形，代表物品左上角的坐标以及苹果的大小宽和高，通常游戏中可以用来判断撞击行为_apple_rect = new Rect(0,0,0,0); //用来存放苹果矩形 x,y,w,h_lanzi_rect = new Rect(0,0,0,0); //用来存放篮子矩形 x,y,w,h_score = 0;update(deltaTime: number) { this._apple_rect = this.getRectByNode(this.node.getChildByName("apple"));//获取苹果的矩形this._lanzi_rect = this.getRectByNode(this.node.getChildByName("lanzi"));//获取篮子的矩形//判断苹果跟篮子是否相撞击if(this.collision_Rect(this._apple_rect,this._lanzi_rect)){console.log("撞击");//更新苹果的开始位置const apple_y = view.getVisibleSize().y/2;//根据屏幕宽度来随机生成一个x坐标const apple_x = this.random(-view.getVisibleSize().x/2,view.getVisibleSize().x/2)//设置苹果的初始坐标this.node.getChildByName("apple").setPosition(new Vec3(apple_x,apple_y,0));//更新积分this._score += 1;this.node.getChildByName("score").getComponent(Label).string = "Score:"+this._score}}//自定义获取指定节点的矩形getRectByNode(myNode:Node){const myRect = new Rect(0,0,0,0);myRect.x = myNode.getPosition().x;myRect.y = myNode.getPosition().y;myRect.width = myNode.getComponent(UITransform).contentSize.width;myRect.height = myNode.getComponent(UITransform).contentSize.height;return myRect;}//自定义随机函数random(mini,maxi){return Math.round(Math.random()*(maxi-mini)+mini)}//自定义判断2个矩形是否碰撞collision_Rect(rect1:Rect,rect2:Rect){//计算相交部分的矩形//左下角坐标：( lx , ly )//右上角坐标：( rx , ry )let lx = Math.max(rect1.xMin , rect2.xMin);let ly = Math.max(rect1.yMin , rect2.yMin);let rx = Math.min(rect1.xMax , rect2.xMax);let ry = Math.min(rect1.yMax , rect2.yMax);//判断是否能构成小矩形if( lx > rx || ly > ry ) return false; //矩形不相交else                     return true;  //发生碰撞}}

代码都比较简短，并且都有注释，相信一看就懂！

自此我们就完成了一个简单的游戏了！

8，加入背景音乐和音效

在.ts文件的类里边加入下边代码@()表示一个组件属性，标明该属性之后可以在属性检查器上添加文件，这里是用来直接关联mp3文件

    @property(AudioClip)audio_bg:AudioClip = null;//背景音乐@property(AudioClip)audio_hit:AudioClip = null;//撞击音乐_audio = null;//音频播放器

然后我们就可以把mp3文件拉到这对应的属性上了

然后在start()里边添加以下代码：

        this._audio = new AudioSource();//创建播放器this._audio.clip = this.audio_bg;//指定背景音乐this._audio.play();//开始播放

这个时候运行应该就可以听到背景音乐了

接下来添加接收音效果，在撞击增加积分的地方添加如下代码：

this._audio.playOneShot(this.audio_hit,1)//播放撞击音乐

最后修改之后的完整代码如下：

import { _decorator, Component, Node , Rect, view, Vec3, UITransform, Label, AudioClip, AudioSource} from 'cc';
const { ccclass, property } = _decorator;@ccclass('gameManage')
export class gameManage extends Component {@property(AudioClip)audio_bg:AudioClip = null;//背景音乐@property(AudioClip)audio_hit:AudioClip = null;//撞击音乐_audio = null;//用来存放播放器_score = 0;//存放积分start() {this._audio = new AudioSource();//创建播放器this._audio.clip = this.audio_bg;//指定背景音乐this._audio.play();//开始播放}//获取物品的矩形，代表物品左上角的坐标以及苹果的大小宽和高，通常游戏中可以用来判断撞击行为_apple_rect = new Rect(0,0,0,0); //用来存放苹果矩形 x,y,w,h_lanzi_rect = new Rect(0,0,0,0); //用来存放篮子矩形 x,y,w,hupdate(deltaTime: number) { this._apple_rect = this.getRectByNode(this.node.getChildByName("apple"));//获取苹果的矩形this._lanzi_rect = this.getRectByNode(this.node.getChildByName("lanzi"));//获取篮子的矩形//判断苹果跟篮子是否相撞击if(this.collision_Rect(this._apple_rect,this._lanzi_rect)){console.log("撞击");this._audio.playOneShot(this.audio_hit,1)//播放撞击音乐//更新苹果的开始位置const apple_y = view.getVisibleSize().y/2;//根据屏幕宽度来随机生成一个x坐标const apple_x = this.random(-view.getVisibleSize().x/2,view.getVisibleSize().x/2)//设置苹果的初始坐标this.node.getChildByName("apple").setPosition(new Vec3(apple_x,apple_y,0));//更新积分this._score += 1;this.node.getChildByName("score").getComponent(Label).string = "Score:"+this._score}}//自定义获取指定节点的矩形getRectByNode(myNode:Node){const myRect = new Rect(0,0,0,0);myRect.x = myNode.getPosition().x;myRect.y = myNode.getPosition().y;myRect.width = myNode.getComponent(UITransform).contentSize.width;myRect.height = myNode.getComponent(UITransform).contentSize.height;return myRect;}//自定义随机函数random(mini,maxi){return Math.round(Math.random()*(maxi-mini)+mini)}//自定义判断2个矩形是否碰撞collision_Rect(rect1:Rect,rect2:Rect){//计算相交部分的矩形//左下角坐标：( lx , ly )//右上角坐标：( rx , ry )let lx = Math.max(rect1.xMin , rect2.xMin);let ly = Math.max(rect1.yMin , rect2.yMin);let rx = Math.min(rect1.xMax , rect2.xMax);let ry = Math.min(rect1.yMax , rect2.yMax);//判断是否能构成小矩形if( lx > rx || ly > ry ) return false; //矩形不相交else                     return true;  //发生碰撞}}

用同样的方法，我们可以尝试给篮子的左右移动加上一个声音，试一下吧！

最后思考一下，我们创建一个播放器就可以用来播放背景音乐，有可以播放音效，那么是否可以做一个节点用来放播放器，所有的地方都可以调用他来播放音乐，这样做有社么好处！

没错，就是节省资源，节省内存开销

现实中我们也能用一个就用一个播放器，不可能不同地方都去买一个音乐播放器，这得浪费多少钱