Need Help with collision detection and layers

[New2]

Total Newbie here, I downloaded 3dfa a few days ago and am hooked. I've downloaded and checked out every example in this forum and fiddled around with everything. But my problem is this:
I want to make a "maze", nothing elaborate yet, just a top view of something going through the maze. I understand how to move element around with control keys, but how can I make the "maze" itself and how do I prevent the element from going through maze wall on collision?
Also, would I have to make the maze a layer?
I've been reading all the help files and cannot find what I'm looking for.

Any help with this is appreciated.
Thanks in advance,
Stephen

[blanius]

Did you look at the Pacman game? It does this very thing.


You could do it a couple of ways none of which is really all that simple.

have an Array that "represents" your maze. Lets say the array looks somthing like this:
myarray[1]="1111111111111111111111"
myarray[2]="1111110000000000111111"
myarray[3]="1111110111111110111111"
myarray[4]="1111110111111110000000"
myarray[5]="1111110000111110111111"
myarray[6]="1111111110000000111111"
myarray[7]="1111111111111111111111"

Where 1 is a wall and 0 is open. Then you construct your actual maze from this data using tiles. Each tile could be a chooser with wall as view 1 and empty view for view 2. Loop through the array and toggle your choosers. Now when the user presses a direction key check the array element that would be where they are going and only move it it's not 1

The advanage of this is you could then change mazes easily without re-coding anything but the maze it'self.


Let me know if this helps
Also be sure to look at the code in the Insaneman game.(Done differently there)

[New2]

Thanks for the help, I have no idea how to do arrays and how to show an image/tile.(will learn javascript)

In the 3dfa samples page can someone explain how "Gizmo's Poolside Adventure" works? How the "Gizmo" can't run through certain things? Or maybe someone has the .movie that I could learn from.

Thanks again,
Stephen

[blanius]

Originally posted by New2
Thanks for the help, I have no idea how to do arrays and how to show an image/tile.(will learn javascript)

In the 3dfa samples page can someone explain how "Gizmo's Poolside Adventure" works? How the "Gizmo" can't run through certain things? Or maybe someone has the .movie that I could learn from.

Thanks again,
Stephen

Don't know where that one came from but you could do simple collision detection there. If collision move opposite direction a little instead of chosen direction

Attached is simple collision detection idea for you.
You can move the car up down left or right pressing keys but you cannot cross the lines. See the javascript code for how to do it.
There is probably a better way to do it but this should get you started with collsion detection.

[blanius]

I was experimenting with this and had forgotten that we cannot use Choosers in Javascript. But I think we can do it without them. I'll play a little with it.

[blanius]

I worked out EXACTLY what you needed. BUT the bad news it only works in the editor!!!!

I've attached it anyway as it's a good model IF the next version of 3dfa fixes what ever bug is causing the problem here.
I FIXED IT!!!!!!
turns out the bug is in using value+=addvalue instead of value=value+addedvalue
Attaching new file this one works in browser
Good code to study anyway.

Sorry dude.
javascript at movie start

wall=element("wall");
path=element("path");
dude=element("dude");
map=new Array();
tile=new Array();

map[0]="1111111111011";
map[1]="1111111111011";
map[2]="1111100000011";
map[3]="1000001111111";
map[4]="1111100000011";
map[5]="1111111111011";
map[6]="1111000000011";
map[7]="1111011111011";
map[8]="1000011111X11";//the x is the dude start position
map[9]="1111011111111";

posX=16;
posY=16;
dudeset=false;//Have we place the dude yet?

for(x=0;x<10;x++){//loop through map[]

   for(z=0;z<13;z++){//loop through string in map[x]

 		if (substring(map[x],z,1)=="1"){//is it a wall?
   			tile[x]=wall.clone();
   		}else{//if not must be a path tile
	   		tile[x]=path.clone();
			if (substring(map[x],z,1)=="X" && dudeset==false){//is it dude and he hasn't been placed yet?
				dudeset=true;
				
				thedude=dude.clone()//Make a copy so it shows on top of other clones.
				thedude.position.x=posX+12;//Position him +12 because he's smaller by 12 pixels
				thedude.position.y=posY+12;
				thedude.arrayX=x;//these are to track the dudes position within the array so we can
				thedude.pos=z;   //see where he is going.
				//the above uses the feature where we can create our own properties for an object
				thedude.show();
			}			
		}
	tile[x].position.x=posX;//put it in place
	posX+=32;//move over one space
	tile[x].position.y=posY;
    tile[x].show();
  }
posY+=32;//finished the string so go down a line
posX=16;//and reset to the far left of screen
}

then for up key the code is

if (substring(map[thedude.arrayX-1],thedude.pos,1)==0){
 thedude.position.y-=32;
 thedude.arrayX-=1;
}

down is the same but all the - become +
then for left we check thedude.pos this way

