Books Essential for HTML5 Game Development

Game development technologies are constantly evolving. Where you might of been a master in a particular field in the past, you can quickly start to question the simplest tasks as technology continues to change. Therefore it is crucial to always be reading and learning about your craft.

At the moment, it is critical to have a firm grasp upon HTML5 principles and specific game development procedures. Having a core understanding in HTML 5 as well as CSS (and perhaps a little bit of JavaScript) will greatly help you in your game development career as we progress through the 21st Century.
There are many amazing books that will help you stay up to date on this fairly new gaming development platform. Here is a list of the few more important ones that we recommend you pick up for your library.

HTML, XHTML, and CSS Bible

HTML Programming

When making HTML5 games, you need to know HTML. If you’re like many people just getting started in the game development you may have very little to no knowledge about how HTML is constructed for functions. HTML, XHTML, and CSS fourth edition Bible by Stephen M. Schafer covers all aspects of HTML from head elements to dynamic HTML CSS and everything in between.

What is great about this book is that this establishes a core from which any game developer can branch out. The book is not software specific, so you are learning how to incorporate HTML5 into any software. This goes a long way in today’s game development world where software is constantly changing but the principles remain.

Android Programming: The Big Nerd Ranch Guide (Big Nerd Ranch Guides)

Creating Android Games

The majority of games created for mobile devices are based on Android programming. There are several reasons for this, however, the easiest explanation is that Android platforms are in high abundance and therefore supply and demand requires more products to cover the market base. In Android Programming: The Big Nerd Ranch Guide the book lays down the methodology used in programming android games. They break it down in a simple process so that both the novice and the professional can get a firm grasp on the concept presented. The book covers not only HTML5 concepts but also how to integrate your game within the Android program.

HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL

Developing HTML5 Games

Graphic designers and artists may perceive game programming as being somewhat technical and dull in comparison to other animation and multimedia options. This is not the case, however, and in the book HTML 5 games: creating fun with HTML 5, CSS3, and Web GL the emphasis is given to the fun and creative side of game development with HTML5.

Since the book is specifically oriented to mobile game development, the reader will be more capable of creating Phaser Framework based games, HTML5 games, and highly interactive games for mobile devices. The book even helps prepare the reader for team management and delegation of tasks within the game development process.

The Animators Survival Kit

Creating Game Animations

Have you ever wondered why some games look realistic and others don’t? There are some games where the characters are especially fluid while another games the characters look choppy and the movements look fake. The reason for the latter has to do with not giving the animation side the attention it deserves. Richard William’s book The Animators survival Kit has long been the industry standard when it comes to animation and creating characters for your game.

By understanding the principles of animation (such as squash and stretch or follow through) the game will have a more fluid look and feel. Also, by understanding how a character is intended to move, the HTML5 can be coded in such a way as to ensure the best results for your character and user action.

Core HTML5 Canvas: Graphics, Animation, and Game Development (Core Series)

HTML5 Programming

For those of you who prefer to read instructions and learning material from a more Scholastic point of view, then Core HTML5 Canvas by David Geary is for you. The book approaches HTML5 in the same manner that one could expect Game Development 101 in college would. The principles and the foundations are laid down but it’s done so in a tactical manner and without much of the glamour and glitz that you see in other books. The book is extremely helpful for those whom are transitioning from the design world to the technical world

These are just a few of the books that you can find on HTML 5. There are many more books, which are available on game development, HTML 5, CSS, JavaScript, and animation to help you with becoming an expert in game development. When doing research, it is always best to assess the weakest area in your understanding of a particular subject and then to build upon and strengthen that weakness.

Of course, a foundation in HTML is essential before you begin doing this. Apart from these books which can be found on Amazon.com, you are encouraged to seek out any information you may find useful to help you in your game development whether that be in a book, an online video, or structured instruction. The key is to never stop learning. Continue to evolve or else you run the risk of waking up one day and not recognizing the world around you.

Top 10 Games Based on the Phaser Framework

As a game developer, it is always great to have a bit of inspiration when starting a project. Whether you are making a retro game such as centipede or a newer game such as diner dash, seeing how other game developers have tackled user interactivity and functionality will help you in your own game development. Here are 10 of our favorite games which are based upon the Phaser framework.

# 10. Pong and Variations of It

Perhaps the most classic of all games is the game that started it all. Pong has been mimicked and enhanced millions of times by game developers. The basic principle remains, don’t lose the ball. Where some have also added in extra graphics and enhancements, a game developer seldom fails when going with the Pong design.

#9. Labyrinth

