GDevelopでシューティングゲームを作ってみよう!パート1

こんにちは。
こよなしの雜賀です。
皆さんは GDevelop というアプリケーション開発ツールをご存知でしょうか。
スマートフォンやWeb上で動作するアプリケーションを作成する場合、プログラミング言語を用いて開発するのが一般的です。JavaScript や C# といったプログラミング言語の仕様を理解し、後々のメンテナンスも考え破綻しにくいアプリケーションを作り上げるためには、多くの学習コストを必要とします。
GDevelop はそのような労力を大幅に軽減してくれます。独自のイベントシステムにより、プログラミング言語によるコーディングを用いず、シンプルかつ効率的にアプリケーションを作り上げることができます。
今回から何回かに分けてシューティングゲームを題材に GDevelop によるアプリケーションの開発を解説していきます。一般的なプログラミング言語による開発とイメージは異なりますが、これもプログラミングの一つの形です。ノーコード開発がもたらすストレスフリーなお手軽さと生産性の高さを味わってみましょう。
ゴール:完成イメージ
fig1 は今回作成するゲームの完成イメージです。画面の上部にスコアと残機数が表示され、その下に敵の機体が隊列を組んでいます。画面の中央では自機が縦横無尽に動き回り敵の機体と弾を撃ち合います。画面の下部にはジョイスティックとA・Bボタンが配置され、自機をコントロールします。

それではゴール目指して作業を開始しましょう!
ステップ1:GDevelop を始めよう
まずは GDevelop を手に入れましょう。GDevelop はパソコンにインストールすれば利用できます。また、インストールはせずにWebブラウザ上でオンライン版の GDevelop を利用することもできます。どちらでも開発作業に大きな違いはありません。
いずれにしても作業手順は同じです。まずは GDevelop の Webサイト(fig2)にある「ダウンロード」ボタンをクリックしましょう。

GDevelop のダウンロード画面(fig3)で利用環境に適したボタンまたはアイコンをクリックしてインストールを行いましょう。
オンライン版を利用する場合は「Launch」ボタンをクリックするだけです。パソコンへインストールする場合は、GDevelop のドキュメントを参照してください。スマートフォンやタブレットでの利用も可能です。ただ、画面が小さい場合は開発したゲームの動作確認が主な用途になるかもしれません。

GDevelop のオンライン版を開く、またはインストールした GDevelop を開けば、GDevelop の起動画面(fig4)が表示されます。 最初に起動画面が表示された時にはガイド付きレッスンが表示されます。レッスンで基本的な使い方を学ぶことができますので一通り確認するのも良いでしょう。毎回表示されるのが煩わしくなった場合は、画面右上にある「次回の起動時に、この画面を表示しない」にチェックを入れておきましょう。
画面左側の「ビルド」をクリックするとプロジェクトの管理画面が表示されます。この画面が GDevelop での開発作業の起点になります。

ステップ2:GDevelop にログインしよう(省略可)
GDevelop にアカウントを登録してログインすると、プロジェクト一式を GDevelopクラウド上で管理したり、スマートフォンアプリやWebアプリとして書き出したり、作品をインターネット上に公開したりできます。ログインしなくても開発はできますので、すぐには登録せず、アカウントが必要となった時点で登録されても良いかもしれません。
GDevelop へログインするためには、起動画面の右上にある「ログイン」ボタンをクリックします。ログイン画面(fig5)が表示されますので、メールアドレスとパスワードを入力して「ログイン」ボタンをクリックしましょう。アカウントをまだ登録していない場合は「アカウントを作成」をクリックします。

アカウントを登録する場合は、アカウント作成画面(fig6)でユーザー名、メールアドレス及びパスワードを入力して「アカウントを作成」ボタンをクリックします。

ステップ3:プロジェクトを作ろう
それでは開発に取り組みましょう。GDevelop での開発は GDevelop の起動画面(fig7)でプロジェクトを作成するところから始まります。以下の図ではログイン後の画面となっていますが、ログインをしていなくても開発は行えます。画面の中央右隅にある「+プロジェクトを作成」ボタンをクリックします。

プロジェクト作成画面(fig8)が表示されます。開発する画面の大きさ、プロジェクト名及びプロジェクトの保存場所を指定し、高度なファイル設定のチェックをすべて外して「プロジェクトを作成」ボタンをクリックします。下図の場合であれば、画面の大きさは「ポートレート(縦向き)のモバイル 720x1280」、プロジェクト名は「shooting」、保存場所は「GDevelopクラウド」、高度なファイル設定のチェックはすべて外してプロジェクトを作成しています。なお、プロジェクト名は別の名称でも問題ありませんし、パソコンへインストールされたデスクトップ版の GDevelop であれば、保存場所を「お使いのコンピューター」としてパソコン内の指定したフォルダへ保存させることも可能です。

GDevelop開発画面(fig9)が無事に表示されれば、いよいよ開発開始です!
次回のパート2では、キーボードや画面上に表示されたジョイスティックを使って、自機を前後左右に動かせるようにしてみましょう。

パート1は以上です。
ゴールまで一歩ずつマイペースで進めていきしょう。