アニメーションの適用

スプライトにアニメーションを適用します。(お待たせ致しました!!)
下に3枚の霊夢画像を用意してみましたので、こちらをお使いください。
"右クリック -> ダウンロード -> 保存"をしてください。

霊夢(GOOD)

reimu_good_01.png

reimu_good_02.png

reimu_good_03.png

勿論、自分で画像を作る事もできますよ。

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

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

次に、"Files"をクリックし、"Drag files here or select"のエリアに画像ファイルをドラッグ&ドロップします。

アップロードが完了するとファイル名が表示されます。(reimu_good_01.pngという感じです)
このファイル名を使ってロードしますので、ファイル名を覚えておきましょう。

画像ファイルのロードとアニメーション

"preload関数"で、画像ファイルを読み込みます。
"loadAni関数"は、複数のファイルをまとめてアニメーション化します。
(驚くほど簡単!!)

loadAni(アニメーション名, ファイル名, 連番数);

そして、スプライトに対し先程のアニメーション名を指定します。
(ついでにスケールも設定しましょう)

スプライト.ani = アニメーション名;
スプライト.scale = スケール;

具体的な実装は下記の様になります。
(1, 2, 3の順番で追いかけてみてください)

let reimu;

function preload(){
	// 1, アニメーション
	loadAni("r_good", "reimu_good_01.png", 3);
}

function setup(){
	createCanvas(windowWidth, windowHeight);
	frameRate(32);
	noSmooth();
	
	// スプライト(霊夢)
	reimu = new Sprite(width/2, height/2, 45);
	reimu.shapeColor = color("white");
	reimu.ani = "r_good";// 2, アニメーションの適用
	reimu.scale = 4;// 3, スケールの変更
}

function draw(){
	background(0);
}

スプライトにアニメーションを適用する事ができました。
(テンションが上がりますね!!)

次回はスプライトの動きについてのお話になります。