adityaravishankar/command-and-conquer

ImageData color Manipulation code needs to be optimized

Closed this issue · 15 comments

adityaravishankar commented

The unit color mapping (yellow to red) is done every time a vehicle/building is drawn.

I did some testing and commenting out the code makes the game significantly faster
Doing this every refresh, for ever unit/building is KILLING performance on some browsers.

It should ideally be done just once (during image load) and cached (maybe in a hidden canvas) for reuse.

jakemac53 commented

I know you probably don't want to hear this, but as far as performance goes I have heard (although never confirmed) that it is actually more efficient to not use the canvas at all, but instead just use divs (or any block styled element) with background images and just move them around. You can also do sprites easily this way by just changing the background positions.

Currently the game already uses a lot of cpu for what it does and it would be interesting to see how it would compare to using just divs and background images.... There is one additional advantage to this which is you can make the game work in all browsers, even IE 6.

jakemac53 commented

You can still use a hidden canvas in the background to do image manipulation and stuff like that as well....

adityaravishankar commented

The idea was to switch to HTML5. Browsers have started optimizing canvas code to use the graphics card..... (Chrome is the best example).......
Performance on canvas can only improve with time.....

And I want to encourage people to move away from IE6, not continue to live in those times... :)

jakemac53 commented

Ya thats all fair and good, was just pointing out that at least currently, in my experience, it is actually faster.

I will say this actual issue with how it does the image manipulation at runtime has definitely hit the nail on the head as far as performance issues go. I tried disabling different parts of the drawing (fog, map, and the image manipulation code) and disabling the image manipulation was the only thing that made it work on my android phone. It was literally a light and day difference, easily doubled the frame rate instantly.

jovoud commented

I agree it's better to paint it on the canvas as canvas speeds are improving. But menu or sidebars can in my opinion still be made using div's. It's way easier to create a menu using div's and html elements and just position them above the gamecanvas. +you can make certain elements in your game SEO.

jakemac53 commented

Ya I did this on a game I made a couple years ago http://jacobmacdonald.com/. Sidebars are all html/css/js and then the game is canvas. Works very nicely.

jovoud commented

nice game :)

jakemac53 commented

haha ya its fun I never really finished it. The multiplayer talk in here makes me want to implement some mulitplayer on that game :).

jovoud commented

Haha go for it! if you make it generic we can use this here as well :p

jakemac53 commented

Haha true that. I was actually looking at my code cause its been so long I forgot if it was actually any good. Apparently its actually already pretty generic although its in mootools unfortunately. This was because I liked their Class object, which gives you "Extends" and "Implements" for your classes which are actually really cool. You should check out http://jacobmacdonald.com/js/shooter_objects.js starting at like line 236.

jakemac53 commented

One thing thats funny about this code is I see I didn't actually use sprites rofl, I used multiple images which is something I submitted an issue for for this project LOL. Granted theres not many things that really "animate".

adityaravishankar commented

Is there anyone who knows how the pallet/color files in C&C work... I need to know the correct manipulations to make to convert yellow -> red units/buildings.... The code I've made is crude guess work.

If anyone understands the original format and can give the exact RGB1 -> RGB2 mapping, it would help a LOT.....

adityaravishankar commented

Optimized the code.... It still doesn't convert all the necessary colors, but the RGB manipulation is now done only once (during load).... Should be much faster now.... 0.3c released at http://www.adityaravishankar.com/projects/games/command-and-conquer/