Wednesday, 14 December 2011

Game development

Using my check list as reference I finally started making my game.

  • 360 degree rotation using <- and -> arrow keys
  • Push forward and gradually slow down when up key is pressed
  • pick up knocked out penguins when walked into
  • automatically build raft when you have 6 penguins
  • random movement
  • timer
  • scoreboard
  • shooting
  • timer if you stand still too long, melt ice, dead.
The first thing on my list to do was to code the movement of my player, we had already gone through how to make the player move using the corresponding arrow keys (left key moves your left ect.) but I wanted to have my character move like the player does in the asteroid's game so after talking to our lecturers the five of us who wanted to do this kind of movement were given a script to start with:


var player:MovieClip;

// player settings
var _maxSpeed:Number = 5;
var _rotationSpeed:Number = 5;
var _thrust:Number = .5;
var _decay:Number = .90;

var _currentSpeed:Number = 0;
var _speedX:Number = 0;
var _speedY:Number = 0;

// movement flags
var _movingUp:Boolean = false;
var _movingLeft:Boolean = false;
var _movingRight:Boolean = false;

var penArray:Array=new Array();
var xArray:Array=new Array();
var yArray:Array=new Array();

// add listeners
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN, myOnPress);
stage.addEventListener(KeyboardEvent.KEY_UP, myOnRelease);

createPlayer();

function createPlayer():void
{
player = new Player();
player.x = stage.stageWidth / 2;
player.y = stage.stageHeight / 2;
addChild(player);
}
//adds player to middle of screen

function myOnPress(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.UP :
_movingUp = true;
break;

case Keyboard.LEFT :
_movingLeft = true;
break;

case Keyboard.RIGHT :
_movingRight = true;
break;
}
}

/**
 * Key Release Handlers
 */
function myOnRelease(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.UP :
_movingUp = false;
break;

case Keyboard.LEFT :
_movingLeft = false;
break;

case Keyboard.RIGHT :
_movingRight = false;
break;
}
}

/**
 * EnterFrame Handlers
 */
function enterFrameHandler(event:Event):void
{

if (_movingRight)
{
player.rotation +=  _rotationSpeed;
}
if (_movingLeft)
{
player.rotation -=  _rotationSpeed;
}
if (_movingUp)
{
_speedX += _thrust * Math.sin(player.rotation * (Math.PI / 180));
_speedY += _thrust * Math.cos(player.rotation * (Math.PI / 180));
if (player.x < 63)
{
gotoAndStop(53);
}
if (player.x > 491)
{
gotoAndStop(53);
}
if (player.y < 58)
{
gotoAndStop(53);
}
if (player.y > 297)
{
gotoAndStop(53);
}
}
else
{
// Deccelerate when Up Arrow key is released
_speedX *=  _decay;
_speedY *=  _decay;
}

// Maintain speed limit
_currentSpeed = Math.sqrt((_speedX * _speedX) + (_speedY * _speedY));

if (_currentSpeed > _maxSpeed)
{
_speedX *=  _maxSpeed / _currentSpeed;
_speedY *=  _maxSpeed / _currentSpeed;
}

// Move player based on calculations above
player.y -=  _speedY;
player.x +=  _speedX;
}
}

Using this base code I was able to start my game, I played around with the setting until I was happy then I started work on adding the backgrounds.

Right after the add affect listeners I added my background and the array for the penguins, after I made the background a movie clip I made two new frames inside it and added the level two backgrount to the second frame and the third to the third. When I had my timer coded I would set it to go to the net frame on the background every 5 minuites. At first I had fifteen penguins in my array but that was too much so I reduced it to four, but then back up again to seven because it was too easy before. Another thing I changed for my final game is that instead of the penguins spawning randomly on the stage, I made them spawn randomly along the x axis (the top) but at -50 on the y axis, so they all come from the top of the screen, this was because when I first coded it, the penguins sometimes appeared on top of the player or two close to avoid. I used the coding we learned when making the file with smoother movement to add the child.

//===============================================================add back'nd

var bg1:MovieClip=new BG1();



bg1.x=275

bg1.y=200
//add to center of stage



addChild(bg1);

//=================================================================add penguins

