tanaka's Programming Memo

プログラミングについてのメモ。

GDevelop Game Jam #2に参加しました！

GDevelop GDevelopGameJam GameJam

7月末の早朝、 itch.io さんのリツイートが目にとまりました。

ゲームジャムと言う目標があると張り合いがあるし、１週間ぐらいなら夏休みの自由研究として丁度良さそう。ということで取り組んだ成果物が以下のゲームです。

キーボードとマウス操作で、WASDキーか矢印キーで移動、マウスでエサを投げます。お墓を舞台にしたボコスカウォーズ的なシュール系シューティングゲームです。評価期間は日本時間の8/13(土) AM4時までなので間に合わないかもしれませんが、遊んで評価を投稿いただけると嬉しいです!!

itch.io

勉強の仕方や開発の流れ、GDevelopを使ってみての感想などをまとめてみました。

目次

はじまり

冒頭のツイートを見た7/30はちょこっとサイトを覗いたりチュートリアルを眺めたぐらいで別のことをしてたと思います。実際に触り始めたのは7/31の午前。

無料で簡単なゲーム制作アプリ | GDevelop

オンラインで試せる！！

オンラインで試せるのはめっちゃ楽！「チュートリアルをフォロー」から How To Make a Platformer のチュートリアル動画を見ながらブラウザー上で試してみました。

俺はPlatformerで行く!!

動画は3本で合計20分程度。動画を見ながら1時間足らずでプラットフォーマーゲームが作れてしまいました。GDevelopのチュートリアル動画は充実していて、1本あたりの長さが数分にまとめられているのでとても見やすいです。英語ですが操作は動画を見れば分かるので問題ない気がします。

GDEVELOPER WIKIのチュートリアルなら日本語化されています。内容が少し違うので、こちらのプラットフォーマーのチュートリアルも試してみました。

wiki.gdevelop.io

GDevelopのデスクトップ版向けの内容でしたがWebブラウザ上でやりました。Webブラウザーだと画像のアップロードが少々面倒なのでチュートリアルで紹介されていた素材は使わず、アニメーションの画像追加時に利用できるアセットストアからそれっぽい画像を選んで利用しました。アセットストアで手軽に素材が探せるのも大きな魅力です。チュートリアルは、アクション名などが実際のツールと異なっていたり、オブジェクト名やアニメ名が日本語だとエラーになるなど一部読み替える必要はありましたが、大きな問題はなく無事に完了できました。

Webブラウザー版での保存は、プロジェクトのjsonファイルをGoogleドライブにアップロードするか、エクスポートしてダウンロードすることになります。GoogleドライブのUIは暫定的な感じで指定がしにくかったのでエクスポートしました。が、エクスポートしたものはどのように読めばいいのか・・・。この辺りがWeb版で作業する限界そうです。ここまでで問題なさそうならデスクトップ版をインストールしちゃいましょう。このインストールがまたお手軽で、自分だけインストールを選べば管理者権限が不要です！！Webブラウザー上でエディターが動くことと、管理者権限がなくてもインストールができるのは最高です。

これから先の開発はデスクトップ版で行いましたが、ちょっと機能を試したり実動サンプルを見たりする時にWebブラウザー版は便利で今も活用しています。

GDevelopの使い方や簡単なゲームの作り方を把握するには午前だけで十分でした。ちなみにWikiの基本事項はこの時点ではまだ読んでません。開発するゲームによって必要な機能が異なるため、まずはGDevelopが得意そうなジャンルを確認して、企画を決めてから必要そうな機能をみつけて勉強していくようにしました。

企画検討

7/31の就寝前に軽く企画を考えました。考えたのは以下の２案です。

Is that your pet? (それはあなたのペットですか？)

1対1で動物と対峙して、相手の攻撃を防いだりエサを投げたりして手懐けられたらステージクリアです。

Is that your pet?案

勝ったら「Yes! That is your pet!! (そうです。それはあなたのペットです!!) 」、負けたら「You were a bait... (あなたはエサでした) 」とか表示するとか。タイトルや結果のテキストはよさそうに感じましたが、バリエーションを用意するのがしんどそうなのと、ゲームの動かし方のイメージがまとめきれなかったので保留しました。カードゲームとかサイコロゲームにする方向性もありそうでしたが、いずれにせよ素材の用意が大変なのでボツでした。

Haunted Animals in The Cemetery (墓場のお化け動物たち)

2案目が完成させたゲームの案です。

Haunted Animals in The Cemetery案

ハイパーカジュアルでよくみる数字が増えていくブロック崩しとか仲間が増えていく系です。敵にエサを食べさせて手懐けるのがなんとなく今回の自分的なコアだったので、体当たりではなくシューティング要素を導入しました。こちらはプレイヤー、敵１種類、ペット１種類、エサ、背景、墓ぐらいでいけそうで、ゲーム内容も具体的に思い浮かびます。翌日に改めて検討することにして就寝しました。

企画の整理と調査

8/1、前夜に考えた案のざっくりイメージから。

