【GDevelop】そこそこ役立つ Developer Tools で出来ること

GDevelop 自体が Electron で作られているため Chrome DevTools が利用できます！って言われてもナンノコッチャな方もいるかと思います🤔❓

まぁ「プレビューでデバッグに使える便利ツールが付いてるんだな」って覚えておけば OK です👍

このページでは、その便利ツール（Developer Tools）の使い方をざっくり紹介します。
※ とても多機能なので GDevelop でよく使う機能だけの紹介です。

なお、似た機能に GDevelop 自体が提供する「デバッガー」がありますが、それとは別物です。

Developer Tools の開き方

プレビューウィンドウで、Windows なら「Ctrl + Shift + i」、Mac なら「Option + Command + i」というショートカットキーで、Developer Tools が表示されます。

GDevelop の環境設定で、プレビューウィンドウのメニューバーを非表示にしていないのなら、メニューの「表示」内にある「Developer Tools を表示」から表示することもできます。

すると、こんな感じ↓のウィンドウが表示されます。

これが Developer Tools です。

あ、もしかしたらプレビューウィンドウにドッキングした状態で開かれるかもしれません。
別ウィンドウに分けたい、またはドッキング位置を変更したい場合は、次の画像が示すメニューから変更することができます。

ストレージ機能で保存されたデータを確認・編集する

プレビューウィンドウに保存されているストレージの値は、Developer Tools で確認・編集することができます。

ストレージの値を確認する画面は「Application」タブの「Storage → Local Storage → file://」と選択することで表示されます。

「Value」列の項目をダブルクリック、またはコンテキストメニュー（右クリックメニュー）の「Edit "Value"」を選択することで、値を編集できます。

データを消したいときは、対象の行を選択して「✖」（Delete Selected）ボタンを押すとか、「Delete」キーを押すとか、コンテキストメニューから「Delete」を選択するとかすれば消せます。

Console でメッセージを確認する

「Console」タブではメッセージのログを確認したり、Javascript を実行したりできます。

GDevelop ではメッセージの確認のために利用することが多かったのですが、v5.0.121 からデバッガーにコンソール機能が追加されたので、あまり Developer Tools の Console は利用しなくなると思います。

それでも、こちらにしか表示されないクリティカルなメッセージとかもあるので、なんかエラー出てるかも、みたいな時にはこちらも確認してみましょう。

他にもいろいろな機能があるけど、GDevelop で使うのはこんなところかな。
今後、気がついたことがあったら追記します🤤

コメント

コメントを投稿

このブログの人気の投稿

【GDevelop】セーブデータは暗号化しよう！

イメージ
GDevelop でセーブ機能を実装したいときは、多くの場合「ストレージ」機能を使うことになると思います。 このストレージ機能は、PC でもスマホでも、アプリでもブラウザ（HTML5）でも、ちゃんと機能してくれるのでとても重宝するのですが、実は簡単にセーブデータをいじれてしまうという弱点があります。 特に HTML5 ゲームがやばい GDevelop のストレージ機能はゲームが HTML5 で配信される場合は、Web Storage という機能を利用してデータを保存します。 しかし、この Web Storage はブラウザの標準機能で簡単に閲覧・書き換えができてしまいます。 Chrome ならデベロッパー ツール（DevTools） Edge なら開発者ツール（DevTools） Firefox なら開発ツール Safari なら Web インスペクタ つまりそれを知っているプレイヤーは、勝手にセーブデータを書き換えてズルができてしまうのです😥 そのため HTML5 で配信される、いわゆるブラウザゲームのほとんどは、Web Storage に保存するデータを暗号化しています。 （そもそも大事なデータは Web Storage ではなく、サーバー側に保存していたりしますが……） 実はセーブデータを暗号化してくれるゲームエンジンは意外と少なく、多くの場合、各自で独自の防衛策を講じる必要があります。 （国産ゲームエンジンはしてくれるの多いけど😉） 残念ながら今の GDevelop（v5.0.121）のストレージ機能にも、暗号化をしてくれる機能はありません。 そこでこのページでは、簡単にセーブデータを改竄（かいざん）されないようにするための、基本的な暗号化方法についてご紹介します。 なお、アプリで配信する場合も、セーブデータがどのように保存されているか私が知らないだけで、もしかしたら Web Storage 同様、簡単に操作できてしまう状態かもしれないので、HTML5 ゲームと同様に暗号化しておくことをお勧めします。 暗号化に利用できる拡張機能の紹介 そのものズバリな拡張機能はありませんが、組み合わせることでセーブデータを暗号化することができる拡張機能をご紹介します。 拡張機能をインストールする方法については「 新しい拡張機能のインストールの仕方 」をご覧くださ...
続きを読む

実は奥（闇）が深い「真のあいだ一度だけ実行（一度だけ実行する）」条件を使いこなそう【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 の「イベント」を正しく理解しよう

イメージ
特にプログラミング経験者がおちいりやすい罠なのですが、GDevelop の「イベント」は「if文」（条件分岐）ではありません。 このことは公式 Wiki でもサラッとしか説明されていないため、誤解したままイベントを if 文と同じように利用してしまうと、その独特な挙動に悩まされることになります。 ゲーム作りの基本コンセプト：GDevelop を使うために知っておきたいこと「イベントとそれがいかにしてオブジェクトを選択するか」 確かにイベントは if 文と同じ役割を果たす面もありますが、イベントの役割はそれだけではなく、 対象のオブジェクト（インスタンス）を絞り込み 、その上で絞り込まれたインスタンスに対し 一括でアクションを実行する事ができる 、という特徴があります。 例えば、次の画像のようなシーンで、ミサイルが当たっている戦車のみ削除したい場合は…… 次の画像のようなイベントを設定するだけで、ミサイルが当たっている戦車のみ削除することができます。 これは、イベントの条件で「ミサイルに衝突している戦車」のみにインスタンスが絞られたため、そのイベントのアクションで戦車を削除すると、ミサイルと衝突している戦車だけが削除されるという仕組みです。 このような特徴により、わざわざ次の画像のようにインスタンスをひとつずつ参照して、衝突しているか確認するようなイベントの組み方をする必要はありません。 （希望通りの動作はしますが、イベントの仕組みを正しく理解していない組み方です） さらに、この絞り込まれたインスタンスは、サブイベントにも引き継がれます。 例えば次の画像のように、それぞれの戦車にインスタンス変数を持たせて、異なる番号を割り当てたシーンならば…… 次の画像のようなイベントにすることで、ミサイルとの衝突時に戦車を ID ごとに異なるアニメーションに変化させることができます。 これは、最初のイベントでミサイルと衝突している戦車のみに絞り込み、更にサブイベントで ID が一致する戦車のみに絞り込むことで、それぞれ異なるアクションが実行される仕組みです。 なお、条件に該当するオブジェクトがない場合は、そのイベントのアクションは実行されません。 では、これまでの例とは異なり「戦車のどれか1輌にでもミサイルが当たったら、3輌全て消す」には、どうしたら良いかというと…… 上の画像のよ...
続きを読む