for (var i:int = 0; i < 7; i++) {

                  var pen:MovieClip = new Pen();

                  pen.x=Math.random()*550

                  pen.y=-50

                  addChild(pen);

                  //adds the pens above the top of the screen

                  penArray[i]=pen; 

After talking a lot with Marnie about how I wanted my penguins to move we came up with an idea, the problem was that I wanted my penguins to move randomly along the x and y axis, so our best plan was to make two new arrays, one for the x value, one for the y value. Each array will hold 6 numbers, they would be 1-6 but by adding a -3 at the end we get -3, -2, -1, 0 , 1, 2, this ensures that the x and y values can be posive or negative, if not the penguins would only move right and down.

                  xArray[i]= Math.random()*6 -3

                  yArray[i]= Math.random()*6 -3    

}
Finally I set up the final but of then penguin code so that when they go 50 pixels outside the area of the screen, they choose a new x and y value and come back onto the screen. To do this I made an if statement that when any penguin goes that far to choose the new values, but the problem was, how to make it choose numbers that make it go back towards the centre of the game. To start with I wrote the if statement
if (penArray[i].y>450) {
this picks up if it goes below the game by 50 pixels
xArray[i]= Math.random()*6 -3
The second line is easy enough as it can go in whatever x angle it wants. But as for the y axis I don't want it to do down any further, therefore I don't want a positive number.
yArray[i]= Math.random()*3 -3
}
So I set only half of the possible numbers and made sure that they're all negative. Using this knowledge it wasn't hard to do the rest.


Now I have a moving player character, a background and the penguins. The next thing I wanted to do was to add the transpaent blue overlay for each level, I made the first one a movie clip then added the second and third to frames after the first inside the movie clip, then I tried to add the overlay by using the same code I used before to add the background, but for some reason it would.nt show up above the background, even when placed at the end of the code, aftert consulting marnie we worked out that I had copied code from the movement text form onlie, and the reason we couldn't get it to work was becuase it was added differntly because there was a 'stage.' before the add child, when I worded the same as the others it worked fine. This problem took a lot of time to solve so I decided to prioritise and take some items off my to do list as I didn't have much time left, I scrapped the 'timer if you stand still too long, melt ice, dead.' and 'scoreboard.' Therefore I went right on to adding the hit test for the penguins hitting the player, but I had another problem, it just wouldn't pick up the hit test. While waiting for help I managed to set up the start screen, start button, game over screen and restart button. 


Between these two frames, I originally had only the frame with the game coding on it, but then I decided to add an instructions screen for round 50 frames, then I added a stop(); at the top of the game coding.

