p5.playをやる記事#04_画像を適用する
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();
}
うまく動いていれば、スプライトに画像が適用されている事がわかります。
(テンションが上がりますね!!)
次回はアニメーションについてのお話になります。
おまけ動画(こちらもよろしくお願いします)
Author And Source
この問題について(p5.playをやる記事#04_画像を適用する), 我々は、より多くの情報をここで見つけました https://qiita.com/sdkfz181tiger/items/4207d679375ddae11b20著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .