[Demo] : Pixel Image Effects

Show us your completed creations made in Construct 2

Post » Tue Aug 28, 2012 1:44 pm

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... ).
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 :

- blur :

- change RGB value (with tolerance) :

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

- inject text on image

Comments & critics are welcomed, of course
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Mon Sep 03, 2012 8:12 pm

I have updated the behavior, with new effects :
- perspective transform

- blending modes ("like photoshop")


- whiten above RGB

- darken above RGB

- multiply by Color (RGB)


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).
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Thu Sep 13, 2012 11:07 pm

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


Image
B
27
S
9
G
5
Posts: 487
Reputation: 11,939

Post » Fri Sep 14, 2012 9:58 am

@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.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704


Return to Completed Creations

Who is online

Users browsing this forum: No registered users and 6 guests