こちらはインストールしたてほやほやの右も左もわからない方向けの記事になります。
ゲーム制作の基本を押さえつつも作業工数をできる限り抑えてゲームを1本完成させましょう。
(ゲーム制作自体が初めての方はこちらの記事も合わせてお読みください)
必ず押さえておきたい基本中の基本
オープンソースのゲームエンジン「GDevelop」をビギナーにもわかりやすく解説します。
シーンエディタ
ステップ:1 新規プロジェクト
最初に白紙の状態のプロジェクトを作成します。
プロジェクトの初期設定を設定します。
このような画面が開けば準備はオッケーです。
(レイアウトやUIは環境ごとにすこし変わります)
ステップ:2 オブジェクト
GDには複数のオブジェクトとビヘイビアが標準で用意されています。
オブジェクトとは「物体」のことで、ビヘイビアは「挙動」のことです。
条件とアクションで構成されるイベントによって「挙動(ビヘイビア)を起こす物体(プレイヤーや敵キャラクターなど)」あるいは「挙動を起こさない物体(背景や障害物など)」を制御してゲームを組み立てていきます。
今回は「プラットフォームアクションゲーム」を制作していきます。
このゲームに最低限必要なオブジェクト(物体)は
- プレイヤーとなるオブジェクト
- 足場となるオブジェクト
- 障害物 及び 敵キャラクターとなるオブジェクト
最低限必要なビヘイビア(挙動)は
- オブジェクトを足場にするためのビヘイビア
- オブジェクトをプレイヤーキャラクターにするためのビヘイビア
以上です。
GDではこれらを簡単に作成するための機能が標準で用意されています。
プレイヤーオブジェクト
では、オブジェクトを用意していきましょう。
「+新しいオブジェクトを追加」を押してオブジェクト追加メニューを開きます。
アニメーションで動かすことができる「
スプライト」のオブジェクトを新規作成します。
赤いモノアイ(単眼)のキャラクターを使用しましょう。
1から19までのスプライトをすべて読みこんだら「ループ」にチェックを入れてプレビューしてみましょう。
赤いキャラクターが歩いてますね!
このキャラクターを操作可能なプレイヤーキャラとしましょう。
次にポイントを設定します。
ポイントとはオブジェクトの起点で、その点を座標の基準にしたり回転の中心部にすることができます。
ここまではオブジェクトの「プロパティ」を設定しました。
次はオブジェクトの挙動を決める「ビヘイビア」を設定します。
ステップ:3 ビヘイビア
オブジェクトにビヘイビアを設定することで、特定の動作をさせたり役割を持たせることができます。
「Player」と名付けたスプライトオブジェクトに「プラットフォームキャラクター」のビヘイビアを追加します。
ビヘイビアにはパラメーター(詳細設定)を変更できるものがあります。
今回は初期設定のままで問題ありません。
これで、アニメーションする「スプライト」のオブジェクトに地面を歩いたりジャンプする「プラットフォームキャラクター」のビヘイビアを追加した「Player」を作成しました。
プラットフォームオブジェクト
次に、Playerが歩くための「足場」となるオブジェクトを作成します。
タイルスプライトとは
タイルスプライトはポイントを編集できず、左上に固定されます。
アニメーションもせず静止画です。
ステップ:4 シーンにインスタンスを配置する
オブジェクトメニューからシーン上にオブジェクトをドラッグします。
オブジェクトとインスタンス
シーンに設置されたオブジェクトは「インスタンス」と呼ばれます。
オブジェクトをイベントから生成、削除、変更など手を加えることはできませんが、シーンに配置されたインスタンスは生成、削除、変更などイベントによってそのシーンに限り手を加えることができます。
それがオブジェクトとインスタンスを区別する理由です。
オブジェクトに変更を加える場合はこれまでのようにシーンエディタから編集します。
タイルスプライトはアニメーションしませんが、ハンドルを掴んで引き伸ばすと
選んだ画像のパターンを繰り返しながら自由にサイズを変更できます。
このタイルスプライトを「Platform」と名付け、足場として使用します。
今度はPlayerもドラッグしてシーンに配置します。
PlayerとPlatformを配置したら背景色を変更しましょう
背景色が変更されました。
次にPlatformにビヘイビアを追加していきます。
今の状態ではPlatformは足場として機能していませんので、ビヘイビアによってPlayerが立って歩ける足場にします。
パラメーターは初期のままで構いません。
Platformにプラットフォームビヘイビアを追加したらシーンエディタに戻ってプレビューを確認してみましょう。
カーソルキーとスペースキーを押してPlayerを動かしてみましょう。
ここまで、シーンエディタのみでPlayerと足場を作成し、キーボードによる操作までが完了しました。
ここから先は「イベントエディタ」を使用して、さらにゲームとしての完成度を高めていきます。
イベントエディタ
ステップ:5 最初のイベントを追加する
まず最初に
Playerを左に移動したとき、Playerの向きを左右反転するようにイベントを組みます。
①その他の条件
②キーボード
③キーを押している
上記の順でクリックしてOKを押します。
どのキーを条件にするのかを求められるので、Leftキーを指定します。
条件が追加されたので、次にアクションを追加します。
①オブジェクト
②Player
③オブジェクトを水平方向に反転させる
④反転を有効にする「はい」
⑤OK
このイベントでは「Leftキーを押している」という条件に一致している間は「Playerを水平に反転する」というアクションが実行され続けます。
ただ、この段階では反転を戻すイベントを組んでいないので、一度Playerを反転させたらずっと反転したままになります。
なので反転を戻すイベントを追加しますが、先程追加したイベントをコピーして使用します。
先程のイベントをコピーして貼り付けたら、一部を書き換えます。
①「Left」→「Right」
②Playerを水平に反転する「はい」→「いいえ」
これにより「Rightキーを押している」という条件に一致している間は「Playerを水平に反転しない」というアクションが実行され続けます。
プレビューで確認してみましょう。
ステップ:6 アニメーションの追加
現段階ではPlayerは無操作状態でもずっと足踏みしています。
ですので、アイドリング時には立ち絵になるようなイベントを追加します。
そのために、一度イベントエディタを離れてシーンエディタに戻ります。
移動アニメーションとほぼ同じ手順で立ち絵のアニメーションを追加します。
一番上にあるアニメーションはデフォルトのアニメーションになります。
イベントでアニメーションを変更しない限り「アニメーション#0」が再生されます。
では。再びイベントエディタに移り、移動時にアニメーションを変更するイベントを追加しましょう。
ステップ:7 一つの条件に複数のアクション
Leftキーを押している間、Playerを水平方向に反転するイベントがありますが、そこへさらにアニメーションを変更するアクションを追加します。
アイドル状態のアニメーション番号は「0」で、移動中のアニメーション番号は「1」です。
ですので「0」のアニメーション番号の代わりに「1」を代入します
アニメーション番号ではなく、アニメーション名で指定することも可能です。
アイドル状態のアニメーション名は「Idle」で、移動中のアニメーション名は「Walk」です。
ですので「Idle」のアニメーション名の代わりに「Walk」を代入します。
「Rightキーを押している」の条件にも同様のアクションを追加します。
「Playerのアニメーションを変更する:"Walk"を代入」
「Playerのアニメーション番号を変更する:1を代入」
これらはいずれもアニメーションを移動用のWalkに変更します。
(値の部分に動的に変化する変数を代入することで、変数に沿ってアニメーションを変えることもできます。)
今の状態だと、停止中のIdleに戻すイベントがないので停止中もずっと足踏みし続けます。
ですので、キーを押していないときはアニメーション番号に「0」、またはアニメーション名に「Idle」を代入するイベントを追加します。
ステップ:8 条件の反転と複数の条件
条件の反転
条件を右クリックすると「条件を反転」という項目があります。
「Leftキーを押している」という条件を反転させた場合
「Leftキーを押していない」という条件になります。
「LeftキーもRightキーも押していない」という条件が揃っている間、Playerのアニメーションに「0(Idle)」を代入するというイベントを追加します。
イベントエディタを開きます。
新しいイベントを追加します。
条件は空欄にします。
空欄の条件とは「常に実行」と同義です。
空欄になっている条件にアクションを追加します。
①その他アクション
②オブジェクトの中央にカメラを合わせる
③オブジェクトに「Player」を入力
これで「無条件に、カメラがPlayerの中央に合わさる」というイベントが追加されました。
ちなみに、イベントはドラッグで順番を自由に変更できます。
無条件のイベントを一番上に移動させてみましょう
プレビューを確認してみましょう。
常に画面の中央にPlayerがくるようになりました。
ただ、Playerの下にあるスペースがかなり広いですね。
カメラの視点をすこし上にずらしてみましょう。
無条件のイベントにアクションを追加します。
カメラのY座標をPlayerのY座標から250Pixel引きます。
①その他アクション
②カメラ中央のY座標
③「値」の数式エディターを開く
④数式エディター内のオブジェクトを開く
⑤オブジェクト内の位置を開く
⑥位置内のY座標を開く
⑦パラメーターにPlayerを入力
「Player.Y()」と入力されましたね。
これは「PlayerのY座標」を取得する数式です。
カメラのY座標をPlayerのY座標から250Pixel引きますので、Player.Y()-250と入力します。
PlayerのY座標を取得するときに数式エディターを使わず、直接「Player.Y()」と入力しても構いません。
オブジェクトの座標以外にも、数式によってさまざまな値を取得できます。
数式一覧
それではPlatformを配置して自由にレイアウトしてみましょう。
■おわりに
Vol.1はステップ10までとなります。
おつかれさまでした。
次回、Vol.2では
ゴール、リスポーンポイント(復活地点)、ダメージ判定のある障害物、敵キャラ、アイテム、スコアを追加していきましょう。
最後までお読みいただきありがとうございました。
0 件のコメント:
コメントを投稿