Jump to content

[plugin][edited] ColoredSprite Beta Version


Recommended Posts



 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 game

key= the spritesheet key 

x=position of added sprite

y=position of added sprite

initial_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 


and this function will return the visible sprite to use it like in physics system

the original object "player" is of type coloredSprite and it's not defined in phaser


now there are three functions for animations which are





to add animation use CSAadd like this 

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) 


key= the of the added animation


to stop  animation of sprite



here is the first example 




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 




advantage :

1- support sprite-sheet hsl

2- 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 


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...