スタート画面を表示しよう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);

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

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

スタート画面

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

オンライン相談

つまづいたときは

フライトゲーム
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.