[初心者向け]シンプルな避けゲームを作ってみよう！

うっほー！ゴッリラだよ！

みんな久しぶり！大学が始まり忙しくてあたふたしてたけど、
やっと落ち着いたんだ！突然だけど、この動画の事は覚えてる？？(*’▽’)

少し前に、10分でゲームを一つ作るチャレンジに挑戦したときの記事なんだけど、
今回はリクエストが来ていたので、その時作ったゲームの作り方を解説するよ！

かなりシンプルなゲームになってるから、試用版のGameMakerStudioでも
問題なく完成させることが出来ると思うよ！(*’▽’)

完成するとこんな感じになるよ！
試用版でも作れるように変更したから、動画とは少し違ってるよ！

説明の中に、色んなGameMakerStudio特有の用語が登場する事があると思うんだ！
軽くは紹介するけど、詳しく知りたい人は記事を貼っておくので、それをチェックしてね！

今回のゲームに使用する素材ファイル

1. ゲームのプロジェクトを作成しよう！

それじゃあさっそくゲームをつくっていこう！！
まずは、GameMakerStudioを起動して新しいプロジェクトを作成しよう！

NEWをクリック → GameMakerLanguageを選択 → ファイル名(今回は10MinGame)を入力

プロジェクトが作成出来たら、次にゲームのウィンドウサイズを変えよう！

画面右側のRoomをクリック → 左下のProperties内のWidth 510, Height 384を入力
*画像では500×500に設定しているけど、気にしないでね！(‘ω’)

次に、ゲームのフレームレートを60fpsに設定しよう！
fpsはゲーム画面が毎秒更新される回数のことで、最近のゲームは大体fps60になっているよ！

画面上の歯車マークをクリック　→　General内のGame frames per secondを60に変更

変更できたらゲームの背景色を変更していこう！
画面右Resource内のRoomsをクリック → room0をダブルクリック

room画面が開かれたら、

Backgroundレイヤーを選択　→ Colourをクリック

するとカラー選択画面が出てくるので、

HEXにB2B2B2と打ち込もう！(自分な好きな色でいいよ！黒はダメ！)

これでプロジェクトの作成は完了だよ！早速ゲームを作り始めよう！ 

2. プレイヤーを作ろう！

ゲームの設定も出来たところで、さっそくプレイヤーを作っていこう！
まずは、素材ファイルからプレイヤーの画像をダウンロードしてね！

・プレイヤーのSpriteを作成しよう！

まずは、プレイヤーを表示するためのSpriteを作成していこう！

画面右Resource内のSpritesを右クリック　→　Create Sprite

すると空のSpriteが作成されるので、

①Spriteの名前を”s_player”に変更しよう(自分で分かるなら何でもいいよ!)

②Importをクリックして、プレイヤーのSpriteを読み込もう

Import →　ダウンロードしたファイルに移動 → player1~3を選択して開くをクリック

必ず3つの画像を選択してね！

③Origin(原点)をBottom Centerに変更しよう！

GMSでは、原点を中心にオブジェクトが移動するんだ！初期の位置のままだと、
プレイヤーを反転させた時に違和感があったから変更したよ！

・プレイヤーのオブジェクトを作成しよう！

次に、プレイヤーのオブジェクトを作成していこう！

画面右Resource内のObjectsを右クリック　→　Create Objectを選択

空のオブジェクトが作成されたら、

①Spriteの名前を”o_player”に変更しよう！(自分で分かるならなんでもok)

②…マークをクリックして、先ほど作成したプレイヤーSpriteを割り当てよう！

③Add EventをクリックしてCreate Eventを追加しよう！

Create Eventは、インスタンスが生成された時に呼び出される
イベントのことで、記述されたプログラムを実行してくれるんだ！

Create Event内では主に、プレイヤーのhpや移動速度などの
インスタンス変数を宣言するときに使用するよ！

変数については、こちらの記事を参考にしてね！

【GMS】変数の宣言と種類を解説

2018年10月15日

オブジェクト/インスタンスについては、こちらの記事を参考にしてね!

【GMS】オブジェクト、インスタンスとは？

2018年10月20日

以下のコードを記述してね！

ここでは2つの変数を宣言していて、moveSpeedはプレイヤーの移動速度を表しているよ！
もう1つのimage_speedは、GMSに用意された組み込み変数で、Spriteのアニメーションが
再生される速度を管理しているんだ！

今のままだと、プレイヤーが動いていない時もアニメーションが再生されてしまうので、
image_speedを0に設定することで、それを阻止しているんだ！

image_speedが1の時

image_speedが0の時

④Add Eventをクリックして、Step Eventを追加しよう！

Step Eventは、毎フレーム実行されるイベントの事だよ！
今回ゲームのfpsを60に設定したので、1秒間に60回このイベントが
実行されるということだね！

