SetColor - is There Any Workaround ?

Monkey Targets Forums/HTML5/SetColor - is There Any Workaround ?

semar(Posted 2013) [#1]
All,
as you know, SetColor can not be used neither by printing text (I use AngelFont example) nor with Images, which I find quite frustrating.

I'm using Monkey v. 69, and Firefox.

In fact, I've developed a quiz-game where I use white buttons that get colored depending on the situation.

It works fine on my PC when I open with Firefox the html(5) file, but I experience lag. If I remove all the SetColor, the lag vanishes.

On line it works but I get a lag:
http://www.sergiomarcello.com/quiz/quizgame.html
To summarize, even if it 'works', because of SetColor the game slows down considerably. At least, this is what I think.

More, on another pc the same game does not work (Security Error) when SetColor is used against the images.

Note that I run the game locally, without using the 'integrated' web server of TED.

It's so easy to change the look and feel of a graphic Image using SetColor, but sadly it does not work fine under HTML5 ! Why should it be this way ? And why on hearth it works with lag on some pc and on-line, bt it does not work at all on others pc (always using Firefox) ???

Is there any workaround ? Yes I know I could use different buttons for different situations, but I'm quite screwed up, because the same problem occurs when I try to change the color of a text (Try the AngelFont example in Bananas/Beaker folder).

Suggestions are more than welcome,
Sergio.


Spinal(Posted 2013) [#2]
Works fine and fast for me using Chrome on OS X.


AdamRedwoods(Posted 2013) [#3]
this is a known limitation in HTML5, not just monkey.
http://stackoverflow.com/questions/2688961/how-do-i-tint-an-image-with-html5-canvas

IMHO, possible solutions are
1. split up an image into 4 colors, r, g, b, and black as the base and blend the 3 colors via alpha according to how you want to mix the colors. this draws the image 4 times.
2. mojo using a WebGL shader. (no IE9 compatibility)

a third option is to prepare your color tints programmatically during OnCreate() by using the ReadPixel/WritePixel and creating your own tinted image.


rIKmAN(Posted 2013) [#4]
Use this WebGL mojo patch by devolonter, I use HTML5 to debug and it got rid of the SetColor lag I was experiencing when testing.

http://www.monkeycoder.co.nz/Community/posts.php?topic=3276#48980


SLotman(Posted 2013) [#5]
Don't use WebGL...! For starters, your game won't work on IE...


Zurrr(Posted 2013) [#6]
i try using chrome on android. everything fast. the keyboard not appear thou cannot edit team


devolonter(Posted 2013) [#7]
Don't use WebGL...! For starters, your game won't work on IE...

Patch works fine in IE because it uses 2D context in browsers that doesn't support WebGL