HTML5 Game Development with GameMaker: Experience a captivating journey that will take you from creating a full-on shoot 'em up to your first social web browser game

More often than not, when creating a game, the majority of the art assets will be created in an external program and it will need to be imported. It is true that GameMaker: Studio does have an in-built image editor that we will investigate later, but its capabilities are fairly limited. It's perfect for creating simple art, but there are many other tools that provide us with much more advanced techniques for creating complex art.

There are many popular software options you might want to consider. The most full featured option and the most expensive is Adobe Photoshop , which is the preferred option for most professional artists and can be purchased at http://www.photoshop.com/. A free alternative with many similar capabilities is GIMP, downloadable at http://www.gimp.org/. Both these packages offer a full suite of advanced tools for creating images. There are also many other simpler tools available, such as Pickle http://www.pickleeditor.com/, Spriter http://www...

While all the animations in this book will be using GIF images for the sake of expediency, it would be remiss if we did not cover how to import a sprite sheet. A sprite sheet is generally a PNG file with all the frames of animation of an object, such as a character, placed evenly in a grid. We can then quickly cut out each frame of animation in GameMaker to build the individual sprites we need. Let's try this out!

One of the big benefits of developing with GameMaker: Studio is that it has an in-built Image Editor for creating sprites and backgrounds. This editor may appear to be very basic but there are a lot of excellent tools available to use. There are a variety of different drawing tools including the standard tools such as pencil, eraser, and fill. One very useful and unique feature in the editor is the ability to paint with both mouse buttons. The Colors | Left and Colors | Right color options, as seen in the following image, indicate the color that will be used depending on whether the left or right mouse button is being used. We can also adjust a wide range of things through the Transform and Image menus. The Transform menu contains the ability to affect the size and placement of the pixels in the image. The Image menu contains the image alteration tools such as the ability to change the color, blur the image, and add glows.

Rather than talking about the image...

Animated sprites are a sequence of static images which, when played, appear to have a movement. It lets the player know that they are running, when they are attacking with a sword, and that a button is clickable. Good games have animation on everything interactive and often on many of the background elements, so much so that you may not even notice it. It is the tiny details such as animation that really breathe life into a game.

Audio is incredibly important for creating a professional quality game. Unfortunately, it is often the most neglected element and the last to be implemented. One reason for this is the fact that we can play a game without the audio and still enjoy the experience. However, a good soundscape in a game will make it much more immersive and help improve user feedback.

In order to create audio we will need to use external software, as GameMaker: Studio does not come with any built-in audio creation tools. There are a range of software choices to choose from. For creating sound effects and music there are popular programs such as the very full featured Reason, http://www.propellerheads.se/, which emulates a rack of synthesizers, mixers, and other components. On the free side, there is BFXR , http://www.bfxr.net/, that allows you to create game sounds online and then there is also Sonant , http://sonantlive.bitsnbites.eu/, for making music. All these packages are fun and easy...

GameMaker: Studio comes with two different sound engines for controlling the various audio in games: GM:S Audio and Legacy Sound. These systems are completely independent from each other and you can have one system or the other active in a game.

The GM:S Audio engine is the new, more robust sound system that was designed to allow a full 3D soundscape through the use of emitters and listeners. Emitters allow for the positioning in game space where sounds are going to occur. There are functions for adding falloff of the sounds, velocity to emulate movement, and more. Listeners give even more control by dictating how the sound is played based on where the player is in the game, including their orientation and velocity. If you do not declare a listener, then the sounds become universal. This will eventually become the primary audio engine in GameMaker: Studio, but because of the HTML5 audio issues, it doesn't work properly in all browsers.

The Legacy Sound engine...

When looking at the hundreds of thousands of games out there, it is quite easy to recognize the top-tier games from the bottom-tier. However, when we look across the spectrum at all the best games, there is a stark difference between them. Some games are very minimalist, some are photo-realistic, while others are fantastical. These games might be made by a few people, or a large team of specialists. What is it that makes games that are fundamentally so different still able to achieve the same definition of quality? The answer is quite simple and can be summed up by three general principles: Consistency, Readability, and Polish. While creating high caliber art and audio, it does require plenty of acquired skills learned through years of study and practice. Following these few rules will help make any game appear more professional.

Creating art and audio for games is an enormous task, both in terms of the time it takes and the assets to be produced. As a game developer, it is your responsibility to ensure that everything is cohesive and aesthetically pleasing, whether you are creating the assets or working with artists and sound designers. In this chapter you have started to understand how art and audio works in GameMaker: Studio and what the difference is between good and good enough. You learned about the acceptable image formats and how to import a sprite sheet. You created a tileset that will make better use of computer memory and allow for large unique worlds. You animated a sprite and made it loop properly. You also learned how to control sounds and the direction they are heard from. You are now ready to start making real games!

In the next chapter we are going to build our second game, a side scrolling shooter. We will create a player that moves around the screen, build several enemies that shoot weapons...