Gw Temp

Menu

Tutorial - 'Basics of Mapmaking and Designing Tiles...' by Guest

An item about General posted on

Blurb

MrY's first Sphere tutorial, dealing with making maps and building your own custom tilesets in Sphere's Editor.

Body

NOTE: This article was written for Sphere version .97a, so it may be off in comparison to other versions.

I've heard a few new Sphere users complain about using the map editor. Some believe that it is way too difficult, while others believe that it is limited. What am I to do, except to write my own tutorial on starting in Sphere with one of the easiest aspects, the Map Editor? Let's hop right in!

Assuming that you actually have the Sphere Editor open, click on File -> New -> Map, on the command bar. At the prompt, set your map's width and height both at 64, and leave the Tileset option blank- at the second prompt, you should imply that yes, you do want a blank tileset. The Editor will open a brand new map, *joy*! For now, close the Map Tools box, as we will only start using it later. You'll notice that your tileset is completely blank, and the map is dark black, but using Sphere's built-in tile editor we can change that :D. In the upper-left corner of the map, you should see two tabs- Map, which is already selected, and Tileset. Click on Tileset to proceed.

That huge square in the center is where the tile is drawn. To the right is a rainbow of colors to be chosen, along with a bar and slide. You'll also notice the number '255' at the bottom-right corner of the screen. For now, however, we're not going to be concerned about neither that number nor the bar and slide. Let's make a pretty grass tile to start our map, eh? Find a shade of green that you like- I myself prefer a dark, 'heartland' grass color, but it's a matter of opinion, isn't it :D. You may wish to save this specific color for later, but how do you do that? Using the Swatch box! Right-click in the center and select the 'Insert Color After' command, and that specific color will be added! Now, try picking a nice shade of blue that would look good for water, and use the 'Insert Color After' command to put that there too. The Swatch commands are mostly self-explanatory, however, so I won't go into further.

Reselect your pretty green shade from the Swatch. Then, right-click on the black square in the center and select Fill -> RGB. The entire square will become green! But, a green square looks like crap for any pretty set of graphics, doesn't it? No problem, there's an option to fix that! Right-click again on the square and choose the Filter -> Noise command. If it looks too rough, you can also use the Blur command within Filter to even the colors a bit. When you have it as you like it, go to the upper-left corner of the screen and click the map tab to look at your creation.

Hey, nice job! If you dislike your grass, you can simply open the Tileset Editor again and change it. But, we can't make a map from just one tile, can we? So, right-click in the Tiles box and choose the command 'Append Tile', then click one square to the right of your grass square. You've made a new blank tile and selected it now (You can tell it is selected if the pink circle is surrounding a black space). Now, reopen the Tileset Editor, as we're going to make a water tile.

I'm going to trust you to try to make this tile on your own. Really, though, it shouldn't be much more difficult than just the grass tile. If you get confused, reread the instructions for the grass tile, using a shade of blue you like for water instead. When finished, return to the Map.

Before we continue, let's just look at what you have accomplished. In a matter of minutes, using simple editor commands, you have built graphics much prettier than any in the RM2K RTP, as well as most RM2K resources. Not only that, but they are original and they are YOURS. Graphics is definitely one major plus of Sphere :D.

With your Water tile already selected, and the 1x1 button on the hidden Map Tools Box, you can proceed to make an ugly outdoor map of a grassy field with small streams of water. Although the boxy look of the water looks bad now, don't worry- these can be fixed later, and Sphere can make a much nicer effect than any Smart Tiles of RM2K :). When you're pleased with your crappy little map, read on about the Map Tools.

Map Tools essentially control exactly how you draw things on the map with the selected tile. We're not going to get into entities here however, as they are associated with coding. However, you can just think of entities as the Sphere version of RM2K events and characters. Now, here is a list of all of Sphere's Map Tools.

1x1- Select this to draw a single tile on the map.

3x3- Select this to draw a 9-tile box in the 3x3 pattern on the map.

5x5- Select this to draw a massive 25-tile box in the 5x5 pattern on the map.

Select Tile- Select this, then click on a tile that you have placed on the map that you want to use again but don't or can't find it in the Tileset. Handy for those with massive tilesets.

Fill Area- This command doesn't work like it sounds it would. Select this, then use it to create a BOX of whatever size you choose with the selected tile by clicking and dragging. Still a handy feature, nonetheless ^_^.

Copy Area- By clicking and dragging to select an area, you copy the area to paste later. It's a shame there isn't a viewable box here, but that's probably something reserved for a later version :D.

Paste Area- Wherever you click with this selected, an area copied with Copy Area will appear. The selected tile is the upper-left corner of the new pasted area.

Obstruction Segment- By selecting this and dragging a line, you create a pink line only visible in the Editor. However, Obstruction Segments are important because they prevent sprites with bases from walking across them, like walls! I'm not going to cover sprites and bases, at least not here, so you'll just have to look for an article on those to learn more.

Delete Obstruction Segment- This command, when used, deletes the obstruction line closest to where the gamemaker clicked.

