Matrix based maps Coding them

[Fifthcore]

Ok guys I did a search on the boards here like Mad-Sci said to, and found tons stuff on Matrix based maps, but it was all theory. I was wondering if someone can expalin or give a link to a fla to show the following.

From Mad-Sci post before.
1. use matrix based maps. describe your worlds using variables:

row[1]="111111100001111010101110101" etc etc.. where 1 represents wall,0 free space. when moving the hero check the world coord and see if it the next var is 1 or 0 if its 0 move the hero there.

Some more questions
-And to set up a map with lets say 10x10 tiles?
-How do reuse the same tiles many times?
-Where do I put the tiles on the stage, off the screen?
-If 1 = wall then how should I use hit-test

And last lets say I am making a Zelda type RPG game, onscreen I show 10x10 but the whole map is 30x30 how do I scroll the screen to show the rest.

Thats all of now

Thanks for the help in advance, code is more useful then theory, I understand the theory, I need the code to learn from.

[daviddoull]

I'll try and answer your Q's:
I have no idea about your programming knowledge - I'll assume basic programming knowledge, if things dont make sense let me know.
Sorry but this is more theory than code - but you asked theory type questions

Q:And to set up a map with lets say 10x10 tiles?

A:Best way would be to store each map as a text file and load into a 2D array.

Q:How do reuse the same tiles many times?
A: create one tile as movie clip - when the map is loaded duplicate the movieclip
eg: use 2 nested for loops to work throught he columns and rows of the matrix - if current coord is 1 then duplicate move clip and position using _x and _y

Q:Where do I put the tiles on the stage, off the screen?
A: on the stage if want people to see em??

Q:If 1 = wall then how should I use hit-test
A: try putting the hit test code into onClipEvent(enterFrame) of the original tile movie clip - the code will be duplicated as you duplicate the tile

Q:And last lets say I am making a Zelda type RPG game, onscreen I show 10x10 but the whole map is 30x30 how do I scroll the screen to show the rest.
A: put the whole 30x30 map into movie clip call the movieclip something like mainGameArea and mask a 10x10 area and then move the mainGameArea using something like
mainGameArea._x

dd

[Fifthcore]

Thanks for the reply,

First Question
Q:Where do I put the tiles on the stage, off the screen?
A: on the stage if want people to see em??

The reason I asked this question is because won't the code just get the files it needs straight from the libary. Because lets say I want 0 to = grass 1 to = a wall so
0101010110 so now 0=grass and the code automaticly puts the graphic where it need to be, so why would I need to put the graphic on the stage?

Second Question
A:Best way would be to store each map as a text file and load into a 2D array.

Can you show me a example of this in code if possible?
Thanks

Third Question and last for now
Q:If 1 = wall then how should I use hit-test
A: try putting the hit test code into onClipEvent(enterFrame) of the original tile movie clip - the code will be duplicated as you duplicate the tile

I am trying to use hit test so that a MC could not go throught a other MC, the only way I tired it was to have the MC that hit equals -1y but that only works in one case, and the -1y does not really work at all to begin. So for this question i could use some theory or code.

Thanks guy

[daviddoull]

OK ,

I have no idea what you are asking with your first question - sorry? If you want grass just stick it as a backgound graphic. ...erm maybe someone else can help you with that one

Create 2d array and load from text file into 2d array
This code should do the job - I think

(assume your map text file is of the form,
r1=0000000010001010001000000000000
&r2=0000010001000001000000000000000

etc)

onClipEvent (load) {
/** functions **/
function mArray(w,h) 
{ 
	//this function returns a 2-dimensional array. 

	var temp = new Array(w); 
	for (i=0; i<w; i++) 
	{ 	
	temp[ i] = new Array(h); 
	} 
	return temp; 
} 

function loadMap(mapName){
// load map
loadVariables(mapName, this);

}

/** initialise variables **/

var mapWidth=30;
var mapHeight=30;
var mapArray = mArray(mapHeight,mapWidth);
 // 2d array to store map


// load first map

loadMap("map1.txt");

}

