Announcement

User registrations are currently disabled due to high spam traffic.

#1 30/08/06 4:48pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

The construction of a game

Hi there!
In this topic i will be describing the process of creating a flash game (a RPG).
We started yesterday, so the whole process will be in front of your eyes.

Before making a game, ask yourself these 2 questions:
Who? - who are your main characters, where does he/she live, who are his/her allies and enemies, what will he/she be doing e.t.c.

and

How? - how will you make this game, what ActionScript will you use, where will you find the music, will you draw your game or make it sprite-based, e.t.c.

If you're making the game with somebody, then divide these questions.

Well, enough theory, let's get started...

Last edited by soulreaver (30/08/06 4:51pm)


I bite!
surprise

Offline

 

#2 30/08/06 5:13pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Tile - the best method for making RPG's. you can find tutorials on tile-based-games on
http://www.tonypa.pri.ee/tbw/index.html
RPG makers have a decent sprite libary, and RPG Maker 2000 is freeware.

To import sprites to Flash, press Ctrl + R, then modify -> bitmap -> trace bitmap.
set color treshold to 0, minimum area to 1, curve fit should be set to pixels.


I bite!
surprise

Offline

 

#3 31/08/06 12:07pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Now let us talk about the tiles. Since the PSP's screen is 480*272 pixels, the best size is 32*32 - the screen will be 15 (480/32=15) tiles in width, and 8.5 in height. The lowest tiles will be halved, but you can use water or mountains there, to make it less noticible.
+ almost all original sprites are 16*16 pix, so to resize them you just have to multiply the size by 2


I bite!
surprise

Offline

 

#4 31/08/06 5:11pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

I suggest you always test your flash game on a PSP - after every change.
You may allso have some problems with animated tiles, like water, try not to use them - they will lower the frame-rate and cause the game to jerk


I bite!
surprise

Offline

 

#5 02/09/06 3:55pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Here, the last version so far

http://i33.photobucket.com/albums/d60/S … /game9.swf

Right now i'm working on switching locations.


I bite!
surprise

Offline

 

#6 02/09/06 3:58pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Ow, and should i post the engine script here? Its all at www.tonypa.pri.ee,
but if it's too hard to find, then i can copy the main script.


I bite!
surprise

Offline

 

#7 03/09/06 10:33am

tallphil
Banned
From: UK
Registered: 29/04/06
Posts: 825
Website

Re: The construction of a game

You could quote relevant bits of your code, talking about each aspect of the way the game works? For instance, have a post quoting the code that makes the character moves, and explaining how it works...
I love the look of the game so far - looks very promising! We can host the game on our site if you'd like, and I can update it as and when you release more finished versions. smile


PSP Flash Gaming creator

Offline

 

#8 03/09/06 11:06am

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

cool! thanks!

OK, now for the code:
Arrays
I'm using array format to hold maps information.
The simplest array:

Code:

myArray=["a", "b", "c", "d"];

You can get value of first element with myArray[0], which is "a", second element myArray[1] has value "b", and so on.
The Map
So, the map array will look like this:

Code:

