回転・拡大の基準点を変える

エンティティは anchorX, anchorY プロパティで拡大・回転の基準位置を変更することができます。

凡例

var sprite = new g.Sprite({
  ...,         // その他のプロパティ
  anchorX: 1.0, // 1.0 でエンティティの右端
  anchorY: 1.0 // 1.0 でエンティティの下端
});

sprite.anchorX = 0.0; // 0.0 でエンティティの左端
sprite.anchorY = 0.0; // 0.0 でエンティティの上端
sprite.modified(); // modified() で表示に反映

拡大・回転は、デフォルトではエンティティの左上端を基準に行われます。

利用例

次のコンテンツは、画像の右下端を基準に配置されます。

詳細

エンティティにアンカーポイントを指定することで、エンティティの回転・拡大の基準位置を設定できます。アンカーポイントは anchorX, anchorY プロパティで与えることができます。

anchorX, anchorY は 0.0 がエンティティの左端・上端を、 1.0 がエンティティの右端・下端を表し、初期値は 0.0 となります。

下記のコードでは、生成した Sprite は中心を基準に 45 度回転した状態で描画されます。

var sprite = new g.Sprite({
  scene: scene, // シーン scene があるものとします
  src: scene.asset.getImageById("player"), // アセットID "player" が画像アセットだとします
  x: 100,
  y: 100,
  angle: 45,
  anchorX: 0.5,
  anchorY: 0.5
});

scene.append(sprite);

生成後のエンティティのアンカーポイントは、 anchorX, anchorY プロパティで参照できます。

sprite.anchorX; // ==> 0.5
sprite.anchorY; // ==> 0.5

anchorX, anchorY プロパティに代入することで、アンカーポイントを変更できます。表示への反映には modified() メソッドを呼び出す必要があります。

sprite.anchorY = 0.0; // 上端 を基準位置にする
sprite.modified(); // modified() で表示に反映

Akashic Engine 逆引きリファレンス

回転・拡大の基準点を変える

凡例

利用例

詳細

関連情報