GDevelop でマウスオーバーできるボタンの作り方

基本的なことなのに意外とボタンの作り方って情報が少ないので、私流の方法ですが作り方を紹介します第二弾。

シンプルな第一弾はこちら↓
「シンプルなボタンの作り方」

PC 向け：マウスオーバーできるボタンの作り方

マウスが重なったり押している時に画像が変わる、よくある感じのボタンの作り方です。

1. スプライトを用意する

ボタン用のスプライトオブジェクトを作ります。

このスプライトには、通常時の「normal」と、マウスオーバー時の「hover」、押したときの「press」というアニメーションを設定します。

2. シーンに配置する

ぽいっとする。

3. イベントを組む

たかだかボタン 1 つ作るだけで 4 つもイベント作らなければいけないので、まあまあ手間ですｗ

イベントを 1 つずつ順に説明します。

1 つ目のイベントは、条件がないので毎フレーム実行されます。
ここでは、毎回ボタンのアニメーションを「normal」に戻しています。

2 つ目のイベントで、マウスカーソルが重なっているときの動作を設定しています。
条件でマウスカーソルがボタンの上にあるかをチェックして、マウスカーソルが上にある場合は、そのボタンのアニメーションを「hover」に変更します。
さらに以下のサブイベントが、そのボタンのみを対象として実行されます。

3 つ目のイベントでは、ボタンが押し込まれているときの動作を設定しています。
マウスボタン（左クリックが指定されています）が押されているかチェックして、押されているならボタンのアニメーションを「press」に変更します。

4 つ目のイベントで、ようやくクリックしたときの動作を設定します。
マウスボタン（左クリックが指定されています）が放されたかチェックして、放されたならアクションを実行します。（ここではゲームを終了する）

ボタンの機能によっては、3 つ目の時点で目的のアクションを実行しても良いですが、その場合は押している間ずっと実行されないようにする工夫も、必要になるかもしれません。

たくさん作るの大変……そんな時は！

上記のタイプのボタンは押してる感があって良いのですが、ボタン 1 つにつき 4 つもイベントを作らなければならないので、たくさんのボタンが有るシーンを作りたいときは、このままではかなり面倒くさいことになります。

そんな時は、オブジェクトグループ機能を利用すると少し楽ができます。

1. たくさんのボタンをオブジェクトグループでまとめる

↓こんな感じでボタンだけのグループを作ります。

なお、すべてのオブジェクトのアニメーション名は統一しておきましょう。
ここでは「normal」と「hover」と「press」としています。

2. オブジェクトグループに対してイベントを組む

オブジェクトのアニメーションを変更する仕組みは、上記のイベントと同じ仕組みですが、対象がオブジェクトグループになっている点（赤線部分）に注意してください。

このように共通のイベントは、対象をオブジェクトグループにすることで、個別に組む必要がなくなります。

その上で、青カッコの部分の条件でオブジェクトの種類を判別し、それぞれのアクションへ振り分けています。

マウスオーバーは、あきらめるパターン

本題ガン無視ですが、マウスオーバーをしなくても良ければ、イベントをよりシンプルにすることができます。

詳しくは「シンプルなボタンの作り方」をご覧ください。

特に「マウスカーソルが重なる」という状況がないスマホ向けの場合は、こちらの方法で充分です。

おしまい

この手のお決まりイベントは、ビヘイビアにしてしまえば使い回せてさらに楽になりますが、それはまた別の投稿で……😅