p5.playの使い方を解説しております。
第1回の記事はこちらにありますのでご参照ください。
アニメーションを適用する
今度はアニメーションに挑戦です。
前回の記事では単純に画像を適用していましたが、今回は"スプライトシート"を使います。
スプライトシートとは?
スプライトシートとは、"複数の絵が並べてある画像"の事です。
5つのキャラクターが並べて描かれてありますが、これは1枚の画像です。
この画像の1部を順番に表示する事でアニメーションを実現します。
"パラパラアニメ"を想像するとわかりやすいかと思います。
上記の画像を、スケッチにアップロードしておきましょう。
(前回の記事を参考にしてみてくださいね)
スプライトシートの作り方
スプライトシートの作り方ですが、オススメのオンラインエディタがあります。(お気に入りです!!)
こちらも動画を用意しておりますので参考にしてみてくださいね。
スプライトシートとアニメーションのロード
では、さっそく使ってみましょう。
アニメーションを実現するには、2つの関数を利用する事になります。
１つ目はloadSpriteSheet関数です。
引数には、スプライトシートとして読み込む対象のファイル名、横幅、高さ、コマ数を指定します。
今回のスプライトシートの場合は1コマの大きさが144x144になり、5コマになりますね。
let ss = loadSpriteSheet(ファイル名, 1コマの横幅, 1コマの高さ, コマ数);
そして2つめは、loadAnimation関数です。
この関数の引数には、先ほど作ったスプライトシートオブジェクトを指定するだけです。
let an = loadAnimation(スプライトシートオブジェクト);
アニメーションの適用
最後はスプライトに対してaddAnimation関数を実行するだけです。
タグ名には、任意のアニメーション名を指定します。("run"とか"jump"とか自由に決めましょう!!)
スプライト.addAnimation(タグ名, アニメーションオブジェクト);
全体のコードは下記の様になります。
let an;// 1, アニメーションを格納する変数
function preload(){
let ss = loadSpriteSheet("t_run.png", 144, 144, 5);// 2, 画像をロードする
an = loadAnimation(ss);// 3, アニメーションをロードする
}
function setup(){
createCanvas(windowWidth, windowHeight);
frameRate(32);
noSmooth();
let spr = createSprite(width/2, height/2);
spr.addAnimation("run", an);// 4, アニメーションを適用する
}
function draw(){
background(0);
drawSprites();
}
上手くいけば、下記の様にタヌキが歩き出します。(素敵!!)
次回も引き続き、スプライトについてのお話になります。