cocos creator笔记(13)

1.自定义Animation

自己通过代码来做动画

const {ccclass, property} = cc._decorator;



@ccclass
export default class NewScript extends cc.Component {

    //每秒播放速度
    @property
    speed: number = 0.1;//每个0.1秒切换一张图片

    //播放帧数组
    @property([cc.SpriteFrame])//数组需要加括号内写类型
    sprites: cc.SpriteFrame[] = [];
    
    //是否播放动画
    @property
    isPlaying: boolean = false;
    //当前播放帧
    index: number = 0;
    //计时器
    timer: number = 0;

    start () {
        
    }
   
    //可以在另一个脚本中控制动画是否开始
    play(){
        this.isPlaying = true;
    }
    stop(){
        this.isPlaying = false;
    }
    
    
    update(dt){
        if(this.isPlaying){
            //播放动画
            //计时器增加
            this.timer += dt;
            //如果播放timer超过播放速度
            if(this.timer > this.speed){
                this.timer = 0;
                //切换帧
                this.index++;
                if(this.index >= this.sprites.length){//大于长度从第0个开始
                    this.index = 0;
                }
                //更换帧图片
                this.getComponent(cc.Sprite).spriteFrame = this.sprites[this.index];
                
            }
        }
    }
  
}

1.该脚本只能写动画的逻辑，如果还有别的逻辑需要再编写一个脚本
2.如果有三个动画和创建到三个数组中，然后对三个数组进行调用

2.socket

将socket通信类比为打电话这一生活场景。这里我把TCP服务器比作政府某一服务部门能，TCP客户端比作企业中某一部门电话，描述这一过程，恰好就像是socket通信，服务部门提供服务，企业部门申请服务。

3.node.js

客户端连接服务端的监听端口(例：3000)，再由监听端口分配新端口给对应服务端
端口尽量用大一点

服务端

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http); 

//在某个端口开始监听客户端连接
http.listen(3000,function(){
    console.log("server listen on 3000");//已经开始监听
});

//开始监听有客户端连接
io.on('connection', function(socket){//connection专门监听连接 socket是真正和客户端连接的套接字
    //发送消息
    //socket.emit('message',"连接成功了");

    //监听客户端发来的的消息 
    console.debug("有客户端连接");
    socket.on('message', function(data){
        console.log("客户端发来消息"+ data);

        //给客户端发送消息
        socket.emit('message','world');
    });
});
  

服务端连接成功会发送server listen on 3000

连接成功后：

4.Socket.io客户端

const {ccclass, property} = cc._decorator;
@ccclass
export default class SocketTest extends cc.Component {

    socket:Socket = null;
    
    start () {
        this.socket = io.connect("http://localhost:3000");
        //判断是否连接成功
        this.socket.on('connect',(data)=>{
            console.debug("连接成功");
            //给服务端发消息
            this.socket.emit("message","Hello");

            //客户端接收消息
            this.socket.on('message',(data)=>{
                console.debug(data);
            });
        });
        
        //判断是否断开
        //this.socket.on('disconnect',(data)=>{

        //});
    }

    // update (dt) {}
}

主要困难： socket版本和视频不对，版本太新有些代码不能用了，通过下载旧的socket.io版本后解决，需要之后查找新的代码拉更新