myMap = [
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
          [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
          [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1],
          [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
          [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];

This code shows us that our map has 9 rows and 15 columns - the best for psp's screen,
and has two different tiles - 0 and 1. You can add more tiles in the future, but i'll use these two.

Last edited by soulreaver (03/09/06 11:07am)


I bite!
surprise

Offline

 

#9 03/09/06 12:37pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Creating Tiles
Create a blank movie clip in the libary, call it "empty".
Right-click it in the libary, press "Linkage...". In this window, check the tick boxes as shown below:

http://i33.photobucket.com/albums/d60/Soul_Of_Darkness/linkage.jpg

Now create another MC, call it "tiles", and make the same thing with Linkage.

Let's set the size of our tiles, put this script after the map array.

Code:

game={tileW:32, tileH:32};

Now to the tile properties:

Code:

game.Tile0= function () {
};

this line tells us that tile 0 has no special functions.

Code:

game.Tile0.prototype.walkable=true;

- the prototype of tile 0 (the one that will be on stage) if walkable.

Code:

game.Tile0.prototype.frame=1;

- tile 0 is at the 1st frame of "tiles" MC.

Now we will do the same thing with tile 1:

Code:

game.Tile1= function () {};
game.Tile1.prototype.walkable=false;

game.Tile1.prototype.frame=2;

As you can see, tile 1 has no special functions, is not walkabe and you can find it in frame 2 of "tiles" mc.

So the full scrip for now looks like this:

Code:

myMap = [
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
          [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
          [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1],
          [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
          [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
game={tileW:32, tileH:32};
game.Tile0= function () {};
game.Tile0.prototype.walkable=true; 
game.Tile0.prototype.frame=1;
game.Tile1= function () {};
game.Tile1.prototype.walkable=false; 
game.Tile1.prototype.frame=2;

Last edited by soulreaver (03/09/06 12:40pm)


I bite!
surprise

Offline

 

#10 04/09/06 12:39pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Now it's up to the buildmap funtion.
Here's the code:

Code:

// building the world
function buildMap(map) {
    // attach empty mc to hold all the tiles and char
    _root.attachMovie("empty", "tiles", ++d);
    // declare clip in the game object
    game.clip = _root.tiles;
    // get map dimensions
    var mapWidth = map[0].length;
    var mapHeight = map.length;
    // loop to place tiles on stage
    for (var i = 0; i<mapHeight; ++i) {
        for (var j = 0; j<mapWidth; ++j) {
            // name of new tile
            var name = "t_"+i+"_"+j;
            // make new tile object in the game
            game[name] = new game["Tile"+map[i][j]]();
            // attach tile mc and place it
            game.clip.attachMovie("tile", name, i*100+j*2);
            game.clip[name]._x = (j*game.tileW);
            game.clip[name]._y = (i*game.tileH);
            // send tile mc to correct frame
            game.clip[name].gotoAndStop(game[name].frame);
        }
    }
}

You can now use the function by adding

Code:

buildMap(myMap);

if you test the code, your map should be shown


I bite!
surprise

Offline

 

#11 04/09/06 3:23pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Character

Create 3 MCs - char_up with the animation of your character moving up, char_down with down walking, and walking left (or right) in char_side.

http://i33.photobucket.com/albums/d60/Soul_Of_Darkness/chardown.jpg

Now we need a blank MovieClip, call it "char". In keyframe 1 place the "char_up" movie clip, in keyframe 2 place "char_side"(with walking left), keyframe 4 (yes, we have to skip frame 3 so that the script works properly) gets "char_right" and keyframe 5 "char_down".
Use same movie clip for both left and right movement, you only flip one of them horizontally. Now give every MC the instance name "char". this is very important.


I bite!
surprise

Offline

 

#12 04/09/06 3:44pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Script Him!
place this code after the map's array:

Code:

char={xtile:2, ytile:1, speed:4};

speed is the amount of pixels your character will move in one frame (so the higher if the framerate, the faster he will move).

Drag an instance of the "empty" movie clip on to the stage. You can place it outside of visible area. It's only going to call the function so it doesn't matter where it stands. Write code to this mc:

Code:

onClipEvent (enterFrame) {
    _root.detectKeys();
}

This will "activate" your keyboard.

After the buildMap function add this code:

Code:

function detectKeys() {
  var ob = _root.char;
  var keyPressed = false;
  if (Key.isDown(Key.RIGHT)) {
    keyPressed=_root.moveChar(ob, 1, 0);
  } else if (Key.isDown(Key.LEFT)) {
     keyPressed=_root.moveChar(ob, -1, 0);
  } else if (Key.isDown(Key.UP)) {
    keyPressed=_root.moveChar(ob, 0, -1);
  } else if (Key.isDown(Key.DOWN)) {
    keyPressed=_root.moveChar(ob, 0, 1);
  }
  if (!keyPressed) {
    ob.clip.char.gotoAndStop(1);
  } else {
    ob.clip.char.play();
  }
}

That was the detectKeys function itself.

Now to the final part, the moving function, place it after the previous one:

Code:

function moveChar(ob, dirx, diry) {
  ob.x += dirx*ob.speed;
  ob.y += diry*ob.speed;
  ob.clip.gotoAndStop(dirx+diry*2+3);
  ob.clip._x = ob.x;
  ob.clip._y = ob.y;
  return (true);
}

... And finally your character can move!!!! next time - colision with walls.


I bite!
surprise

Offline

 

#13 04/09/06 4:36pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

A new version of the game's engine is ready - with it's location changing.
You can see it here.

Also, we're planning to change the main character. This is what he can look like:

http://i33.photobucket.com/albums/d60/Soul_Of_Darkness/mainspng.png


I bite!
surprise

Offline

 

#14 14/09/06 7:53pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Missed me?
Last time we finished character movement. Now we'll make him stop in front of the walls hitwall.
If you look at a movieclip from inside Flash, you'll see that there's a rectangle around him. This script will fin the corners of this rectangle:

Code:

function getMyCorners (x, y, ob) {
  ob.downY = Math.floor((y+ob.height-1)/game.tileH);
  ob.upY = Math.floor((y-ob.height)/game.tileH);
  ob.leftX = Math.floor((x-ob.width)/game.tileW);
  ob.rightX = Math.floor((x+ob.width-1)/game.tileW);
  //check if they are walls
  ob.upleft = game["t_"+ob.upY+"_"+ob.leftX].walkable;
  ob.downleft = game["t_"+ob.downY+"_"+ob.leftX].walkable;
  ob.upright = game["t_"+ob.upY+"_"+ob.rightX].walkable;
  ob.downright = game["t_"+ob.downY+"_"+ob.rightX].walkable;
}

-----------------------------------------------
Now we'll modify the moveChar function like this:

Code:

function moveChar(ob, dirx, diry) {
  getMyCorners (ob.x, ob.y+ob.speed*diry, ob);
  if (diry == -1) {
    if (ob.upleft and ob.upright) {
      ob.y += ob.speed*diry;
    } else {
      ob.y = ob.ytile*game.tileH+ob.height;
    }
  }
  if (diry == 1) {
    if (ob.downleft and ob.downright) {
      ob.y += ob.speed*diry;
    } else {
      ob.y = (ob.ytile+1)*game.tileH-ob.height;
    }
  }
  getMyCorners (ob.x+ob.speed*dirx, ob.y, ob);
  if (dirx == -1) {
    if (ob.downleft and ob.upleft) {
      ob.x += ob.speed*dirx;
    } else {
      ob.x = ob.xtile*game.tileW+ob.width;
    }
  }
  if (dirx == 1) {
    if (ob.upright and ob.downright) {
      ob.x += ob.speed*dirx;
    } else {
       ob.x = (ob.xtile+1)*game.tileW-ob.width;
    }
  }
  ob.clip._x = ob.x;
  ob.clip._y = ob.y;
  ob.clip.gotoAndStop(dirx+diry*2+3);
  ob.xtile = Math.floor(ob.clip._x/game.tileW);
  ob.ytile = Math.floor(ob.clip._y/game.tileH);
  return (true);
}

Now your movement script is ready. Next Stop - The doors


I bite!
surprise

Offline

 

#15 23/09/06 6:38pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

Final lesson - changing locations.
at first, change myMap to myMap1, make another map called myMap2.
In the game object we also set the number of currently used map:

Code:

game={tileW:30, tileH:30, currentMap:1}

Replace function buildMap into function buildMap(_root["myMap"+game.currentMap])
Create a oor object - place this code afted the tile script:

Code:

game.Doors = function (newMap, newcharx, newchary) {
  this.newMap=newMap;
  this.newcharx=newcharx;
  this.newchary=newchary;
};
game.Doors.prototype.walkable = true;
game.Doors.prototype.frame = 3;
game.Doors.prototype.door = true;
game.Tile2 = function () { };
game.Tile2.prototype = new game.Doors(2, 1, 4);
game.Tile3 = function () { };
game.Tile3.prototype = new game.Doors(1, 6, 4);

In the moveChar function add this code to the end, just before returning true:

Code:

if (game["t_"+ob.ytile+"_"+ob.xtile].door and ob==_root.char) {
  changeMap (ob);
}

We need a new function, place it after other function

Code:

function changeMap (ob) {
  var name = "t_"+ob.ytile+"_"+ob.xtile;
  game.currentMap = game[name].newMap;
  ob.ytile = game[name].newchary;
  ob.xtile = game[name].newcharx;
  ob.frame = ob.clip._currentframe;
  buildMap(_root["myMap"+game.currentMap]);
}

You would also need to add line in the buildMap function after you have placed the char clip:

Code:

char.clip.gotoAndStop(char.frame);

The End


I bite!
surprise

Offline

 

#16 23/09/06 6:40pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

That was the final tutorial, visit http://www.tonypa.pri.ee/tbw/index.html for more


I bite!
surprise

Offline

 

#17 21/03/07 2:13pm

tallphil
Banned
From: UK
Registered: 29/04/06
Posts: 825
Website

Re: The construction of a game

Is this going to become a proper game?


PSP Flash Gaming creator

Offline

 

#18 21/03/07 7:12pm

soulofdarkness
Moderator
From: Tallinn
Registered: 25/08/06
Posts: 401

Re: The construction of a game

I abandoned the project smile


I bite!
surprise

Offline

 

Board footer

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson