表示モード

ナインパッチを利用する ​

g.SurfaceUtil#drawNinePatch() を利用することで、ナインパッチ処理された Surface を描画することができます。 ナインパッチとは、ボタンやメッセージウィンドウのような "外枠" がある画像を、外枠部分のサイズを固定したまま拡大・縮小して描画する処理です。

凡例 ​

javascript
var destSurface = g.game.resourceFactory.createSurface(100, 100); // 描画先の `Surface`
var srcSurface = g.SurfaceUtil.asSurface(
  scene.asset.getImage("/image/frame.png")
); // 描画元の `Surface`
var borderWidth = { top: 2, bottom: 2, left: 4, right: 4 }; // 上下左右の「拡大しない」領域の大きさ
g.SurfaceUtil.drawNinePatch(destSurface, srcSurface, borderWidth);

var sprite = new g.Sprite({
  scene: scene,
  src: destSurface
});

描画元として画像アセット (ImageAsset) を利用する場合は、上のように g.SurfaceUtil.asSurface() で Surface に変換する必要があります。

利用例 ​

次のコンテンツは、通常の画像とナインパッチで拡大した画像を表示しています。

詳細 ​

ナインパッチを利用するには g.SurfaceUtil#drawNinePatch() を使用します。 g.SurfaceUtil#drawNinePatch() は画像素材の拡大・縮小において枠の表現を実現します。

第三引数の borderWidth を渡すことで画像の上下左右の枠部分の幅・高さを引き延ばすことなく画像を任意サイズに拡大・縮小することができます。 borderWidth の上下左右が全て同じ値の場合は数値一つを渡すことが可能です。

関連情報 ​