可変サイズのボタンを作る
角丸のデザインの画像でボタンを作る場合、単純に拡大すると角丸のサイズが変わってしまいます。 角丸のような「枠」部分を維持して拡大した画像でボタンを作るには、g.SurfaceUtil.drawNinePatch() を利用します。
javascript
const buttonImageAsset = scene.asset.getImage("/assets/button.png");
const srcSurface = g.SurfaceUtil.asSurface(buttonImageAsset); // アセットから `Surface` を取得
const destSurface = scene.game.resourceFactory.createSurface(250, 100); // 描画先の `Surface` を 250x100 の大きさで生成
const borderWidth = { top: 3, bottom: 3, left: 5, right: 5 }; // 上下左右の「拡大しない」領域の大きさを指定
g.SurfaceUtil.drawNinePatch(destSurface, srcSurface, borderWidth); // 描画先の `Surface` にナインパッチ後の画像を描画
const ninePacthButton = new g.Sprite({
scene: scene,
src: destSurface,
touchable: true
});
// ポイントダウン時に横幅を拡大する
ninePacthButton.onPointDown.add((ev) => {
ninePacthButton.scaleX = 1.2;
ninePacthButton.modified();
});
// ポイントアップ時に横幅を戻す
ninePacthButton.onPointUp.add((ev) => {
ninePacthButton.scaleX = 1.2;
ninePacthButton.modified();
});
scene.append(ninePacthImg);利用例
次のコンテンツは、上段に元画像と下段にナインパッチで拡大した画像を配置しています。ナインパッチ化した画像はクリック時に画像が縦・横方向に少し動きます。
詳細
画像にナインパッチを適応し、外枠部分を固定したまま拡大したボタンを実現しています。 ナインパッチについていはナインパッチを利用するを参照してください。 onPointDown 等のポイントイベントは クリック・タップできるようにする を参照してください。