Post by BonzaiRob on Mar 13, 2007 20:05:18 GMT
Tutorials you will need:
[J] PT in Eclipse - Downloading the demo is now much simpler.
XML for N00bies
Always download and use the latest demo before continuing!
NOTE: This tutorial might be altered as the engine progresses; water is still not coded properly, nor are ledges or houses.
So you did the XML tutorial and now you're bored with walking around bumping into things in the latest build. Well, here's the answer!
Out of all the bits of coding, for me, XML mapping is the most time consuming, therefore needing more people to do it. It's quite satisfying, once a map is done, to be able to walk around in it normally. Let's begin!
Step 1:
Open up notepad, textedit, or another plain text editor. Not Word, this is important. Word screws things up unless you save things specially, so it's simpler to use a plain editor.
Type or c/p the standard XML start:
Then on the next line, because we are making a map, type this:
The reason we're doing it inside map tags is to make it easier for us humans to read - we know it's a map file. Also, we're doing it like that because it's how FMY wrote the map-parser, and because every XML-file has to be contained in one tag. This is the basis of the file, and anything else we write will go inside the <map> tags.
Step 2:
There are three kinds of picture that we will be putting on the map: the player, tiles and objects. The player is obviously important, but what's the difference between the other two? You can walk over tiles, but you bump into objects. Grass is tiled, trees are objects. Add these to your file, inside the <map> tags.
This was a pretty short step, it's still important though. Still laying down groundwork. Don't worry, fun things will happen soon!
Step 3:
Ok, ok, this has been pretty boring. But we have to get the basics out of the way before the fun things.
This step deals with attributes. If you don't know what these are, read the XML for N00bies tutorial again, and this time pay attention!
Change the first map tag:
This is the height and width of the map IN TILES. There's something complicated about this that I will explain when we start putting things on the map.
Make sure you lave the </map> bit as it is; only the opening tag needs to be changed.
Change the player tag:
This tells the parser where to start the player off. You might have to change this later on to stop the player starting off inside a tree.
Change the background tag:
This puts the grass tile in the background of every tile. We put other tiles on top of that.
There's one special thing about this however (that also counts for all tiles). Normally tiles are 16x16 pixels, but this grass1.gif image is a lot bigger. What happens when we use tiles that are bigger than 16x16 pixels? The parser splits the image in 16x16 pixel parts, and shows a random one. In this case, it makes a nice, unstructured grass floor, just like it is in the real world. Not every square inch of grass is the same.
Now it's about time you saved this. The demo has changed things a little, so now you just save it in Jepe-Demo2/data/Pokemon Treasures/maps/.
You should save this file as test.map (NOT .txt on the end!). You can save it as whatever you like, just remember it.
Step 4
We're going to put a tree on our map! Wow! Specifically, a maple tree.
If you look in data/Pokemon Treasures/images/objects/ you should find lots of things, including trees. There's one called tree-maple.png; that's the one we're adding (there are others called tree-maple, but we'll ignore them. They said nasty things about us behind our backs).
Since you walk into trees rather than over them (well, most people walk around, but each to his own) they are objects. That means that inside the <objects></objects> tags we want to put this:
Ok, so we know it's an object. Next, we need to specify which one. We're putting that maple tree in, so change it thus:
Note that it needs those ""s. If you leave them out, the program will break. KABOOM! Well, not so explosively. But it still won't work.
Next we need to let the computer know where to put it in the map, since it can't read our mind (yet). We do this with x and y coordinates. If you haven't come across this before, it's a big word for something simple. x is how many tiles sideways it is, and y is how many tiles down from the top (yeah, maths usually goes up from the bottom, but this is a game language).
The important thing here, which you'll learn quickly, is: computers count up from 0!
What this means is that the first row of tiles along the top is row 0. The second row is 1, third is 2, and so on. It's the same from the left. Trust me on this, it's not fun to make a whole map and then discover everything is offset by one tile.
We want to put mr tree about the middle, so x and y can both be 4.
It's also important that the only spaces are between different attributes, NOT between y and = and " for instance. This also breaks the program, KABOO- well, you get the idea.
Step 5:
Since we've covered the basics of getting things to appear on a map, let's try running it in JEPE and seeing what it looks like! Yay!
This suddenly becomes a lot simpler with the Jepe demo. Go into Jepe-Demo2/data/Pokemon Treasures/ and there is a ile called config.xml. Inside that file is a line that looks something like this:
(Ignore the one inside <!-- --> above it).
Assuming you saved the test area like I told you to, you need to change that line to this:
Save config.xml and run the demo. You should end up with something like this: ptreasures.net/xfiles/bonzairob/tutorials/xml/1-maps1.png
If the demo stops working after you press Start, then there's somethign wrong with the map syntax. Make sure you've closed all your tags and got all the =""s in the right places.
Anyway, you'll notice that you can't walk right or down, just left or up. That's because, whoops, we DID start inside a tree. Oh well, you can edit the player's coordinates (the x and y attributes) if you like, but it's not really necessary.
"Wait, what? Were were inside the tree? But the player wasn't touching it!" You say, or think, or don't.
Well, that's because the picture of the tree is actually bigger than it looks. If you open it in paint or whatever, you'll see there's lots of white space above and below. That's because the tree isn't square, so it doesn't naturally stick to the grid/tiling system. Did that make sense? If not, don't worry, we'll sort that out in a second. If you walk around the tree, you'll notice that you can't walk into the area above or below it, which means the white space in paint. (This space, by the way, is transparent. That means it's there, but we can't see it). Close that window (press escape, or just close it normally) for the next step.
Step 6:
Depending on how lately you played a pokémon game, you should know that you can walk in front and behind things, not just around them. Don't worry, we've sorted out this problem.
What we do is change the size and location of the invisible square that stops you walking through the tree. Technically, this is a rect, but you don't need to know that really.
Now, we're going back to coordinates (which, in case you were wondering, is pronounced coh-or-di-nayts, or cowordinates). There are x and y for the location, and width and height for, you guessed it, the width and height. In the file, we'll be calling them rectx, recty, rectwidth, and rectheight.
If you can compare the maple tree to a grid, that might help, but I can just tell you: it's 3 tiles wide, and 5 tiles high. So, first of all, we want to be able to walk behind it, so that's the top two tiles. We need to offset the rect that we walk into like this:
What that does is, it pushes the invisible rectangle down two tiles. If you save test.map and run the demo again, you'll be able to walk behind the tree (and hide in the middle ^_^) .
Next, we want to walk in front of it. Now we've moved the rectangle, we a 3 tiles by 5 tiles tree, and a 3 tiles by 3 tiles rectangle. Needs to be 3 tiles by 2 tiles!
There we go! Save test.map, and run the demo. You should now be able to walk in front and behind the tree.
Step 7:
Experiment! Play around with other objects, other sizes. what happens if you increase the rect like so?:
Probably you'll have an invisible square next to a tree you can walk through, but it's better for you to experiment yourself. Also, anything in the objects folder can be used as an object; you can put different pictures in there if you want.
Remember though, some objects have white space - work out how many tiles wide and high the picture is, and then get rid of the white space by moving and resizing that invisible rect.
Also, if you put two trees close together, one will be on top f the other. If it's the wrong way round, you can change it by putting the tree in front later in the file. A good habit to get into is to group things in types (trees, houses), and then inside that, group them by their y, so that the ones nearest the top of the map end up behind the ones at the bottom. Example:
If you try that, you'll see what's wrong. Change it to this:
That fixes it nicely.
Once you've had some fun, it's on to the next step, which is much simpler.
Step 8:
Time to tell you about tiles. Those background tags have been lying empty long enough.
If you look in the tiles folder, you'll find some paths, some dirt, different grasses and some rocks. I'm gonna try the path. Also, I'm extending the whole map - the height attribute of the height tag should now be 20. (You'll know if you get this wrong because when you run it next, the map will be the same size.)
Inside Background, we're adding a tile. Since they're just things you walk over, no rect to deal with: it's a simple as this:
Easy, eh? Looking in the tiles folder again, you'll see that as well as brickpath1.gif, there are lots of other things starting with brickpath1. These are the other parts that go around it, the edges. Let's add the top left corner:
Now unlike objects, with tiles it doesn't really matter what order you write them in the file in. What I usually do is go by rows, so I'll have all the y="1" ones, then y="2", and so on. That way, if it's a large area, you can copy/paste a row, and then just go down changing all the 1s to 2s.
I'm sure you can guess how the rest works, so here's the flat code for it:
If you try that, you'll see a path bit that you can walk on. That that, dear friends, is tiles, meaning that we have covered both tiles and objects! Thus endeth the lesson.
So yeah, experiment, and if you want to submit maps you've made, feel free! Make sure you include any images you add yourself, so we can run them!
XML for N00bies
Always download and use the latest demo before continuing!
NOTE: This tutorial might be altered as the engine progresses; water is still not coded properly, nor are ledges or houses.
So you did the XML tutorial and now you're bored with walking around bumping into things in the latest build. Well, here's the answer!
Out of all the bits of coding, for me, XML mapping is the most time consuming, therefore needing more people to do it. It's quite satisfying, once a map is done, to be able to walk around in it normally. Let's begin!
Step 1:
Open up notepad, textedit, or another plain text editor. Not Word, this is important. Word screws things up unless you save things specially, so it's simpler to use a plain editor.
Type or c/p the standard XML start:
<?xml version="1.0" encoding="iso-8859-1" ?>Then on the next line, because we are making a map, type this:
<map>
</map>The reason we're doing it inside map tags is to make it easier for us humans to read - we know it's a map file. Also, we're doing it like that because it's how FMY wrote the map-parser, and because every XML-file has to be contained in one tag. This is the basis of the file, and anything else we write will go inside the <map> tags.
Step 2:
There are three kinds of picture that we will be putting on the map: the player, tiles and objects. The player is obviously important, but what's the difference between the other two? You can walk over tiles, but you bump into objects. Grass is tiled, trees are objects. Add these to your file, inside the <map> tags.
<player />
<background>
</background>
<objects>
</objects>This was a pretty short step, it's still important though. Still laying down groundwork. Don't worry, fun things will happen soon!
Step 3:
Ok, ok, this has been pretty boring. But we have to get the basics out of the way before the fun things.
This step deals with attributes. If you don't know what these are, read the XML for N00bies tutorial again, and this time pay attention!
Change the first map tag:
<map name="Test Area" height="10" width="10" >This is the height and width of the map IN TILES. There's something complicated about this that I will explain when we start putting things on the map.
Make sure you lave the </map> bit as it is; only the opening tag needs to be changed.
Change the player tag:
<player x="3" y="3" />This tells the parser where to start the player off. You might have to change this later on to stop the player starting off inside a tree.
Change the background tag:
<background fill="grass1.gif">This puts the grass tile in the background of every tile. We put other tiles on top of that.
There's one special thing about this however (that also counts for all tiles). Normally tiles are 16x16 pixels, but this grass1.gif image is a lot bigger. What happens when we use tiles that are bigger than 16x16 pixels? The parser splits the image in 16x16 pixel parts, and shows a random one. In this case, it makes a nice, unstructured grass floor, just like it is in the real world. Not every square inch of grass is the same.
Now it's about time you saved this. The demo has changed things a little, so now you just save it in Jepe-Demo2/data/Pokemon Treasures/maps/.
You should save this file as test.map (NOT .txt on the end!). You can save it as whatever you like, just remember it.
Step 4
We're going to put a tree on our map! Wow! Specifically, a maple tree.
If you look in data/Pokemon Treasures/images/objects/ you should find lots of things, including trees. There's one called tree-maple.png; that's the one we're adding (there are others called tree-maple, but we'll ignore them. They said nasty things about us behind our backs).
Since you walk into trees rather than over them (well, most people walk around, but each to his own) they are objects. That means that inside the <objects></objects> tags we want to put this:
<objects>
<object />
</objects>Ok, so we know it's an object. Next, we need to specify which one. We're putting that maple tree in, so change it thus:
<object image="tree-maple.png" />Note that it needs those ""s. If you leave them out, the program will break. KABOOM! Well, not so explosively. But it still won't work.
Next we need to let the computer know where to put it in the map, since it can't read our mind (yet). We do this with x and y coordinates. If you haven't come across this before, it's a big word for something simple. x is how many tiles sideways it is, and y is how many tiles down from the top (yeah, maths usually goes up from the bottom, but this is a game language).
The important thing here, which you'll learn quickly, is: computers count up from 0!
What this means is that the first row of tiles along the top is row 0. The second row is 1, third is 2, and so on. It's the same from the left. Trust me on this, it's not fun to make a whole map and then discover everything is offset by one tile.
We want to put mr tree about the middle, so x and y can both be 4.
<object image="tree-maple.png" x="4" ="4" />It's also important that the only spaces are between different attributes, NOT between y and = and " for instance. This also breaks the program, KABOO- well, you get the idea.
Step 5:
Since we've covered the basics of getting things to appear on a map, let's try running it in JEPE and seeing what it looks like! Yay!
This suddenly becomes a lot simpler with the Jepe demo. Go into Jepe-Demo2/data/Pokemon Treasures/ and there is a ile called config.xml. Inside that file is a line that looks something like this:
<startwith>rosefield.map</startwith>(Ignore the one inside <!-- --> above it).
Assuming you saved the test area like I told you to, you need to change that line to this:
<startwith>test.map</startwith>Save config.xml and run the demo. You should end up with something like this: ptreasures.net/xfiles/bonzairob/tutorials/xml/1-maps1.png
If the demo stops working after you press Start, then there's somethign wrong with the map syntax. Make sure you've closed all your tags and got all the =""s in the right places.
Anyway, you'll notice that you can't walk right or down, just left or up. That's because, whoops, we DID start inside a tree. Oh well, you can edit the player's coordinates (the x and y attributes) if you like, but it's not really necessary.
"Wait, what? Were were inside the tree? But the player wasn't touching it!" You say, or think, or don't.
Well, that's because the picture of the tree is actually bigger than it looks. If you open it in paint or whatever, you'll see there's lots of white space above and below. That's because the tree isn't square, so it doesn't naturally stick to the grid/tiling system. Did that make sense? If not, don't worry, we'll sort that out in a second. If you walk around the tree, you'll notice that you can't walk into the area above or below it, which means the white space in paint. (This space, by the way, is transparent. That means it's there, but we can't see it). Close that window (press escape, or just close it normally) for the next step.
Step 6:
Depending on how lately you played a pokémon game, you should know that you can walk in front and behind things, not just around them. Don't worry, we've sorted out this problem.
What we do is change the size and location of the invisible square that stops you walking through the tree. Technically, this is a rect, but you don't need to know that really.
Now, we're going back to coordinates (which, in case you were wondering, is pronounced coh-or-di-nayts, or cowordinates). There are x and y for the location, and width and height for, you guessed it, the width and height. In the file, we'll be calling them rectx, recty, rectwidth, and rectheight.
If you can compare the maple tree to a grid, that might help, but I can just tell you: it's 3 tiles wide, and 5 tiles high. So, first of all, we want to be able to walk behind it, so that's the top two tiles. We need to offset the rect that we walk into like this:
<object image="tree-maple.gif" x="4" y="4" recty="2" />What that does is, it pushes the invisible rectangle down two tiles. If you save test.map and run the demo again, you'll be able to walk behind the tree (and hide in the middle ^_^) .
Next, we want to walk in front of it. Now we've moved the rectangle, we a 3 tiles by 5 tiles tree, and a 3 tiles by 3 tiles rectangle. Needs to be 3 tiles by 2 tiles!
<object image="tree-maple.gif" x="4" y="4" recty="2" rectheight="2" />There we go! Save test.map, and run the demo. You should now be able to walk in front and behind the tree.
Step 7:
Experiment! Play around with other objects, other sizes. what happens if you increase the rect like so?:
<object image="tree-maple.gif" x="4" y="4" recty="2" rectwidth="4" rectheight="4" />Probably you'll have an invisible square next to a tree you can walk through, but it's better for you to experiment yourself. Also, anything in the objects folder can be used as an object; you can put different pictures in there if you want.
Remember though, some objects have white space - work out how many tiles wide and high the picture is, and then get rid of the white space by moving and resizing that invisible rect.
Also, if you put two trees close together, one will be on top f the other. If it's the wrong way round, you can change it by putting the tree in front later in the file. A good habit to get into is to group things in types (trees, houses), and then inside that, group them by their y, so that the ones nearest the top of the map end up behind the ones at the bottom. Example:
<object image="tree-maple.gif" x="4" y="4" recty="2" rectheight="2" />
<object image="tree-maple.gif" x="5" y="2" recty="2" rectheight="2" />If you try that, you'll see what's wrong. Change it to this:
<object image="tree-maple.gif" x="5" y="2" recty="2" rectheight="2" />
<object image="tree-maple.gif" x="4" y="4" recty="2" rectheight="2" />That fixes it nicely.
Once you've had some fun, it's on to the next step, which is much simpler.
Step 8:
Time to tell you about tiles. Those background tags have been lying empty long enough.
If you look in the tiles folder, you'll find some paths, some dirt, different grasses and some rocks. I'm gonna try the path. Also, I'm extending the whole map - the height attribute of the height tag should now be 20. (You'll know if you get this wrong because when you run it next, the map will be the same size.)
Inside Background, we're adding a tile. Since they're just things you walk over, no rect to deal with: it's a simple as this:
<background fill="grass1.gif">
<tile image="brickpath1.gif" x="4" y="14" />
</background>Easy, eh? Looking in the tiles folder again, you'll see that as well as brickpath1.gif, there are lots of other things starting with brickpath1. These are the other parts that go around it, the edges. Let's add the top left corner:
<tile image="brickpath1-topleft.gif" x="3" y="13" />
<tile image="brickpath1.gif" x="4" y="14" />Now unlike objects, with tiles it doesn't really matter what order you write them in the file in. What I usually do is go by rows, so I'll have all the y="1" ones, then y="2", and so on. That way, if it's a large area, you can copy/paste a row, and then just go down changing all the 1s to 2s.
I'm sure you can guess how the rest works, so here's the flat code for it:
<tile image="brickpath1-topleft.gif" x="3" y="13" />
<tile image="brickpath1-top.gif" x="4" y="13" />
<tile image="brickpath1-top.gif" x="5" y="13" />
<tile image="brickpath1-topright.gif" x="6" y="13" />
<tile image="brickpath1-left.gif" x="3" y="14" />
<tile image="brickpath1.gif" x="4" y="14" />
<tile image="brickpath1.gif" x="5" y="14" />
<tile image="brickpath1-right.gif" x="6" y="14" />
<tile image="brickpath1-botleft.gif" x="3" y="15" />
<tile image="brickpath1-bottom.gif" x="4" y="15" />
<tile image="brickpath1-bottom.gif" x="5" y="15" />
<tile image="brickpath1-botright.gif" x="6" y="15" />If you try that, you'll see a path bit that you can walk on. That that, dear friends, is tiles, meaning that we have covered both tiles and objects! Thus endeth the lesson.
So yeah, experiment, and if you want to submit maps you've made, feel free! Make sure you include any images you add yourself, so we can run them!
.
I just now noticed it when I started carrying on with Route 56.
Got any other skills, other than posting at message boards?