表示モード

反転する ​

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

凡例 ​

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

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

利用例 ​

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

詳細 ​

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

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

javascript
var sprite = new g.Sprite({
  scene: scene, // シーン scene があるものとします
  src: scene.asset.getImage("/image/player.png"), // "/image/player.png" が画像のパスだとします
  x: 0,
  y: 0,
  scaleX: -1,
  scaleY: -1
});

scene.append(sprite);

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

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

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

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

関連情報 ​