ゲームの背景画像を設定しよう2
オンラインエディタに画像はアップロードできたでしょうか?
それでは実際にコードを書いて背景画像を設定していきます。
まずは、画像データを保持するための変数を用意します。
変数とは、データを保持しておくための箱のようなものです。
変数について詳しく知りたい方は、以下の入門コースの解説をご覧ください。
変数とは - 入門コース
オンラインエディタの一番上の行に、次のコードを追加してください。
let skyImage;
画像データを保持するための変数 skyImage
を宣言しました。
次に、 setup
関数を次のように変更してください。
(setup
関数について詳しく知りたい方は次の入門コースをご覧ください: 最初のコードの解説 - 入門コース )
function setup() { createCanvas(400, 400); imageMode(CENTER); skyImage = loadImage("sky.jpeg"); }
以下のコードを追加しています。
imageMode(CENTER); skyImage = loadImage("sky.jpeg");
コードを解説します。
imageMode(CENTER);
まずこちらのコードは、座標を中心として画像を描画するという意味になるのですが、あまり重要な部分ではないので、ここではいったん「そんなものか」と思って先に進んでもらっても大丈夫です。
skyImage = loadImage("sky.jpeg");
この部分で、変数 skyImage
にアップロードした画像をセットしました。
次に、draw
関数を次のように変更してください。
(draw
関数について詳しく知りたい方は次の入門コースをご覧ください: 最初のコードの解説 - 入門コース )
function draw() { image(skyImage, 200, 200, 400, 400); }
これで、変数 skyImage
に格納されている画像が描画されるようになります。
画像を描画するには image
を使います。
次のように使います。
image(画像の変数, X座標, Y座標, 横幅, 縦幅)
今回は、ゲーム画面のサイズが400×400で、
画像を画面いっぱいに描画させたいので、
(X座標, Y座標) = (200, 200) ←真ん中
(横幅, 縦幅) = (400, 400)
に設定しています。
コードの変更は以上になります。
無事にコードを書けたでしょうか?
よくわからなくなってしまった方は、このページ下部にコード全文を載せていますので、確認してみてください。
それではゲームを起動してみましょう。
ゲームの背景画像が設定されました!