colorRoll Tutorial

sign up sign in

I have updated my starField tutorial with another quick example of using components to make sprites do things. Not very exciting things, but things none the less.

laggy gif for posterity

http://jonathanhirz.com/luxe/starField/ - example
https://github.com/jonathanhirz/starFieldLuxe - source

I added a simple block sprite to add components too. RotateComponent() and BounceComponent() should be pretty self explainatory if you look at the source. The cool one is ColorRollComponent()

What this component will do is roll through a bunch of colors using sin() on the RGB color values. If you have ever played a game by @madgarden or @retroremakes, you know what this looks like.

Basically, you have a variable, rad that represents your current radian value. You use a tween to make this value cycle from 0 to 2π with linear easing. Then in each update, set your r/g/b values like this:

var r = 0.5 + Math.sin(rad) * 0.5; var g = 0.5 + Math.sin(((1/3) * 2 * Math.PI) + rad) * 0.5; var b = 0.5 + Math.sin(((2/3) * 2 * Math.PI) + rad) * 0.5;

And that's about it. You set this on a sprite, and the color will make you trip out. Adjustments can be made for speed in the tween if it's too fast or slow.

So @_discovery (the author of snõwkit btw) showed me a much easier way to achieve this effect, using ColorHSL():

Live example

No need to use sins and trig to manipulate RGB values, you can just roll through all the hue values in the HSL color and get basically the same thing. The order of the colors might not be exactly the same, but it still looks great.

Tags
luxetutorial