Interactive Worldmap Screen Tutorial (events)

Started by winkio, May 20, 2008, 06:48:52 pm

Previous topic - Next topic


May 20, 2008, 06:48:52 pm Last Edit: May 21, 2008, 06:58:01 pm by winkio
Interactive Worldmap Screen Tutorial


Basic Explanation

This tutorial teaches you how to make an interactive map screen that enables players to scroll through a world map with certain markers, such as dungeons, and towns placed.
This part uses eventing and graphics.  It also requires a screenshot program and a graphics editing program (more than just Paint.  Something like photoshop.)

Basic Approach

The interactive map screen will be made using a new map with an transparent tileset.  The background will be made by setting an image as a panorama.  A parallel process event will be used for fog.

Step 1: Creating the "Worldmap" tileset

This part requires the use of a graphics program, such as paint.

Make a new document that is 256 pixels wide and 128 pixels tall.  Make sure the background is either transparent or a solid color.  Color in one 32x32 square (I reccomend the bottom right one) gray of black and save it.  If it's background is transparent, copy it into your project's Tileset folder.  If it is a solid color, import it into your project with the wizard and make sure the background is transparent. 
Spoiler: ShowHide

Now, go into your project's database and under the tileset section, find the one your just made.  Make a fully passable tile, a fully impassable tile, and any other combinations in between.

Step 2: Creating the "Worldmap" map

Create a new map.  Name it "Worldmap", and give it the "worldmap" tileset you just created.  The size doesn't matter for now.  Tile the whole map with fully passable tiles.
Spoiler: ShowHide

Step 3: Making the "Worldmap" image

Now you must create the "worldmap" image.  You can do this by making a graphical representation of the maps, or whatever you wish (i used a screenshot program and scaled down the maps).  It should be at least 640x480 (one screen).  Save it as Worldmap, then import/paste it into your projects Pictures section.
Spoiler: ShowHide

Step 4: Set the "Worldmap" image as the background

Go back into the database of your project and under the "Worldmap" tileset that you created, set the "worldmap" image you just made as the Panorama.
Spoiler: ShowHide

Step 5: Setup of the "Worldmap" map

This is where that gray/black tile comes in handy.  Tile the whole second layer of the map with this tile, which will enable you to see you events better.

Next, create events at each of the places of interest (these can be towns, dungeons, etc.).  They can be either player touch events or action events, depending on what you want to do with them.  These can be used for description, graphics, or exiting the map screen.

Now, you must decide how you want your player to interact with the screen.  Should the pointer/player/icon that they control be able to move anywhere they want, or should it be limited to passable areas, or limited only to places of interest.

If you want it to be able to move anywhere, skip to step 6.

If you want it to be able to move in passable areas:
Go back to the "worldmap" map you made earlier.  Using your image as a reference, setup the passability of the map as needed (note: one rpgxp tile = 32x32 pixels).
Skip to the step 6.

If you want it to only move between places of interest:
Go back to the "worldmap" map you made earlier.  Using your image as a reference, setup the passability of the map so that theres is a clear passable path connected the places of interest as you wish (note: one rpgxp tile = 32x32 pixels).
Setup player touch events on all passable tiles adjacent to places of interest so that they move the player to the next place of interest upon contact.  (Note: use the "Set Move Route" command and the "Wait for Move's completion" command.)
Go to step 6.

Step 6: Setting up fog (OPTIONAL)
If your game is linear (there is a set order in which your character moves through the maps.  There are no sideroutes.)
setup a variable called "maprevealed"

If your game in nonlinear (you can visit maps in different orders:)
Setup a bunch of switches called "fog1", "fog2", etc.
In your game, each time you enter a new map, turn one of the switches on.  It is easiest if the number after "fog" corresponds to the map ID that it reveals. 

For both:
Make a parallel process event somewhere on your worldmap map.
Make black rectangles in a graphics program that have just enough area to cover up the sections you don't want to be seen at certain points.  Put them in your pictures folder.
Have the event check the variable/switches to see what parts have not been revealed, and display the black rectangles at the appropriate locations.
Spoiler: ShowHide

Step 7: entering and exiting the "Worldmap" screen
Setup a switch called "Worldmap"
Setup a variable called "XPosition"
Setup a variable called "YPosition"
Setup a variable called "MapID"

To enter/exit the worldmap screen, have an event that calls the following common event.

Entering the screen:
Setup a common event.  Start out with a conditional branch with the condition of the "worldmap" switch off (check the handling when conditions do not apply box).  "Control Variable" XPosition to the character's MapX, YPosition to the character's MapY, and MapID to the Map's ID (under 'other').  "Change actor graphic" to an empty set, an icon, or whatever you want.  Or, you can just leave it if you want your character to appear on the map screen.  Then, "Transfer Player" to the new map, basing the position off of the map ID (use a LOT of conditional branches.  Or use a case structure if you know scripting).  Finally, turn the "worldmap" switch on.
Spoiler: ShowHide

Exiting the screen:
In the same common event, in the same conditional branch as earlier, under the else branch,
Change the actor's graphic back to normal.  Transfer the player to the map and position stored in the variables.  Then, turn the "worldmap" switch off.
Spoiler: ShowHide




Ooh this is cool.  I wasn't planning on having a world map for my game but this made me think otherwise.

Good JOB :)


Thanks!  i actually just thought this up while the site was down a couple of days ago, and I HAD to post it.  The one I'm implementing in my game, of course, will be a bit more unique.  But yeah.  it's actually quite simpmle to do!


Put up a few screenshots and examples and this goes straight into tute database. <3
Check out Daygames and our games:

King of Booze 2      King of Booze: Never Ever
Drinking Game for Android      Never have I ever for Android
Drinking Game for iOS      Never have I ever for iOS

Quote from: winkioI do not speak to bricks, either as individuals or in wall form.

Quote from: Barney StinsonWhen I get sad, I stop being sad and be awesome instead. True story.


May 21, 2008, 05:48:45 pm #4 Last Edit: May 21, 2008, 05:50:22 pm by KultzRDC
good worldmap tutorial, it's pretty basic to do but that's ok, i love it. Though i have a question about that panorama thingie...but it's hard to find the correct area to slot the events in the right area with the panorama since that panorama doesn't show on RPG XP. idk if this is for 2003 or 2000, but oh well...any easy way to get around it or do u have to remember where the pixel points are? ???

EDIT: read it again, seems you know this prob. it's not very fun doing the panorama thing...:( so yeah...well, there's always the other way of converting the worldmap to the tileset lol, and that's like uber hard. XD


May 21, 2008, 06:24:33 pm #5 Last Edit: May 21, 2008, 06:58:45 pm by winkio
@Kultz: You can convert the worldmap to the tileset by chopping it up.  I don't reccomend it because it is totally unnecesary.  What you CAN do (what I do) is make a tile that is a color such as gray or black (i use 25% opacity black), and then tile the whole second layer of the map with it before working on events.  That way, you can see them.  After I work on the events, I erase the tiles.  If i ever need to go back to re-event, I just re-tile again, then take them down when i'm done.  ;)

@Blizz: Working on demo and screenies.  Hopefully they'll be up soon!

EDIT:  Well, that was easy.  Demo and screenies are up!  With fog!

Joe Rockhead

Haven't tried it yet but it all makes sense and I could definitely see how it could work and it would certainly come in handy. This could actually be a real time saver for me. Thanks Wink, good thinking!


Nice nice.

In the demo, how do you exit the worldmap?


by pressing the action button on the picture of your head.