[Behavior Demo] Realtime Sprite recoloring *no GL*

Show us your completed creations made in Construct 2

Post » Tue Mar 20, 2012 4:17 pm

Since I'm working on the realtime effect plugins for Sprite (using WebGL), I was asking myself if there wasn't a possibility or an hack to do that without WebGL. Javascript is slow, parsing Bitmap matrices is slow, but there's a trick I finally implemented in a Behavior, from there : http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/
And here's the demo, using Construct 2 :

http://dl.dropbox.com/u/1412774/RecolorDemo/index.html

The idea is to load the image one time, parse its bitmap array, and split it in 4 canvas (so yes, it can be slow when loading the image at the beginning, and it's memory consuming when you load large images). After that, it's just an operation of pasting those canvas with the global effect flag of the HTML5 canvas set at the right value. Starting from there's, it's near realtime if you use coloring effects. (As the demo shows, if you try to do that all the time, when checking the 'realtime' box and moving the sliders, it's going to be slower).

In a few days, the behavior will be available for everybody !
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Tue Mar 20, 2012 4:23 pm

this is really good... would be cool to color the uniform of different soldier by not putting up images for every single color.
B
42
S
9
G
6
Posts: 437
Reputation: 5,626

Post » Wed Mar 21, 2012 11:11 am

Nice for recoloring and masks ! Thanks bro !
B
34
S
16
G
16
Posts: 2,222
Reputation: 16,564

Post » Wed Mar 21, 2012 11:14 am

Awesome!
It works with the canvas2d-renderer too. Joe72012-03-21 11:16:27
B
14
S
6
G
5
Posts: 173
Reputation: 4,742

Post » Wed Mar 21, 2012 12:47 pm

Yeah!
B
56
S
20
G
13
Posts: 778
Reputation: 13,204

Post » Wed Mar 21, 2012 1:08 pm

This looks very interesting, and I can already think of a few practical uses for it. Looking forward to its release!
B
62
S
25
G
12
Posts: 122
Reputation: 11,230

Post » Wed Mar 21, 2012 5:00 pm

If you can manage to use this with a "select color" filter, it will be amazing!

For example, if I make a mask on my character with an absurd color (ex: full magenta - #FF00FF) and use it to replace to any color with the colorizer behavior... XD
B
107
S
40
G
10
Posts: 456
Reputation: 13,202

Post » Thu Mar 22, 2012 3:19 am

WOW! Looks really cool.
Congrats man.
B
41
S
10
G
7
Posts: 182
Reputation: 9,999

Post » Thu Mar 22, 2012 9:34 am

Despite slowness ,but great potential when you managed to do it with canvas, sense I'm one of many users who can't sadly benefiting from WebGL.
B
22
S
3
G
5
Posts: 141
Reputation: 5,117

Post » Thu Mar 22, 2012 10:43 am

This unlocks a lot of possibilities, good work!
B
22
S
6
G
10
Posts: 118
Reputation: 8,005

Next

Return to Completed Creations

Who is online

Users browsing this forum: No registered users and 2 guests