シンプルなボタンを作る

onPointDown トリガーを利用し、任意のエンティティが押下された時の処理を記述できます。

凡例

const rectButton = new g.FilledRect({
  // g.Sprite や g.Label などでも可
  scene: scene,
  cssColor: "#000000",
  width: 150,
  height: 65,
  touchable: true // クリック・タッチ操作できるエンティティにする
});
// ポイントダウン時に半透明にする
rectButton.onPointDown.add((ev) => {
  // ここにボタンが押された時の処理を記述
  rectButton.opacity = 0.5;
  rectButton.modified();
});
// ポイントアップ時に透明度を戻す
rectButton.onPointUp.add((ev) => {
  // ここにボタンから離れた時の処理を記述
  rectButton.opacity = 1;
  rectButton.modified();
});
scene.append(rectButton);

利用例

次のコンテンツは、g.FilledRect, g.Label を組み合わせたボタンを配置しています。クリックでボタンの背景色は半透明となります。

詳細

g.FilledRect と g.Label を組み合わせボタンを実現しています。 ボタンの形となる g.FilledRect に onPointDown でクリック時の動作、onPointUp でクリックが離れた時の動作を追加しています。

関連情報

• クリック・タップできるようにする
• 複数のエンティティをまとめて扱う