Announcement

[Grafikal007]

Creating a Mini-Map in VX

TUTORIAL BY: Grafikal007
Precredit to: Kipe    [I couldn't of had converted this to VX without his XP tut for this.]


PURPOSE:
As the topic title suggests, this tutorial will teach you how to create a FULLY fuctional mini-map for your game.

Pros:

[li]Color detail Mini-map[/li]
[li]Mini-map IS what map you're on[/li]
[li]Can change the cursor color[/li]
[li]Can change the Mini-map's opacity[/li]
[li]Can change the Cursor's opacity[/li]
[li]Each map has it's own unique Mini-map[/li]
[li]Can turn it on and off easily[/li]

Cons:

[li]Need a ton of screenshot images for high map quantity games[/li]
[li]Can sometimes be a little small[/li]

[NOTE: YOU MUST FIX THE SCRIPT GAME_INTERPRETER FOR THIS TO WORK; THE DEMO INCLUDES THE FIXED SCRIPT]


SCREENSHOT:

» Click to show Spoiler - click again to hide... «

PREREQUISITES:
STEP I:

» Click to show Spoiler - click again to hide... «

Create 2 Variables:

[li]Name the first variable:[/li]

Player X

[li]Name the second variable:[/li]

Player Y

Create 2 Switches:

[li]Name the first switch:[/li]

Cursor [or Cursor On]

[li]Name the second switch:[/li]

MiniMap Off

STEP II:

» Click to show Spoiler - click again to hide... «

[li]Create and finish a map.[/li]
[li]Zoom out to 1/8 view in the editor.[/li]

STEP III:

» Click to show Spoiler - click again to hide... «

[li]Take a screenshot of your map from the editor's view.[/li]
[li]Crop the image using an image editing program like MSPaint.[/li]

[li]Save this image as something you will recognize as THIS map.[/li]

STEP IV:

» Click to show Spoiler - click again to hide... «

[li]Open an image editing program. [I prefer MSPaint for this.][/li]
[li]Create an image that is 2x2 pixels.[/li]
[li]Color it any color you want that you think will stand out most against your maps.[/li]

        It's there. Can you see it!?

        - ->      <--

[li]Save that cursor image as:[/li]

Cursor.png

STEP V:

» Click to show Spoiler - click again to hide... «

[li]Open your game editor[/li]
[li]Open the resource editor[/li]
[li]Select the folder:[/li]

Graphics/Pictures

[li]Import your newly created map and cursor  [NOTE: You'll need to import all of your map screenshots and designate each 'in-game' map with the corresponding image][/li]

STEP VI:

» Click to show Spoiler - click again to hide... «

[li]When you import images anywhere, you'll be given the option to choose 2 colors; One is full transparency and the other is semi-transparency[/li]
[li]When selecting the transparencies for your maps, leave them both black by selecting [Clear] by each box[/li]

[li]When selecting the transparencies for your cursor, zoom in using the x4 zoom tool in the upper right hand corner[/li]
[li]Leave the full-transparency black; [Clear] it[/li]
[li]Right-click on the cursor to make it semi-transparent [NOTE: This is optional whether you want the cursor to be slightly transparent or fully opaque][/li]

THE MEAT:
STEP I:

» Click to show Spoiler - click again to hide... «

[li]Open your Database[/li]
[li]Select the Common Events tab[/li]
[li]Create a new Common Event[/li]
[li]Name it:[/li]

Cursor

[li]Select its trigger as a [Parallel Process][/li]
[li]Select your "Cursor" switch that you created earlier for your condition switch here[/li]

[li][NOTE: Use the above image as a reference if you run into trouble][/li]

STEP II:

» Click to show Spoiler - click again to hide... «

[li]Create a new event command in this window pane[/li]
[li]Select "Show Picture" from the Second Page tab[/li]

[li]Select it's "Number" as "2"[/li]
[li]Choose the "Picture Graphic" that you saved as "Cursor.png"[/li]
[li]Check its "Display Postion / Origin" as "Center"[/li]
[li]Check "Variable"[/li]
[li]Select "X:" as your "Player X" variable that you created earlier[/li]
[li]Select "Y:" as your "Player Y" variable that you created earlier[/li]
[li]Keep "Blending / Opacity" at "255" [NOTE: If you did not change the cursor to semi-transparent when you first imported it, you can manually change it from this option][/li]

STEP III:

» Click to show Spoiler - click again to hide... «

[li]Create a new event command in this window pane[/li]
[li]Select "Control Variables..." from the First Page tab[/li]

[li]Check "Single"[/li]
[li]Select the "Player X" variable that you created earlier[/li]
[li]The "Operation" must be checked as "Set"[/li]
[li]The "Operand" must be checked as "Character"[/li]
[li]Select "Player" 's[/li]
[li]Select "Map X"[/li]

[li][Note:This sequence means that this variable is equal to your player's X coordinate on the map they are in][/li]

STEP IV:

» Click to show Spoiler - click again to hide... «

[li]Create a new event command in this window pane[/li]
[li]Select "Control Variables..." from the First Page tab[/li]

[li]Check "Single"[/li]
[li]Select the "Player X" variable that you created earlier[/li]
[li]The "Operation" must be checked as "Mul"[/li]
[li]The "Operand" must be checked as "Constant"[/li]
[li]Select "2"[/li]

STEP V:

» Click to show Spoiler - click again to hide... «

[li]Create a new event command in this window pane[/li]
[li]Select "Control Variables..." from the First Page tab[/li]

[li]Check "Single"[/li]
[li]Select the "Player X" variable that you created earlier[/li]
[li]The "Operation" must be checked as "Add"[/li]
[li]The "Operand" must be checked as "Constant"[/li]
[li]Select "2"[/li]

STEP VI:

» Click to show Spoiler - click again to hide... «

[li]Repeat Steps:[/li]

III through V

[li]Any instance of X MUST be rewritten as Y:[/li]

Variable: Player X --> Player Y
Character: Map X --> Map Y

[li]All "Operations" and "Operands" stay the same[/li]

MARKING THE MAPS:
STEP I:

» Click to show Spoiler - click again to hide... «

[li]Go back to the editor[/li]
[li]Go to the Events editor[/li]
[li]Right-click on the map and create a new Event[/li]
[li]Name the event:[/li]

Minimap On

[li]Set its "Priority" as:[/li]

Below Characters

[li]Set its "Trigger" as:[/li]

Parallel Process

STEP II:

» Click to show Spoiler - click again to hide... «

[li]Create a new event command in this window pane[/li]
[li]Select "Show Picture" from the Second Page tab[/li]

[li]Select its "Number" as "1"[/li]
[li]Choose the "Picture Graphic" that corresponds to your map; in this tutorial it is "Map1"[/li]
[li]Check its "Display Postion / Origin" as "Upper Left"[/li]
[li]Check "Constant"[/li]
[li]Set "X:" as "2"[/li]
[li]Set "Y:" as "2"[/li]
[li]Under "Zoom / Width %", select "50"[/li]
[li]Under "Zoom / Height %", select "50"[/li]
[li]Keep "Blending / Opacity" at "255" [NOTE: You can change the opacity of the actual Mini-map here; Lower the number, the more transparent the Mini-map will][/li]

STEP III:

» Click to show Spoiler - click again to hide... «

[li]Create a new event command in this window pane[/li]
[li]Select "Control Switches..." from the First Page tab[/li]

[li]Check "Single" and select the SAME switch you used in the Common Event's Condition Switch, which should be "Cursor"[/li]
[li]The "Operation" must be checked "ON"[/li]

STEP IV:

» Click to show Spoiler - click again to hide... «

[li]Create a NEW EVENT PAGE[/li]
[li]On that new page, check either "Switch" under the "Conditions"[/li]
[li]Leave the "List of Event Commands" empty[/li]

STEP V:

» Click to show Spoiler - click again to hide... «

[li]Press "Ok" or "Apply" and close the event[/li]
[li]Move the event anywhere on your map out of the way[/li]
[li]Copy and Paste this event to every map that will use a Mini-Map; Change only the picture file that is displayed[/li]
[li]Open the Demo to look at how the "Teleport" events are tweaked.[/li]

[li]Test Play! [/li]

DOWNLOAD DEMO:

» Click to show Spoiler - click again to hide... «

[NOTE: YOU MUST FIX THE SCRIPT GAME_INTERPRETER FOR THIS TO WORK; THE DEMO INCLUDES THE FIXED SCRIPT]

VX_Minimap_Demo

CREDITS:

» Click to show Spoiler - click again to hide... «

Kipe - His original XP Mini Map Tutorial
Grafikal007 - Modifications and Fixes included for VX conversion, and a freakin' awesome/organized Tutorial here
Maia - For finding the VX Script variable errors
Modern Algebra - For Fixing the VX Script variable errors

This post has been edited by Grafikal007: Aug 8 2008, 01:09 PM

[DaRkGeNz]

Ah! This will help alot of peope with their games!
Thanks for the tut

This post has been edited by DaRkGeNz: Aug 8 2008, 06:33 PM

[Grafikal007]

No problem.

[Leventhan]

lol
Great tut, grafikal.

[Iluviel]

strange question, but what's a mini-map good for anyway?

[Grafikal007]

strange question, but what's a mini-map good for anyway?

Um. It's good for noting your position on a map on a smaller scale I suppose. It's kind of something a lot of games use now a days. There're scripts out there better than this, but this is for the eventers out there.

This post has been edited by Grafikal007: Aug 14 2008, 05:45 AM

[Solistra]

This one goes out to eventers such as myself... this is nicely done. It's clean (in terms of the eventing), uses few switches and variables, and generally does what it needs to. Perhaps I'll load this up in VX and play around with it... there are certainly other things that you can do with this mini map considering the small number of events used to create it. There's nothing more fun than messing around with things.

Anyway, this is a good tutorial. Relatively straight-forward, and not a difficult read for anyone who understands all of the basic concepts you've used here (event pages, switches, variables, and pictures). Nice work.

[Hellblaze123]

umm, i have a quick question. what if your world map is like, really huge?? how do you get the picture for it?? cause my world map is like 300x300

[Grafikal007]

umm, i have a quick question. what if your world map is like, really huge?? how do you get the picture for it?? cause my world map is like 300x300

I've thought about that issue. As well as 'What if my maps are too small?'

It's easily fixed if you know the math. I just haven't put the time into figuring it out yet.


As a standard, as seen in Step 1 of "The Meat:", the variable position of the cursor is X,Y:x2 and +2. It's how the cursor finds itself way up in the corner.

Now to change such a problem, for instance a map that is too large, you would format the image to a smaller size after the 1/8 view. When doing this, try resizing proportionally. That way, the math in the variables is likely to also change proportionally. Which way? Do the numbers get larger or smaller? I'm unsure, as I haven't tested this yet.

If you issue is a map that when resized in the 1/8 view of the editor is STILL out of full sight, then 1: GOD DAMN THAT IS BIG, and 2: You will need to screenshot it once, then again with the other parts of the map and seamlessly as possible combine all the images into one THEN import it into the resources editor. Then do what I was talking about just above if your map is too large.

If, for instance, your map were too small, then you would do the opposite. You would increase the map image size and then play with the variable digits. If you don't want to lose resolution in increasing the image size, instead of a 1/8 image view, try out 1/4. (That's 2 times larger, so the numbers would be either doubled or halved, I'm unsure at this time.)

All in all, it's about resizing your image proportionally so that you can try your best to retain an integer value when you then proportionally change the values for the variables. Also, if a map is increased in size [if incase it were too small as a mini-map] then you would also need to increase the size of the cursor. That can be directly edited from the common event by changing its size. In the tutorial it's 100%, 100%. If you need it bigger for a map, it would too proportionally increase. Say for instance 150%, 150% would increase the cursor's size by 1/4.

I hope this helps. Sorry for not knowing the EXACT answer here.