canvasでのアニメーション方法について

Question

canvasで以下のような連続した複数のアニメーションを実装したいのですが、
スキル不足のため、どのように実装すればよいかアドバイスを頂けないでしょうか。

■実現したいこと
・対象を○秒かけてX軸に〇〇px移動させる
↓
・対象を○秒かけてY軸に〇〇px移動させる
↓
・○秒間待機させる
↓
・対象を○秒かけて○○回転させる
↓
・○秒間待機させる

上記はあくまで例ですが、上記の複数のアニメーションを繰り返し行い、
また対象は複数あり、初期位置をランダムに変更するなどで、
より複雑なアニメーションに見せる工夫も取り入れたいと考えております。

上手く伝えられているかわかりませんが、たくさんのキャラクターを用意し、
歩く→停止→ジャンプする→停止→走る
のようなイメージです。

現状はCanvasの入門記事を見ながら、プリミティブの表示や画像を読み込んで表示するなど描画に関する基礎知識、
時間経過で延々と回転させる、等の簡単なアニメーションが実装できる、程度のスキルになります。
ここから一歩進んで、複雑なアニメーションを管理したのですが、
なかなか情報も見つけられず困っております。

また、JSライブラリはPIXI.jsを使用しておりますが、
Pixi.js特有のアドバイスでも、Canvasアニメーション自体のアドバイスでも
頂けますと幸いです。

何卒、よろしくお願いいたします。

Comments

[miyabi_pudding]

ご自分でどこまでやって、ここからができないなど、
具体的にソースコード付きで質問されることを勧めます。
簡単なアニメーションを実装できるのならば、その部分のソースコードを記載するでもよしです。
（なぜなら、そこを見れば、どこまでできるか、どこまでできないかがある程度見えてくるからです。
そして、そこが基本だから。）
質問は編集できるので、修正しましょう。

Answer 1

ソースコードや具体的な質問にはなっておりませんが、
現時点でのご質問の回答をさせていただきますと、
多数のオブジェクトを、動的に扱うならば、
オブジェクト指向の概念から勉強されるといいかと思います。
例えば一万個のオブジェクトを、同時にアニメーションさせるとしたら、一個一個のアニメーションを手で全部作るわけには行かないですよね？
そういう時、オブジェクト指向な書き方がかなり重要になります。
四年ほど前までは、JavaScriptはプロトタイプ構文で、なんちゃってオブジェクト指向な書き方しかできませんでしたが、
2015年以降から、他のクラスベースのオブジェクト指向言語と同じような書き方ができるようになりました。

JavaScript オブジェクト指向 classとかで検索すると、いろいろ出てくると思いますので、
そちらで勉強されるといいかと。

また、canvasを使用したゲームプログラミングの書籍では、
ちょっと古いですが、
ゲームプログラミングのための HTML5 CANVAS入門
こちらがかなり参考になります。
JSで、オブジェクト指向により、大量オブジェクトを扱う方法なども書かれているので、かなりためになる本です。
（ただし、2012年の本なので、class構文による構築の記述はない）

ここまで書きましたが、基本は、一個のオブジェクトのコントロールです。
まずは、一個のオブジェクトを、質問されているように動かせるようになってから、
オブジェクト指向の概念を学び、大量のオブジェクトを扱えるようになっていくのがよいのではないでしょうか。

Comments

[stack-overflow]

回答ありがとうございます。
質問後もいろいろ勉強していくうちに、トゥイーン系ライブラリを導入することで
今回質問した内容の大部分が解決いたしました。

しかし、新たにわからないこともでてきましたので、
一度この質問は解決とし、新たな疑問点の内容やソースコードをまとめて
別の質問を投稿しようと思います。

アドバイスありがとうございました！