反転する

scaleX, scaleY プロパティを用いてエンティティの拡大だけでなく、エンティティを反転させることもできます。

凡例

var sprite = new g.Sprite({
  ...,         // その他のプロパティ
  scaleX: -1   // 左右反転
});

var sprite = new g.Sprite({
  ...,         // その他のプロパティ
  scaleY: -1  // 上下反転
});

反転も、 angle による回転と同じく、デフォルトではエンティティの左上端を基準に行われます。この基準位置を変えるには、 anchorX, anchorY を利用してください。

利用例

次のコンテンツは、左側の画像を左右反転、右側の画像を上下反転しています。

詳細

エンティティを反転させるには scaleX, scaleY プロパティを利用します。

下記のコードでは、生成した Sprite は上下・左右どちらも反転した状態で描画されます。

var sprite = new g.Sprite({
  scene: scene, // シーン scene があるものとします
  src: scene.asset.getImageById("player"), // アセットID "player" が画像アセットだとします
  x: 0,
  y: 0,
  scaleX: -1,
  scaleY: -1
});

scene.append(sprite);

上記コードの場合、デフォルトの基準点が左上端なのでエンティティの位置が反転前と違う位置になってしまいます。位置を変えたくない場合は下記のようにエンティティの基準点をエンティティ中央に設定する必要があります。

var sprite = new g.Sprite({
  ...
  // 以下の指定で基準点がエンティティ中央になる
  anchorX: 0.5,
  anchorY: 0.5
});

また、本来 scaleX, scaleY プロパティは拡大・縮小を行うためのものなので、以下のように左右反転させ拡大させるということもできます。

sprite.scaleX = -2; // 左右反転して横方向に2倍拡大
sprite.scaleY = 2; // 縦方向に2倍拡大
sprite.modified(); // modified() で表示に反映

Akashic Engine 逆引きリファレンス

反転する

凡例

利用例

詳細

関連情報