プレイヤーを表示しよう
次はプレイヤー(飛行機)を描画させてみましょう。
飛行機画像のアップロード
それではまず、ブロックと同じように飛行機画像をオンライエディタにアップロードしましょう。
以下の2つの画像をダウンロードして、ゲームの背景画像を設定しよう1 と同じ手順で、オンライエディタにアップロードしてください。
飛行機画像の描画
続いて、ゲームの背景画像を設定しよう2 と同じ手順で、飛行機画像を描画します。
オンラインエディタの一番上の行に、次のコードを追加してください。
let airplaneUpImage; let airplaneDownImage;
画像データを保持するための変数 airplaneUpImage
と airplaneDownImage
を宣言しました。
上向きの飛行機と下向きの飛行機、2つ分です。
次に、 setup
関数を次のように変更してください。
function setup() { createCanvas(400, 400); imageMode(CENTER); skyImage = loadImage("sky.jpeg"); airplaneUpImage = loadImage("airplaneUp.png"); airplaneDownImage = loadImage("airplaneDown.png"); blockImage = loadImage("block.jpeg"); block = { x: 200, y: 200, w: 30, h: 30 }; }
以下のコードを追加しています。
airplaneUpImage = loadImage("airplaneUp.png"); airplaneDownImage = loadImage("airplaneDown.png");
この部分で、変数 airplaneUpImage
と airplaneDownImage
にアップロードした画像をセットしました。
次に、drawGame
関数を次のように変更してください。
function drawGame() { image(skyImage, 200, 200, 400, 400); image(airplaneDownImage, 100, 100, 50, 50); image(blockImage, block.x, block.y, block.w, block.h); }
これで、変数 airplaneDownImage
に格納されている画像が描画されるようになります。
今回は、(X座標, Y座標)=(100, 100)の位置に、サイズ50×50で描画するように設定しました。
それではゲームを起動してみましょう。
プレイヤー(飛行機)の画像が描画されました!
現時点ではまだ、ゲーム画面上の固定された位置に、下向きの飛行機を描画しただけになります。
次回以降のレッスンで、飛行機の動きと、動きに応じて上向きの飛行機を描画する処理を記述していきます。