スタート画面を作ろう1

これまでは、ゲームを起動した瞬間からゲームが動き出していました。

そこで、ゲーム起動時にスタート画面を表示し、マウスクリックしたらゲームが動き出すようにしましょう。

「スタート画面かどうか」「ゲーム開始中かどうか」 といった状態は 変数で表現し、 条件分岐によって処理を切り替えます。

まずは、ゲームの状態を管理するための変数を定義します。
エディタの一番上の行に、以下のコードを追加してください。

let gameState = "start";

stateとは英語で状態を意味します。

次に、draw 関数の部分を次のように変更してください。

function draw() { updateGame(); background(0); drawRoads(); drawPlayer(); } function updateGame() { if (gameState === "start") { return; } updateRoads(); }

新しく updateGame 関数を定義し、draw 関数内で呼び出しています。
updateRoads 関数は updateGame 関数内で呼び出すように変更しました。
そして、ゲームの状態が "start" のときは、return をして updateRoads 関数が呼ばれないようにしています。
return を実行すると、その関数の処理はそこで終了になります)
updateRoads 関数が呼ばれなけば、コースが動くことはありません。

ここまでできたら、一度ゲームを起動してみましょう。
コースが動かないことが確認できると思います。

次にスタート画面を表示しましょう。
draw 関数の部分を次のように変更してください。

function draw() { updateGame(); background(0); drawRoads(); drawPlayer(); if (gameState === "start") { drawStart(); } } function drawStart() { fill(255, 0, 0); textSize(30); text("レーシングゲーム", 200, 200); textSize(15); text("タップしてスタート", 200, 250); }

新しく drawStart 関数を定義し、ゲームの状態が "start" のときに draw 関数内で呼び出すようにしました。

drawStart 関数では、 「レーシングゲーム」「タップしてスタート」 の文字を表示するという処理を行っています。

次に、setup 関数を次のように変更してください。

function setup() { createCanvas(400, 400); rectMode(CENTER); textAlign(CENTER, CENTER); createRoads(); }

次のコードを追加しました。

textAlign(CENTER, CENTER);

これは、指定した座標を中心として文字を表示するという意味になります。

ゲームを起動してみましょう。
スタート画面が表示されたと思います!

スタート画面

最後に、一連の描画処理を関数にまとめておきましょう。

draw 関数の部分を次のように変更してください。

function draw() { updateGame(); drawGame(); } function drawGame() { background(0); drawRoads(); drawPlayer(); if (gameState === "start") { drawStart(); } }

新しい関数 drawGame を定義し、一連の描画処理をまとめました。

今回のレッスンはここまでです。
ページ下部にコード全文を載せていますので、わからなくなったら確認してみてください。

次のレッスンでは、マウスクリックでゲームが開始するようにしていきます。

オンライン相談

つまづいたときは

レーシングゲーム
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.