A simple javascript library which can turn your 2d sprite sheet into live animation.
Branch: master
Clone or download
Pull request Compare This branch is even with ryvan-js:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
js
README.md
index.html

README.md

imageGoPlus

A simple javascript library which can turn your 2d sprite sheet into live animation.

Demo

https://ryvan-js.github.io/imageGoPlus/ - actually its pretty easy for you to try it out by yourself.

Dependencies

Works With Any Modern Broser

Initialization

Initializing the imagegoplus library.

Add player div wrapper into the <body> tag,try not to change the structure unless you know what you are doing but feel free to style it.

<div class='player'>
  <div id="imagegoplus" frames=10 rows=10 end=99 interval="100" jumpx="375" jumpy="375" startx="0" starty="0" img-src="./images/ssTest1.png" ></div>
</div>

<div class='action'>
  <button id="play" action="start" >Play</button><button id="restart">Restart</button>
</div>


<script type='text/javascript' src='js/imagegoplus.js'>

Add this into the <script> tag just before the </body>,this part initializes the player.

window.onload = function(){

    ImageGoPlus.init();
    var button = document.getElementById("play");
    document.getElementById("play").addEventListener("click",function(){

        if(this.getAttribute("action") == "start"){
            var x = ImageGoPlus.setting.startx;
            var y = ImageGoPlus.setting.starty;
            ImageGoPlus.play(x,y);
            this.innerHTML = "Pause";
            this.setAttribute("action","playing");

        }else if(this.getAttribute("action") == "paused"){

            ImageGoPlus.play(window.xpos,window.ypos,window.mcount,window.ncount);
            this.innerHTML = "Pause";
            this.setAttribute("action","playing");
        }else{
            ImageGoPlus.pause();
            this.innerHTML = "Play";
            this.setAttribute("action","paused");
        }

    });

    document.getElementById("restart").addEventListener("click",function(){
        ImageGoPlus.pause().reset();

    });

    document.addEventListener("visibilitychange", function() {
    if(button.getAttribute("action") != "start"){
      if(this.visibilityState == "hidden"){
        ImageGoPlus.pause();
        button.innerHTML = "Play";
        button.setAttribute("action","paused");
      }else{
        ImageGoPlus.play(window.xpos,window.ypos,window.mcount,window.ncount);
        button.innerHTML = "Pause";
        button.setAttribute("action","playing");
      };
    }
    });
}

License

Copyright (c) 2016 Ryvan Prabhu

Licensed under the MIT license.