Eng.ibraheem Posted January 19, 2015 Share Posted January 19, 2015 hi in this post im gonna show u my ColoredSprite which i developed colored sprite is like any sprite u can add it to game except that its allow u to use bitmap HSL on it , i was looking for it long time and googled it with no luck so i decided to make it .i know there exist a way to color it called tint but tint not working as i excepting look at this flappy bird with tint note that the white wing & eye full colored and white color has fully gone but look here because white color does not affected by HSL effect it remains : u can implement hsl easily if we talk about static sprite which come from game.load.image and there is an examples for that using this plugin will allow u to use the same thing but on spritesheet so u can generate alot of colored sprite using this plugin but while developing this plugin i have faced a problem with animation manager so i created my own animation on it , it's almost the same way to use but with some difference how to use it ?first load the script as any script u add to page.then in create function create new object from it like this var player=new coloredSprite(game,key,x,y,initial_frame,[initial_hsl]) ;game = the Phaser.Game instance of the current gamekey= the spritesheet key x=position of added spritey=position of added spriteinitial_frame = the frame which will be visible for this sprite (when u use animation and then stop it , then it will return to this frame)initial_hsl = (optional) the current hsl which will be applied when create new sprite (when start then stop animation it should return from animation hsl to this hsl) to use this object as sprite u should call player.getSprite and this function will return the visible sprite to use it like in physics systemthe original object "player" is of type coloredSprite and it's not defined in phaser now there are three functions for animations which are CSAaddCSAplayCSAstop to add animation use CSAadd like this player.CSAadd(key,Frames,FrameRate,[HSL]);key = name of animation (must be unique)Frames = array of frames like this [0,1,2,3,4,5,6,7,8,9]FrameRate = represent speed of animation (Frame per phaser second)HSL= if u want to create different hsl for this animation (for example when go left sprite go red when go left sprite became green) player.CSAstart(key)key= the of the added animationplayer.CSAstop();to stop animation of sprite here is the first example http://wechno.000free.us/phaser/ex1/ note the left is working like rainbow animation hhhh u can set this like this but note here coloring speed is dependent on animation speed if (cursors.left.isDown) { // Move to the left psprite.body.velocity.x = -150; player._ani_collection[0]._hsl=parseInt(Math.random()*100)/100; player.CSAplay('a'); }another example on flappy bird which i make the bird coloring like rainbow before start and choose random color when start game http://wechno.000free.us/phaser/ex2/ advantage :1- support sprite-sheet hsl2- lot of color & one sprite-sheet hhhhhhhhh disadvantage : 1- animation controller is not phaser animation manager (but still good) 2- does not support choosing if u want to loop animation or not (always loop)3- not support tinting (conflict with animation) but i think it work perfect please rate the idea and my work coloredSprite.zip Link to comment Share on other sites More sharing options...
Recommended Posts