if (substring(map[thedude.arrayX],thedude.pos-1,1)=="0"){
 thedude.position.x-=32;
 thedude.pos-=1;
}

and again just swap + for - for the right key.

[blanius]

Due to the nature of the way I did the above you could easily add exit points to a map. Load maps from server, You could build a map editor to build new maps, including more tiles.

With a little effort this could make a nice tile game engine. You could add objects to the map for bonuses and such.

If you broke it down into seperate callable functions (actions) you could get pretty elaborate. You could even save a game in progress using server side code. The list goes on.


If I need to comment the code more let me know!

I think it's not too hard to follow.

[blanius]

Here it is online to try out.
You have to click in the movie so it has focus first.
http://bretlanius.com/flash/tiles.html

[New2]

Thanks Bret for taking the time with this project.
I have been playing with this code just about all night and I am trying to add a 2 and 3 to the array where the "dude" could collide with both 2 and 3. Where in this script would I add this? I have tried everywhere, and the most I got was the tiles associated with 2 to show up, but the "dude" does not walk over 2 either, it stops like at the end of the other arrays.
Any ideas on how to go about this?

I've been looking for/at tutorials, but I cannot find one that deals with something this.

Thanks Again,

Stephen

[blanius]

Originally posted by New2
Thanks Bret for taking the time with this project.
I have been playing with this code just about all night and I am trying to add a 2 and 3 to the array where the "dude" could collide with both 2 and 3. Where in this script would I add this? I have tried everywhere, and the most I got was the tiles associated with 2 to show up, but the "dude" does not walk over 2 either, it stops like at the end of the other arrays.
Any ideas on how to go about this?

I've been looking for/at tutorials, but I cannot find one that deals with something this.

Thanks Again,

Stephen

Sorry Stephen I don't understand what you mean. Are you trying to add tiles? You'd need to add a tile graphic and make sure it "has properties" then in the main javascript you'd have to change something like this:

wall=element("wall");
path=element("path");
dude=element("dude");
wall2=element("wall2");//add another wall tile
map=new Array();
tile=new Array();

map[0]="1111111111011";
map[1]="111122222021";
map[2]="1222200000021";
map[3]="2000002222221";
map[4]="1222200000021";
map[5]="1111222222021";
map[6]="1112000000021";
map[7]="1222022222021";
map[8]="1000021112X21";//the x is the dude start position
map[9]="1222021112221";

posX=16;
posY=16;
dudeset=false;//Have we place the dude yet?

for(x=0;x<10;x++){//loop through map[]

   for(z=0;z<13;z++){//loop through string in map[x]

 		if (substring(map[x],z,1)=="1"){//is it a wall?
   			tile[x]=wall.clone();
   		}
                if (substring(map[x],z,1)=="2"){//wall 2
                        tile[x]=wall2.clone();
                }else{//if not must be a path tile
	   		tile[x]=path.clone();
			if (substring(map[x],z,1)=="X" && dudeset==false){//is it dude and he hasn't been placed yet?
				dudeset=true;
				
				thedude=dude.clone()//Make a copy so it shows on top of other clones.
				thedude.position.x=posX+12;//Position him +12 because he's smaller by 12 pixels
				thedude.position.y=posY+12;
				thedude.arrayX=x;//these are to track the dudes position within the array so we can
				thedude.pos=z;   //see where he is going.
				//the above uses the feature where we can create our own properties for an object
				thedude.show();
			}			
		}
	tile[x].position.x=posX;//put it in place
	posX+=32;//move over one space
	tile[x].position.y=posY;
    tile[x].show();
  }
posY+=32;//finished the string so go down a line
posX=16;//and reset to the far left of screen
}

Since we only check to see if he "CAN" move then you don't need to do anyting else.

However if you want him to be able to walk on the new tile you just add it to the line like this example from the up key

if (substring(map[thedude.arrayX-1],thedude.pos,1)=="0"||substring(map[thedude.arrayX-1],thedude.pos,1)=="2")

[blanius]

I added an element call wall2 and this is the new code. Now you'd have two wall tiles

wall=element("wall");
path=element("path");
dude=element("dude");
wall2=element("wall2");
map=new Array();
tile=new Array();

map[0]="1111111111011";
map[1]="1111111111011";
map[2]="1111100000011";
map[3]="1000001111111";
map[4]="1111100000011";
map[5]="1112222222011";
map[6]="1111000000011";
map[7]="1111011111011";
map[8]="1000011111011";//the x is the dude start position
map[9]="1111X11111111";

posX=16;
posY=16;
dudeset=false;//Have we place the dude yet?

