レッスン19 スタート画面を作ろう1 | レーシングゲーム開発 | ゲーム開発で学ぶプログラミング

スタート画面を作ろう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();
  }
}