Hugo’s Games Examples

Remember to size the images properly: not too small, not too large. Crop as close to the graphic as possible. And match the size of the object with the size of the image.

Be careful about the issues related to the using an image for the background. You need to fill the background with something; to refresh the canvas. You do not know the size of the canvas for the user. You can set a static environment image in the centre, but make sure it bleeds into a plain colour. You can also design a tiling image. Don’t design a background that has to much contrast; you want the playing sprites to stand out. Keep it simple.

This game has many different examples of images. I used this to show you how the image influences the way assets appear to the user. Many lines are commented out. You can try different options.

Image examples

This game has an example of a background image that bleeds into the beloved baby poop colour background tile.

Environment background

Sounds are pretty simple to integrate. You add them to the HTML, and then grab them using their IDs into the JS. The sound element has two commands: play, pause. Once they are loaded, you trigger the sounds at the right moment in the game code.

This is the example of a game with sounds that I showed in class.

Sounds

I also, some time in the past, wrote a sort of tutorial on how to integrate sounds in the game. I tried to update it, but some parts may still be unrelated to this assignment, but you’ll find it here if it can help. This page also includes links to online sources where you can find sound clips.

Game Sounds Info

Animations can be more tricky. The easy solution is to move objects and their assets in the game. To do this, you simply change the position of the objects in the game. Here is the example I used in class of a game where the goodies appear at the top and fall down, new goodies are also spawned at random.

Falling goodies

You can also integrate animations using a sprite sheet. Although this can be a bit more tricky, it can create really good results, and make your game feel more rich. You will need to design a frame-by-frame animation, and set the frames within a single image: the sprite sheet. Then you need to write the code to crop the image, and change the cropping area at a regular rate, effectively creating the animation. Here is the game I gave as an example. Remember that the animation of the goodies uses a setInterval command which is what I showed. The player is also animated, but using the requestAnimationFrame command, which is a bit more abstract.

Sprite sheet animations

This is the article I mentioned about the analysis of an arcade game’s sprite sheets. It is only indirectly related to the game you are designing, but I found it a fascinating and nerdy read.