Skip to content

Instantly share code, notes, and snippets.

@jabubuck
Created April 26, 2013 17:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jabubuck/5469072 to your computer and use it in GitHub Desktop.
Save jabubuck/5469072 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();
@n3wc
Copy link

n3wc commented May 27, 2013

i have a slightly more robust implementation of the same basic idea here: https://github.com/n3wc/TiSprite
it does scaling, loop limiting, forward/backward & 'bounce' animations
you can define specific frames by x,y & width,height or if your sprites are all perfect squares it calculates them so you can reference them by frames 0,1,2,3 etc
still pretty raw but very usable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment