画像を適用する

スプライトに画像を適用します。(これがやりたかったんですよね!!)
下に簡単な画像を用意してみましたので、こちらをお使いください。
"右クリック -> ダウンロード -> 保存"で出来ると思います。

勿論、自分で画像を作る事もできます。
お勧めのオンラインエディタがありますのでご紹介しますね。
(最近は何から何までブラウザがあれば出来てしまうのです!!)

Piskel

Piskelはとても便利なオンラインツールです。
挑戦したい方は、この動画を参考にしてくださると幸いです。(宣伝です!!)

画像ファイルをスケッチにアップロードする

先ほどの画像(タヌキの画像です)を、スケッチにアップロードしましょう。
スケッチの右側にあるメニューボタンをクリックします。

次に、"Files"をクリックし、"Drag files here or select"のエリアに画像ファイルをドラッグ&ドロップします。
アップロードが完了するとファイル名が表示されます。(t_tanu.pngという感じです)
このファイル名を使ってロードしますので覚えておきましょう。

画像ファイルをロードする

ここからはプログラムのお話になります。
p5.playで画像や音声ファイルを使用するには、事前にロードする必要があります。
今回は画像ファイルですので、loadImage関数を使います。
引数には、先ほどアップロードした画像ファイルの名前を記述します。(確認しておきましょう)
この関数を記述する場所はpreload関数の中になります。

loadImage(ファイル名);

最後に、addImage関数を使って画像データを適用します。

スプライト.addImage(画像データ);

あらかじめ変数"img"を用意し、ここに画像データを格納します。
全体としては下記の様になります。

let img;// 1, 画像データを格納する変数

function preload(){
   img = loadImage("t_tanu.png");// 2, 画像をロードする
}

function setup(){
   createCanvas(windowWidth, windowHeight);
   frameRate(32);
   noSmooth();
   let spr = createSprite(width/2, height/2);
   spr.addImage(img);// 3, 画像データを適用する
}

function draw(){
   background(0);
   drawSprites();
}

うまく動いていれば、スプライトに画像が適用されている事がわかります。
(テンションが上がりますね!!)

次回はアニメーションについてのお話になります。

前回の記事 | 次回の記事

おまけ動画(こちらもよろしくお願いします)