Visuals

An important step in creating a good video game, whether web-based or traditional, is to create a graphic presentation that is effective and pleasing to the player’s eye. This includes the background, the player character and other entities the player character interacts with, such as enemies, platforms and terrain. Good graphics are highly valued in today’s gaming scene, and for some players a poor visual presentation can make or break a game.

Before doing my research on what constitutes a best practice for visuals in web browser games, I wasn’t knowledgeable on how <canvas> and JavaScript code are written and implemented in a game. With this lack of perspective on the literal writing of a game, the practices I imagined I would find pertained to how a game developer would manage their game’s visuals after they’ve done the code-writing. To illustrate, this would be practices such as “keep the art style consistent for the characters and levels” or “keep the background designs simple, don’t create a background that’s too complex and distracting.”

What I found a lot more of were practices that related to actually writing the <canvas> and the JavaScript that facilitates the visuals. Here’s a short list of these kinds of practices:

• Write multiple <canvas> elements for each group of visuals. (background, player, enemies, etc) This lets the developer update each set of entities separately as they need to instead of rendering and updating everything at once.
• Keep all of the games images / sprites on a single sprite sheet. This way, the code only needs to reference one document and location for all of its images.
• Use a loop to continually update and render the canvas. This enables animations and other updates to the visuals as interactions between game elements change.

I did find some practices pertaining to art direction, such as using free or public domain spritesheets if you cannot or do not wish to draw your own.

I found the practice of using multiple canvases noteworthy because this practice is seen as useful by not just game developers, but by programmers and web writers in general, as seen in posts like programmer Andrin Riiet's "6 Performance tips for HTML Canvas and CreateJS." The fact that this technique is a best practice for two different uses of the <canvas> element shows how game developers are drawing from the preexisting work of web developers as they do their own work in <canvas>.

Click here to return to the home page.