Skip to content

画像でボタンを作る

画像でボタンを作るには、g.SpriteonPointDown 等のトリガーを利用し実現します。

凡例

javascript
// g.Sprite を利用したボタン
const spriteButton = new g.Sprite({
  scene:scene,
  src: scene.asset.getImage("/assets/button.png"),
  touchable:true
});
// ポイントダウン時に横幅を拡大する
spriteButton.onPointDown.add((ev)=> {
  spriteButton.scaleX = 1.2;
  spriteButton.modified();
});
// ポイントアップ時に横幅を戻す
spriteButton.onPointUp.add((ev)=> {
  spriteButton.scaleX = 1.2;
  spriteButton.modified();
});
scene.append(spriteButton);
// g.Sprite を利用したボタン
const spriteButton = new g.Sprite({
  scene:scene,
  src: scene.asset.getImage("/assets/button.png"),
  touchable:true
});
// ポイントダウン時に横幅を拡大する
spriteButton.onPointDown.add((ev)=> {
  spriteButton.scaleX = 1.2;
  spriteButton.modified();
});
// ポイントアップ時に横幅を戻す
spriteButton.onPointUp.add((ev)=> {
  spriteButton.scaleX = 1.2;
  spriteButton.modified();
});
scene.append(spriteButton);

利用例

次のコンテンツは、g.Sprite, onPointDown, onPointUp を利用したボタンを配置しています。クリック時に画像の縦・横が拡大されます。

詳細

g.SpriteonPointDown 等のトリガーを組み合わせてボタンを実現しています。 ボタンとなる g.SpriteonPointDown でクリック時の動作、onPointUp でクリックが離れた時の動作を追加しています。

関連情報