Creator2D横版游戏(1)主角左右走
本次目标
源码在文末
需要两个按钮,一张背景图和一套主角spine
节点层级
主角太大,给它缩小点
创建一个新脚本挂到主角上
先写一个枚举出来,只有左右走和静止
// 状态
// 左走 右走 静止
export enum State{
left, right, idle,
};
需要用到的属性
@property({displayName: "角色", tooltip: "角色", type: sp.Skeleton})
player: sp.Skeleton = null!;
@property({displayName: "行走速度", tooltip: "行走速度", type: CCFloat})
walk_speed: number = 200;
@property({displayName: "左走按钮", tooltip: "左走按钮", type: Node})
left_walk_btn: Node = null!;
@property({displayName: "右走按钮", tooltip: "右走按钮", type: Node})
right_walk_btn: Node = null!;
@property({displayName: "静止动画名称", tooltip: "静止动画名称"})
idle_anim_name: string = "idle";
@property({displayName: "行走动画名称", tooltip: "行走动画名称"})
walk_anim_name: string = "walk";
state = State.idle;// 状态,默认为静止
封装三个改变状态的方法,在onLoad绑定到对应按钮
onLoad () {
// 给左走按钮绑定事件
this.left_walk_btn.on(SystemEventType.TOUCH_START, this.left_walk, this);
this.left_walk_btn.on(SystemEventType.TOUCH_END, this.idle_walk, this);
this.left_walk_btn.on(SystemEventType.TOUCH_CANCEL, this.idle_walk, this);
// 给右走按钮绑定事件
this.right_walk_btn.on(SystemEventType.TOUCH_START, this.right_walk, this);
this.right_walk_btn.on(SystemEventType.TOUCH_END, this.idle_walk, this);
this.right_walk_btn.on(SystemEventType.TOUCH_CANCEL, this.idle_walk, this);
}
// 左走专用函数
left_walk () {
log("左走");
this.state = State.left;
}
// 右走专用函数
right_walk () {
log("右走");
this.state = State.right;
}
// 静止专用函数
idle_walk () {
this.state = State.idle;
}
在update判断状态
先设置动画
根据状态设置位置和缩放
update (dt: number) {
// 如果状态为静止
if (this.state == State.idle) {
// 如果动画不为静止
if (this.player.animation != this.idle_anim_name) {
// 动画为静止
this.player.animation = this.idle_anim_name;
}
}
// 如果状态为左走
else if (this.state == State.left) {
// 如果动画不为走路
if (this.player.animation != this.walk_anim_name) {
// 动画为走路
this.player.animation = this.walk_anim_name;
}
// 移动
let pos = this.player.node.position;
this.player.node.setPosition(pos.x - this.walk_speed * dt, pos.y);
// 人物缩放
this.player.node.setScale(new Vec3(-0.6, 0.6, 1));
}
// 如果状态为右走
else if (this.state == State.right) {
// 如果动画不为走路
if (this.player.animation != this.walk_anim_name) {
// 动画为走路
this.player.animation = this.walk_anim_name;
}
// 移动
let pos = this.player.node.position;
this.player.node.setPosition(pos.x + this.walk_speed * dt, pos.y);
// 人物缩放
this.player.node.setScale(new Vec3(0.6, 0.6, 1));
}
}
角色的左右转朝向就是用Scale的X正负设置实现的
下期预告:Creator2D横版游戏(2)背景图随主角移动 | 单独相机拍UI
源码:https://gitee.com/propertygame/cocos-creator3.x-demos/tree/master/2Dhorizontal
技术交流Q群:1130122408
更多内容请关注微信公众号