cocos小游戏-物理引擎-动画

最新推荐文章于 2024-06-13 16:03:25 发布

幻梦无痕

最新推荐文章于 2024-06-13 16:03:25 发布

阅读量107

点赞数

文章标签： cocos2d typescript 游戏引擎

本文链接：https://blog.csdn.net/CagedBird_yyj/article/details/133530175

版权

1.准备素材

背景
地面
角色

2.背景-移动脚本

(1)添加背景节点bg1
(2)复制背景节点bg2，接上bg1
在这里插入图片描述

(3)bg1内新建背景空节点bg
(4)空节点bg拖出
(5)节点bg1，bg2拖入bg节点
在这里插入图片描述

(6)新建背景脚本BgControl.ts，拖入bg节点

(7)编辑脚本实现背景轮播实现移动


@property
speed:number = 10;   //背景移动速度
@property
width:number = 512;    //背景宽度

start () {}

update (dt) {
    for(let bg of this.node.children){
        //背景向左移动 10像素/秒
        bg.x -= this.speed * dt;

        //第1张背景图离开屏幕后放到第2张后面
        if(bg.x < -this.width){
            bg.x += this.width * 2;
        }
    }
}

3.地面-移动脚本

同背景操作
(1)添加地面图片land1
(2)复制land2拼接
(3)新建空节点land拖出
(4)land1,land2拖入land
在这里插入图片描述

(5)新建land脚本拖入
(6)编辑脚本实现地面移动



@property
speed:number = 50;  //地面移动速度

@property
width:number = 512;  //地面长度

start () {
}

update (dt) {
    //遍历两快地面
    for(let land of this.node.children){
        //设置速度
        land.x -= this.speed * dt;
        //地面超出屏幕移动到后面
        if(land.x < -this.width){
            land.x += this.width * 2;
        }
    }
}

(7)

4.地面-物理组件

(1)给地面节点添加物理组件-Collider-box组件
在这里插入图片描述

(2)同时会添加一个RigidBody刚体组件
(3)RigidBody刚体类型type设置为静态static
在这里插入图片描述

5.角色

(1)拖入角色图片创建角色节点
(2)创建角色脚本拖入节点

6.角色-物理组件

(1)角色添加物理组件-Collider-选择物理形状
(2)编辑角色脚本开启物理引擎

onLoad () {
    //开启物理引擎检测
    cc.director.getPhysicsManager().enabled = true;
}

7.角色-动画组件

(1)选中角色节点
在这里插入图片描述

(2)打开动画编辑器
(3)添加动画组件
在这里插入图片描述

(4)新建clip动画fly
在这里插入图片描述

(5)在动画编辑器点击Add Property添加cc.Sprite.spriteFrame属性
(6)将飞行图片拖到动画中
在这里插入图片描述

(7)选择循环播放
(8)将动画拖到动画组件的Default Clip，勾选Play on load默认立即播放
在这里插入图片描述

8.障碍物

(1)新建障碍物空节点obstacle
(2)将屏幕上方障碍物图片拖obstacle中成为ob1节点
(3)再将屏幕下方障碍物拖到ob1节点中成为ob2节点
在这里插入图片描述

(4)将ob1，ob2拖到屏幕合适位置
在这里插入图片描述

(5)在ob1节点中添加3个物理组件-Collider-box
(6)将3个物理组件生成的刚体RigidBody的type设置为static
(7)将其中2个分别拖到屏幕上方和下方障碍物上
(8)将第3个物理组件拖到2个障碍物中间作为门，Tag设置为1方便监听通过，勾选Scensor选项使得角色可以穿过
在这里插入图片描述