プレイヤーとして画像を表示しよう
好きな画像をアップロードしてゲーム画面に表示する方法を解説します。
今回のレッスンでは、これまで赤い四角形だったプレイヤーを、車の画像に変更したいと思います。
まず、オンラインエディタに画像をアップロードしましょう。
下の画像をダウンロードしてください。
(画像を右クリックして「名前を付けて画像を保存」でダウンロードできます)
次に、オンラインエディタ上で、次のボタンをクリックしてください。
このボタンは青い四角で囲った位置にあります。
「スケッチファイル」 と書かれている文字の右側のアイコンをクリックして、
「ファイルアップロード」 をクリックしてください。
ファイルをアップロードできる画面が出てくるので、先ほどダウンロードした車の画像をアップロードしてください。
アップロードが完了すると、以下のように 「car.png」 が表示されていると思います。
以上で画像ファイルのアップロードは完了です。
続いてコードを変更していきます。
画像の変数を用意します。
エディタの一番上の行に、次のコードを追加してください。
let playerImage;
次に、 setup
関数を次のように変更してください。
function setup() { createCanvas(400, 400); rectMode(CENTER); textAlign(CENTER, CENTER); imageMode(CENTER); playerImage = loadImage('car.png'); resetGame(); }
以下のコードを追加しています。
imageMode(CENTER); playerImage = loadImage('car.png');
これで、座標を中心として画像が表示される設定になり、
変数 playerImage
に画像がセットされました。
最後に、drawPlayer
関数を次のように変更してください。
function drawPlayer() { image(playerImage, mouseX, mouseY, 30, 30); }
これで、変数 playerImage
に格納されている画像が表示されるようになりました。
それではゲームを起動してみましょう。
プレイヤーとして、車の画像が表示されるようになりました!