A game collection would not be complete without a maze/puzzle game. Labyrinth is your typical get the circle into the hole type of game. You have a bright blue marble like character which has to get to a duller blue circle (hole). The game functions by tilting the mobile device and therefore rolling the ball to the desired location. Be careful, touching a black circle ends the game.

#8. Wolfblood

This game was developed around the TV show “Wolfblood”. Normally, I try to stay away from the game based on the movie which is based on the book which is based on the comic type of thing, but this game is really engaging. What is particularly ideal for this game is the different screens within the game. There is the navigation map, the RPG type of interface, and then there is the gameplay. For a phaser framework game, this is quite a complex game. As one may guess, Wolfblood is centered around the werewolf hype.

#7. Sky Legend

A classic game of racing that incorporates dragons. Sky Legend makes the Phaser framework game list due to the graphics and the structure of the game. Much like a typical racing game, the sky legend has replaced the car with a dragon graphic. Like racing games of the past, one has to avoid obstacles and (of course) try to finish the race within time.

#6. Honda Fit Challenge

The Honda fit challenge, is not a fitness game as the name suggest. It is a driving and parking game. The game requires both hands to navigate your Honda around the screen. Once a parking space is found, you have to parallel park without hitting anything. Sound easy? You may find this a bit more difficult than it sounds. With a very retro look, Honda Fit Challenge offers the complexity of modern gaming with the “throw back” look of 80’s gaming.

#5. Sort Bird

If you like Angry birds and puzzle games, then this is an inspirational game for you. This Phaser framework game definitively has the graphic similarities to the popular angry bird characters. However, the birds are in tile form. Sort Birdx gives the user a set of birds and a set number of moves. It is the user’s job to get the bird to the nest within the number of moves provided. Complete with the nests and the large stars which (again) are typical of the angry birds market, this game shows how a popular game can be mimicked and modified to provide a new and entertaining game without being redundant.

#4. Master of Arms: Sword, Staff, Spear

Addicting games has created a fast paced action game. The graphics are what really sell the game. As you will note, the game is designed around a series of “enemies” which must be defeated. These graphics appear on the screen and the user is given the option to defeat them with a sword, staff, and spear. All three of these weapons are located at the bottom of the user interface and remain present during the game. In other words there is only 3 buttons, which control the entire game. Like any great action game of this sort, as you progress the characters come at the screen faster. Reaction time is the key for this game.

#3. INTS

Simple yet engaging, INTS encourages the user to push those mental skills to the limit. Specifically, the game targets math and critical thinking skills. INTS focuses on giving the user a set of 4 numbers which they must add or subtract to get a specific answer (for example 5593 must be added or subtracted to get the number 1).
Design wise, the game has a very modern look. The numbers are placed upon scrabble like tiles, the formula which you construct is displayed in a calculator like box, and the keys are easily manipulated.

#2. Runner Fox

If you thought that all Phaser framework games had to have a minimalistic style, then Runner Fox by Numidia Games is sure to inspire you. The game is based upon feeding a fox. It is a typical platform game (meaning that you go from a graphic platform to another graphic platform) yet disguised somewhat by the merger of the platforms to form a sort of tier graphic. The point of the game is to collect meat while avoiding the rocks and other obstacles. This game was chosen because of the high level of the graphics as well as the user interactivity.

# 1. [115]

This game was chosen not for the name (which could use a bit of enhancement), but for the wonderful association with the game asteroid. For those of us who spent hours upon hours at the arcade playing this classic, the 115 proves to bring that game into the mobile world. Notice the use of primary shapes mixed with a dynamic foreground and frame to the game. This tie has made the game both relevant for the older gamer as well as the newer target audience.

Regardless of the type of game which you are developing, you would do well to look into various games which are on the market. For one, if you develop games then more than likely you are a gamer. Secondly, by knowing the competition you know what sells and what fails. Finally, games give inspiration. Where you may be stuck in an area of development another game may have the solution. So look and see what Phaser games are available and game on.

 

Animation editor

We have pushed a new update to MightyEditor. Beside minor bugfixes the most important feature is keyframes based animation editor. From now on you can switch from spritesheet animations and create much more smoother tween animations. Reduce file size and add more skins to character. Add animated user interface.

There are 2 different timelines: one big – for project in general, second one seperate for objects. If you want to create the game – you won’t need main timeline as it meant more for a movie clip creation.

Check out a tutorial how this works: http://mightyfingers.com/tutorials/animation-editor/animation-basics/

character_body_parts_animation_editor

Adding movie through code editor:

var character = mt.create("character");
mt.createTweens(character);
character.mt.movies.run.start() // assuming you have animation named "run"

In this case movie.run is special TweenCollection instance – bascially array of tweens that starts playing at the same time
atm. TweenCollection has only start / stop / pause / resume methods.