When you understand all these functions, right-click on the Water tile. In Sphere, you can obstruct the hero and other characters/objects in one of two ways- by either drawing Obstruction Segments that clutter up your Editor, or by just setting obstructions for the tile/s one time. Anyways, we are going to learn how to do the latter method, which is drawing obstructions on tiles themselves! You should have a menu up from right-clicking on the Water tile. Now, proceed to click on the Properties button to open another small prompt/menu.

Eh? What's the Animate Tile button? Ignore it for now, we'll be coming back to that :D. Instead, click on the Edit Obstructions button to bring up a picture of the tile. Whatever pixels you click on turn pink, indicating that they've become obstructed to prevent the hero from crossing. Since this is water, we want it to be completely blocked from the hero. To do this, click on the Presets button, then the Blocked button, to seal the entire tile from the hero. Later on with Sphere, after you learn how to make entities and a hero, making obstructions in tiles will be very important to mapmaking. Now that you've finished that business, I'm going to teach you how to make an animated tile!

We're going to make this water tile have four animations, moving right, centering, moving left, then centering again before starting over. To do this, left-click the Water tile, then right-click on it, select the Append Tiles option, and finally put the number 3 in the box and select OK. You have created 3 more tiles, which, along with the first Water tile, will make an animated Water tile. First though, you have to draw them. Go to the Tileset Editor.

Make sure the Water tile is still selected. Now, right-click on the tile within the Editor and select the Copy option. Go to the next tile by clicking the Right Arrow on the scrolling bar at the bottom of the Editor, and paste the image in the box. Right-click it again, select the Slide option, then choose Left. Slide the image to the left again, then select the next tile. Paste the original Water tile again, and don't edit it. In the fourth and final Water tile, paste the water tile and slide it to the right 2 times. After you've done all this, feel free to return to the Map Editor.

Before we continue, make sure that ALL of the four Water tiles are obstructed correctly- if you don't remember how, I explain how above. Moving on, in the Tiles box, right-click on the first Water tile and look at the bottom-left corner of the screen, where you should see text giving the tile a name- I got Tile 1/5, and that is what I'm using in this tutorial. Next, right-click on Tile 1/5, and open the Properties box again. Check the Animated option, and the fields below become open. Since we're using tiles 1-4 of the 0-4 for this animated tile (the first tile is labeled 0, second is labeled 1, third is labeled 2, and so forth), and we're on tile 1, put a 2 in the Next Tile box. Let's have a 3 second millisecond delay between this tile and the next- to do that, we put a 3 in the Delay box. When finished, click the next button to proceed to the 2nd Water tile, which is tile 2.

On tiles 2-4, we're going to keep the delay at a constant 3. However, the Next Tile is 3 for tile 2, 4 for tile 3, and 1 for tile 4- keep in mind that this animation will loop, and thus the 4th tile must loop back to the 1st. Now, you can't test it here, but were you to get a sprite and a basic starting script to test your game, then play this map, the sprite would be blocked by the water while walking on grass, AND the water would also be a crappy animation. You must practice animating to find out what is effective.

Alpha is the measure of transparency that each picture has- pictures with a high Alpha value are not very transparent, and pictures with a low Alpha value are very transparent. Sphere utilizes transparency very well. Open your first Water tile in the Tileset editor again. Remember that bar on the right side of the screen? That adjusts the Alpha of tiles. The bar begins at the max of 255 by default, making new graphics solidly-colored like you did before. Let's use the power of transparency to make something pretty with Sphere, aye?

Set the Alpha at a good medium number, like 135. Now, with your first Water tile selected, right-click on the image and select the Fill -> Alpha command. Fill in the other three Water tiles like this too. When finished with that, make a new tile that looks like dark gray stone or gravel (Make sure the Alpha is set back up at 255!). When you've made the tile, return to the Map.

Do you see the column at the left side of the screen labeled 'Layers'? If you're experienced with RM2K, you probably know that layers are essentially maps within maps. Non-transparent layers block those beneath them, and transparent ones do not. Also, tiles on layers below the 'hero's' do not hinder his movement, but those on his or above do. Unlike RM2K, Sphere allows you to make an UNLIMITED number of these layers. We're just going to dabble in layers for now. Right-click on the layer tab labeled 'Base', and select the Insert Layer option. Next, left-click and drag the unnamed layer below the Base layer, so that all of your grass and water is showing :D.

We're going to make a stone bottom for our transparent water. The idea is that now, because our water is transparent, we can use it above any type of surface using layers. Imagine, you can draw and build underwater dungeons and towns in just a few hours, compared to RM2K! Now then, let's finish the final part of this long tutorial. Select either the 3x3 or 5x5 button for ease, select the dirt/gravel tile, make sure you are on the new unnamed layer, and then proceed to draw new tiles underneath all of the water spaces to darken them. Taa daa, you have made a (crappy) river or lake above a dirty bottom! To make everything neat, right-click on the Unnamed layer and select Properties. Yes, there is loads of layer options I did not cover, but this tutorial is already pretty damn long, and it is geared towards beginners. To learn more about Sphere mapmaking, I recommend more advanced tutorials by other Sphere users. Now then... in the Name box, write a good name for this layer, like 'Water Bottom' or 'Dirt'.

Congratulations on learning the basics of Sphere mapmaking! I hope that you've enjoyed my tutorial, and that you will remain interested in Sphere and will enjoy learning more advanced information!