knagaiスプライトシートアニメーションの基本的な手順アニメーションの表現では、たとえばゲームキャラクターの動きなどに”スプライトシート”がよく使用されます。スプライトシートとは、動かしたいアニメーションの全フレーム(コマ)を1枚の画像として用意し、プログラミングから各コマを順番に”切り出して”高速に切り替えて描画することで、アニメーションに見せる方法を言います。Artwork」からダウンロードしたPNG形式のスプライトシートです。p5.jsのキャンバスに、p5.play.jsを使ってスプライトシートアニメーションを描画する基本的な手順は次の通りです。スプライトシートアニメーションに使用するPNG画像を用意する。p5.jsのpreload()関数で、p5.play.jsのloadSpriteSheet()を使ってスプライトシート画像を読み込み、その結果をloadAnimation()に渡す。p5.jsのdraw()関数で、p5.play.jsのanimation()を使って、アニメーションを表示する。次のコードは、上記バードモンスターのスプライトシート画像を使って、スプライトシートアニメーションを表示します。Artwork」p5.play.loadSpriteSheet()を呼び出すときには、スプライトシート画像のほかに、描画するフレーム(コマ)の幅と高さ、これを1周とするフレーム数を指定します。8);上図で示したmonster_fly.pngの幅は1078ピクセルで高さは104ピクセルです。モンスターバードは8個描かれているので、最大で8フレームを1周とするフレーム数が指定できます。()フレームの幅と高さ、フレーム数を指定して、スプライトシートを読み込む。通常はスケッチのpreload()関数内で使用する。JSONデータを使ったスプライトシートアニメーションloadSpriteSheet()にはまた、各フレームの情報を定義したJSONデータを渡すこともできます。JSONデータは、次の構造で作成し、拡張子.jsonをつけて保存します。}]下図は次のサンプルで使用しているexplosion.pngファイルで、上記JSONデータの2つめのフレームを図示したものです。p5.playはこの情報を元に、explosion.pngの左上隅を原点として、点(115,0)を左上隅とする幅106、高さ106のフレーム用画像を切り出し、フレーム1のイメージとします。106)ですが、長方形でも構いません。次のコードは、explosion.jsonのフレーム情報を元に、explosion.pngから8個のフレーム用イメージを切り出し、スプライトシートアニメーションを表示します。これは、.jsonファイルの解析に時間がかかるので、それを待つ必要があるからです。});}コールバック関数には引数として解析後のJSONデータが渡されるので、それをそのままloadSpriteSheet()に渡します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。