スタート画面を作ろう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
を定義し、一連の描画処理をまとめました。
今回のレッスンはここまでです。
ページ下部にコード全文を載せていますので、わからなくなったら確認してみてください。
次のレッスンでは、マウスクリックでゲームが開始するようにしていきます。