脚本组件

介绍

在日常业务开发中，我们需要自定义一些业务逻辑，每个游戏对象可能需要单独的逻辑或者“数据驱动器”，我们通过脚本组件的形式进行业务开发。

Demo：https://eva.js.org/playground/#/component

举例说明：

芭芭农场的植物中作物生产的经验会实时变化，

Step1: 我们创建一个生产组件 Step2: 在组件上设置描述经验生产的速度，当前经验的属性 Step3: 通过生命周期方法，实时根据生产速度对经验值进行修改，然后修改文字组件上面的文字来展示经验值 Step4: 提供收取作物经验的自定义事件出来，当用户点击植物时调用

初始化

通过继承 Component 的方式创建脚本组件

import { Component } from '@eva/eva.js'
class Move extends Component {
  static componentName = 'Move' // 设置组件的名字
}

属性

给组件设置属性，在整个组件里面可以使用/修改。

class Move extends Component {
  static componentName = 'Move'
  speed = {
    // 设置属性
    // 移动速度
    x: 100,
    y: 200
  }
}

组件安装

const go = new GameObject('name')
go.addComponent(new Move({
  speed: {
    x: 100,
    y: 100
  }
}))

生命周期

初始化

Init

创建一个脚本组件，实现 init 方法进行初始化，通常都是将参数设置给组件上面的属性。 实例化组件的时候传入的参数，会在组件被添加到游戏对象的时候传入到 init 方法中。 一般来讲，我们传入的参数对应到组件上面的属性。 该方法将会在 addComponent 的时候执行。

interface MoveParams {
  speed: {
    x: number,
    y: number
  };
}
class Move extends Component {
  //...
  init(params: MoveParams) {
    this.speed = params.speed || { x: 0, y: 0 }
  }
}

Awake

游戏对象被安装到游戏对象后执行。 如果游戏场景以及所有游戏对象已经准备好了，可以拿到已经在游戏对象树上面的节点了。 正常编码开发我们不会这么做，但是在编辑器开发中就可以派上用场了。

class Move extends Component {
  // ...
  awake() {}
}

Start

跟 Awake 一样，Start 也在生命周期最开始的时候被调用，但是它将在这个组件第一次被 update 之前调用。 我们可以在 Start 回调函数里面去获取对象上绑定其他组件。

class Move extends Component {
  // ...
  private img: Img = null
    start() {
    this.img = this.gameObject.getComponent(Img)
  }
}

游戏事件

onPause

在 game.pause() 的时候执行

onResume

在 game.resume() 的时候执行

游戏循环

Update

每一帧执行

class Move extends Component {
  // ...
  update(e) {
    // 让物体按照一定速度移动 位移 = 速度 * 时间
    const position = this.gameObject.transform.position
    this.gameObject.transform.position.x += this.speed.x * (e.deltaTime / 1000)
    this.gameObject.transform.position.y += this.speed.y * (e.deltaTime / 1000)
  }
}

LateUpdate

每帧最后执行，将会在所有组件的 update 执行以后执行。有些组件依赖另外的组件的运行结果，例如位置跟随，需要在动画组件修改位置后，跟随的组件才去读取 Transform 组件上面的 position 属性。

停用

Destroy

销毁时调用

自定义事件

可以在组件上自定义事件进行一些操作，比如以下例子，添加了加速方法和减速方法。

class Move extends Component {
  //...
  speedUp(value = 20) {
    this.speed.x += value
    this.speed.y += value
  }
  speedDown(value = 20) {
    this.speed.x -= value
    this.speed.y -= value
  }
}