スタート画面を表示しよう2
スタート画面を表示してみましょう。
まず、スタート画面を描画するための drawStart
関数を定義してください。
function drawStart() { fill(17, 113, 155); textSize(30); text("フライトゲーム", 200, 200); textSize(15); text("タップしてスタート", 200, 250); }
text
を使うと、ゲーム画面上に文字を描画することができます。
text("文字列", X座標, Y座標)
のように指定します。
fill
で文字の色を指定し、 textSize
で文字の大きさを指定しています。
そして、 drawGame
関数内で、ゲームの状態が "start"
のときに drawStart
関数を呼び出すようにしましょう。
function drawGame() { image(skyImage, 200, 200, 400, 400); if (player.vy >= 0) { image(airplaneDownImage, 100, player.y, 50, 50); } else { image(airplaneUpImage, 100, player.y, 50, 50); } image(blockImage, block.x, block.y, block.w, block.h); if (gameState === "start") { drawStart(); } }
最後に、setup
関数内に次のコードを追加してください。
textAlign(CENTER, CENTER);
これは、指定した座標を中心として文字を表示するという意味になります。
ゲームを起動してみましょう。
スタート画面が表示されたと思います!
次のレッスンでは、マウスクリックでゲームが開始するようにしていきます。