ゲーム画面は360x640の縦画面にして、黄色がプレイヤー、赤がエサ、白が敵、灰色が墓石です。ハイパーカジュアルのゲームを思い浮かべてキャラは小さめにして、キャラが沢山出てくるようにという狙いです。この落書きからキャラを24x24ピクセル、墓石を32x32ピクセルの大きさに決めました。

操作方法や基本的な動き方をNotionでまとめたあとは技術調査です。プレイヤーの移動はGDevelopが最初から用意してくれているトップダウンビヘイビアで行けそうです。画面切り替え方法、シーンの初期化、マウスを狙った弾の撃ち方、演出、スクロールなどなどを調べていきました。今回のゲームの基礎は The Conviction of GUN DUDE のチュートリアルに詰まってました！

夕方ぐらいまでチュートリアルを（遊んだり）見まくったりしながらTodoリストやら仕様やらを作成。それからGitHubにリポジトリー登録して開発を開始しました。

開発進行

開発については書き始めると長くなりそうなので別記事ということにして流れだけまとめます。

7/30(0日目)

  • 早朝
    • GDevelopとそのゲームジャムが開催されることを知って興味を持つ

7/31(1日目)

  • 午前
  • 就寝前
    • アイディア出し

8/1(2日目)

  • 日中
    • 仕様まとめと状態遷移、マウス操作などの技術調査、Todoリスト作成
  • 夜

8/2(3日目)

  • 午前
    • 状態遷移の実装

  • 午後以降
    • 外部関数やビヘイビアの調査、フェードの改良、スコア管理、リーダーボードの組み込み開始

8/3(4日目)

  • 午前
    • リーダーボードなどを含むゲームループ完了
  • 午後
    • 音周り実装、プレイヤー操作、カーソル操作、仮アニメ、1つエサ投げ

8/4(5日目)

  • 午前
    • エサ投げ続き
  • 午後
    • 出講のため作業無し
  • 夜

8/5(6日目)

  • 午前
    • スクロール関連
  • 午後

8/6(7日目)

8/7(8日目)

  • 午前

  • 午後
    • 東京ゲームダンジョンに遊びに行く。元気を得て帰宅
  • 21:35
    • 演出を入れて、最小版をゲームジャムに提出！
  • 26:00
    • **今回のプロジェクト、完了！

GDevelopの良い点、気になった点・不明点

１週間使ってみてのGDevelopへの感想です。

良い点

沢山あるのでざっと思いついたところを。

  • インストール不要のWebブラウザ版エディターで機能が一通り試せる
  • デスクトップ版が管理者権限なしでインストールできるお手軽さ
  • HTML5ビルドのみなら制約なく無料で使える
    • 他のビルドはお値段によって1日の回数制限があります
    • 無料だとデバッガー使う時などにちょいちょいお支払い確認のダイアログが表示されます
  • プラットフォーマーとトップダウン系のゲームを開発するための便利機能が揃っていてすぐ作れる
  • アセットストアで簡単に素材を入手できる
  • チュートリアルが充実
  • 物理エンジン、Tween、パーティクル、ブルームを含む画面エフェクトなど、予想以上に表現力が高く、また手軽に使える
  • HTML5ビルドが超速。下手すると1秒程度で終わる
  • Liluoにはツールからアップして公開ができる。itch.ioへの公開も楽

コントリビュート案

GDevelopはオープンソースなので、不満は言うものではなくコントリビュートするものだ！ということで、気になった部分を改善・解消できそうな機能案です。コミュニティを全然把握していませんし、本気でやることを検討しているのではなく、ちょっと思いました程度のものです。

  • テキストオブジェクトのAlignを幅基準に変更
  • 日本語モードでも英語のコマンド検索を有効にする
    • 日本語にわざわざ変換して「変数」とか検索するのが辛いので....
  • Tweenの時間の単位設定の追加
    • 他は秒が基本なのに、Tweenだけミリ秒指定で何回もハマったため
  • 式エディター内でのネストした構造体や配列の補完
  • 構造体の要素変数の並び順の設定(変数は自由に並び替えできました。2022/8/18追記)
    • 自動的にアルファベット順位並び替えるのをやめてほしい。構造体の要素変数の並び方は自分で選びたい
  • 繰り返しの設定を条件にも入れる
    • 今はイベントを右クリックして、他を追加 から選ぶようになっていますが、条件内にあっていいと思うもので
  • 変数にコメント欄を追加
    • 変数にコメントは必要だと思っているのですがそうでもないですかね
  • イベントエディターで、オブジェクトが全てのオブジェクトなのか、条件に合致したオブジェクトなのか、インスタンスごとなのかを表示したい
  • アニメーションをPiskelで編集する際、既存の画像を他から指定したものを保存する時、上書き保存ではなく名前を付けて保存ダイアログを出す
  • シーンエディターのプロパティの拡充
    • 色や透過度、非表示、センタリングなどのデザインまわりはシーンエディターで完結できるようにしたい
  • ベクトルと行列の拡張
    • ベクトル好きとしてはGDevelopにベクトルがないことに愕然としました。2Dだってベクトルがあった方が遥かに楽です。XとYを別々に宣言するとか面倒で嫌な訳です
  • 各種座標指定の強化
    • 中心座標、当たり判定バウンディングなどを条件やアクション、式の中で自由に使いたい

