【phina.js】Gridクラスを使いこなそう

はじめに

phina.jsにはGridというクラスが用意されています。このGridを活用することで、直接的な座標値をあまり意識せずにオブジェクトをシーンに配置することができます。このエントリーでは、 Gridの仕組みや機能について、使用例を織り交ぜながら説明したいと思います。

SceneにはデフォルトでGridが設定されている

Gridは文字通り格子を意味しており、 phina.jsでは、 Sceneに対してデフォルトでGridが設定されています。可視化すると下図のようになります。

[runstantで開く]

上の図のように、デフォルトでは縦・横がそれぞれ16のグリッドに分けられていることが分かります。

Gridの使用方法

SceneのGridは初期設定されているので、すぐに使うことができます。
例としてSceneの横4グリッド・縦6グリッドの位置に Rectangleを配置してみます。以下が該当コード部分です。

    var rect = RectangleShape().addChildTo(this);
    rect.setPosition(this.gridX.span(4), this.gridY.span(6));

• thisは現在のSceneを指しています。
• gridXは横のGrid、gridYは縦の Gridです。
• spanで位置を指定します。（0から16まで指定可能）

実際に配置した画像が以下のとおりです。
Gridとの関係がわかり易いように、半透明にしています。

[runstantで開く]

centerメソッドが便利

Gridを使った配置では、上述したように個別にspanを使ってもいいのですが、 centerを使うと画面を中心に対照的に上手く配置することができます。

[runstantで開く]

以下が該当コード部分です。

    var rect = RectangleShape().addChildTo(this);
    rect.setPosition(this.gridX.center(), this.gridY.center());
    rect.alpha = 0.5;

    var rect2 = RectangleShape().addChildTo(this);
    rect2.setPosition(this.gridX.center(-3), this.gridY.center(2));
    rect2.alpha = 0.5;

    var rect3 = RectangleShape().addChildTo(this);
    rect3.setPosition(this.gridX.center(3), this.gridY.center(2));
    rect3.alpha = 0.5;

• gridX.centerと gridY.centerで画面の中央に配置することが出来ます。
• centerの引数にオフセット値を与えることで、中心を基準として配置を行うことが出来ます。対称にしたければ、3と-3のように正負対の数値を指定します。
• spanやcenterの引数には小数値も指定できますので、位置の微調整が可能です。

Gridを自作する

SceneのGridで事足りない場合は、任意の幅とグリッド数で独自にGridを作成することができます。 Gridクラスのコンストラクタは以下のとおりです。

Grid({
  width: グリッド全体の幅,
  columns: グリッドの数,
  loop: spanにマイナス値を指定できるかどうか（任意）,
  offset: オフセット値（任意）
});

Gridを自作すれば、以下のように異なる幅やグリッド数のGridを混在させることもでき、レイアウトの幅が広がります。

[runstantで開く]

まとめ

Gridは一見地味に見えますが、ゲーム作りの土台となる重要な役割を担っているとも言えるかと思います。 Gridを使いこなして、phina.jsでのゲーム作りに役立てましょう！