Created
April 26, 2013 17:52
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//"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
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