onClipEvent (data) {

//load map into array
for(i=0; i<mapHeight; i++){
for(j=0; j<mapWidth; j++){
	mapArray[ i][j] = Number(this["r"+(i+1)].substr(j, 1));
}

}
}

for collision detection stuff - there are a bunch of examples in the source file section of flash kit - look in the game category , collision detection sub category.

But actually Id suggest you might not need hitTest you could use your tile map eg: if player wants to move up and tile above is a wall dont let them move up otherwise can move up

dd
[Edited by daviddoull on 01-21-2001 at 02:08 AM]

[Fifthcore]

Thanks for the code, but I still have a couple of questions about that code.

1. How do I know if it is working?
2. Do I put the code in a new MC or my MC with my Character? I tried both.
2. How do I make it so that the tile 0 is a wall and the player can't walk into it.
3. Lets say I add a number 2 into the array, when the player steps on 2 it takes them to map2.txt or maybe scene which then loads map2.txt. Is that possible.

Thanks for all the help so far daviddoull.

[daviddoull]

Id put the code in a new movie clip - call it map or something like that

You should be able to check its loaded into the array using debug.

All the code does is loads in a text map of the form 001001010 etc from a text file and puts it into a 2d array.

You can then find out what is at any location using a reference like
root.map.mapArray[ i][j]

where i is column number, j row number


You can render the map - by looping through the rows and columns and do a test like
if (_root.map.mapArray[ i][j]==1){
//duplicate and postition movie clip code goes here
}


re: question 3 - yea that could be a door or similar - should work

One point: I dont have time to write a complex example file for you - sorry - Im giving some pointers and suggestions which may help you out. Other people may chip in with more suggestions


alternatively - you should consider getting the book flash cartoons and games when it comes out in march
http://www.edesign.uk.com/book.html
its got the complete source file and explanations for the game - http://www.edesign.uk.com/flash/3dadventure.html which seems similar to what you are after

dd

[Mad-Sci]

About the Q1: in C++ you can render the tiles wich are off screen in a buffer for fast screen refresh. Flash in not capable of that. I thing this what Fifthcore is thinking. so

lets asume that your stage is 300 x 300 pix. and you are planning to use 10 x 10 tiles this gives you 30 tiles in row and 30 tiles in collumn. YOu can build the map by hand (borring) or use an engine .so:
row1="1001010101.....0"- 30 tiles
.
.
row30="100101001.....0"

ok in layer one of your stage copy and paste all the tile wich are not MC just plain graphics acording to the map you use. ( of cource using duplicate MC will do the job fine but will create too many MC which will slow down ). what you have to do now is to convert the loaded map in 2Darray you can do this by using 2 loops plus substring to splice the string. Once you have your 2D array you are almost done.
Moving the hero: if you use 10 x 10 tiles you have to use step of 10 so the hero will jump from tile to tile. If this is too fast you can slide the hero for 10px using loop.
Just before sliding the hero check if the tiles in front is 1 or 0 if its 1 do nothing if its 0 put the hero there. YOu can do this like:

hero_x=this._x;- currant x
hero_y=this._y;- currant y
old_x=hero_x;- previous x
old_y=hero_y;- previous y

on key event lets say right: hero_x=hero_x+10;
check your 2D array like map[hero_x][hero_y] and if its 1
hero_x=old_x; - do nothing.

hope that this helps.
mad_sci

[Fifthcore]

Thanks for the help guys, I am taking a look at it all now, and I will for sure get that book it looks good, and other Flash game book is coming out too can't wait.

[JR]

Hi Fifthcore,

I did the programming in that book, so if you need any help then please let me know. You can find a really simple example of a tile based maze game (with source code) at http://www.e-fantasia.co.uk - go to the source code section and find "maze game".

JR

[Flash Ninja]

i have done something similar with qbasic programming. as. shouldn't be to difficult convert. anyway, here is what i did and how. (keep in mind that the navigation was fake 3d---fixed perspective) maybe this could help ya... maybe not.

