表示モード

拡縮とアンカーポイント ​

このページのサンプルコードをダウンロード

拡縮と回転 ​

エンティティを拡大・縮小して描画するには、scaleX と scaleY プロパティを利用します。 また回転させるには angle プロパティを利用します。 (参考: エンティティの節 の表)

たとえば以下のように生成した Sprite は、 元のサイズよりも横方向に 2 倍、縦方向に 1.5 倍拡大してさらに 45 度回転した状態で描画されます。

javascript
const sprite = new g.Sprite({
  scene: scene, // シーン scene があるものとします
  src: scene.asset.getImage("/image/player.png"), // "/image/player.png" が画像アセットだとします
  x: 0,
  y: 0,
  scaleX: 2,
  scaleY: 1.5,
  angle: 45
});

scene.append(sprite);

画像アセット "player" が次のような画像の場合、

player.png

これは次のような表示になります。 画面左上端を軸に回転したので見切れています。

拡縮や回転角度は、生成後に同名のプロパティを通して変更することもできます。 (参考: アニメーションの節 の表)

javascript
// 縦横ともに等倍にする
sprite.scaleX = 1;
sprite.scaleY = 1;

// 回転角度を 0 度にする
sprite.angle = 0;

// 変更を反映
sprite.modified();

次のような表示になります。

アンカーポイント ​

上の例でわかるように、エンティティの拡大・縮小・回転・移動は、デフォルトではエンティティの左上を基準に行われます。

エンティティにアンカーポイントを指定することで、この基準位置を設定できます。 アンカーポイントは anchorX, anchorY プロパティで与えることができます。 (akashic-engine@2.5.4 以降 (akashic-cli@1.7.28 以降))

javascript
const sprite = new g.Sprite({
  scene: scene,
  src: scene.asset.getImage("/image/player.png"), // "/image/player.png" が画像アセットだとします
  x: g.game.width, // g.game.width と height はゲーム画面の幅と高さです
  y: g.game.height,
  angle: 25,
  scaleX: 2.5,
  scaleY: 2.5,
  anchorX: 1.0, // 1.0 でエンティティの右端
  anchorY: 1.0 // 1.0 でエンティティの下端
});

scene.append(sprite); // シーン scene があるものとします

anchorX, anchorY は 0.0 がエンティティの左端・上端を、 1.0 がエンティティの右端・下端を表します。 この例ではどちらも 1.0 を与えているので、この Sprite は右下端を基準に配置され、次のような表示になります。

エンティティの X, Y 座標を画面右下端 (g.game.width, g.game.height) にしていますが、 基準がエンティティの右下端なので、ちょうど画面右下端に沿う位置に配置されます。 またエンティティ右下端を基準に拡大・回転されて、ゲーム画面から一部見切れています。

アンカーポイントもやはり生成後に変更することができます。

javascript
// アンカーポイントをエンティティ下端の中央にする
sprite.anchorX = 0.5;
sprite.anchorY = 1.0;

// わかりやすさのため回転をリセット
sprite.angle = 0;

// 変更を反映
sprite.modified();

これを実行すると次のような表示になります。

anchorX, anchorY の初期値は 0 です。 初期値の場合、拡大・回転と移動はエンティティの左上端を基準に行われます。

TIP

旧版 (Akashic Engine v2 以前) では、 anchorX , anchorY の初期値は undefined です。 旧版では undefined の場合、エンティティの左上端を基準に移動を行い、エンティティの中心を基準に拡大・回転を行なっていました。 互換性のため、 Akashic Engine v3 でも anchorX , anchorY に null を指定することで旧版の挙動を再現できますが、これは非推奨です。