ここでは、プレイヤーの動きを制御するプログラムを記述しよう！

まって！！ブラウザを閉じないで～(´；ω；`)何をしているのか一つ一つ説明するから
安心してね！(*’▽’)

*ローカル変数は、イベントが実行し終わった後に削除される変数の事だよ！

*keyboard_check()関数は、指定したキーが押されている間、1の値を返すよ！
  関数について詳しく知りたい人はこの記事を参考にしてね！

ここでは、moveというローカル変数を宣言していて
そこにキー入力の結果を代入しているんだ！

プレイヤーが~
右キーのみを押している場合は1
左キーのみを押している場合は-1
両方のキーを押している/押していない場合は0の値を持つよ！

ここでは、switch文を使ってmoveの値に応じて処理を分岐させているよ！
switch文についてはこちらの記事を参考にしてね！

*image_xscale Spriteの横幅の比率を管理する組み込み変数
*例 image_xscale = 2; だと画像の横幅が2倍になる
*x+=moveSpeedは、x = x+moveSpeedを省略した形

switch内の1つめのブロックでは、moveの値が1の時(左キーが押されている時)

image_speedを1に変更して、Create Eventで無効にした
アニメーションを再生するように設定しているよ！

そのあと、image_xscaleを1に変更して、プレイヤーを右方向に向かせているんだ！
最後に、プレイヤーのx座標にmoveSpeedの値を足して、右方向に進行させているよ！

GameMakerでは、右方向に進むほどにxの値が大きくなり、下方向に進むほどyの値が大きくなるんだ!

2つめのブロックでは、moveの値が-1の時(右キーが押されている時)

さっきと同じようにimage_speedを1に変更した後、
image_xscaleの値を-1に変更して、プレイヤーを左方向に向かせているよ！
最後に、プレイヤーのx座標からmoveSpeedの値を引いて、左方向に進行させているんだ！

3つめのブロックでは、moveの値が0の時(両方押されているかどのキーも押されていない時)

image_speedの値を0に変更して、アニメーションが再生されないようにしているよ！
その後、image_indexの値を0に変更して、プレイヤーの画像を最初のものに設定しているんだ！

2番目の画像の時に止まってしまうと、浮いてるように見えてしまうからね!

これでプレイヤーの動きに関する処理は完成だよ！配置してみて実際に動作するか確認してみよう！

画面右にあるResource内のRoomsをクリック　→ room0を選択　→ Objects内のo_playerを
room内にドラッグアンドドロップ

配置ができたら、ゲームを起動してみよう！

F5または、画面左上の”▷”マークをクリック

画像の通り、キーを押した時プレイヤーが動けば成功だよ！
何かエラーが起きたら、コードの打ち間違えがないか確認してね！！

原因がわからーーーんという人は、いつでもコメントまたは
@hellomanakiで質問を受け付けているよ！

この記事も参考になると思うよ！

GameMakerStudio よく起きるエラーとその対処方法！

2018年11月27日

ひとまずこれでプレイヤーは完成だよ！次に敵を作っていこう！

3. 敵を作っていこう!

次に、上から降ってくる敵を作っていこう！

・敵のSpriteを作成しよう

プレイヤーの時と同じ手順で、新しいSpriteを作成しよう！

①Spriteの名前をs_enemyに変更しよう!

②…をクリックして敵の画像を読みこもう!

③原点をMiddle Centerに変更しよう！
プレイヤーの時とは違って敵は回転させたいので、均等になるように
今回は中心に設定したよ!

・敵オブジェクトを作成しよう！

次に敵オブジェクトを作成しよう！

①オブジェクトの名前をo_enemyに変更しよう！

②…をクリックして、さっき作成した敵Spriteを割りあてよう！

③Add Eventをクリックして、Create Eventを追加しよう！

以下のコードを記述してね！

*irandom_range(数字1,数字2)は、与えられた二つの数字の間からランダムな整数を返すよ！
例 irandom_range(1,3) → 1

*random_range(数字1,数字2)は、ランダムな実数を返すんだ！
例 random_range(1,3) → 1.35

ここでは3つの変数を宣言していて、それぞれにランダムな値を与えているよ！
sizeは敵の大きさ、grvは敵が落ちてくる速度、rsは敵の回転速度を表しているんだ！

そのあとSpriteの横幅、縦幅を管理しているimage_xscale,image_yscaleを
sizeの値に設定しているよ！(1の場合はそのまま、2の場合は2倍の大きさ)

ここのランダム値の範囲は、ゲームを遊んでみて自分の好きなように変更してね！

④Add Eventをクリックして、Step Eventを追加しよう！

以下のコードを記述してね！

*image_angleは、Spriteの角度を管理する組み込み変数

ここでおさらい！Step Eventは、毎フレーム呼び出されるイベントのことだよ！
つまりここでは、毎フレームy座標にgrvの値を追加しているんだ！

その後はimage_angleにrsの値を足して敵を回転させているよ！

・プレイヤーとの当たり判定を追加しよう

Add EventをクリックしてプレイヤーとのCollisionイベントを追加しよう!

Collision Eventは、インスタンス同士が接触した時に呼び出されるイベントだよ！

以下のコードを追加してね!!

room_restart()関数は、呼び出された時にゲームをリセットしてくれるんだ！
こうすることで、プレイヤーが敵と接触した時に、ゲームオーバになるよ！

やったね！敵オブジェクトはこれで完成だよ！

・敵スポナーを作ろう！

次に、敵をスポーンさせるスポナー作成にとりかかろう！
スポナーにSpriteは必要ないので、まずはオブジェクトを作ろう！

①オブジェクト名をo_spawnerに変更しよう！

以下のコードを記述してね！

Alarmとは指定したフレーム後に実行されるイベントのことで、
一つのオブジェクトにつき、12個までセットすることができるんだ！

詳しくはこちらの記事をみてね(*’▽’)

GameMakerStudio アラームとは？

2018年11月6日

ここでは、0番目のAlarmが60フレーム(1秒)後に実行されるように設定しているよ！

③Add Eventをクリックして、Alarm[0]を追加しよう！

以下のコードを記述してね！

ここでは、3つの変数を宣言していて、それぞれにランダムな値を代入しているよ！
spawnは敵をスポーンさせるかどうか、rxはどれだけスポーン位置をずらすか、
rfは次何フレーム後に、このAlarmが呼び出されるかを表しているんだ！

そして処理の流れとしては、変数が宣言された後
最初にspawnの値が確認され、true(1)であればinstance_create_layer()関数が
呼び出されて、指定した位置に敵オブジェクトのインスタンスを作成しているんだ！

毎回同じ位置にスポーンしてほしくないので、rxを使って少し移動させているよ！
最後にもう一度このAlarmをセットして、rfフレーム後に呼び出されるようにしているんだ！

これでスポナーは完成だよ！ゲームに配置してみよう!

画像のように、Roomの上の方にいくつか配置してね！

4. 足場を作ろう

今の状態だと、プレイヤーが浮いているように見えるので、足場を追加しよう！

・足場のSpriteを作成しよう

まずは、新しいSpriteを作成しよう!

①Sprite名をs_floorに変更しましょう！

・足場のオブジェクトを作成しよう！

①オブジェクトの名前をo_floorに変更しよう！

②…をクリックしてさっき作成した足場Spriteを割り当てよう！

なんと、足場オブジェクトはこれで完成だよ！ゲームに配置しよう！

5. スコア管理システムを作ろう

もう完成は近いよ！(*’▽’)最後にスコアを管理するシステムを作成しよう！
このオブジェクトもSpriteが必要ないので、オブジェクトから作成するよ！

①オブジェクトの名前をo_scoreに変更しよう！

②Add EventをクリックしてCreate Eventを追加しよう!

ここでは、ゲームのスコアを管理する組み込み変数のscoreの値を0に設定するよ!
scoreはグローバル変数といって、どのオブジェクトからでも呼び出すことができるんだ！

Draw GUIイベントは、画面にグラフィカルユーザーインターフェースを表示するための
イベントだよ！ここでは、スコアを表示するのに使用するよ！

以下のコードを記述してね！

*room_widthはroomの横幅の値を保持する組み込み変数だよ！

ここでは、最初にdraw_set_color(c_black)でテキストの色を黒に変更して、
draw_set_halign(fa_center)で、テキストの原点を中心に設定しているよ！
最後にdraw_text()を使って、スコアを画面に表示させているんだ！

draw_text()は3つの引数x,y,表示するテキストを受け取るよ！
今回はテキストを真ん中に表示したいので、roomの横幅の半分をx、
一番上に表示したいので0をy、そして”Score”という文字列と変数
scoreの値をテキストとして渡しているよ！

文字列と数字を直接足すことはできないので、string()関数をつかって
数字を文字列に変換しているんだ！

スコアが増えるようにしよう！

敵が床と接触した時に、scoreの値が増加するようにしよう！
敵オブジェクトに、床とのCollizion Eventを追加してね！

追加できたら、以下のコードを記述しよう！

ここでは、scoreの値を1つ増加させた後、衝突した敵をinstance_destroy関数を使って、
ゲームから削除しているよ！

まとめ

これで完成だ！！！最後にスコアオブジェクトを配置して、ゲームを起動させてみよう！

画像の通り動いていたら成功だよ！何か問題があれば、コメント
@hellomanakiでいつでも力になるよ！

お疲れ様！また次の記事で会おうね！