[Behavior] Sprite Effects & inject Text on Sprite

Update 04/09/2012
New build (v2), New effect added. Small bugfix

This new build correct a small bug with the perspective transform, and add a new effect : "keep RGBA", where you can choose to only keep one of the Red,Green,Blue or Alpha channel on the Sprite.

The behavior : https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo2/pode_imagesEffects&Text.2.0.zip
The .capx : https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo2/Effects&TextOnSpriteDemo2.capx
The demo : https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo2/index.html

Update 03/09/2012
New build (v1.9), New effects added.

I added blending modes. For a single colors (one color for the whole image), you can only do "Multiply" for the moment (like the image above).
You can also blend Sprites ontop another (like Photoshop blending modes) :
- modes : src-over, screen, multiply, difference, exclusion, src-in, add, lighten, darken, overlay, hardlight, colordodge, colorburn (adapted from there : https://github.com/Phrogz/context-blender/blob/master/context_blender.js.
Two examples : ("multiply" and "add")



There's also the possibility to "whiten" everything under a given RGB color :

and to "darken" everything under a given RGB color :


And finally, there's the Perspective transform !
(adapted from here http://www.html5.jp/test/perspective_canvas/demo1_en.html


It's the slower of all transforms, so I don't think you'll be able to do it every frame on common platforms... Anyway, you can set 4 new (X,Y) points for the new coordinates, in a clockwise order.

The behavior : https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/pode_imagesEffects&Text.1.9.zip
The .capx : https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/Effects&TextOnSpriteDemo.capx
The demo : https://dl.dropbox.com/u/1412774/Effects&TextOnSpriteDemo/index.html


Update 28/08/2012
New build (v1.8), New effects added. New SDK syntax (means runtime.js less big => shorter download time)

I added the "Pixelate" effect to the demo, from there : http://www.codediesel.com/demos/pixel/.
That means you can use 'diamond', 'square', 'circle' shape type for the effect, the size, grid size, alpha value for the effect (check the page to see some examples).

I updated the whole behavior to use the new SDK syntax (from r96 upward). That means that the minifier is going to remove code that isn't used in the whole game, and that implies a smaller filesize, so smaller download times.

The behavior : https://dl.dropbox.com/u/1412774/NewEffectsDemo6/pode_textOnImageAndImageEffects.1.8.zip
The .capx : https://dl.dropbox.com/u/1412774/NewEffectsDemo6/NewEffectsDemo6.capx
The demo : https://dl.dropbox.com/u/1412774/NewEffectsDemo6/index.html


Update 27/08/2012
New build (v1.7), Works everywhere (even in Safari). New effects added


The behavior works everywhere. I added the "Simple Blur" to the demo, and the "Change RGB color". For that last one, you give the old (R,G,B) value, the new (R,G,B) value, and a tolerance (the same for each one of the channel). Very useful to change a range of colors in an image ! (and different from 'color tinting').

The behavior : https://dl.dropbox.com/u/1412774/NewEffectDemo5/pode_textOnImage.1.7.zip
The .capx : https://dl.dropbox.com/u/1412774/NewEffectDemo5/NewEffectDemo5.capx
The demo : https://dl.dropbox.com/u/1412774/NewEffectDemo5/index.html



Update 24/08/2012
New build (v1.6), Families are working with the effects
The plugin : https://dl.dropbox.com/u/1412774/NewEffectsDemo2/pode_textOnImage.1.6.zip


Update 22/08/2012
New build (v1.5), generalized white pixel protection

New build : now every function where it makes sense (eg. changing pixel colors or values) has the option to respect the white pixels or not.
The demo : https://dl.dropbox.com/u/1412774/NewEffectsDemo2/index.html
The plugin : https://dl.dropbox.com/u/1412774/NewEffectsDemo2/pode_textOnImage.1.5.zip
The .capx : https://dl.dropbox.com/u/1412774/NewEffectsDemo2/NewEffectsDemo2.capx (some of the function are set to Families, to show it works).
___________

Update 17/08/2012
New build (v1.4), new effects added

Remember, it's a behavior, not a plugin, place it in the right folder !

You can :
- inject text on an image
- grayscale an image
- blur
- recolor an image (the plugin now respect pure white pixels ! That also means that pixels almost white (close to the edges of your character, for example, are going to be colored, like in the demo for the cat !)
- add some noise
- sepia
- switch colors channels RGB2BGR
- rotate all color channels to the left (i.e., RGB is going to become GBR and after that BRG if you repeat the operation)
- rotate all color channels to the right (i.e., RGB is going to become BRG and after that GBR if you repeat the operation)
- emboss an image and choose the strength
- sharpen an image and choose the strength
- emphasize the edges (a lot)

Demo : https://dl.dropbox.com/u/1412774/NewEffectsDemo/index.html
The .capx : https://dl.dropbox.com/u/1412774/NewEffectsDemo/NewEffectsDemo.capx
The behavior : https://dl.dropbox.com/u/1412774/NewEffectsDemo/pode_textOnImage.1.4.zip

When I'll have the time, I'll refactor the whole plugin to follow the new plugin guidelines. However for the moment, it's working perfectly. Don't burn your CPU !

___________
Edit: renamed the title of the post to reflect the new possibilities of the plugin...

Update 05/03/2012 number 2 !
New build (v1.1), works everywhere, test on Opera, Safari, Chrome & Firefox!
You can now write Text on Sprite, but also apply Image Effects (Color tint, Grayscale, Sepia, Simple Blur...)
Since everything is done in Javascript, don't do it at all tick, you are going to burn your CPU !

It's a bit different from the "Recolor behavior". The Recolor behavior used a large chunk of memory to speed the recoloring process.
Here, we don't use new memory, we do it inplace. But it's a the cost of a long calculation over all the pixels of the Sprite...
Demo : http://dl.dropbox.com/u/1412774/C2ImageEffectsDemo2/index.html
The .capx : http://dl.dropbox.com/u/1412774/C2ImageEffectsDemo2/C2ImageEffectsDemo2.capx
The behavior : http://dl.dropbox.com/u/1412774/C2ImageEffectsDemo2pode_textOnImage_Effects.1.3.zip


___________

Update 05/03/2012
New build (v1.1), works everywhere, test on Opera, Safari, Chrome & Firefox!
Demo : http://dl.dropbox.com/u/1412774/TextOnSpriteBehaviorDemo/index.html
The .capx : http://dl.dropbox.com/u/1412774/TextOnSpriteBehaviorDemo/TextOnSpriteBehaviorDemo.1.1.capx
The behavior : http://dl.dropbox.com/u/1412774/TextOnSpriteBehaviorDemo/pode_textOnImage.1.1.zip

____

Here's a quick behavior to inject a Text string on a Sprite.
Since it's baked in the Sprite after the writing, you can't remove it.
So if you want to go back to the initial state, remember to have a spare Sprite as a backup !

Before & after :


The demo :http://dl.dropbox.com/u/1412774/TextOnSpriteBehaviorDemo/index.html
The behavior : http://dl.dropbox.com/u/1412774/TextOnSpriteBehaviorDemo/pode_textOnImage.zip
The .capx : http://dl.dropbox.com/u/1412774/TextOnSpriteBehaviorDemo/TextOnSpriteBehaviorDemo.capx

Edited by Pode - 04 Sep 2012 at 6:59pm

@septeven : thanks ! I tested it with FF11...

Updated the first post with the second build of today.
This behavior is merged with "Image Effects".
You can also now apply image effects on the Sprite !
Should work everywhere.

I like the color options but when you use one in the demo it effects the part of the image that should be the background. Are those images just not transparent?

yeah I think thatd be for the best =D