I never thought development of web games can be that simple until I started development of my first game with Adobe Flex. I made two games, without any prior experience with Action script, in only ten months: "Fitter" and "RGB".

I found many answers to my questions on different forums and web sites, and it is time to share my knowledge with Flex community.

Monday, February 1, 2010

Let the game begin

If you followed this tutorial from beginning, you should know everything you need to know, to develop your own game. At least from technical point of view. So far we learned how to compile program from the source code, how to display images and play sounds. We also implemented double buffering, mouse event handler and even few simple animations. More than enough to create simple games, if you know how to make them.

Game development can be quite simple or very hard, depends of the type and quality of the game. Snake, Tetris, Space invaders... clones are relatively simple to create and convenient for game development beginners. First person shooters, strategies, MMO's... usually require more that one person to make and a lot of hard work, experience, money.

Anyway, from now on we will focus mostly on development of the game. But you most probably wonder, what kind of game are we going to make here.

Snake's Adventure???

Snake's Adventure will be the clone of the classic Snake game with some advanced features. Snake is one of the most popular games of all times, you can read all about the original and clones on Wikipedia. If you have never played the game before, I recommend that you do, because:
- it will help you better understand this tutorial
- it is fun.

Snake's Adventure will have all the features of the original: player will control the snake, that is constantly moving, and try to pick up all available food. When food is picked up, snake will grow longer, when snake's head hits the obstacle, screen edge or its own body, its game over.

The game will be also quite different from original. Player will control snake movement with the mouse. Snake will move on the terrain with different obstacles and it will constantly scroll up. If the food is not picked up by the time it disappears form the bottom of screen, it is game over, too.

What's the plan?

First we will make few adjustments in game menu and create game state automaton. Not much new here, but it has to be done.

Then we will implement Snake class, the drawing routine here will be most probably the hardest thing to understand. But it will look cool. Functionality, that controls movement of the snake, comes next. Here we will also learn how to create custom mouse cursor.

Next on the menu is - food: drawing, positioning, collision detection, scoring system.... I saved the best/hardest for the last: terrain, obstacles and scrolling.

At the end, we will implement settings menu, load/store setting, learn how to play music... and polish the game a little bit. I will also give you some advices how and where to publish the game.

Start new game

Currently, selected new game option in game menu, doesn't change state of the program when title screen fades out. Instead it resets game menu state automaton and after few seconds game menu is active again. Let's fix this.

Add new definition in GameMenu.as behind definition of pressedOption variable:

private var selectedOption:int = -1;

Value of variable will be set, when player releases mouse button over the selected option. Change switch block in MouseUp_GameMenu function to:

switch (gameMenuState)
  switch (pressedOption)
    selectedOption = OPTION_NEW_GAME;

This may look unnecessary to you right now, because new game is the only option that changes the state of game menu. We will need it later when we implement behaviour of other two options.

Finally, we have to change the state of the program to GAME, but not before the title screen fades out. Replace the line:


at the bottom of Draw_GameMenu function with:

switch (selectedOption)
  state = GAME;

This code ends the GAME_MENU state and actives GAME state. New_Game function will take care of game initialization, currently this function is not defined. This will be our next task.


This file is already part of the project, we made it in chapter 9. If you open the file, you can see that it is pretty much empty. It contains four functions without implementation, all of them are called from event handler routines implemented in SnakesAdventure.as:

- Draw_Game is called from Draw function (on ENTER_FRAME event)
- MouseDown_Game is called from MouseDown function (on MOUSE_DOWN event)
- MouseUp_Game is called from MouseUp function (on MOUSE_UP event)
- MouseMoved_Game is called from MouseMoved function (on MOUSE_MOVE event)

Before we start implementing all those functions, we have to make some preparations.

We already implemented state automaton twice: in activation screen and game menu. Game state automaton will require a lot more different sub-states, but for now we will define only four and add new state, when it is required:

private static const GAME_FADE_IN:int = 1;
private static const GAME_START:int = 2;
private static const GAME_STARTED:int = 3;
private static const GAME_PLAYED:int = 4;

private var gameState:int = GAME_FADE_IN;
private var gameTime:Number = 0;

private function ChangeState_Game(newState:int):void
  gameState = newState;
  gameTime = 0;

This should look very familiar to you, because similar functionality was already implemented in Activation.as and GameMenu.as. We defined four different constants, one for each state. Variable gameState contains value of active sub-state, variable gameTime contains number of seconds since sub-state was activated. Function ChangeState_Game will be used to change active sub-state.

In Draw_GameMenu function (GameMenu.as) we added a call to undefined function and this was the reason why program did not compile anymore. New_Game function will take care of game initialization, but right now we have nothing to initialize. Implementation just sets the GAME_FADE_IN game state:

private function New_Game():void

Finally, the code compiles without errors. As usual, complete package for this chapter can be download here.

No comments:

Post a Comment