for(x=0;x<10;x++){//loop through map[]

   for(z=0;z<13;z++){//loop through string in map[x]

         if (substring(map[x],z,1)=="1"){//is it a wall?
               tile[x]=wall.clone();
           }
        if (substring(map[x],z,1)=="2"){
        tile[x]=wall2.clone();
        }
        if (substring(map[x],z,1)=="0"||substring(map[x],z,1)=="X"){
               tile[x]=path.clone();
            if (substring(map[x],z,1)=="X" && dudeset==false){//is it dude and he hasn't been placed yet?
                dudeset=true;
                
                thedude=dude.clone()//Make a copy so it shows on top of other clones.
                thedude.position.x=posX+12;//Position him +12 because he's smaller by 12 pixels
                thedude.position.y=posY+12;
                thedude.arrayX=x;//these are to track the dudes position within the array so we can
                thedude.pos=z;   //see where he is going.
                //the above uses the feature where we can create our own properties for an object
                thedude.show();
            }            
        }
    tile[x].position.x=posX;//put it in place
    posX+=32;//move over one space
    tile[x].position.y=posY;
    tile[x].show();
  }
posY+=32;//finished the string so go down a line
posX=16;//and reset to the far left of screen
} 

see it
http://bretlanius.com/flash/tiles.html

Source
http://bretlanius.com/flash/titles.movie

[New2]

Great, I really learned alot, Thanks.

1 last thing

I wanted a collision something like

if (X.collide(2))
and so on...

Where would I put this part?

Many thanks,
Stephen

[blanius]

best bet would probably be to put it in it's own list of actions. That way it's always checking for it.

But why do you need that? If you plan to put some objects in the maze you could just add them to the array and deal with them the same way we did for the dude. Then in the key action where we check before moving, check the array if object is there then do your actions but allow move.

Collision detection is good especially when you have objects moving like in the astiroid game or the insaneman game. for a tile game like this I don't think you need to go that way since you know when the dude is trying to move into a space where a action item is.

By the way anyone notice the file size of this demo? Only 15k Clones really save on the file size big time. I would imagine even if you made a HUGE array map this way the file size would not go up much.

Oh and while I'm at it two ideas for you.
[list=1][*]Use a Mask to hide part of the maze, position it to stay centered over the dude.[*]Make virtual map area bigger than the screen size put it all on a layer and move it as needed to keep the current part on the screen[/list=1]

[New2]

I've tried different things, but nothing is working..

Here is the idea: "2" is the goal that we want to reach. After we reach "2" then we would go to a new layer or a map or something.
Could you tell me how to achieve this.

map[0]="1111111111211";
map[1]="1000011111011";
map[2]="1011100000011";
map[3]="1000001111111";
map[4]="1111100000011";
map[5]="1001111111011";
map[6]="1011000000011";
map[7]="1011011111011";
map[8]="1000011111011";
map[9]="1111X11111111";//the x is the dude start position

I been reading javascript tutorials, but nothing I found addresses anything like this.
Any help with this idea?

Thanks,
Stephen

[blanius]

Ok here we go.

Lets look at the code in the UP key action:

if (substring(map[thedude.arrayX-1],thedude.pos,1)=="0"){
 thedude.position.y=thedude.position.y-32;
 thedude.arrayX=thedude.arrayX-1;
} 

The dude.pos is the location left to right of our dude and his arrayX is which element in the array or his up and down position. And since the user has pressed up we check to see what is in the same location in the array element above this one. As it is written now you we only check to see if it's a wall tile or not. but we can also check to see if it's someting else, lets call these Action titles. You've assigned it to a 2 so we just rewrite the code to check for 2 as well and do what is appropriate.

so the new code for the up key would look something like this.

if (substring(map[thedude.arrayX-1],thedude.pos,1)=="0"){
 thedude.position.y=thedude.position.y-32;
 thedude.arrayX=thedude.arrayX-1;
}
if (substring(map[thedude.arrayX-1],thedude.pos,1)=="2"){

 reset the map to new level or what ever here....

} 

Now you'll have to add this to all the keypress actions so that they all check for the situation.

[New2]

Can you explain how to do this, if I have the maze in it's own child movie and after dude hits 2 then another child movie2 would show/play ? and the maze would go away or reset.?

I've been trying Layers, but can't get that to work right.
I think "movies" would be a better way to go, if possible.

Still trying,
Stephen

[blanius]

Stephen before you spend too much effort trying to build on this little example...

What you really need to do is take some of this stuff out of the main action area and put it into seperate list of actions that you can call when you need to.

Have one that clears the arrays for map and display array
have another one that loads a level into the map and displays it.

Then when you complete a level you Call the clear map and then the set the map array to the next map/level and then call the list of actions that displays the map.

Think it out in BLOCKS of things and reuse your code as much as possible. Sure you could make more movies and so on but that is not the best way to go. this way all you have to do to add a new layer is make a new map and add it in. You could even make a list of actions that loads a level in from a web server text file or even a database of levels. Then you could build yourself a level editor or something and save new levels all the time.

Spend a little time planning it all out and then go back and build this from scratch, using this code as a starting point only. It will be worth your time trust me.