Idea generation for ‘Asteroid’ game

After thorough research, being based on the concept of ‘asteroids’ most of the games I seem to find are very space orientated, such as aliens, spaceships and meteors.

I wanted to break away from this obvious theme and move onto something for a similar audience but with a more original theme. 

Playing the game along the Y axis (vertically)

Playing games on this axis (personally) I believe to be more shoot-'em-up. Meaning that it would be the avatar (typically human) shooting other humanoids.
Personally I don't really like this form of game play for mobile devices and I think there is already enough games on the market in this format to produce anything that could be considered competition and so I will detour  from this.

Playing the game along the X Axis (horizontally)

Playing the game on the X axis is renown for being 'invader' or asteroid based. Basically meaning that it has a very heavy space theme - and so I am going to do something completely different.
                                 
                                                  INSERT MIND MAP HERE                      

From my mind map it is somewhat apparent that in order for my game to be recognized by multiple audiences it will have to be based on something that has had multiple appearances through out the years, and yet still be relevant to those who will want or own an android device. An example of this would be:          Star Wars - Star Wars is still hugely popular by all all/most age groups however it is still a sci-fi or space themed game and so this is not a good choice for my game.

In order to have something relatively original or at least something not particularly common, I have decided for my game to be Pokemon based, and so it will have a large audience in which will want/have an android device and is yet still widely popular. Although it is more common with younger audiences it still has a large impact in the adult population due to the time period it has been around.
I have also decided to make the game more comical and so its graphics will be based on Nintendo hand-held console graphics so the graphics may be 8-bit or something similar to give a retro-feel to my game.

Ideas

Enemies

This is a Diglett, and will be my first enemy, and will either have;
less health, move slower, cause less damage or all of these...
Diglett are a weak Pokémon in the game and I think would be good to have as my basic enemy.

 This is a Dugtrio and will be next hardest enemy, this one may be:
stronger, more health or faster than my Diglett or once again may have all of these qualities.
Within the Pokémon franchise Dugtrio are fairly decent Pokémon not being one of the strongest or one of the weakest

As you can see both enemies are almost popping out of the ground, I want to incorporate this into my flash and have them both bobbing in and out of the ground as they come toward the player - I think this would be a fun little animation and tie it closer to my Pokémon theme as they do this in the anime too.

Initial Player Avatar Sketches

this is my initial sketches for player, I want to make the player a Pokémon trainer and because the enemies are coming towards the player he should be facing them, with his/her back to the player. This sketch is based from the behind view of the male player from the Nintendo DS game:
Pokémon Soul Silver.

This is the finished top half of the trainer, using the colour scheme, and design from the Nintendo DS game: Pokémon Soul Silver
This is going to be my normal trainer and his 'laser' will be pokeballs to capture the wild Diglett & Dugtrio

This is going to be my secondary player, this is a member of Team Rocket, this is a group of thugs and robbers within the game and are the main antagonist of the first and second generation Pokémon games and series. And so I thought it would be cool to also be able to play as a baddie.

After much work, I decided that I didn't want all of the Diglett and Dugtrio to be caught by the trainer as this wouldn't really work - so instead I thought I could use something that would incapacitate or subdue them - for a trainer to do this is inhumane and generally shunned upon within the anime and series and so I thought it would be better to have another Pokémon do this - I decided to use on of the starter Pokémon for the first generation of Pokémon - Squirtle. With this I could make more than one ability some being more powerful than others.

Game Production + Evaluation

Graphics

All the graphics used in my game are all produced by myself using Flash. All of my graphics have been created using the line tool and the warping or curving the line to fit the shape, and then when the outline was finished I would then fill with the paint bucket - All of my images are based on Pokémon and in most cases used images for reference

Player Avatar:

 as I choose to do Squirtle as my players avatar I had to think about how I wanted it to look - seeing as I wanted to have my enemies coming toward my player I thought logically the players avatar should have its back to the screen, and so I created my Squirtle facing away. and so it would be firing its 'lasers' at the enemies.

 After I had finished my outline for the Squirtle I needed to colour it, and so I retrieved an image from the internet of a Squirtle used the Eyedropper Tool and grabbed the main colour of Squirtle and his shell. From I took the main colour  for his body and shell, and made it darker and used this as shading.

I had initially intended on animating my Squirtle so that his legs or arms might move when he does, but I thought that this might distract the player or use up to much processing power and so decided to leave it.
I also decided to leave my Squirtle as a vector image within flash, because he wasn't scaling or moving much and there is only going to be one of him, so I thought I would keep the graphic looking good and clean by leaving him vector instead of importing him in as a jpeg.

