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を使うための準備をします。
ゲーム起動時、最初に遷移するroomを開いてください。
(家のマークがついているroomか、このマークが無ければroomアセットで一番上に存在するroomになります)
そしたらインスタンスレイヤーを開いて、imguigml_extenderフォルダの中のimguigml_extender_objectフォルダ内にある「obj_imguigml_manager」を配置します。
画像ではroomの左上に配置していますが、どこに配置しても動作は変わりません。
そしたらF6(F5じゃありません)でデバッグビルドでゲームを開始します。
このように、左上に「Menu List」と表示されていればセットアップ完了です。
使い方
今回私の方では下記5つのメニューを用意しました。
| メニュー | 内容 |
|---|---|
| レイヤー | レイヤー内の情報を表示する機能です。オブジェクトやタイル、背景等全部表示できます |
| インスタンス | オブジェクトをメインとしたメニューです。アセット内にあるオブジェクトを生成したりすることができます |
| ルーム | ルームの情報を表示します。また、好きなルームに移動できます |
| 音楽 | サウンド関係のメニューを開きます。好きな音を再生できます |
| グローバル変数 | グローバル変数の一覧を表示します |
雑にメニューを開くだけでもある程度わかるようにはなっていますが、それでも情報量が多かったりするので解説しようと思います。
レイヤーメニュー(Show layer menu)
現在のルームのレイヤーを表示します。
それぞれのレイヤーをクリックすると、レイヤー内のエレメントを表示できます。
インスタンスレイヤーの場合はオブジェクトインスタンスが、アセットレイヤーならスプライトが一覧されます。
この時「show 〇〇(レイヤー名) layer debug window」というボタンを押すと、レイヤーメニューを開くことができます。
レイヤー単位でのVisibleの切り替え等設定ができます。
インスタンスレイヤー
インスタンスレイヤーの場合はオブジェクト毎にグループ分けされて表示され、
指定したオブジェクトのデバッグメニューを表示することができます。
タブが4つあるので1つ1つ説明しようと思います。
また、今回はオブジェクトインスタンスでの説明しか行いませんが
スプライトでも専用のデバッグメニューが表示されます。
・basic info
オブジェクトの基本的な情報を表示しています。
visibleやsolid等切り替えることもできます。
また、Destroyボタンを押せばオブジェクトを破棄することもできます。邪魔なオブジェクトがあったら消しちゃいましょう。
・ sprite info
そのオブジェクトのスプライト画像の情報を表示します。
image_speedとかを変更できます。
・speed direction info
速度、角度情報を表示します。
hspeedとかvspeedとかをいじってオブジェクトを移動させている時は重宝します。
・ variable info
そのオブジェクト内の変数を表示します。
変数名や値がわかります。また、型によってそれぞれ値を変更できるようにしてあります。
例えば、bool値ならチェックボックスが表示されてtrueとfalseを切り替えたりできます。
数値であれば入力式で数値を切り替えることができます。
インスタンスメニュー(Show instance menu)
オブジェクトアセットメニューとも言います。
メニューからオブジェクトを選択して、それを生成することができます。
フィルタ機能もあるので、オブジェクト数が多い場合でも問題ありません。
敵オブジェクト等も追加できるので、レベルデザイン等に役立ちます。
ルームメニュー(Show room menu)
ルームの情報を表示するメニューです。
オブジェクトアセットメニューと同様に、アセット内のルームがすべて表示されます。
また、選択したルームに好きに移動することができます。(go to roomボタンを押す)
ルーム移動が結構便利なので活用する機会は多いのかなと思います。
GameMakerStudio2でImGuiを使用する方法
はじめに
最近GameMaker Studio2(以下GMS2)のライセンスが更新されて、無料でWindowsビルドとかが出来るようになりました。
これ以降GMS2ユーザーも増えるのかなぁとワクワクしています。
そこで、ImGuiと言うGMS2で使用できる便利なライブラリを紹介しようと思います。
どういったライブラリかと言うと
- ゲーム内にGUIウィンドウを表示させて、そこに描画することが出来る
- 描画できる内容は文字列だけでなく、クリックしたら動作するボタンや、スライダーやプルダウンまで存在
- 1行でテキストの表示ができ、シンプルなコード記述で実装可能
- さらにデフォルトでマウス操作が可能なので、入力周りを実装する必要は無い
と、至れり尽くせりなライブラリとなっております。
その他にも機能は多く存在しますが、ボリュームが大きくなるのでそれは別途解説致します。
上記の機能は主にデバッグ機能として使用できるので、どんなゲームを作っていても参考になると思います。
※注意
htmlビルドでは使用できないため注意。
htmlビルドでは使用できないため注意。
ImGuiって？
デバッグ機能等を作ることを目的としたC++向けのGUIライブラリです。
見た目や機能がシンプルで、簡単なコードを記述するだけでUIが作れるのでデバッグ機能やツールを作るのに非常に向いているものですね。
詳しくはこちら。
https://github.com/ocornut/imgui
サンプルコードを読めば分かりますが、1行でテキスト表示やボタンの実装など行えて使いやすいです。
非常に使いやすく、企業や実際のゲーム開発現場でも使われているほどメジャーで実績もあります。
GameMakerへの導入
さて、上で説明したImGuiですが、元々はC++ライブラリなのでそのままGameMakerに導入することは出来ません。
そこで、既に拡張機能としてGameMaker内でImGuiのコードを使えるようにしてくれたものがあるのでそちらを使います。(非常に重宝してます。作者さんありがとうございます！)
アセットのダウンロード
制作者様のサイトにアクセスして最新版をダウンロードします。
nommiiin.itch.io
サイト内下の方の「Download Now」のボタンをクリックします。
そしたらダウンロード画面が出てきて、よかったらサポートしていただけますか？というポップアップが出てきます。
一旦お試しでダウンロードするので「No thanks, just take me to the downloads」をクリックします。
気に入ったらサポーターになって製作者様を支援しましょう！
次のページに飛んだら、ダウンロードするバージョンを選択します。
一番上のバージョンの「Download」ボタンを押しましょう。(2023/12/10現在 v1_0_15)
「imgui_gm_v1_0_〇〇.yymps」のような名前のファイルがダウンロードされればOKです。
インポート
ダウンロードしたらGameMakerを起動して導入したいプロジェクトを開きます。
上記でダウンロードしたyympsファイルをプロジェクトにドラッグアンドドロップでインポートします。
下記のようなポップアップが出てくるので「はい」をクリックします。
そしたら追加するファイル一覧が表示されるので「[すべて追加]」を選択してインポートするリソースに全フォルダを入れてから左下の「インポート」をクリックします
「Example」「ImGui_GM」フォルダがプロジェクトに追加されていれば成功です。
使い方
セットアップ
ImGuiをGameMaker内で使用するためには、専用のオブジェクトを作成する必要があります。
1つImGui用のオブジェクトを作成してください。
自分はわかりやすく「obj_imguigml_manager」と名前を付けました。名前はなんでも大丈夫です。
そしたらCreateイベント(作成)を作り、中に下記を記述します。
/// @description imguigmlを使用するための管理オブジェクト // このエディターでコードを作成することができます // ImGuiを初期化 ImGui.__Initialize();
次にBegin_Stepイベント(ステップ前)を作り、中に下記を記述します。
/// @description ImGui.__Update()を回す // このエディターでコードを作成することができます // 更新処理 ImGui.__Update();
最後にDraw_GUIイベント(GUI 描画)を作り、中に下記を記述します。
/// @description ImGui.__Render()で描画 // このエディターでコードを作成することができます // 描画処理を回す ImGui.__Render();
これでImGuiを使用する準備が出来ました。このオブジェクトを描画したいRoomに配置します。
Roomを超えて使用したい場合はpersistant(持続的)にチェックを付けてください。
ウィンドウの描画
では次に、ImGuiのウィンドウを描画していきます。
先ほど作ったオブジェクトのCreateイベントに下記のコードを追加します。
// メニューを開いているかを管理するフラグ is_menu_open = true;
そしたら新たにStepイベント(ステップ)を作り、中に下記を記述します。
/// @description デバッグ用にメニューを作る // このエディターでコードを作成することができます if(is_menu_open){ // windowサイズを指定。とりあえず画面の半分で ImGui.SetNextWindowSize(room_width / 2, room_height / 2, ImGuiCond.Once); var is_begin = ImGui.Begin("ImGui_GM Example", is_menu_open, ImGuiWindowFlags.None, ImGuiReturnMask.Both); // 引数に送ったis_menu_openの参照の値を取得 is_menu_open = is_begin & ImGuiReturnMask.Pointer; // is_beginの戻り値がtrueなら if(is_begin & ImGuiReturnMask.Return){ // ここにウィンドウ内の機能を記述する } // ImGui描画終了 ImGui.End(); }
ここまで記述した状態で、試しにゲームを実行してみましょう。
こんな感じでウィンドウが表示されていれば成功です。
右下にカーソルを合わせて左クリックしてマウスを動かすと、ウィンドウサイズを変えることができます。
他にも、ウィンドウの上の青い部分をダブルクリックすることで半透明化させて一時的に無効にしたり(もう一回ダブルクリックで元に戻る)
ウィンドウの右上の×を押すことでウィンドウを閉じれます。
ウィンドウ内に機能を追加
ここからは先ほど作ったウィンドウに機能を追加していきます。
流石にこの記事で全ての機能は紹介できませんので、よく使う機能をピックアップして紹介します。
もし他にも気になる方がいましたら、Example内に入っている「objExample」を確認してください。
テキストの表示
まずはウィンドウ内にテキストを表示してみましょう。
ウィンドウ内にテキストを表示する際には、ImGui.Textと記述し、引数に表示したい文字列を渡します。
ImGui.Text(文字列);
試しに先ほど作ったウィンドウにテキストを表示してみましょう。
Stepイベントを下記のように修正します。
/// @description デバッグ用にメニューを作る // このエディターでコードを作成することができます if(is_menu_open){ // windowサイズを指定。とりあえず画面の半分で ImGui.SetNextWindowSize(room_width / 2, room_height / 2, ImGuiCond.Once); var is_begin = ImGui.Begin("ImGui_GM Example", is_menu_open, ImGuiWindowFlags.None, ImGuiReturnMask.Both); // 引数に送ったis_menu_openの参照の値を取得 is_menu_open = is_begin & ImGuiReturnMask.Pointer; // is_beginの戻り値がtrueなら if(is_begin & ImGuiReturnMask.Return){ // Test用のテキストを表示 ImGui.Text("Test"); } // ImGui描画終了 ImGui.End(); }
こんな感じで指定したテキストが表示されれば成功です。めちゃくちゃ簡単ですよね！
動的にテキスト内容を変更することができるので、デバッグ表示機能として非常に優れています。
例えば、下記のようなコードを記述すればマウスの座標を表示することができます。
// マウスの座標を表示 ImGui.Text("mouse_pos " + string(mouse_x) + ", " + string(mouse_y));
実際にマウスを動かして値が変わるのを確認してみましょう。
ボタンの追加
次はボタン機能を追加します。
クリックしたら何かを実行する機能なので、何かしらをデバッグメニューから実行したい時に使えます。
こちらも非常に汎用性が高いので、是非使い方を覚えましょう。
ボタンは下記のコードで追加することができます。
// ボタンの描画
ImGui.Button(ボタン名);
ImGui.Buttonの戻り値が、クリックされた時のみtrueが返ってくるので、下記のようにif文を使用することで
クリックされたときに動作するコードを記述できます。
if (ImGui.Button("Clicked Log!!")) { // クリックした実行した内容を記述 }
Stepイベントを下記のように修正し、ボタンを押したらログを表示するようにしてみます。
if(is_menu_open){ // windowサイズを指定。とりあえず画面の半分で ImGui.SetNextWindowSize(room_width / 2, room_height / 2, ImGuiCond.Once); var is_begin = ImGui.Begin("ImGui_GM Example", is_menu_open, ImGuiWindowFlags.None, ImGuiReturnMask.Both); // 引数に送ったis_menu_openの参照の値を取得 is_menu_open = is_begin & ImGuiReturnMask.Pointer; // is_beginの戻り値がtrueなら if(is_begin & ImGuiReturnMask.Return){ // Test用のテキストを表示 ImGui.Text("Test"); // マウスの座標を表示 ImGui.Text("mouse_pos " + string(mouse_x) + ", " + string(mouse_y)); // ボタンを作り、ボタンをクリックしたらログを出す。 if (ImGui.Button("Clicked Log!!")) { show_debug_message("Clicked!!!!!"); } } // ImGui描画終了 ImGui.End(); }
このようなボタンが表示されており、これをクリックしたら
このようにログが出力されたら成功です。
数値入力欄の表示
次に数字入力欄を作ります。デバッグ用に数値を変更したい際などに利用できます。
数値入力欄はImGui.InputInt関数を使用します。
// 数字入力欄の描画
ImGui.InputInt(入力欄名, 現在の値);
ImGui.InputInt関数の戻り値で変更後の値が返ってきます。
また、第二引数に現在の値を代入するため、変数を作って管理することをおススメします。
Createイベントに数字入力欄のための変数を宣言します。
// ImGuiを初期化 ImGui.__Initialize(); is_menu_open = true; // 数字入力欄用の変数 input_int = 0;
StepイベントにImGui.InputIntを使用した処理を追加します。
if(is_menu_open){ // windowサイズを指定。とりあえず画面の半分で ImGui.SetNextWindowSize(room_width / 2, room_height / 2, ImGuiCond.Once); var is_begin = ImGui.Begin("ImGui_GM Example", is_menu_open, ImGuiWindowFlags.None, ImGuiReturnMask.Both); // 引数に送ったis_menu_openの参照の値を取得 is_menu_open = is_begin & ImGuiReturnMask.Pointer; // is_beginの戻り値がtrueなら if(is_begin & ImGuiReturnMask.Return){ // Test用のテキストを表示 ImGui.Text("Test"); // マウスの座標を表示 ImGui.Text("mouse_pos " + string(mouse_x) + ", " + string(mouse_y)); // ボタンを作り、ボタンをクリックしたらログを出す。 if (ImGui.Button("Clicked Log!!")) { show_debug_message("Clicked!!!!!"); } // 数値入力ウィンドウを作り、入力結果をinput_int変数に代入 input_int = ImGui.InputInt("Input Int!!", input_int); } // ImGui描画終了 ImGui.End(); }
input_intで代入された値を使ってみましょう。
DrawGUIイベントを下記のように修正します。
// 描画処理を回す ImGui.__Render(); // input_intの値をmouse_x.mouse_yに描画 draw_text(mouse_x,mouse_y,string(input_int));
InputIntの枠の中をクリックするとテキスト入力ができるので、数値を入れましょう。
その数値が現在のマウスの位置に描画されればOKです！
まとめ
この記事ではGameMaker内でImGuiを使う方法を記述しました。
ゲームを作成する上でデバッグ機能は必須と言っていいほどなのですが、
そのデバッグ機能の実装が大変だったりして本末転倒になってしまうケースがあります。
そんな問題をImGuiは解決してくれるので、個人的には必須級のライブラリだと思っています。
(もちろん別のライブラリでデバッグ機能を作るのもOKです。デバッグ機能を簡単に作れるライブラリが開発に必須だなぁという意見です)
この記事で解説した機能はほんの一部のみで、ImGuiにはもっと便利な機能がいっぱいあります。
ドキュメントもサンプルも充実しているので、自分で調べて自分だけのデバッグ機能を作っていくと良いでしょう。
次回はImGuiをGameMakerで使う際に便利なメニューについてまとめたいと思います。(予定)
それでは、良いGameMakerライフを！
I wanna kickass Dr.Cherry2公開
不具合があったのでバージョンを更新しました！(2023/12/15追記)
新しいバージョンはこちらです。
はじめに
どうも、オレンジです。
突然ですが、自作アイワナ「I wanna kickass Dr.Cherry2」をついに公開することができました！
開発を始めて約2年半...だいぶ長期開発になってしまいました...。
しかし！長い開発期間をかけた甲斐もあってなかなか面白い作品になったのではと思います！
こちらからダウンロードできますので、よかったらどうぞ！
www.axfc.net
この記事では、簡単に自分のアイワナを紹介しようと思います。
もし気になっている方がいたら見てみてください！。
アイワナとは？
こちらの記事を見るとわかりやすいかなと思います。
dic.nicovideo.jp
さらにそこから様々な派生アイワナといった作品が続々と出てきました。
派生アイワナとは「I wanna be the fangame!」を代表としたI wanna be the guyを真似した二次創作作品全般を差します。
原作の製作者であるkayin氏はアイワナの二次創作には黙認なので、今のところはグレーです。
I wanna kickass Dr.Cherry2紹介
本題の私が作った派生アイワナの紹介をします。
そもそもタイトルに2ってついているんだけど1は？って方はこちらの記事を読んでいただければと思います。
orangelily.hatenablog.com
ゲーム概要
上で書いた通り、1の続編になっているのですが、
1の続編ということはつまりこういうことです。
完全にロッ〇マン
ええそうです。いつも通り〇ックマンです。
1の続編なので、だいたいは1と同じなのですが、
いくつか変わっているところがあります。
- HPが回数制ではなくゲージ制になった
- ダッシュ、壁キックの削除
- 特殊武器の追加
といった感じに変化しています。
前作より、よりロック〇ンらしく、よりアイワナらしくなりました！
HPが回数制ではなくゲージ制になったことで、難易度は少し下がったのかなと思います。
ただ、針に当たると大ダメージだったりするので、一長一短かもしれません。
また、ステージも前作と比べて3 ~ 4倍程度の長さになっておりステージ数も増えています。
全体的にはかなり長くなっているのですが、前作は短いステージにギミックと敵を詰め込んであったのですけど、今作はそこまでぎっちりしていません。
なので、攻略速度自体は前作とあまり変わらないのかな？と思っています。
だいたい3~5時間くらいでクリアできると思います。
難易度
難易度はeasy、normal、hard、infernoの4つを用意しました。
Easy
アクションゲーム初心者向けの難易度です。
ダメージのけぞり無し、回復アイテムの回復量増加、敵の体力半分と至れり尽くせりです。
さらに、落下死を防ぐようなイージーブロックも各ステージに追加され、
攻略が非常に簡単になっています。
Normal
アクションゲーム経験者向けの難易度です。
ダメージのけぞりあり、敵の攻撃力も平均的なシンプルな難易度になっています。
市販の2Dアクションゲームをクリアしたことがある！と言ったプレイヤーはこの難易度がオススメです。
ステージ紹介
軽く数ステージ紹介しようと思います。
各ステージに色々なギミックを入れたので、ユニークなステージが多いです。
また、前作にあったような謎解きギミックは今作は存在しません。
例えば、深海を彷徨うようなステージや
乗り物？に乗って進んでいくステージや
風に舞っているステージ等あります。
他にも各種ステージにギミックが用意されています。
気になったら是非プレイしてみてください！
終わりに
以上で自作アイワナの説明を終わります。
もし気になった方がいたらこちらからダウンロードしてください！
www.axfc.net
もし不具合や気になった部分などありましたら、自分のX(Twitter)に連絡をくれればと思います。
今後の作品についても話したりすると思います。
https://twitter.com/hemuhununeOrang
長い間この作品を作っていたのでちょっと疲れてしまいました...。続編は期待しないでください笑。
それでは、良きアイワナライフを！
I wanna makerとGameMakerでのアイワナ開発比較
どうもこんにちは、今年GameMakerStudio2を購入しましたオレンジです
最近噂になっているI Wanna Makerをダウンロードして、1つステージを作ってみました。
実際に作ったんですけど本当に作りやすく、数日しか開発してないんですけど思ったよりクオリティ高いのが出来ました。
そこで、GameMakerでの開発経験が10年近くある自分の目線からの、I wanna makerとGameMakerの違いについて話して行けたらなと思います。
特に今GameMakerでアイワナ開発している人、今はI wanna makerで作ってるけどGameMakerも気になるって人は読んでみて欲しいです。
今回の記事を書くために作ったステージはこちらになります。「J4DV-D6QQ」
色々ギミック詰め込んだのでぜひプレイしてみてください！
(とりあえず結論だけ読みたいという人は、「 比較まとめ」まで飛んでください)
I Wanna Makerとは
現在(2023/11/14)Steamでダウンロードできるアイワナ作成ツールです。
store.steampowered.com
オリジナルとなったI wanna be the guyのようなゲームを作るのに特化したゲームエンジンのようなものですね。
2023年の11/10に正式リリースされ、対応プラットフォームはPC(Steam)となっています(日本語に対応！)。
自分も正式リリースされたとの噂を聞いて早速ダウンロードしてきました。
特徴としては下記が挙げられます。
- プログラミング無しでアイワナのゲームを作れる
- 他のユーザーが作ったゲームをプレイ可能。さらにそのゲームをエディターで表示させることも可能
- テストプレイしながらステージ編集が出来、その場に即時反映される(ホットリロード)
- トゲやリンゴなど、アイワナの鉄板ギミックも含めたオブジェクトの数々が70種以上
- 用意されたBGMも150種以上存在し、使用制限等はない。動的に曲を変えることも可能
ざっとあげるとこんな感じです。正直ここまでクオリティ高いのが無料で遊べるだけでも凄いですね。
本題
上で記述した通りI wanna makerは制作ツールとしてもプレイするにしても非常に優れたゲームです。
ただ、代々アイワナ制作とはGameMakerを使用して作られたものが多く(全部では無いですが)、今GameMaker使ってる人からするとどっちを使うか悩みどころだと思います。
そこで、10年近くGameMaker触ってきた私目線でのI wanna makerとGameMakerの違いについて書きたいと思います。参考になれば幸いです。
I wanna makerの方が優れている点
まずはI wanna makerの方が優れている点を上げます。
プログラミングを書かなくていい
これに限ると思います。学習コストに雲泥の差があります。
もちろんI wanna makerも勉強しないといけないことは沢山ありますが、プログラミングを学ぶよりかはかなり少ないです。
さらに、プログラミングを書かなくて良いとはつまり、バグ修正をしなくて良いことでもあります。
これは開発期間の1/3ほどスキップできるほど大きいです。
プログラミングを学ぶのに抵抗がある、とりあえずアイワナを作ってみたいという方には
I wanna makerをオススメします。
I wanna makerをオススメします。
画面エフェクトが凝れる
I wanna makerでは画面エフェクトを出せるのですが、それが非常に凝っており良い雰囲気を出せます。
例えば、周りを暗くするライトのようなエフェクトや、雨が降り雷が鳴る嵐なんてのもあります。
このような画面演出をGameMakerで綺麗に作るのは難しく、さらにGameMaker8.0(8.1LITE)ではシェーダー機能がないため、
凝った演出を作ろうとすると有料のGameMakerを使わないといけません。
これを無料でできるI wanna makerは控えめに言って最高です。
ゲーム内で公開機能がある
これも結構大きな利点だと思っています。
I wanna maker内で作ったゲームを公開できるだけでなく、クリア率やいいね！の評価機能などがゲーム内に存在し、
ユーザーからのフィードバックを受けやすい機能がついています。
さらに、作られたゲームを「エディターで表示」させる機能が存在し、他の人がどうやってステージを作ったのか見ることができます。
この「エディターで表示」機能が非常に優れており、I wanna maker内でどうやって他の人が作っているのか学ぶことができます。
GameMakerで作られた作品だと、開発環境をもらうか開発者が技術ドキュメント等を書かない限り作り方を見ることができないため、
これがI wanna maker内で行えることは開発モチベにも繋がる良い機能だと思います。
GameMakerの方が優れている点
ここからはI wanna makerと比較してGameMakerの方が優れている点をあげます。
リソース素材が自由に使える
ここが最大の利点と言えるでしょう。
I wanna makerは用意されたリソースしか使えませんので、
好きなイラスト、好きなBGＭ、SEでゲームが作れるのがゲームエンジンを使う利点となります。
自分の描いたイラストまで使用できるため、それらを使いたい人は必然的にGameMakerを使うことになるでしょう
ステージ、オブジェクト作成の幅が広い
ここもリソースに並んで自由に作れることは大きな利点と言えます。
ただ、リソースと違ってこちらはプログラミング技術がある程度必要になるため
自分の理想の作品を作れるようになるまでは時間が必要かもしれません。
慣れてくれば自分だけのゲームが作れるようになり、それが作れる魅力は唯一無二と言えるでしょう。
GameMakerについて学べる
GameMakerでゲームを作ればGameMakerを学べる...これは当たり前のことですが、
I wanna makerを学ぶ以上に大きな効果があります。
必然的にプログラミングを学ぶことになるので、ここで学んだ知識は他の分野や就活で活かせます。
実際に自分はGameMakerからプログラミングを学び、それらで得た知識を就活で使って今はゲームプログラマーになりました。
今のご時世、プログラミングが出来るというのは強力な武器となります。
また、GameMakerはアイワナ作成用のゲームエンジンではなく汎用的なゲームエンジンのため
慣れてくるとアイワナ以外のゲームも作れるようになります。
就活だけでなく、趣味の幅も広がるためおススメです。
比較まとめ
開発の手軽さ、作った作品のリリースのしやすさはI wanna makerに軍配があがりますが、
素材の自由度、開発の自由度にはGameMakerの方が優れています。
| 項目 | I wanna maker | GameMaker |
|---|---|---|
| 開発難易度 | 優しい | 難しい |
| 画面エフェクト | 既に用意されている(高品質) | 自分で組む必要がある |
| リソース | 用意された素材 | 何でも使用できる |
| ギミックの自由度 | うまく作ればある程度自由 | プログラミングが組めれば自由 |
| 公開環境 | 既に用意されている | 自力でアップロードする必要がある |
今からアイワナを作ってみたい。無料で高クオリティの物を作ってみたい！という方はI wanna makerを使うのがいいと思います。
自分の作ったイラストやオリジナルのリソース素材を使いたい、という方はGameMakerを使うのがいいと思います。
自分の作ったイラストやオリジナルのリソース素材を使いたい、という方はGameMakerを使うのがいいと思います。
また、完全無料で高クオリティのアイワナが作れるところもI wanna makerの魅力であると思います。
自分も今回初めてI wanna makerでアイワナを作ってみましたが、作れるギミックの幅は広く
数日で1作品できたので非常に使いやすい環境でした。
もし今GameMaker8.0(8.1LITE)を使っている人で、使用するリソースにこだわらないのであれば
I wanna makerを使ってみてもいいと思います。
逆に、既にGameMakerStudio1や2を触っている人は引き続きそちらを使っていった方がいいと思います。
もう作り慣れているはずですし、クオリティ高い作品作れます。
それと、これは開発環境とは別の話ですが、
I wanna makerでは自由なリソースが使えない分、逆に著作権違反するリソースが必ず使われていないことも約束されており、
動画サイトでのプレイ投稿や、配信サイトでの配信が安全に行えるため、
今後はI wanna makerでのプレイ、配信が増えることが予想されます。
なので、今の環境ではI wanna makerで作ったアイワナの方がプレイされることは多くなりそうです。
それも踏まえたうえで、自分に合った環境でアイワナを作っていくと良いでしょう。
終わりに
今回はI wanna makerとGameMakerでのアイワナ開発環境について比較してみました。
思ったよりI wanna makerのクオリティが高く、今後はI wanna makerメインになる人も増えてくるのでは？と言った印象です。
自分のように長くGameMakerを使っているような人は、引き続きGameMakerで作ることになりそうですが、
公開環境の優秀さからI wanna makerで作るのもアリだなと思いました。
比較はしたものの、どっちも使うと言う選択肢もあると思います。
どっちの開発環境も魅力があって捨てがたいですね。
自分としては、今後もGameMakerを使い続けますが、I wanna makerでの開発もしていきたいと思います。
それでは、良きアイワナ開発ライフを！！
【GM:S 1.4】Surfaceで明かりを表現する【アイワナ制作】
こんにちは。この前アイワナをリリースしたオレンジです。
今回はそのアイワナでも使われている｢光源｣の実装方法について紹介していきたいと思います。
私の作ったアイワナについては、過去記事をどうぞ
光源とは
光源、つまり光の発する点の事ですね。
ゲームとかだと、ライトとか炎の明かり等に使われているシーンが多いと思います。
アイワナのような2Dアクションだと、自分の周りだけ明るくて他が暗い、みたいなステージがありますよね。
これをGameMakerで再現するなら
こんな感じの真ん中が透明で周りが黒い画像を準備して、それを光源の中心に置く...
みたいな方法をしてた方もいるかもしれません。(他にも多数方法はありますが)
でもこれ、ちょっと汎用性低いんですよね。
明かりをいくつも動かしたりすると周りの黒い部分が邪魔になったり、色の違う明かりを作る度に画像を準備したり...etc
そこで、Surface機能を使って明かりを再現しよう！と言うのが今回の記事です！
※記事タイトルの通り、GameMaker : Studio専用です。
GameMaker8.0や8.1Lite版では動かせません。
実装方法
Sprite
まずは明かりの画像を準備しましょう。
今回はこの画像を使います。使いたい明かりによって色々作ってみたり、フリーの素材を使ってみるのが良いでしょう。
この画像でSpriteを作ります。名前は適当に｢spr_light｣とかにしておきます。
オフセットをcenterに設定し、閉じます。
Script
次は光源の描画更新の処理を行うScriptを１つ作ります。この処理は何度か呼び出すことになるので、Scriptにまとめておくと便利です・
名前を「light_update_process」と言う名前で新規Scirptを作成し、以下のコードを書きます。
///light_update_process(light_surface) //引数で受け取ったサーフェスを代入 now_surface = argument0; //対象を現在のサーフェスに変更 surface_set_target(now_surface); //サーフェスの描画処理 draw_clear(c_black); draw_sprite_ext(sprite_index, image_index, sprite_width / 2, sprite_height / 2, image_xscale, image_yscale, image_angle, c_white, 1); //対象をリセット surface_reset_target();
このような感じになればOKです。
Object
次に明かりオブジェクトを作りましょう。名前を｢obj_light｣とし、Spriteに先ほど作成した｢spr_light｣を設定します。
そして、Visibleのチェックを外します(ここ忘れがち)
そしたらobj_lightにCreateイベントを作って、そこにコードを追加します。
///CreateEvent //サイズ変更、数字は自由に image_xscale = 3; image_yscale = 3; //光源用のサーフェス生成 light_surface = surface_create(sprite_width, sprite_height); //更新処理を一回入れる light_update_process(light_surface);
上記のコードを入力したら閉じます。
次にlight全体をコントロールするオブジェクト｢obj_light_controller｣を作ります。
Sprite画像は設定しなくて大丈夫です。もし設定したい場合はゲーム画面に映らないようにVisibleのチェックを外しておきましょう。
今作ったobj_light_controllerのCreateイベントに下記のコードを書きます。
///CreateEvent //全体を描画するサーフェス生成 controller_surface = surface_create(room_width, room_height);
次はStepイベントにこちらのコードを記述します。
///StepEvent //対象を全体のサーフェスに surface_set_target(controller_surface); //画面全体を黒に draw_clear(c_black); //ブレンドモードを加算に変更 draw_set_blend_mode(bm_add); //光源の更新処理 with (obj_light) { draw_surface_ext(light_surface, x - sprite_width / 2, y - sprite_height / 2, 1, 1, 0, image_blend, 1); } //ブレンドモードをノーマルに draw_set_blend_mode(bm_normal); //対象をリセット surface_reset_target();
次にEndStepイベントにこちらのコードを記述してください。
///EndStepEvent //光源のEndStep更新処理 with (obj_light) { light_update_process(light_surface); }
最後にDrawEndイベントに以下のコードを書いたら終わりです。
///DrawEndEvent //拡張ブレンドモード設定 //詳しくはこちらのURLで //https://docs.yoyogames.com/source/dadiospice/002_reference/drawing/colour%20and%20blending/draw_set_blend_mode_ext.html draw_set_blend_mode_ext(bm_dest_color, bm_zero); draw_surface_ext(controller_surface, 0, 0, 1, 1, 0, c_white, 1); draw_set_blend_mode(bm_normal);
準備はこれくらいで大丈夫です。イベント数が以下の画像と同じになっていればOKです。
コードの処理については、コメントを確認してください
Room
それでは実際にroomを作って試してみましょう。
roomの設定は適当で良いですが、サイズを大きくしすぎないようにするのと、分かりやすいように背景色は青とかにします。
roomを作ったらそこに「obj_light_controller」を置いて、明かりを起きたいところに「obj_light」を置きましょう。
私はこんな感じのルームを作りました。
これで起動してみると...。
画面上部が明るくなっていて、他が暗くなっていますね！これで成功です！！
アイワナのステージに適用させてみよう
さて、これだけでもアイワナのステージに「obj_light_controller」と「obj_light」を置けば光源を実装することができます。
置くだけでもいいですが、せっかくですし動かしたいですよね。
そこで、「obj_light」にマウスに追従してくる機能を実装してみましょう。
obj_lightのStepEventに以下の記述をしてみましょう。
///StepEvent //座標をマウスに合わせる x = mouse_x; y = mouse_y;
これをアイワナのルームに配置して実行してみると。
良い感じにマップを照らせるようになりましたね！
その他の実装
その他にも、いくつか機能を紹介しておきます。
光源の色の変え方
光源の色の変え方ですが、例えばobj_lightのCreateイベントか生成時に
image_blend = make_color_rgb(255,150,150);
と記述してあげると、赤色に変わります。
その他の色に変えたいときは、rgbの数値を変えてみましょう！
全体を覆う色の変え方
全体を覆う色ですが、今は黒になっているので明かりが届いていない部分は真っ暗になっていますね。
実はこれの色も変えることができます。この色を変えることでよりステージに特徴を持たすことができます。
変え方ですが、obj_light_controllerのStepイベントの
//画面全体を黒に
draw_clear(c_black);
のc_blackの部分を
//画面全体を赤に
draw_clear(make_color_rgb(255,0,0));
とすると、画面全体を赤くすることができます。
色の部分をランダムな数値を扱えば、毎回ランダムな色に変化してくれます。
だいたいこんなところでしょうか。
この機能自体はそこまで処理が重くありませんが、一度に大量の光を動かしたり、めちゃくちゃ大きな明かりを動かそうとすると処理が重くなります。
そこだけは気をつけて使いましょう！！
以上の部分で今回の実装は終わりです。
実装お疲れ様でした！！
I_wanna_kickass_Dr.Cherry公開
自作アイワナ｢I wanna kickass Dr.Cherry ~Dr.Cherryの野望~｣リリースしました！！！
結局前回の更新から1ヶ月以上かかってしまい...10月になってしまいましたね...。
その代わり、色々と機能追加したりバグ修正したり頑張ったので許してください！！！
ダウンロードはこちらから⤵︎ ︎⤵︎ ︎⤵︎ ︎
もしくはこちらからどうぞ
詳しく知りたい方は過去記事で
orangelily.hatenablog.com
【GM:S 1.4】I wanna kickass Dr.Cherry紹介
※2020/10/11に公開版画像に差し替え更新
続きを読む