Recently Phaser had update to 2.2 where tweens have been improved very much and has built-in support for timeline. We are going to have new version of phaser in next update. Currently editor uses 2.07 version and projects can use any 2.0 – 2.1 version – by default projects have same version as the editor.

Another changes:

  • All new projects will start with a demo state ( js/state/demo.js )
  • Added rotation and “move anchor” (actually it moves group while keeps children in a place) gizmos for a group object
  • Now it’s possible to add children to the sprites in the objects panel
  • Added grid opactiy option
  • Added keyboard shortcuts 1-5 for tools: 1 – select tool, 2 stamp tool.. etc
  • Added cmd + S – as “save file” in source editor for osX users

Changes in mt.helper API:
mt.create will now return phaser object – sprite / group / tilemap layer – depends what you have created in the map editor
now all mighty editor data will be assigned to the created sprite as mt property. e.g.

var character = mt.create("character");
character.mt // from now on all editor data will be here

mt object structure:
{
   self: // refernece to the Phaser object
   data: // data used to create the Phaser object
   children: // cildren objects tree
   movies: // movies created
}

mighty_game_editor_background

Where can you find audio/sound effects for games?

Games are composed of many elements, with audio tracks and sound effects being among the more important aspects. Without these two elements a game will quickly become dull and undesirable. For most game developers, audio and sound effects must be acquired from an outside source as most are not composers. Finding a creditable site in which to get your audio and sound effects does not have to be a daunting task.

Here are a few tips as well as a few sources to help you in your endeavors.

Look for Royalty Free and Stock Licenses

Before getting any audio, one must ensure that the file has a royalty free license. Bluntly stated, do not download music from shareware sites as these are generally not licensed and can end up costing you a fortune should the owner decide to pursue copyright and piracy litigations.

Royalty free does not mean free music.

Rather, you generally have to pay a small fee (usually about .99 cents) for the ability to use the music or sound effect. For sites which offer “stock music” you need to ensure that the music has a royalty free license over a drop needle license. Royalty free means that you can use the item on your game over a span of time (usually as long as the game is on the market). A drop needle license means that you have to pay a certain amount per use.

Audio and Sound Effects for Games

Audio for games establishes the flow and feel of the game. Sound effects are dependent upon the user. Both are critical to the development of a successful game

One site which offers an array of music and effects for free is freesound. This sound has loops as well as sound effects and audio. The drawback to this site is that there are no categories in which to search. You have to sift through the files to find what you are looking for.

Partners in Rhyme offers a bit more organization for finding the perfect royalty free audio and sound effects. The site offers both ambient sounds as well as effects. All of this is neatly categorized into sections such as animal sound effects, horror, doors, war sounds, etc.

If you are looking for royalty free music that is uniquely created than beatorchard may be the source for you. The site offers a library of stock and royalty free audio as well as services for composed music (for those of you who have a great budget and want to have your own unique track).

 

Thinking Outside of the SOUND Box

If you are creating a Phaser framework game, then the odds of it having a cartoony look are rather high. Searching under stock music or sound effects may be well and good, but the sounds may be more fitting for motion graphics and high end games then for the mobile market.

One of the best sites available for these cartoon sounds can be found at soundbible. The site offers the user to download an smorgasbord of sounds. Keep a keen eye on the licensing on the site. Where most of the sounds are available with an attribution 3.0 license (meaning that you can use the audio so long as you give credit to the creator of the file in your game credits), there are a few which are licensed for personal use only.

Getting Non-Attribution Royalty Free Music

Audio and sound effects, which are downloaded for free usually, have an attribution license. For a game developer this could create quite an extensive amount of game credits needed. Most developers want to avoid this as:

  1. Credits which scroll on forever make the game less desirable for replay and
  2. Everything takes storage space.

A game that has a great deal of sounds will have a great deal of attributions (and if required, links). It is therefore recommended that a site, which offers non-attribution music be used. One such site is soundboard, which offers tracks for .99 cents without the need for attribution. This means that you can compose your audio and soundtracks accordingly without having to worry about taking up time worrying on how to ensure you don’t break any license agreement.

Getting What You Need

Audio and sound effects can be found throughout the Internet. Again, ensure that you are getting stock music that has an acceptable license. Before you start downloading and buying your royalty free music, storyboard out your game and make a list of all the sounds which will be needed. You may find that certain areas of the game do not need a sound where other areas must have a sound (such as when a gun fires). Keep in mind that every audio file you add to your game adds to the overall size of the game.

Moderation is the key.

Have a great steady looping main audio and pepper your game with effective and strategically placed sound effects and you will have a great dynamic sound for your game masterpiece.