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

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

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

一，开发环境

下载cocos并安装：

Cocos - The world's top 2D&3D engine, game / smart cockpit /AR/VR/ virtual character / education

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

下载vscode：

https://code.visualstudio.com/

安装都只要一路next

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

二，创建一个jiepingguo的项目

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

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

 

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

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

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

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

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

先选中层管理的lanzi节点 

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

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

4，添加篮子脚本

在资源assets下添加一个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坐标加100
            this.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/2
            pos.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，在画布Camera下添加一个 Label

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

如下图：

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

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

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

gameManage的脚本如下：

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，加入背景音乐和音效

在gameManage.ts文件的类里边加入下边代码 @property()表示一个组件属性，标明该属性之后可以在属性检查器上添加文件，这里是用来直接关联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,h

    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("撞击");
            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;  //发生碰撞
    }

}

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

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

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

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