[Demo] : Pixel Image Effects

Since some of us are perhaps afraid to dive inside the 'Dev' section, I'm posting here a quick summary of a behavior I've made : ImageEffects and TextOnSprite.

You can find the original thread here : http://www.scirra.com/forum/behavior-sprite-effects-inject-text-on-sprite_topic51516_post324649.html#324649

With that behavior attached to a Sprite, you can apply Image Effects to the image of the Sprite, and keep the effect.

Since everything is done in Javascript (contrary to a WebGL Shader), it can take a bit more time on larger images. The idea is then to use it on a loading screen (you can then apply an effect "in the background").

On "small" images, it works fast : https://dl.dropbox.com/u/1412774/NewEffectsDemo6/index.html (although, for the sake of your CPU, I wouldn't use it on all ticks... <img src="smileys/smiley2.gif" border="0" align="middle">).

Here's the .capx of that demo, to see how it's done : https://dl.dropbox.com/u/1412774/NewEffectsDemo6/NewEffectsDemo6.capx (here's the behavior : https://dl.dropbox.com/u/1412774/NewEffectsDemo6/pode_textOnImageAndImageEffects.1.8.zip. Don't forget to put it inside the behavior folder !).

Some of the effects :

• save the image (to remove the effects...)
• pixelate :

<img src="https://dl.dropbox.com/u/1412774/NewEffectsDemo6/demo2.png" border="0">

• blur :

<img src="https://dl.dropbox.com/u/1412774/NewEffectDemo5/demo.png" border="0">

• change RGB value (with tolerance) :

<img src="https://dl.dropbox.com/u/1412774/NewEffectDemo5/demo2.png" border="0">

• grayscale, edges, color tint (with white pixel respect or not), noise, rotate color channels (on the left or on the right side), emboss, sharpen, sepia, RGB2BGR, negative (with white pixel respected or not)

<img src="https://dl.dropbox.com/u/1412774/NewEffectsDemo/demo.png" border="0">

• inject text on image

Comments & critics are welcomed, of course <img src="smileys/smiley2.gif" border="0" align="middle">

I have updated the behavior, with new effects :

• perspective transform

<img src="https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/demo6.png" border="0" />

• blending modes ("like photoshop")

<img src="https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/demo4.png" border="0" />

<img src="https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/demo5.png" border="0" />

• whiten above RGB

<img src="https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/demo2.png" border="0" />

• darken above RGB

<img src="https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/demo3.png" border="0" />

• multiply by Color (RGB)

<img src="https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/demo1.png" border="0" />

Since everything is done in JS (contrary to WebGL shaders, the perspective transform can be a bit slow, but the original implementation favors quality over speed).

Excellent stuff- the perspective warp could be really awesome for spoofing 3d stuff, from star-wars style text to something like Space Harrier.

<img src="smileys/smiley36.gif" border="0" align="middle" />

<img src="http://farm3.static.flickr.com/2543/3681837347_f1323c82b7.jpg" border="0" />

JohnnySix : for the perspective transform, it's better to use it as an "one shot" effect. It's long to calculate.

For a game, with a continuously changing graphic, the CSS3 transform are more appropriate. As soon as I have more time, I'll update the plugin with the transform.