These are my enemies. These were all made and coloured in Flash and then imported into Photoshop, then imported back into flash - this was done so that they wouldn't be vector-based images, instead they would be jpegs, this was done, because within my game, because both of them bob in and out of their ground, scale and change contrast. Keeping these vector based would take up too much processing power.

This is technically my Third enemy, as this is within my Enemy movie clip - however I have scripted it so that this is shoot-able and it will earn points to the player, like the other enemies but if the player allows one to hit and fall on it they will earn a button which is ultimately a 'nuke' button in which it will cause a wave animation 'surf' and clear the stage of all enemies, once used the button will disappear.

This is my 'Nuke' visual, a big wave will come and wipe the stage clear of all enemies and will disappear along with the button once the player has gained the power-up. Because this can only be used once every-so often I decided to keep this as a vector image, as I thought it would work nicest.

 This is my 'Laser', this is the most common form of artillery within my game, and is also a move within the Pokémon franchise. As you can see my 'laser' is several bubbles, which scale up and down when fired - because of the frequency of these can be launched and the animation they do I decided to created these in flash, import them into Photoshop and then back into flash. I done this because Flash gives them a very simple look, that doesn't look very real, and yet they don't look cheap, and I believe this would be hard to achieve in Photoshop so I decided to import it back in as a jpeg instead of vector.

This is my background for my game - The dark at the top is supposed to represent the beginning of a cave - Diglett cave.
This is where I am hoping to have all the enemies starting from instead of all over the top. However this may make the game too easy so this will be revised.
This was created in Photoshop and then imported into flash, to save on processing power.


Game Over Screen:

This was the initial outlines for my end-screen  Currently it doesn't make a lot of sense at all the lines are visible but it currently consists of the shadow cast of by my Squirtle, an incapacitated Squirtle and odd rocks around and on Squirtle.

 This is my coloured finished end screen. AS you can see it has the words - "you fainted" which is a term used in Pokémon when a Pokémon is out of health and unable to battle anymore thus tying it closer to the theme.






Start Screen:

This is the main outline of my Squirtle, The idea for my title screen is to have Squirtle surfing or doing some form of water move, and so I started to make my Squirtle.

 This is my finished coloured Squirtle, I have yet to add the graphic of him surfing but the main part of the image is there, from here I can 'guestimate' the size the wave should be.

 Wave graphic has been added, I wanted to try and keep to the style of my wave from my 'nuke' button. This is my finished graphic for my title screen, this can now be re-sized and placed where I want it to be.

 This is my finished title screen, that currently has 3 buttons, the two large ones in bubbles are official buttons that will stay the other is present whilst in editing mode but wont be during game play due to the fact that I've hidden it with script.
The bubble Play button will take you to a rough bit of role-playing which can be skipped once started. And the help will take you to a small tutorial of what to do.

Introductions/Role playing Screens

This is my outline for a character in the Pokémon franchise called Professor. Oak, I thought it would be best to use him to give instructions or a brief overview to the game as it will tie nicely into the theme and also add more characters to the game and bulk it out a bit. I also believe it makes it more interesting.

Finished Professor. Oak, and the outline of my Pokédex - this is how i'm making the Professor visible  through the players Pokédex - this will once again relate back to my Pokémon theme and will also add more detail to my game

Finished Pokédex: this will be the device that relays the message from Professor. Oak to the trainer, will an on-screen visual of the Professor I will type out a brief induction to the game - talking through him.






These next Screen shots are of what he says, along with all the buttons available on stage:

 1                                            2

 3                                             4

 5                                             6

 For these all these buttons to work I had to implement different bits of script:

stop()

starty.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);

function fl_ClickToGoToNextFrame(event:MouseEvent):void
{
nextFrame();
}
play_btn.visible = false;

 This bit of script talk to my button start button (with an instance name of starty) from my title screen, and tells it to go to the next frame within the movie clip
and then I have also made my play button which will take you to the main game invisible for the time being.


For when the Pokédex comes up I used this script that all the buttons will follow:


NEXTY.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame_8);

function fl_ClickToGoToNextFrame_8(event:MouseEvent):void
{
nextFrame();
}

This script talks to my 'Next' (instance name NEXTY) Button and makes it go to the next page whenever clicked

 SKIPPY.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame);

function fl_ClickToGoToAndStopAtFrame(event:MouseEvent):void
{
gotoAndStop(8);
}

