表示モード

画像の一部分を表示する ​

画像の一部を表示するには Sprite エンティティの srcWidth, srcHeight や srcX, srcY を利用します。

凡例 ​

javascript
var sprite = new g.Sprite({
  scene: scene,
  src: scene.asset.getImage("/image/player.png"), // /image/player.png が画像アセットのパスとします
  width: 30,
  height: 25,
  srcX: 15, // 描画元範囲の左端を指定します
  srcY: 10, // 描画元範囲分の上端を指定します
  srcWidth: 30, // 描画元範囲の幅の値。エンティティの幅に拡大して描画されます
  srcHeight: 25 // 描画元範囲の高さの値。エンティティの高さに拡大して描画されます
});
javascript
sprite.srcX = 25;
sprite.srcY = 5;
sprite.invalidate(); // invalidate() で表示に反映します

画像を拡大して表示するには scaleX, scaleYを利用してください。

画像を回転して表示するにはangle を利用してください。

利用例 ​

次のコンテンツは、左側に画像の一部分を表示し、右側に全体の画像を表示しています。

詳細 ​

画像の一部を表示するには、Sprite エンティティの srcX, srcY, srcWidth, srcHeight プロパティを利用します。

srcX, srcY は描画元範囲の左端・上端、 srcWidth, srcHeight は描画元範囲の幅・高さです。 指定した場合、エンティティの幅・高さに合わせて描画元範囲が拡大・縮小して描画されます。

これらの値を変更した場合は、invalidate() を呼び出す必要があります。

srcWidth, srcHeight は、通常 width, height と併せて指定する必要があることに注意してください。 これは Sprite の生成時に width, height を省略すると、画像 (src) の幅・高さになるためです。 特に拡大したい場合を除き、 width, height には srcWidth,srcHeight と同じ値を指定してください。

関連情報 ​