here is how it works. first you need to constuct the user view. (this consists of 9 squares) *or more if you wish) i have labled them with characters instead of numbers to make this alittle easier to understand. each square represents a movieclip. the movieclip is the same for all squares and contains the graphics for each tile type (ie, Grass, Wall, Brick, Door, and so on)

the user position is A.

e is what they see in front of them
c is what is to thier right
b is what is to thier left... and so on

|---|---|---|
|-g-|-h-|-i-|
|---|---|---|
|-d-|-e-|-f-|
|---|---|---|
|-b-|-A-|-c-|
|---|---|---|

here is where the simulated matrix comes into play.

your map is a grid of 81 squares
9 rows and 9 columns

the rows are numbered 1, 2, 3 ,4 ,5 ,6 ,7 ,8 ,9
the columns are 100, 200, 300, 400, 500, 600, 700, 800, 900

like this

-----100 200 300 400 500 600 700 800 900
----|---|---|---|---|---|---|---|---|---|
--1-|---|---|---|---|---|---|---|---|---|
----|---|---|---|---|---|---|---|---|---|
--2-|---|---|---|---|---|---|---|---|---|
----|---|---|---|---|---|---|---|---|---|
--3-|---|---|---|---|---|---|---|---|---|
----|---|---|---|---|---|---|---|---|---|
--4-|---|---|---|---|---|---|---|---|---|
----|---|---|---|---|---|---|---|---|---|
--5-|---|---|---|---|---|---|---|---|---|
----|---|---|---|---|---|---|---|---|---|
--6-|---|---|---|---|---|---|---|---|---|
----|---|---|---|---|---|---|---|---|---|
--7-|---|---|---|---|---|---|-h-|-i-|-j-|
----|---|---|---|---|---|---|---|---|---|
--8-|---|---|---|---|---|---|-d-|-e-|-f-|
----|---|---|---|---|---|---|---|---|---|
--9-|---|---|---|---|---|---|-b-|-A-|-c-|
----|---|---|---|---|---|---|---|---|---|

now to determine where you are located on the map, add the x and y cords.

example: your current position on the grid is 809 (column 800 + row 9)

now determine what direction the user is facing and provide them with navigational arrows to allow them to srtoll around on your grid.

// define your vars
direction = "north"
current_location = 809

// put some actions on your arrow buttons (the ones you click to walk around)

//WALK STRAIGHT AHEAD BUTTON
if direction = "north"
then current_location = current_location - 1
else if direction = "south"
then current_location = current_location + 1
else if direction = "east"
then current_location = current_location + 100
else if direction = "west"
then current_location = current_location - 100

//the button is basically the same for WALKING BACKWARDS

//TURN RIGHT
if direction = "north"
then direction = "east"
else if direction = "east"
then direction = "south" .... you get the idea.

// in the TILE movieclip. place some actions like this

if _root.a ="wall" goto and stop "WALL"
else if _root.a ="grass" goto and stop "GRASS" <---frame lable containing your graphic of some grass. do this for as many different types of tile images you want.

this script calculates what values the tile will hold (whether or not it is grass or a door or wall... whatever)

// put the outside of the tile movieclip
a = eval("TILE" & current_location)
b = eval(""TILE" & current_location - 100)
c = eval(""TILE" & current_location + 100)
d = eval(""TILE" & current_location - 101)
e = eval(""TILE" & current_location - 1)
f = eval(""TILE" & current_location - 99)
g = eval(""TILE" & current_location - 102)
h = eval(""TILE" & current_location - 2)
i = eval(""TILE" & current_location - 98)

your text file would look like this

TILE101=WALL&TILE102=NONE&TILE103=GRASS.... on and on

i tried to keep the logic simple. once you understand how it works, you can then streamline the code with functions and arrays. this may not be at all what your trying to do, but hey, im bored

[Fifthcore]

Thanks for the help guys