【cocos creater】6.仿《弓箭传说》- 控制主角移动（附源码）

查看项目所有章节

接着上一章，我们在main场景中创建一个role精灵节点

在资源管理器中，将head图集拖到Sprite属性节点的Atlas属性上，并把head图集中的baioqing_1图片拖到Sprite Frame属性上

效果如下：

接下来创建在scripts文件夹中创建一个名叫role的TypeScript脚本，脚本内容：

const { ccclass, property } = cc._decorator

@ccclass
export default class Role extends cc.Component {
  move_speed: number = 200

  start() {}
  // update (dt) {}

  /**
   * 主角的移动
   * @param distance 移动距离
   * @param degreee 角度
   */
  move(distance: number, degreee: number) {
    var sx = distance * Math.cos(degreee)
    var sy = distance * Math.sin(degreee)

    //移动
    var pos = this.node.getPosition()
    pos.x += sx
    pos.y += sy
    this.node.setPosition(pos)

    //旋转蛇头
    var angle = (degreee * 180) / Math.PI
    //默认是0，所以这里-90
    angle -= 90
    this.node.angle = angle
  }
}

在层级管理器中创建一个GameManager空节点，并创建一个game_manager.ts的脚本

import Role from '../script/role'
import joystick from '../script/joystick'

const { ccclass, property } = cc._decorator

@ccclass
export default class NewClass extends cc.Component {
  @property(joystick)
  joystick: joystick = null

  @property(Role)
  role: Role = null

  // LIFE-CYCLE CALLBACKS:

  // onLoad () {}

  start() {
    this.initCollisionManager()
    this.initPhysicsManager()
  }
  initCollisionManager() {
    // Get the collision manager.
    let manager = cc.director.getCollisionManager()

    // Enabled the colider manager.
    manager.enabled = true

    // Enabled draw collider
    manager.enabledDebugDraw = false

    // Enabled draw collider bounding box
    manager.enabledDrawBoundingBox = true
  }
  initPhysicsManager() {
    var manager = cc.director.getPhysicsManager()
    manager.enabled = true
  }

  update(dt) {
    //移动
    if (this.joystick.state === 1) {
      var s = this.role.move_speed * 0.016
      this.role.move(s, this.joystick.radius)
    }
  }

  // update (dt) {}
}

将role脚本添加到role精灵上，将game_manager脚本添加到GameManager空节点上，并在GameManager节点的脚本属性上绑定role和joystick

运行效果：

源码下载地址：

点我下载