Skip to content

Instantly share code, notes, and snippets.

@brentonhouse
Forked from jabubuck/spriteSheetAnimator.js
Created December 24, 2020 18:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brentonhouse/cfd01dc158d28c56c59ac81be1d0ca5c to your computer and use it in GitHub Desktop.
Save brentonhouse/cfd01dc158d28c56c59ac81be1d0ca5c to your computer and use it in GitHub Desktop.
Sample project that animates single row sprite sheets(I will later add support for multiple rows/animations for single sprites) This is for Titanium iOS and Android
//"THE BEER-WARE LICENSE": As long as you retain this notice you can do whatever you want with this stuff.
//If we meet some day, and you think this stuff is worth it, you can buy me a beer in return Jamie Buckley
var win = Ti.UI.createWindow({
backgroundColor: 'black',
fullscreen: true,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight
});
//Create your sprites and specify necessary values.
var sprite1 = {
spritePos:1, //*Specify the starting frame of the animation
spriteWidth: 150, //*Specify the width of the frames
spriteHeight: 150, //*Specify the height of the frame
spriteLength: 6, //*Specify the number of frames in the animation
sheetHeight: 150, //*Specify the total height of the sprite sheet
sheetLength: 900, //*Specify the total length of the sprite sheet
spriteX: 0, //*Specify the X position you wish the sprite to be drawn at
spriteY: 0, //*Specify the Y position you wish the sprite to be drawn at
spriteImage: 'http://abload.de/img/sprite7uk4j.png' //*Specify Image Location or URL for best performance use local images, I used remote images to make this project more compact
};
var sprite2 = {spritePos:2, spriteWidth: 150, spriteHeight: 150, spriteLength: 6, sheetHeight: 150, sheetLength: 900, spriteX: 150, spriteY: 0, spriteImage: 'http://abload.de/img/sprite2ulkvc.png'};
var sprite3 = {spritePos:3, spriteWidth: 150, spriteHeight: 150, spriteLength: 6, sheetHeight: 150, sheetLength: 900, spriteX: 0, spriteY: 150, spriteImage: 'http://abload.de/img/sprite7uk4j.png'};
var sprite4 = {spritePos:4, spriteWidth: 150, spriteHeight: 150, spriteLength: 6, sheetHeight: 150, sheetLength: 900, spriteX: 150, spriteY: 150, spriteImage: 'http://abload.de/img/sprite2ulkvc.png'};
var sprite5 = {spritePos:5, spriteWidth: 150, spriteHeight: 150, spriteLength: 6, sheetHeight: 150, sheetLength: 900, spriteX: 0, spriteY: 300, spriteImage: 'http://abload.de/img/sprite7uk4j.png'};
var sprite6 = {spritePos:6, spriteWidth: 150, spriteHeight: 150, spriteLength: 6, sheetHeight: 150, sheetLength: 900, spriteX: 150, spriteY: 300, spriteImage: 'http://abload.de/img/sprite2ulkvc.png'};
//Add your new sprite to the array
var sprites = [sprite1, sprite2, sprite3, sprite4, sprite5, sprite6];
//Function for creating the containers that hold the sprites, this will be the viewable area of the sheet on screen
function spriteView(sprite){
sv = Ti.UI.createView({left: sprite.spriteX, top: sprite.spriteY, height: sprite.spriteHeight, width: sprite.spriteWidth});
return sv;
};
//Create the imageview that the spritesheet is loaded into
function sprite(sprite){
s = Ti.UI.createImageView({top: 0, left: 0, height: sprite.sheetHeight, width: sprite.sheetLength, image: sprite.spriteImage});
return s;
};
var spriteContainers = [];
var spriteImages = [];
//Programatically draw all sprites in the array on screen
for(var i = 0; i < sprites.length; i++){
var newSpriteContainer = new spriteView(sprites[i]);
spriteContainers.push(newSpriteContainer);
var newSprite = new sprite(sprites[i]);
spriteImages.push(newSprite);
newSpriteContainer.add(newSprite);
win.add(newSpriteContainer);
};
//Update the sprites 10 times a second
setInterval(function(){animateSprite()}, 100);
//Animate the spritesheets, when it reaches the end of the animation, revert to the beginning
function animateSprite(){
for(var i = 0; i < sprites.length; i++){
if(sprites[i].spritePos == sprites[i].spriteLength){
sprites[i].spritePos = 1;
spriteImages[i].left = 0;
}
else{
spriteImages[i].left -= sprites[i].spriteWidth;
sprites[i].spritePos++;
}
}
};
win.open();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment