アニメーション管理の方法まとめ。 一番簡単なもの。

1. アニメーション
第２回

2. ゲームの世界ではキャラクタが動くことが当たり前！

3. とは言え、どうやってアニメーションしてるの？
というお話。

4. そもそも！
ゲームっていったい何がどうなって動いてるの？

5. ゲームというのは、

7. 全ての点で 描いてみると

9. ゲームというのは、計算に基づいてキャラクターを
どんどん移動させているだけなのです！
知ってました？

10. ちなみにこのキャラクターの更新頻度をフレームと言います。

11. 30 フレーム
といった場合には、１秒間に 30 回計算しなおしています。
60 フレームの場合は１秒間に 60 回です。
ゲームの基本は 60 フレームで、
わずか 0.016 秒しかありません！
0.016 × 60 = 0.96 秒

12. じゃあ実際にコンピュータの中で
画面が完成していく姿を追って行ってみましょう

14. こんな風に順番を追って
毎回１から１つずつ描きなおすのが基本です。
WEB ページなんかは差分だけ描きなおしています。

15. でも、せっかく位置を変えてキャラクタを描きなおしているなら、
新しい絵に置き換えてみたらいいじゃない？

16. 例えばこんな順番に！

17. すると…

18. こうなる！

19. これで理屈はカンペキ！
あとはこれをプログラムで表現するだけ！
でもこれが小難しいんですけどねー

20. プログラムの世界では、こんな画像を使います！
こういう素材をテクスチャといい、
テクスチャ更新したよ！ っていうとすごく専門家っぽい！

21. ちなみにこのマリオの並び順、
ある規則があるのですが、わかります？
手元の mariobros.png をペイントで見てみましょう。

22. Windows の人は Win + R を押して、mspaint と入力
Mac の人は Control + Space で macpaint と入力
こちらのサイトから画像をダウンロードして
そのファイルを開いてみてください。

23. わかります？

24. ちなみにその規則に従っているのにはきちんとした理由があります！

25. 噂には聞いたことがあるかと思いますが、
コンピュータというのは２進数というので動いています。

26. 01011010
というのは、コンピュータにとっては
人間でいうところの 90 に値する数の並びになります。
そして、２より大きい数字は出てきません。
２進数というのはそういう感じの意味です。
例えば、

27. 10
はそのまま１０を表し、この単位でものを考えるのが楽です。
10、100、1000 といった単位で。
人間は１０進数でものを考えているので

28. 10
は 2 を表し、この単位でものを考えるのが楽です。
10、100、1000 といった単位で。
これを 10 進数で表すと…？
一方コンピュータは2進数でものを考えているので

29. そんなわけで、コンピュータは 2 の乗数倍で考えるのが得意なので
テクスチャのサイズも
10000000 => 32 とか、64、256 とかでそろえるのが良いです。

30. こんな風に
16 dot
16 => 10000

31. 現代では 32 ドット位使っても全然平気です。
マリオでも 16 ドット使ってますが、
面積は 4 倍になっているので
結構コンピュータにとっては結構大変です！

32. もし自分で作ったキャラクタを使いたくなったら
そんな感じの規則に従ったテクスチャを作ってください！

33. ではアニメーションを付ける話に戻ります！

34. コンピュータの方にはこういうことが簡単に出来るように、
テクスチャのこの部分を使います
みたいなことが出来るようになっています。

35. このテクスチャのどの部分を使うかを示す値を
UV 座標と呼んでいます。
テクスチャの座標の話なので
テクスチャ座標と呼んでも意味は同じですが、
UV 座標という言い方がカッコいいです！

36. じゃあこの UV 座標をいじってアニメーションさせてみましょう。

37. player には、u と v というのが定義してあります。
Update() で player.u と player.v を変更することで
表示する絵を変更してみましょう！
変更する値は今回勉強した規則を使います！
ここから先は皆さんの方で試してみてください。
私や周りの出来た人に質問してみても構いません。
出来れば答えズバリでない方法で教えてあげてくださいね（笑）

38. では今回の講義はこれにて終わりです。
お疲れ様でした。