Jump to content

[plugin][edited] ColoredSprite Beta Version


Eng.ibraheem
 Share

Recommended Posts

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

player.getSprite 

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

 

CSAadd

CSAplay

CSAstop

 
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 animation

player.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 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 

coloredSprite.zip

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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