Tweenの時間の単位設定などの実際にできそうなものから、シーンエディターのプロパティとかは無理っぽいものまであれこれ書きました。まずはコミュニティをROMったり、リポジトリーをクローンして眺めたりして実現できそうか見極めてみます。

気になった点

その他、気になった点です。

閉じたイベントが見にくい

デフォルトのテーマであるGDevelop default Darkの時のイベントの閉じているアイコンの見え方は以下の通りです。

GDevelop default Darkだと閉じたアイコンが見えない!

赤で囲まれた部分はイベントを畳んでいるのですが、アイコンが全然見えません。危うく「ここ空っぽじゃん」と思って消そうとしたり、「あの処理は一体どこに書いたっけ・・・」と行方不明になることが何度かありました。一通り確認してみたのですが、畳んだ状態が見やすいのはGDevelop default Lightのみでした。

これなら見える

ダークの方が目に優しいので、色のカスタマイズ方法を探してみるつもりです。

変数とコードが分かれているのが面倒

処理を書きながら必要な変数に気づいた時に変数ウィンドウを開くのが地味に面倒でした。全エディター画面がフローティングウィンドウならめちゃくちゃ便利なのですが流石にそれは贅沢がすぎる望みですね。素直にショートカットを覚えます。

定義しない変数が使える

変数を定義せずに使えるのは手軽な反面、タイプミスをしてもエラーにならないので問題の発見に時間がかかります。これはJavaScriptの仕様なのでやむを得ず。理解して気を付けるしかありません。

PiskelのUndo

「塗るの失敗しちゃった。Undoしよ」とやったらGDevelopごと落ちました。検索しても問題になってなさそうなのでうちのPCの問題っぽいですが、何回か発生したのでUndoは封印しました。

次回に向けて

濃厚な一週間で収穫が盛り沢山でした。他の参加者の皆さんの作品を遊んで感じたことや、終盤でようやく気付いた機能など、次回に向けて書き残しておきます。

Bloomを使う

最初の技術調査で見落としていて今回はBloomが使えない想定で画面を検討していました。Bloomが使えるならデザインが違っていたと思います。次回はBloomを使ったプリミティブなデザインを試してみたいところです。やっぱドット絵を描くのは辛い・・・

フレームワークは開始前に作っておく

1週間のうち3日程度はフレームワークに費やしていました。ハイスコアを一度登録しのがすと再度の登録ができないようなまずい仕様になっているのに気づかなかったりしましたし、この辺りは事前に整備しておきたいところです。

変数は構造体でまとめる or 命名規則でなんとかする or ビヘイビアを活用する

チュートリアル程度だとそれほど変数が多くないのでシーンやらオブジェクトにぼこぼこ変数を追加していたのですが、定数なんかも変数に定義しておきたいよね～とやっていったらかなりの数になって探すのが面倒に^^;

プレイヤーの変数。1画面で納まりきらず

この辺りの運用はもう少し検討が必要そうですが、ビヘイビアをちゃんと勉強するのが正解な気がしています。

画面レイアウト

PCで公開するなら、ゲーム画面が縦画面でも基本レイアウトは横サイズで作った方がよかったです。 Liluo だと画面をセンタリングしてくれないのでかっこ悪い・・・。操作説明を余白に表示するなどの活用もできます。

スクリーンショットに動画をつける

前回のWall Walkerではちゃんとプレイ動画をアップしていたのですが、今回は作っていたにも関わらずアップし忘れ。一目でどんなゲームか分かった方が遊びやすいと思うので動画は必須だった気がします。

公開後はすぐに他の人の作品を遊んでおく

作品数が多いのでこちらから遊びにいかないと全く遊ばれません！（Unity1週間ゲームジャムの遊ばれ方が異常）。遊べばちゃんと遊び返してもらえるので、目に付きやすい初期に遊びまわってコメントを残しておくのが吉でした。

最後に

GDevelopは2Dに特化したゲームエンジンで、導入コストの低さが印象的でした。Webブラウザーで試せて、インストールも管理者権限が不要、サンプルの素材がアセットストアですぐに見つけることができ、スプライトエディターや効果音エディターが組み込まれています。プラットフォーマーやトップダウンに必要な処理は予め用意されており、物理エンジン、Bloom、パーティクルといった各種機能も揃っています。2Dゲームを作るなら選択肢に入れて損はないゲームエンジンだと感じました。

GDevelopが良いゲームエンジンであり、使い方や今後の方針も把握できました。勉強しはじめて1週間でゲームジャムにゲームを投稿できることの実証もできました。ゲームジャムの成績がどうあれ、すでに十分以上に成果を得られたゲームジャムへの参加でした！！

参考・関連URL

itch.io