表示モード

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

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

凡例 ​

javascript
var sprite = new g.Sprite({
  ...,         // その他のプロパティ
  anchorX: 1.0, // 1.0 でエンティティの右端
  anchorY: 1.0 // 1.0 でエンティティの下端
});
javascript
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 度回転した状態で描画されます。

javascript
var sprite = new g.Sprite({
  scene: scene, // シーン scene があるものとします
  src: scene.asset.getImage("/image/player.png"), // "/image/player.png" が画像のパスだとします
  x: 100,
  y: 100,
  angle: 45,
  anchorX: 0.5,
  anchorY: 0.5
});

scene.append(sprite);

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

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

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

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

関連情報 ​