Actions - from Riverside

Phaser - The fast, fun and free HTML5 Game Framework

Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

一覧へ戻る

Overview

Actionsは、ゲームオブジェクトの1つのグループ全体にタスクを実行する関数のセットです。Phaser2では、グループオブジェクトはゲームオブジェクトのプールとしても使われていて、様々なメソッドが用意されていました。Phaser3では同様の簡易さでありながら、グループクラスが全てを担うことは無くなります。Actionはそれそのものが関数を持ち、一つのクラスに紐づくのではなく、どこからでも呼び出せるようになったということになります。関数にゲームオブジェクトの配列を渡せば、それらのゲームオブジェクト全てに対して機能します。

これまでに作成されているActionは以下の通りです。

Angle
Call
GridAlign
IncAlpha
IncX
IncXY
IncY
PlaceOnCircle
PlaceOnLine
PlaceOnRectangle
PlaceOnTriangle
PlayAnimation
RandomCircle
RandomEllipse
RandomLine
RandomRectangle
RandomTriangle
Rotate
RotateAround
RotateAroundDistance
ScaleX
ScaleXY
ScaleY
SetAlpha
SetOrigin
SetRotation
SetScale
SetScaleX
SetScaleY
SetVisible
SetX
SetXY
SetY
SmootherStep
SmoothStep
Spread
ToggleVisible

以下のように、ゲームオブジェクトのレイヤーに直接使うことができます。

angle: function (value)
{
    Actions.Angle(this.children.entries, value);

    return this;
},

Layer.angleを呼び出すと、レイヤーの子供のオブジェクトに回転を適用します。直接実行することや、カスタムオブジェクトやクラスで使うこともできます。

Actionはこれから増える予定です。コミュニティーにActionのアイディをご要望ください。

Examples

以下は、PlaceOnTriangleアクションを使う例です。三角形の形状を作成して、レイヤーを追加生成して、それにActionを渡しています。Actionを実行するレイヤーに作成した三角形を追加しています。

var triangle = new Phaser.Geom.Triangle.BuildRight(200, 400, 300, 200);

var layer = this.add.layer();

layer.createMultiple({ key: 'ball', frameQuantity: 64 });

layer.placeOnTriangle(triangle);

Actionに応じて、update関数などから動的に利用することもできます。以下、RotateAround Actionを使って、与えられた点を中心に、指定のレイヤーの全ての子供のオブジェクトを回転させている例です。

function create ()
{
    layer = this.add.layer();

    for (var i = 0; i < 256; i++)
    {
        var image = this.add.image(Phaser.Math.Between(200, 600), Phaser.Math.Between(100, 500), 'diamonds', Phaser.Math.Between(0, 4));

        layer.add(image);
    }
}

function update ()
{
    layer.rotateAround({ x: 400, y: 300 }, 0.01);
}

一覧へ戻る