This bit of script talks to my 'Skip' button (instance name SKIPPY) and will command it to skip the brief induction by going to the last frame of the induction - in this case, frame 8

PREVY.addEventListener(MouseEvent.CLICK, fl_ClickToGoToPreviousFrame);

function fl_ClickToGoToPreviousFrame(event:MouseEvent):void
{
prevFrame();
}

This script talks to my 'Prev' button (instance name PREVY) and commands it to go to the previous frame.

And then on the last frame of my induction I have

play_btn.visible = true

and all that does is make the play button visible so that it can be clicked to start the game.

Flash Action script

  //**************VARIABLES**************/

Creates a string variable that is empty and has no value

var gameState:String;

//*********BEGINNING STUFF**************/
Means that that the movie clip endScreen is false (i.e. invisible)

endScreen.visible = false;

//**************INTRO SCREEN**************/

Making the child of the movieclip introScreen a button that is clickable

Looks for the function click away ( this is done with open+closed brackets)

It calls the function to move the movie clip out of the screen to reveal game screen

Also sizes the screen and drags it the x axis and takes the image out of the screen (screen x= (screen.wdith*-1;) (-1 is left and +1 is right)

Gamestate is a variable and in the variable you are putting in INITGAME which shows the value and state of the variable.

AddEventListner means its listening out for the even Enter_FRAME, game loop, meaning it will listen out for a new enterframe event and until then loop the screen.

introScreen.play_btn.addEventListener (MouseEvent.CLICK, clickAway);

function clickAway (event:MouseEvent):void {

      moveScreenOff (introScreen);

}

function moveScreenOff (screen:MovieClip):void {

      screen.x = (screen.width)*-1;

      gameState = "INITGAME";

      addEventListener (Event.ENTER_FRAME, gameLoop);

}

//**************GAME STATES**************/

function gameLoop (e:Event):void {

      switch (gameState) {

             case "INITGAME":

                   initGame();

                   break;

             case "STARTPLAYER":

                   startPlayer ();

                   break;

             case "PLAYGAME" :

                   playGame ();

                   break;

             case "ENDGAME" :

                   endGame ();

                   break;

      }

}

//**************STATE_INIT_GAME**************/

Trace when you run the movie will be printed out on an out movie in flash.

function initGame ():void {

trace("add stuff to initGame")

         gameState = "STARTPLAYER";

}

//**************STATE_START_PLAYER**************/

function startPlayer ():void {

       trace("add player stuff")

      gameState = "PLAYGAME";

//**************STATE_PLAY_GAME**************/

Makes play game a function along with calling on with the 2 smaller ones,

 And then makes the clipboard memory remember Endgame

function playGame ():void {

      makeEnemies ();

      testForEnd ();

}

function makeEnemies ():void {

     

}

function testForEnd ():void {

      gameState = "ENDGAME";

}

/**************STATE ENDGAME**************/

function endGame ():void {

      removeGame ();

      endScreen.visible = true;

      removeEventListener (Event.ENTER_FRAME, gameLoop);

      showResults ();

}

Creates a function called showResults

With the child button

Creating a click event (clickFinalAway)

Calls a function shows results

function showResults ():void {

      trace ("Show Results"); 

      endScreen.play_btn.addEventListener (MouseEvent.CLICK, clickFinalAway);

      function clickFinalAway (event:MouseEvent):void {

             trace ("clickFinalAway");

             moveScreenOff (endScreen);

      }

}

//**************REMOVE GAME**************/

function removeGame ():void {

     

}

>imputed all script

>added movie clips (endscreen + start screen)
>animated start screen
>fixed bugs
>made buttons play_btn
> This allowed the loop actionscript to work

Screen grabs of working Script.

 This first screen shot is of all the beginning things, that need to take place before the game starts. I have added a few things myself that need to be hidden so that you can see the beginning screen properly, without still being able to view my nuke button, the score, lives and level. So by using their instance name followed by: ".visible = false" this will hide them from the screen and can only be made visible again by saying so through script.

This next print screen is things that need to happen within the 'init game' loop - meaning things that should happen when the game initiates. 

As you can see I have made that several things: ".visible = true" which means when the game starts the lives, level and score will now be visible and work as they should.

This next large shot of script is all about how my enemies get larger as they come towards the screen, and that they start off darker and get lighter and other such things that all come from perspective. These are all mathematically scaled and what not and so need to be scaled on the x & y axis, and by a percentage. As you can read this is all implemented through the scripting. Along with the percentage of the saturation.

This part of the script is used to say what happens when the enemies get hit buy the players 'laser' or the player itself. - in this case it causes an 'explosion' and then the enemy, laser and explosion is removed from stage however mine has an alteration and that is that if the 3rd frame within my enemy movie clip hits the player that it doesn't explode when it hits the player but instead provides a new button the the player - this is my nuke button. However I have made it so that the nuke can still be shot for points, but this will not provide the button. 

This is a screen shot of my "make Enemies Function"

This loop will create new enemies, determining their start position, within the parameters I have set ( so they don't go too far off the left or right of the stage)

The script we were given I have made amendments too so that my enemies don't rotate down but instead the go down horizontally  This was done by blanking out several lines of script. 

I also added so that there would be more than one enemy - I have added 2 enemies and a power-up. These are all within the same movie clip and are called out randomly. However I have also altered the speed of which they move. The first enemy and power-up move quite slow however the second enemy moves faster this is from a small bit of script:
"tempEnemy.speed = 2;" and then you put an 'if' statement and then you can do the same for the second and make the number higher to make it go faster.

This last screen shot is of the small bit of script I used for my nuke button. I basically took the script for the end game function and this is to clear the enemies from the stage. Along with this it removes the nuke button away from the stage again, adds 5 points to the score and also displays a 'wave' visual to clear the stage. 

Flash as an IDE

Using Flash as an IDE

Vector based graphics means that all the graphics are mathematically calculated. This therefore means that when scaling and transforming a graphic, it keeps all of its qualities and doesn’t get distorted in the process. This is good because it allows cleaner graphics and also has an input on the file size. Also when graphics are swapped or changed, they are updated in all instances of the file.  If creating graphics on flash, there are many tools and features that allow the creation of images in a much easier way, such as snapping and the use of precise measurements.  The downfall to this is that if you create images in flash, because of the large amount of lines used, it can cause chugging. To overcome this you can import images and movie clips meaning that you can reduce the file size and still have clean graphic. However images you import (bitmaps) cannot be scaled accurately, as flash is not designed for this. This means you have to use a different program such as Photoshop or other image manipulation programs to accurately scale/ change the image.

ActionScript is the scripting language Flash uses to control the objects within the files. If you want to do anything interactive in Flash, you'll need to use ActionScript. It allows you to use various different actions in a flash file depending on what the user wants to happen in each instance. For example you can implement the use of functioning button such as play, pause etc. Flash also has snippets of codes to make it easier for the user; these snippets are useful actions which are more commonly used than others. For anyone who doesn’t know a lot about scripting, it is going to be very difficult to implement in the work they are doing. This is because it is very easy to make mistakes and just a little mistake can cause the whole file to not function properly.

In flash you can create very basic animations without the use of scripting, which is called tweening. This involves using automatic animations between different key frames on the timeline.  There are only 3 forms of tweening available for this animation type. These forms are: classic, which is simply moving the object from one place to another; motion which is moving the object in more complicated ways, such as rotating; and shape, which is changes the original shape to warp it into something different.  Tweening is good as it means that the user doesn’t have to do frame by frame animation themselves, which basically makes it much easier.

In flash you have use of a timeline. The timeline can be used to give the user an idea of how long the file is going to be or alternatively how long different animations are going to play for. In the timeline it shows the different key frames which your work is on, and you can also edit how many frames per second you are viewing, giving you a slower or faster view of your work. This is good because it is very easy to see what time frame you are working in which is useful if an animation has to play for a certain amount of time.

When previewing a file which comes across an error, Flash has a debug function that will lead you to where the error is opposed to having to find it yourself. Not only will it take you to where the problem is, it will also tell you what it is. This is very useful as it means it is very time saving and more accurate when finding a problem.

Flash has implemented a good navigation system within the program. It has a library, which automatically saves every movie clip, tween, button, ect. These saved files are easily looked up or drawn upon at any time. This is very helpful because it saves a lot of time and you don’t have to save them all individually. Also the library has a function which means you can use saved files not only from the piece you are working on, but other files as well. Flash also has a customisable interface which means that it is easy to use and can be change to suit the user.

Flash uses layers to keep everything in order and easy to manage. You can have different elements on different layers so that it is easy to keep track of them and make sure all the actions are correct for each one. It allows you to separate and select different parts more easily.

On flash it is easy to test what you have done using a simple shortcut. This means it can be viewed quicker and therefore changes can be made more easily. Also Flash has the facility to test files on a device simulator, this means that you can test the performance of you file on different devices and systems.