投稿

ラベル(スプライト)が付いた投稿を表示しています

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

イメージ
基本的なことなのに意外とボタンの作り方って情報が少ないので、私流の方法ですが作り方を紹介します第二弾。 シンプルな第一弾はこちら↓ 「 シンプルなボタンの作り方 」 PC 向け:マウスオーバーできるボタンの作り方 マウスが重なったり押している時に画像が変わる、よくある感じのボタンの作り方です。 1. スプライトを用意する ボタン用のスプライトオブジェクトを作ります。 このスプライトには、通常時の「normal」と、マウスオーバー時の「hover」、押したときの「press」というアニメーションを設定します。 2. シーンに配置する ぽいっとする。 3. イベントを組む たかだかボタン 1 つ作るだけで 4 つもイベント作らなければいけないので、まあまあ手間ですw イベントを 1 つずつ順に説明します。 1 つ目のイベントは、条件がないので毎フレーム実行されます。 ここでは、毎回ボタンのアニメーションを「normal」に戻しています。 2 つ目のイベントで、マウスカーソルが重なっているときの動作を設定しています。 条件でマウスカーソルがボタンの上にあるかをチェックして、マウスカーソルが上にある場合は、そのボタンのアニメーションを「hover」に変更します。 さらに以下のサブイベントが、そのボタンのみを対象として実行されます。 3 つ目のイベントでは、ボタンが押し込まれているときの動作を設定しています。 マウスボタン(左クリックが指定されています)が押されているかチェックして、押されているならボタンのアニメーションを「press」に変更します。 4 つ目のイベントで、ようやくクリックしたときの動作を設定します。 マウスボタン(左クリックが指定されています)が放されたかチェックして、放されたならアクションを実行します。(ここではゲームを終了する) ボタンの機能によっては、3 つ目の時点で目的のアクションを実行しても良いですが、その場合は押している間ずっと実行されないようにする工夫も、必要になるかもしれません。 たくさん作るの大変……そんな時は! 上記のタイプのボタンは押してる感があって良いのですが、ボタン 1 つにつき 4 つもイベントを作らなければならないので、たくさんのボタンが有るシーンを作りたいときは、このままではかなり面倒くさいことになります。 そんな時は、オブジ...

GDevelop でシンプルなボタンの作り方

イメージ
基本的なことなのに意外とボタンの作り方って情報が少ないので、私流の方法ですが作り方を紹介します。 ここでは、クリックするとアクションするだけの、最も単純なボタンの作り方を紹介します。 もう少し手の込んだボタンが作成したい場合は「 マウスオーバーできるボタンの作り方 」をご覧ください。 1. スプライトを用意する ボタン用のオブジェクトには、主にスプライトオブジェクトかパネルスプライト(9パッチ)が利用されます。 用意できたらシーンに配置しましょう。 2. イベントを組む 「マウスボタンを放した直後」と「カーソル/タッチはオブジェクト上にある」の条件を組み合わせて、イベントを作りましょう。 ↓この条件と、 ↓この条件を使って、 ↓こんな感じにします(雑w) この例では、ボタンをクリックするとシーンの背景色が変わります。 ポイントは、マウスを押しているかチェックしてから、サブイベントでどのボタンの上にカーソルがあるかをチェックしている点です。 ↓下の画像のように個別にチェックしても機能しますが、複数のボタンがあるシーンでは、先の例に比べると無駄な処理が発生してしまいます。(同じチェックを繰り返しています) サブイベントを利用して、効率よく処理できるように組みましょう😉 おしまい!

【GDevelop】意外とややこしいスプライトの反転

イメージ
GDevelop はゲームエンジンとしては珍しく、今のところ(v5.0.0-beta103)エディター上でスプライトを反転させることができません😢 反転させるにはイベントで、スプライトに反転エフェクトをかける必要があります。 このアクションです↓ 水平方向、または垂直方向に反転させることができます。 もちろん水平反転させてから垂直反転する、といったことも可能です。 なお、他のゲームエンジンでは、サイズやスケールの値をマイナスにすることで反転させることができたりしますが、GDevelop ではそれらの値をマイナスに設定することはできません。(0 になります。つまり見えなくなります💦) ⚠ エディター上で無理やりマイナス値にすると、一見それっぽくなりますが、実行時には 0 になり見えなくなります。 反転時の当たり判定とポイントについて スプライトには当たり判定やポイントを設定できます。 それらはスプライトが反転されると以下のように変わります。 まず当たり判定は、デフォルトの衝突マスクでも、カスタム衝突マスクでも、スプライトに合わせて反転してくれます。 これは多くの場合、期待通りに機能してくれるでしょう。 次にポイントについてですが、こちらは少々ややこしいです。 そもそもポイントには最初から「Origin」と「Center」が設定されています。 Origin は原点を指していて、スプライトの位置(X と Y の値)で使用されるポイントです。 Center は中心を指していて、スプライトの回転や反転するときの基準となるポイントです。 この2つのポイントは、反転しても反転しません(分かりにくいw) しかし、独自に追加したポイントは反転します😵 具体的に例を見てみましょう。 スプライトには、このようにポイントが設定されていた場合↓ 分かりにくいけど赤丸のところに追加した「Point」というポイントがあります。 そのスプライトを反転させると、それぞれのポイント位置は、このようになります↓ 赤い+ は Origin、 黄色い+ は Center、 水色+ は Point スプライトが反転しても、Origin は反転していません。 そのためスプライトの位置(X と Y)も反転前と変わりません。 Center はそもそも反転の基準となっているため、同じ位置のままです。 そして独自...

このブログの人気の投稿

【GDevelop】タイルスプライトで作る流れる背景

【GDevelop】2026年1月よりサブスク値上げ。既存ユーザーへの「神対応」と、今すぐ入るべき理由。

GDevelop でシンプルなボタンの作り方