After this with the help of Lee we worked out that if we changed
 if (penArray[i].hitTestPoint(player.X,player.Y, true)) {
to

if (penArray[i].hitTestObject(player)) {
it worked therefore I set it to take you to the end game frame when the hit test occurred. After all this I regrettably realised I had hardly any time left, so I decided to not add the shooting aspect, or have levels as the other aspects were more important. 
Next I edited the code we used to make a timer in a tutorial and added into my file, but when I tested it the background was added on top of it so I deleted it from the stage and added it as a child instead.

var time:MovieClip=new Time();

time.x=350
time.y=5

addChild(time);


import flash.utils.Timer;

var seconds:int=0
var mins:int=0

var mainTimer:Timer = new Timer(1000)
//1000 miliseconds = a second 300 times
mainTimer.addEventListener(TimerEvent.TIMER, runOnce);
mainTimer.start();

function runOnce(event:TimerEvent):void {
seconds++
if (seconds<10){
time.timee.text=String(mins)+":"+"0"+String(seconds);
}
if (seconds>9){
time.timee.text=String(mins)+":"+String(seconds);
}
if (seconds>=60){
mins++
seconds=0
}
}

This seemed to work fine so I moved onto my final thing to do, the health bar. Much like how I set up the background I made three frames inside the health bar movie clip for each stage then one more, for some code to take you to the end game frame, then deleted it from the stage and added it in the code. Then I set the hit test if statement to 'hp.nextFrame();' and added a stop on every frame of the health bar. Unfortunately this didn't work and after a consultation with Lee we worked out that the hit-test happened the second the penguin touched you, and then was being triggered again and again as the penguin passed over the player. 
So we decided to add two more lines to the if statement 
'penArray[i].x=Math.random()*550
penArray[i].y=-50'
this code makes the penguin move the second it hit's you to somewhere else on the screen, so it doesn't constantly trigger the hit test. The original plan was to have it move anywhere randomly on the screen but I changed it to appear 50 pixels above the screen like at the begging of the game. 
Finally my game was nearly finished, the last bit of code was on that last frame of the health bar, a code to take you to the end game page.

Tuesday, 15 November 2011

IDE

Integrated Development Environment is the name for an application program that can make codes to use on the internet, to make things like games and websites. Here at college we use the program Adobe Flash to do this, it's probably the most well known IDE and has many advantages.


Probably the best function of flash is actionscript, it enables you to write code that enables player interaction, for example drop and drag options, buttons ect. This is a massively useful tool that enables you to make interesting interactive games to varying degree's of difficulty, fortunately the program has pre-scripted elements that can be added to your coding to save time and make work easier. There are two different actionscripts to choose from, actionScript2 and actionScript3. Actionscript2 is slower but easier to learn at the start while actionScript3 is more difficult to learn but when you grasp the basics you can do some truly amazing things.


Flash comes with the ability to make vector images in the program without the use of programs like Illustrator, vector images are useful as they can be shrunk and expanded without quality loss, you can import vectors if you don't want to draw them in flash as well as uploading bitmap files, but these will pixelate when re-sized and have a larger file size then vector images. Also when you import an image you can store it in the library, it's very useful if you want to use the image more than once, you can edit the file in the library and it will add the edit to all the copies throughout the file, also if you make your image a 'movie clip' (using the F8 short-cut) you can go into the file and add new frames inside the file, making an animation without having to do it on the main time-line. Your animation inside the movie clip can also be controlled by code in the main time-line, which lets you play and stop when you want it to. You can also import movies into flash which is a very useful tool and flash also has a range of handy image adjustment tools and filters like opacity, drop shadow, stroke and so on. This is a quick way to add one small adjustment that immediately makes the image far better. Flash can also show animations through the use of frames, this can be used for such things as collisions, player interaction, button clicks, anything, which adds another dimension to your work and makes it more enjoyable for the people who use it.


Flash also has the ability to use sound, it even has a simple sound editor, sound can really enrich your work and make it stand out, also flash is compatible with loads of external computer hardware so you can use things like cameras, microphones, pressure pads, and many more. There's also a load of pre-set components which can be simply drag and dropped into your file, the components include things like buttons, scroll bars and dialogue boxes, which are very useful for beginners. As you get more experienced with flash you can do a lot more things, for example you can have flash access remote files via URL, which is useful for accessing high scores, also to reduce the program lagging you can have all the information you need on a single frame simply by having your files in the library and pulling them on stage when you need to using coding.


Also since flash is part of the adobe family it's compatible with many of the files you use when saving adobe work, you can even set flash to look more like Photoshop for beginners. Like Photoshop Flash also has layers, which are useful for placing objects on top or underneath each other, as well as folders, which are great if you are working with a lot of layers, you can just put all the related layers in a folder and close it, giving you more room to look at the other frames, it also can use colour code identification to help keeping layers organized.


In conclusion Flash is a very professional program that although horribly confusing at first can be used to make some amazing things once you get the hang of the program.



Thursday, 10 November 2011

Asteroid size

Today we added a small piece of code to our array file to make the size and rotation of the blocks random.

cube.scaleX=Math.random()*1.5+.1;
//This sets the x axis size to random anywhere between 1.5 and 0.1 (1 being the size of the original block)
cube.scaleY=Math.random()*1.5+.1;
//This does the same with the y axis size
cube.rotation=Math.random()*360;
//And this sets the rotation value to a random size between 0 and 360

Array development

Today we developed our Array file to make it more game-like. First we made a ship to direct with our mouse, so we made a simple box on the stage and converted it to a movie clip making sure that in advanced settings we clicked 'export for ActionScript' and called it 'ship' and set the class to 'ship', we then deleted it from the stage.


var Ship:MovieClip = new ship();
addChild(Ship);
//This drags our ship file onto the stage and names it Ship

Ship.startDrag(true);
Mouse.hide();
//drags Ship and hides mouse


Now our ship appears onto our stage and is clipped to our mouse. Part of the old code made the blocks go transparent with a hit test for our mouse so now when we roll over a block with our ship attached it goes transparent. This can be changed easily though to something like ship goes transparent or any other event so it's a very useful code that I will use in my game.

We also wanted to make the blocks scroll from the top to the bottom and loop back up to the top. With the code now 15 blocks show up randomly on the screen.

var speed=3
//Here we set the speed for the blocks, we could just set a fixed movement instead of using a speed variable but with a speed variable it can be changed so that the blocks get progressively faster. This piece of code is put at the top with the other variables


blockArray[i].y+=speed


//This talks to the whole Array and tells them to move along the y axis at the speed we set up in the       variable.

if (blockArray[i].y>450){
//if any of the blocks in the Array get to 50 pixels below the bottom of the screen
blockArray[i].y=-50
//move it to 50 pixels above the top of the screen
blockArray[i].x=Math.random()*550;
//then reposition it randomly along the X axis
speed+=0.1;
//And increase the speed by 0.1
}
}


This now means that every time the blocks go back up the the top of the screen they get as little faster.

Next we wanted to make the ship explode when it hits one of the blocks so we went into the movie clip from the library and on the next frame we drew a quick explosion with the pen tool, then on the frame after we delete the ship, we then leave a break of around 10 frames and then add she ship back in. Before we leave the movie clip we added a small bit of code (stop();) so that the clip doesn't play continuously.



We then simply added Ship.play(); to the end of the hit test code.

Finally we added lives to the game, first we made a square and converted it to a movie clip making sure that in advanced settings we clicked 'export for ActionScript' and called it 'lives' and set the class to 'lives'. We then went into the lives movie clip and made three squares in a line, then we made a new frame and deleted one of the squares and so on, then we added a stop to frame 1.

Finally we added this code (MovieClip(root).lives.nextFrame();) onto the last frame of the ship so when the ship is triggered to play it goes to the root (the stage), finds lives and moves it to the next frame.

Wednesday, 19 October 2011

Check-list of things for my game and final idea

I have finalized my game idea now, It'll be a timed game where instead of the score going up every time you're hit that 'score' will be how much time it took to get through all the levels. I decided I want three levels and the purpose of each is to get back to your island by building a raft

Codes:

360 degree rotation using <- and -> arrow keys
Push forward and gradually slow down when up key is pressed
pick up knocked out penguins when walked into
automatically build raft when you have 6 penguins
random movement
timer
scoreboard
shooting
timer if you stand still too long, melt ice, dead.

Sprite designs

Today I started the making images for my game.
This is my image for my penguin but I realised that for the movement I want to have in my game (rotation) it would look bad. So I decided to change the view of my game to birds eye.
These are the final images I came up with, being ariel veiw they look a lot better. Next I started work on the backgrounds, three of them, one for each level.


I decided I wanted a low opacity blue overlay over the top of the penguins instead of my first idea to keep them on the ice, so I made a version two of each background with the shape of the water in blue and where the ice is transparent, my plan was to add this into the file last to if you go off the ice the blue ontop makes it look like they're underwater. 


Finally I made my intro scene, game over screen, play and play again buttons and a three-stage health bar.







With all my resources made I could now start coding my game.

Thursday, 13 October 2011

Arrays and Hit tests

Today we made something called an Array in flash. An Array is like a big list, each line in the list has a specific number and each line holds information. In our code we used an Array to repeat a code to make a box so we  have more than one but we don't have to write the whole code out.



var blockArray:Array=new Array();
//make a new array called blockArray


for (var i:int = 0; i < 15; i++) {
//Add a line until it has 15
var cube:MovieClip = new box();
//make a varible called cube using box from the library
cube.x=Math.random()*550
//random position along the x axis untill 550 (document size)
cube.y=Math.random()*400
//random position along y axis
addChild(cube);
//adds cube

blockArray[i]=cube;
//fills list with 15 cubes
}


Next we made a quick hit test code


stage.addEventListener(Event.ENTER_FRAME, checkHit);
//listen to the stage on all frames, run a function called checkhit
function checkHit(myevent:Event):void {
for (var i:int = 0;i<15; i++) {
if (blockArray[i].hitTestPoint(mouseX,mouseY, true)) {
//if the cubes in the blockArray get's hit by the mouse either on the x axis or y axis
blockArray[i].alpha=.3;
//the alpha (transparency) goes down to 0.3
}
}
}


We also made a code for two objects on the stage hitting each other.

stage.addEventListener(Event.ENTER_FRAME, checkHit);
//listen to the frame and run a function called checkHit
function checkHit(myevent:Event):void {

Cube1.x+=3


//set cube1 to move right at a speed of 3 pixels

Cube2.x-=3


//Same with cube2 but left

if (Cube2.hitTestPoint(Cube1.x,Cube1.y,true)) {

//if cube 2 gets hit by cube 1 along either the x or y axis


Cube1.alpha=.3;


//The alpha of cube 1 goes down to 0.3

}
}


Tuesday, 11 October 2011

Game idea development

For this module we have to design a game based on the classic arcade game Asteroids using similar coding that we pick up as we re-create the game in flash. Personally the controls of the original game (left and right for rotating and up for thrust) seem very erratic and hard to control for me, a bit like when your ice skating. This idea caught on as I came up with the idea of a shipwrecked man stuck on a sheet of ice trying not to fall into the water. Originally I was going to have polar bears and penguins on the ice with you, the penguins would be moving randomly like the asteroids in the original and the polar bears would move towards you, but talking to my lecturer about it I realised this would be really hard to do so I decided on having the ice beneath the player melt if he stands there too long. I also decided on a slightly perspective screen where the player gets smaller the further away from the screen is, this may cause problems with seeing where your going at the back so I might change it to a birds eye view instead.

Smoother movement and library attachment

Today we looked at a smoother way to move the 'Ship' around the stage.

var moveRight:Boolean = false
var moveLeft:Boolean = false
var moveUp:Boolean = false
var moveDown:Boolean = false


//First we made a variable for each key we will use for movement, then we set the boolean (a statement that can only be true or false) to false


stage.addEventListener(Event.ENTER_FRAME,moveShip);


//We then listen to the frame and set up a function called moveShip


function moveShip(event:Event) {


if (moveRight==true) {
ship.x+=3;
}


//We then tell it that if move right becomes true, move right, this is repeated with the other 3 directions.

if (moveLeft==true) {
ship.x-=3;
}

if (moveUp==true) {
ship.y-=3;
}

if (moveDown==true) {
ship.y+=3;
}
}


stage.addEventListener(KeyboardEvent.KEY_DOWN,pressKey);
//A new function for when a key is pressed down
stage.addEventListener(KeyboardEvent.KEY_UP,stopShip);
//A new function for when a key is not being pressed


function stopShip(myevent:KeyboardEvent):void{
moveLeft=false;
moveRight=false;
moveUp=false;
moveDown=false;
}
//When stopShip is happening (no keys being pressed) all the move values in function moveShip are false, therefore there is no movement

function pressKey(myevent:KeyboardEvent):void{


if(myevent.keyCode==Keyboard.RIGHT){
moveRight=true;
}
//If the right key is pressed then the value of moveRight in moveShip becomes true and it will move. This is repeated for the other keys.
if(myevent.keyCode==Keyboard.LEFT){
moveLeft=true;
}

if(myevent.keyCode==Keyboard.UP){
moveUp=true;
}

if(myevent.keyCode==Keyboard.DOWN){
moveDown=true;
}
}




To add a file to the stage from the library is quite simple but first when your making the movie clip you have to go advanced settings we clicked 'export for ActionScript' and called it 'Ship' and set the class to 'Ship', we then deleted it from the stage.


var ship:MovieClip=new Ship();
//This basically pulls the thing in the library called Ship and puts it on the stage, renaming it ship


ship.x=275
ship.y=200


//we then positioned the ship in the middle of the stage


addChild(ship);


//then we added the final bit of code.