スプライトシートを手軽にアニメーションさせます。 sprite sheet animation easily.
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
ff6_sandara.png
ff6_suripulu.png
index.html
jquery-1.9.0.min.js
jquery.spritearea.js
jquery.spritearea_bu.js
sandara_a.png
sandara_b.png

README.md

spriteArea.js

スプライトシートを手軽にアニメーションさせます。 sprite sheet animation easily.

特徴

  • 指定したdiv内にスプライト画像を並べるだけでアニメーションしてくれる。
  • div単位の指定なのでいちいち画像ごとに指定しなくてよい。
  • 複数のエリアを作るごとができる。エリアごとにセル幅やFPSの違うものを指定できる。

使用法

<!-- divのクラス名をsprite_areaと指定し、data-widthとdata-heightに1セルの幅と高さを指定、data-fpsでそのエリアのfpsを定義する -->
<div class="sprite_area" data-width="192" data-height="192" data-fps="24">
    <img src="hoge.png">
    <img src="piyo.png">
    <img src="nyaaa.png">
    <img src="wan.png">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.spritearea.js"></script><!-- bodの閉じタグ直前にjQueryと本ファイルを読みこませる -->

demo page

http://retasretas.github.io/spriteArea.js/