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
更多內容請關注微信公眾號

總結

以上是生活随笔為你收集整理的Creator2D横版游戏(1)主角左右走的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。