スプライトアニメ | ドクロモエ

ゲームエンジンを使わずに、手軽に 2D ゲームを作る環境を調べているのですが、その過程で JavaScript を使った方法を調査したので得られた知見を共有したいと思います。

本稿で扱う内容

やり方としては、スタイルシートの要素を使う方法と、canvas を使う方法のふたつあります。
本稿ではスタイルシートの要素を使う方法について共有します。

てっとり早く確認したい場合

PC でご覧の方なら、この Web ページの左上に 8-bit ゲームっぽいキャラ※が見えると思いますが、これは GIF アニメや PNG アニメを使っていません。
スマホやタブレットでご覧の方は、右上の ≡ をタップすることで表示されます。

※キャラ名は「シモーネ/シモーヌ/Simone」です。

このキャラは JavaScript でスプライトアトラスを使ってスプライトアニメしています。
このウェブページのソースを見れば、スタイルシートと JavaScript のコードも確認できます。