[Behavior Demo] Realtime Sprite recoloring *no GL*

  • 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 :

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

    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 !

  • this is really good... would be cool to color the uniform of different soldier by not putting up images for every single color.

  • Nice for recoloring and masks ! Thanks bro !

  • Awesome!

    It works with the canvas2d-renderer too. <img src="smileys/smiley2.gif" border="0" align="middle" />

  • Yeah!

  • This looks very interesting, and I can already think of a few practical uses for it. Looking forward to its release!

  • 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

  • WOW! Looks really cool.

    Congrats man.

  • 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. <img src="smileys/smiley1.gif" border="0" align="middle" />

  • This unlocks a lot of possibilities, good work!

  • I considered this for the main engine (I remember reading the article you linked to) but decided not to include it in the main engine because it would use a lot of extra VRAM if used a lot (bad news for mobile), and I couldn't see a way to get it to work with opacity. But still, it makes for a nice plugin for those who need it despite that, so nice work :)

  • Ashley : yes, I was thinking about the memory consumption. One possibility is to have an option for the user to delete the array used to store the images once the coloring is done. It would allow you, for example to colorize some Sprites at the beginning, and then dump what you don't need. The minus is on the fact that you can't force the GC to delete it immediatly, but at least you are sure that you are going to get memory back in a few cycle...

    Edit : I have another last trick to use, and if it works, we can have image coloring while keeping low memory use <img src="smileys/smiley2.gif" border="0" align="middle" />

  • Not rushing or anything <img src="smileys/smiley1.gif" border="0" align="middle" />

    But i am right that it is not out yet ? Or am i just stupid and dint see a link? <img src="smileys/smiley3.gif" border="0" align="middle" />

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Schoening : it's in the Plugin section of the forum.

  • Thx :p got it !

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)