p5.playの使い方を解説しております。
第1回の記事はこちらにありますのでご参照ください。
画像を適用する
スプライトに画像を適用します。(これがやりたかったんですよね!!)
下に簡単な画像を用意してみましたので、こちらをお使いください。
"右クリック -> ダウンロード -> 保存"で出来ると思います。
勿論、自分で画像を作る事もできます。
お勧めのオンラインエディタがありますのでご紹介しますね。
(最近は何から何までブラウザがあれば出来てしまうのです!!)
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();
}
うまく動いていれば、スプライトに画像が適用されている事がわかります。
(テンションが上がりますね!!)
次回はアニメーションについてのお話になります。