オレンジブログ

オレンジブログ

自作ゲームについてとか色々

ImGuiを使用してGameMakerの開発をもっと便利にしよう!!

ImGuiって超便利ですよね。
そんなImGuiをGameMakerで使えるのであれば、GameMakerでの開発を便利にする機能を作りたくなってしまうのも仕方ありません。
というわけで、今回はGameMaker内で汎用的に使えるデバッグ機能をImGuiで作ってきたのでそれの公開と解説を行おうと思います。
ImGuiってなんぞや?って方や、GameMakerへの導入方法を知りたいという方はこちらの記事を読んでください。
orangelily.hatenablog.com

スタートガイド

ダウンロード

下記から私の作ったImGuiGml拡張アセットをダウンロードできます。
www.dropbox.com
もしくはこちら
drive.google.com


※注意
GameMakerにImGuiが導入されていることが前提です。
ImGuiが導入されていないとビルドエラーになるため注意してください。
導入方法がわからない人は、こちらで解説しているので良ければ閲覧ください。
orangelily.hatenablog.com

インポート

上記でダウンロードしたファイルを解凍してください。(解凍方法がわからなかったら zip 解凍 等で調べてください)
GameMaker Studio 2で、デバッグ機能を導入したいプロジェクトを開きます。

画面上のツールからローカルパッケージのインポートを選択します。

アセットのインポート

そしたらエクスプローラーが開くので、先ほど解凍したフォルダの中に入っている「imguigml_extender.yymps」ファイルを選択します。

imguigml_extenderを選択

そしたらインポートするフォルダを選択する画面が表示するので、「すべて追加」を選択して「インポート」をクリックします。

インポート

これでインポートは完了です。

セットアップ

インポートが完了したら、まずはimguigml_extenderを使うための準備をします。
ゲーム起動時、最初に遷移するroomを開いてください。
(家のマークがついているroomか、このマークが無ければroomアセットで一番上に存在するroomになります)

これ

そしたらインスタンスレイヤーを開いて、imguigml_extenderフォルダの中のimguigml_extender_objectフォルダ内にある「obj_imguigml_manager」を配置します。

このプロジェクトはGameMaker公式サンプルです。試しにimguigml_extenderを導入してます

画像ではroomの左上に配置していますが、どこに配置しても動作は変わりません。

そしたらF6(F5じゃありません)でデバッグビルドでゲームを開始します。

このサンプルゲーム結構面白かった

このように、左上に「Menu List」と表示されていればセットアップ完了です。

使い方

今回私の方では下記5つのメニューを用意しました。

メニュー 内容
レイヤー レイヤー内の情報を表示する機能です。オブジェクトやタイル、背景等全部表示できます
インスタンス オブジェクトをメインとしたメニューです。アセット内にあるオブジェクトを生成したりすることができます
ルーム ルームの情報を表示します。また、好きなルームに移動できます
音楽 サウンド関係のメニューを開きます。好きな音を再生できます
グローバル変数 グローバル変数の一覧を表示します

雑にメニューを開くだけでもある程度わかるようにはなっていますが、それでも情報量が多かったりするので解説しようと思います。

レイヤーメニュー(Show layer menu)

現在のルームのレイヤーを表示します。

左の青がエディタでの表示。右の赤がデバッグメニューの表示

それぞれのレイヤーをクリックすると、レイヤー内のエレメントを表示できます。
インスタンスレイヤーの場合はオブジェクトインスタンスが、アセットレイヤーならスプライトが一覧されます。

インスタンスレイヤーを開いた場合

この時「show 〇〇(レイヤー名) layer debug window」というボタンを押すと、レイヤーメニューを開くことができます。
レイヤー単位でのVisibleの切り替え等設定ができます。

レイヤーチカチカ
インスタンスレイヤー

インスタンスレイヤーの場合はオブジェクト毎にグループ分けされて表示され、
指定したオブジェクトのデバッグメニューを表示することができます。

コインを表示

タブが4つあるので1つ1つ説明しようと思います。
また、今回はオブジェクトインスタンスでの説明しか行いませんが
スプライトでも専用のデバッグメニューが表示されます。

・basic info
オブジェクトの基本的な情報を表示しています。
visibleやsolid等切り替えることもできます。

また、Destroyボタンを押せばオブジェクトを破棄することもできます。邪魔なオブジェクトがあったら消しちゃいましょう。

destroy

・ sprite info
そのオブジェクトのスプライト画像の情報を表示します。

sprite info

image_speedとかを変更できます。

・speed direction info
速度、角度情報を表示します。
hspeedとかvspeedとかをいじってオブジェクトを移動させている時は重宝します。

このサンプルだとspeedは使っていないみたい

・ variable info
そのオブジェクト内の変数を表示します。

変数

変数名や値がわかります。また、型によってそれぞれ値を変更できるようにしてあります。
例えば、bool値ならチェックボックスが表示されてtrueとfalseを切り替えたりできます。
数値であれば入力式で数値を切り替えることができます。

その他の機能

Ctrlキーを押しながら左クリックをすることで、クリックした位置のオブジェクトのデバッグメニューを表示できます。

コインをクリックしてみた

今選択中(枠が黄色になっている状態)でマウスホイールクリックした状態でそのオブジェクトをクリックしてマウスを動かすと、そのオブジェクトを移動させれます。

コインを移動させてプレイヤーに接触させる

他にも背景レイヤーの場合だと背景スピードをいじれたり、
エフェクトが設定されているレイヤーだとエフェクトの値をいじれたりします。

エフェクトはパラメータが多すぎる...

インスタンスメニュー(Show instance menu)

オブジェクトアセットメニューとも言います。

アセット内のオブジェクトが一覧されている

メニューからオブジェクトを選択して、それを生成することができます。

コインを生成してそれを取得する

フィルタ機能もあるので、オブジェクト数が多い場合でも問題ありません。
敵オブジェクト等も追加できるので、レベルデザイン等に役立ちます。

ルームメニュー(Show room menu)

ルームの情報を表示するメニューです。

ルームメニュー

オブジェクトアセットメニューと同様に、アセット内のルームがすべて表示されます。
また、選択したルームに好きに移動することができます。(go to roomボタンを押す)

ルーム移動が結構便利なので活用する機会は多いのかなと思います。

音楽メニュー(Show audio menu)

サウンド関係のデバッグ表示を行います。
このメニューを表示している間はGameMakerが用意してくれた音楽用のデバッグ表記が行われます。

画面上部の文字がGameMakerが用意してくれたデバッグ表示

オブジェクトやルームのアセットメニューと同じく、アセット内のサウンドが全て表示されます。
好きなサウンドを選んで1回再生かループ再生かを選ぶことができます。
音量やピッチなども変更できるので、色々調整できると思います。

グローバル変数メニュー(Show global variable menu)

名の通り、宣言されたグローバル変数を一覧表示します。
値を変更できるようにもなっているので、デバッグで色々試したい時に便利です。

ImGui系のメニューが表示されているのは仕様です

終わりに

全部の機能は紹介しきれなかったんですけど、ひとまず便利な部分は紹介できたかなと思います。
また、imguigml_extender導入後、自分でメニューを追加することもできますので
自分だけのデバッグメニューも作ることができます。

デバッグ機能がよく作られているゲームの開発はスムーズに進みます。これは間違いありません。
良かったら今回自分が作ったImGuiの拡張機能をインポートして使ってみてください!
そしてImGui沼に浸かってください。ほんと良いんですよこれ。