プレイヤーとして画像を表示しよう

好きな画像をアップロードしてゲーム画面に表示する方法を解説します。

今回のレッスンでは、これまで赤い四角形だったプレイヤーを、車の画像に変更したいと思います。

まず、オンラインエディタに画像をアップロードしましょう。
下の画像をダウンロードしてください。
(画像を右クリックして「名前を付けて画像を保存」でダウンロードできます)

car.png

次に、オンラインエディタ上で、次のボタンをクリックしてください。

ファイルエクスプローラーアイコン

このボタンは青い四角で囲った位置にあります。

ファイルエクスプローラーアイコンの位置

「スケッチファイル」 と書かれている文字の右側のアイコンをクリックして、
「ファイルアップロード」 をクリックしてください。

ファイルアップロード

ファイルをアップロードできる画面が出てくるので、先ほどダウンロードした車の画像をアップロードしてください。

アップロードが完了すると、以下のように 「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 に格納されている画像が表示されるようになりました。

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

プレイヤー画像

プレイヤーとして、車の画像が表示されるようになりました!

オンライン相談

つまづいたときは

レーシングゲーム
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.