Components

phaser.io
 
Phaser - The fast, fun and free HTML5 Game Framework
https://phaser.io/phaser3/api/components
Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

一覧へ戻る

Overview

Phaser2では、Componentをゲームオブジェクトが必要とするコードがダブらないようにチェックして処理する目的で利用していました。それらはmixinとしてゲームオブジェクト自身に組み込むものでした。Phaser3もほぼ同じアプローチですが、唯一異なるのは新しいComponentはgetterとsetterを持てるということです。これにより、ゲームオブジェクトに組み込む必要がなくなりました。

ゲームオブジェクトのComponentは現在以下のものが作成されています。

  • Alpha
  • Animation
  • BlendMode
  • Children
  • Color
  • Data
  • Flip
  • GetBounds
  • Origin
  • RenderTarget
  • ScaleMode
  • Size
  • Texture
  • Tint
  • ToJSON
  • Transform
  • TransformMatrix
  • Visible

sprite.alpha = 0.8を呼び出した場合、スプライトのalphaのComponentを制御できます。

ゲームオブジェクトは、利用可能なComponentクラスを配列で定義します。以下、Imageクラスの例です。

var Image = new Class({

    Extends: GameObject,

    Mixins: [
        Components.Alpha,
        Components.BlendMode,
        Components.Flip,
        Components.GetBounds,
        Components.Origin,
        Components.RenderTarget,
        Components.ScaleMode,
        Components.Size,
        Components.Texture,
        Components.Transform,
        Components.Visible,
        ImageRender
    ],

    initialize:

    function Image (state, x, y, texture, frame)
    {
        GameObject.call(this, state, 'Image');

        this.setTexture(texture, frame);
        this.setPosition(x, y);
        this.setSizeToFrame();
        this.setOrigin();
    }

});

上記のImageのゲームオブジェクトは、アルファ、ブレンドモード、フリップといった11個のコンポーネントを使うことができます。ここに登録されているコンポーネントを削除すると、その機能は使えなくなります。

同様の方法で、必要なComponentを組み込んだカスタムのゲームオブジェクトを定義することができます。

 

System Components

いくつかのシステムやオブジェクトは、自分自身のコンポーネントフォルダーを持っています。例えばTweenなどが自分自身のコンポーネントフォルダーを持ちます。その中には、Tweenオブジェクトに属するCalcDurationやPlayといった様々な関数が入っています。

Tweenクラスのコードを見ると、コンポーネントがprototypeに定義されていることが確認できます。

Tween.prototype = {

    calcDuration: require('./components/CalcDuration'),
    init: require('./components/Init'),
    loadValues: require('./components/LoadValues'),
    nextState: require('./components/NextState'),
    pause: require('./components/Pause'),
    play: require('./components/Play'),
    resetTweenData: require('./components/ResetTweenData'),
    resume: require('./components/Resume'),
    seek: require('./components/Seek'),
    setEventCallback: require('./components/SetEventCallback'),
    update: require('./components/Update')

};

このようにメソッドを個別のファイルに分割する構造にすることで、一つのクラスのコード数が膨らむことを避けています。を減らし、メソッドを個別のファイルに分けています。この方法により、一つの関数を置き換える場合に、クラス全体を変更しなくてもよくなり、また、異なるオブジェクト間で共通のコンポーネントを再利用できるようになります。

Examples

以下、スプライトで利用されているアルファコンポーネントです。

var bunny = this.add.sprite(400, 300, 'bunny');

bunny.alpha = 0.5;

一覧へ戻る

Print Friendly, PDF & Email