blitzxion
commented
12 years ago Also,
Smoke trails and explosions are the bane of the game. While is awesome to have them (we're not getting rid of them), they cause the most slow down on the computer.
(I believe Derek called this one out already) An idea (again, already mentioned) is to remove the Alpha rendering on the smoke trails. If removed, the trails will be more "solid". This isn't really a bad thing, but the smoke will look less real.
Just an idea, likely will need tweaking to ensure stability!
I have created a new way of drawing objects (Tanks, bullets, etc) to the screen while keeping the GPU/CPU in mind.
So far:
Tanks
Tanks are drawn in two or more parts. It kinda goes like this: Body then Turret. A few tanks don't require turrets. There are also a few tanks who's base is entirely different than the standard rectangle most tanks have. They require special function calls to properly build. For example, the Mammoth, Healer and Howitzer tanks all have special frames that need to be built differently. It doesn't mean we can't cache them, just means we can't reuse code as much. Not a big deal.
Caching tank bodies and then just rotating them is far more friendlier on the computer than redrawing each path every pass on animation!
Turrets
Turrets (AA Guns, Base Defense Turret, Tank's turrets), can also be cached. There are several different size turrets and some turrets have multiple cannons attached. Enlarging turrets for tanks (Small tank vs. Large tank turrets) via canvas manipulation (after it has already been cached) will cause distortion and will make the turret ugly. So, sadly, we would have to cache all the turret sizes.
Cannons
Cannons are just single/double lines drawn on turrets. We can cache these at the same time with the turret in question. This seems like the best idea as this will reduce calls.
Planes
Planes are easy! No moving parts, no turret to mess with, just a image flying around!
Bullets
Bullets are getting their own special call to be drawn. They are also getting bigger (by .5px). Its an image that is just moved from one location to another. No rotation, no mess.
The Battlefield
The primary canvas will be getting split into two different canvas'. There will be the background, which will simply provide the following: Battlefield color, top/bottom banners, and text output. The secondary canvas, get this, will be absolutely positioned between the top/bottom banner. This will nicely fix any inside "Special case 20px BS!". Internal functions during resizing will manage location, width and height.
Text Output
Text output in canvas can be taxing. We don't have much going on "Text" wise, but we are constantly drawing it to the canvas, which eats up precious FPS! The best option here is the place all text in the background canvas and update it later. For example, the score counts can update every second (instead every 15ms!) The round timer can be updated on the second as well. The Debug Console and GOD options will be in the background as they never change "Text" wise, but change in color. The less the main work as to deal with "dormant" material, the better!
The FPS counter will likely be the exception to this move. Knowing in near real-time when the FPS drop is perfect for debugging.
Additional information
So, many of my ideas and decisions are from the following page: http://www.html5rocks.com/en/tutorials/canvas/performance/
Tank/Plane/Turret building will need a lot of work to get the best performance out of it. Right now, I would say its in "Alpha" mode, where while it is definitely increasing performance, its also could be coded/organized much better... likely resulting in even more performance! Any help with this, or anything else with this performance will be greatly appreciated!