プレイヤーを表示しよう

次はプレイヤー(飛行機)を描画させてみましょう。

プレイヤー(飛行機)

飛行機画像のアップロード

それではまず、ブロックと同じように飛行機画像をオンライエディタにアップロードしましょう。
以下の2つの画像をダウンロードして、ゲームの背景画像を設定しよう1 と同じ手順で、オンライエディタにアップロードしてください。

airplaneUp.png
airplaneDown.png

飛行機画像の描画

続いて、ゲームの背景画像を設定しよう2 と同じ手順で、飛行機画像を描画します。

オンラインエディタの一番上の行に、次のコードを追加してください。

let airplaneUpImage; let airplaneDownImage;

画像データを保持するための変数 airplaneUpImageairplaneDownImage を宣言しました。
上向きの飛行機と下向きの飛行機、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");

この部分で、変数 airplaneUpImageairplaneDownImage にアップロードした画像をセットしました。

次に、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で描画するように設定しました。

それではゲームを起動してみましょう。

プレイヤー(飛行機)

プレイヤー(飛行機)の画像が描画されました!

現時点ではまだ、ゲーム画面上の固定された位置に、下向きの飛行機を描画しただけになります。
次回以降のレッスンで、飛行機の動きと、動きに応じて上向きの飛行機を描画する処理を記述していきます。

オンライン相談

つまづいたときは

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

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.