スクロールできるリスト型の UI を作れる GDevelop 拡張機能を作ったよ

スクロールできるリスト型の UI を簡単（？）に作れる拡張機能（エクステンション）を作成してみました。

詳しくはフォーラムの投稿をご覧ください。

実際に使用している様子の動画はこちら↓

色々なシーンで使えるので便利だよ👺
ご自由にご利用ください。

コメント

コメントを投稿

このブログの人気の投稿

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

イメージ
同じ画像をタイルのように敷き詰めたい時に便利なタイルスプライトオブジェクトを利用して、流れる背景の作り方を紹介します。 こういうのです↓ 超簡単にできるのに、これだけで背景に動きが出ておしゃれ（？）になるので、おすすめです😉 なお、似たようなオブジェクトで「タイルマップ (Tilemap)」オブジェクトというものもありますが、ここで使用するのは「タイルスプライト」オブジェクトなので、間違えないように注意してください。 手順その1　タイルスプライトを追加する 敷き詰めたい画像を使用して、タイルスプライトを用意しましょう。 例えば↑この画像を使って↓こんな感じです。 タイルスプライトが用意できたら、シーンへ追加して必要な大きさに引き伸ばしましょう。 手順その2　イベントでスクロールさせる タイルスプライトの画像オフセットアクションで、画像の起点をズラすことができます。 それを利用して、画像をスクロールさせます。 ※タイルスプライト自体は動きません。 フレームごとに「画像Xオフセット」アクションと「画像Yオフセット」アクションで、タイルスプライトの画像を少しずつズラします。 ↑この画像では「画像Xオフセット」アクションで、1を足してズラしてます。 Y についても同様に +1 してズラしましょう。 完成したイベントがこちら↓ 完成！ シーンをプレビューしてみましょう。 左上に向かって画像の星が動いていれば完成です！👏 数値を変えたり、足したり引いたりすると、動く方向や速度が変えられます。 お試しあれ😉
続きを読む

実は奥（闇）が深い「真のあいだ一度だけ実行（一度だけ実行する）」条件を使いこなそう【GDevelop】

イメージ
便利すぎてついついお世話になってしまう「真のあいだ一度だけ実行」条件ですが、使い込んでいくと「あれ？この場合どうなるの？」という状態におちいりやすい条件でもあります。 そこで、このページでは「真のあいだ一度だけ実行」条件が、実際にはどのように機能しているのか、例をまじえて解説します。 ※ 執筆時点の GDevelop バージョンは 5.4.213 です。 ※ 以降「真のあいだ一度だけ実行」だと長いので「一度だけ実行する」と表記します。 よくある勘違い「インスタンスごとにチェックしてる」 例えばこのようなイベントを組んだとき↓ 各戦車が一度だけX方向に100px動く X座標は0で配置されている戦車はプレビューすると…… 3両全て一度だけ100px移動します。 このことから「一度だけ実行する」条件はインスタンスごとにチェックしてる、 と思ってはいけません！ 偶然それっぽく機能しているだけです。 では、今度はこのようなイベントを試してみます↓ 3回、Y座標が100の戦車を一度だけX方向に100px動かす 3回＆一度だけ、というちょっと意味不明なイベントですが、プレビューした結果はこのようになります↓ 「一度だけ実行する」条件が設定されているにも関わらず、Y座標が100の戦車（つまり一番上のみ）が、3回100px移動しています。 もしインスタンスごとにチェックしているのであれば、一度しか移動しないはずですが、そうはなりませんでした。 ちょっと何が言いたいのか分からないから早く結論（仕組み）を言え！ はいごめんなさいｗ😅 「一度だけ実行する」条件は、インスタンス単位ではなくイベント単位でチェックされています。 このことは 公式ドキュメント（英語） にも記載されています。 いやいやちょっと待て！イベント単位ならさっきの例の結果はおかしいだろ！ 確かに上記の例は、どちらもイベント単位でチェックしているとは思えない結果になっていますが、これは繰り返しを利用しているからそのような印象になるだけです。 繰り返しを個々のイベントに分解してみると分かりやすくなります。 まず最初の例は、以下のように分解することができます↓ 各インスタンスの判別にはY座標を利用 これなら3両全てが一度だけ移動したことにも、納得がいくかと思います。 続いて2つ目の例も分解してみましょう↓ まったく...
続きを読む

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

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