Mode7 Mapping: Storybook Pop-Up

Was this tutorial helpful?


  • Total voters
    1

GoodSelf

Zhu Li! Do the thing!
Veteran
Joined
Jul 23, 2016
Messages
590
Reaction score
1,110
First Language
English
Primarily Uses
RMMV
Mode7 Mapping: Storybook Pop-Up
Difficulty: Advanced


Hello friends! I posted this on Reddit and got a huge response! Many have reached out to me about how I achieved this look, so I figured I would share what I found through a tutorial, and help you all bring a new level of immersion into your games. However, this is still very much a work in progress, and as it stands, this method of mapping is not viable for a full length game. I see this being utilized for smaller games, perhaps set within a single town or focused on a single character.

Another thing to mention with this tutorial, how to map interiors will not be covered. We are simply looking at the bare bone basics of what you need in a starting town, however, the principles taught here can be used to successfully create additional areas. When messing with this system myself, I found designing a single room interior to be a lot of trial and error and downright frustrating at times. Although I'm happy with where I've ended up, it does still not meet the level I would expect it to reach.
So, please take this tutorial, a grain of salt, and a spark of creativity, and let's begin!
If you cannot see an image, right click the png icon and select load image.

REQUIREMENTS
(Links below, all resources are free, please give proper credit)
Ultra Mode7 Plugin
Yanfly's Region Restrictions Plugin
Orange Mapshots
GIMP/Photoshop (or equivalent)

LISTEN WHILE YOU WORK
(This section has a couple of music selections from me to listen to while you work)
Gibli Jazz
Elder Scrolls
Animal Crossing

-~-O-~-~-O-~-~-O-~-
Create a new project, and install the Ultra Mode7, OrangeMapshot and Yanfly's Region Restrictions Plugin. For the Region Restrictions plugin, change Player Restrict from 0 to 1 - this will allow us to place Region 1 wherever the player should not be able to walk.
To capture this storybook effect, we want to adjust our Mode7 settings as well - luckily, only one setting needs to be adjusted. Simply change DEFAULT_PITCH: from 45 to 30. That's it!
3.PNG
Next, open your new project. Let's fill the screen with our transparent tile, and draw a couple of basic houses we're going to use to populate this village. Next, place some other events on this map that you want to include, such as trees or statues (it's best to keep these organized). Keep it small, we can always add more objects later. You should have something that looks like this:
1.PNG
Now, we're going to playtest our game, and press the Print Screen button while doing so. This will cause our plugin to save a screenshot of our map to a folder within our game called Mapshots. Pull this up in your editing software of choice.
2.png
Let's add a grid to the mix - make sure that your grid options are set to 48 by 48! Let's align our map with the grid provided.
3.PNG
Now, here comes the fun part - I'm only going to be walking through this part once, but the process is rinse and repeat for every other building and object you want to add to your game (keep in mind you do not need to do this for single tile objects such as rocks and characters, only objects that are over 2 tiles high and or over 2 tiles long).

FIrst, use the select tool and copy a single building (not the shadows).
4.PNG
We are going to copy this house, and open it in a new window. Here's how to do that within GIMP.
5.png
You should have something like this:
6.png
Next, we want to adjust the the canvas size for our image. We will be increasing the width by 300%, and the height by 400%. You could use the percentage options present in GIMP, but for precise pixels, I would multiply the width by 3, and the height by 4 to get your values.
7.png
Now, let's export this image in our IMG -> Characters folder on RPG Maker MV. Make sure that when you export it, you are using the character "$" before it's name and are ensuring that it is a PNG file.
8.png
Using the method above will allow RPG Maker MV to read each section of 240x240 pixels individually, which means that you can then slot an additional 11 Houses into this individual character sheet! These houses are 5x5, which means that every other image inserted must conform to be within that 5x5 area to be selected.
9.png
Now that you've got the hang of building out the houses, you know the exact process needed to build out the other aspects of your town, such as the trees and statues selected earlier. Since the method to do this is exactly the same as above, I am not going to go into explicit detail, but instead will summarize the process. All you need to do is grab your tree, open it in a new window like we did with our house, increase the width by 300% and height by 400%, save it as $Trees.png, and add in any additional items that fit the tile structure. For ease of access, here are the additional tiles I put together for this tutorial (all resources are owned by Kadokawa and Enterbrain):
1x2 Objects
5x5 Houses
Alright, time to dive into the editor! We're well on our way!
Let's use our existing map, cover it with grass, and format it to work with Mode7 by using notetags as shown below:
10.png
Next, we're going to place our events! This is where the magic happens - let's start by placing a couple of houses.
11.png
12.png
In the image above, I have decided on 3 houses for my village. The red squares show where the houses will actually be placed. Using this, I have designed a pathway through to each houses, created the general landscape, and placed other events such as the trees and statues we made earlier. Here is what I have:
13.png
Next, we want to add our Region Restrictions - this is important , as we want to give a sense that the player can't simply walk into Mordor, I mean behind the houses. This is what I decided on for my region restrictions:
14.png
Now there's only one thing left to do!
Let's play test our game for the first time...and behold a storybook world made possibly by the Ultra Mode7 plugin!
15.png
Pat yourself on the back, you did a fantastic job!
This is just the tip of the iceberg - what will you create next?
Have fun, and happy game designing!
-~-O-~-~-O-~-~-O-~-​
 

Attachments

Last edited:

EMOXD

Villager
Member
Joined
May 10, 2020
Messages
5
Reaction score
3
First Language
ENGLISH
Primarily Uses
RMMV
Mode7 Mapping: Storybook Pop-Up
Difficulty: Advanced


Hello friends! I posted this on Reddit and got a huge response! Many have reached out to me about how I achieved this look, so I figured I would share what I found through a tutorial, and help you all bring a new level of immersion into your games. However, this is still very much a work in progress, and as it stands, this method of mapping is not viable for a full length game. I see this being utilized for smaller games, perhaps set within a single town or focused on a single character.

Another thing to mention with this tutorial, how to map interiors will not be covered. We are simply looking at the bare bone basics of what you need in a starting town, however, the principles taught here can be used to successfully create additional areas. When messing with this system myself, I found designing a single room interior to be a lot of trial and error and downright frustrating at times. Although I'm happy with where I've ended up, it does still not meet the level I would expect it to reach.
So, please take this tutorial, a grain of salt, and a spark of creativity, and let's begin!
If you cannot see an image, right click the png icon and select load image.

REQUIREMENTS
(Links below, all resources are free, please give proper credit)
Ultra Mode7 Plugin
Yanfly's Region Restrictions Plugin
Orange Mapshots
GIMP/Photoshop (or equivalent)

LISTEN WHILE YOU WORK
(This section has a couple of music selections from me to listen to while you work)
Gibli Jazz
Elder Scrolls
Animal Crossing

-~-O-~-~-O-~-~-O-~-
Create a new project, and install the Ultra Mode7, OrangeMapshot and Yanfly's Region Restrictions Plugin. For the Region Restrictions plugin, change Player Restrict from 0 to 1 - this will allow us to place Region 1 wherever the player should not be able to walk.
To capture this storybook effect, we want to adjust our Mode7 settings as well - luckily, only one setting needs to be adjusted. Simply change DEFAULT_PITCH: from 45 to 30. That's it!
View attachment 144117
Next, open your new project. Let's fill the screen with our transparent tile, and draw a couple of basic houses we're going to use to populate this village. Next, place some other events on this map that you want to include, such as trees or statues (it's best to keep these organized). Keep it small, we can always add more objects later. You should have something that looks like this:
View attachment 144123
Now, we're going to playtest our game, and press the Print Screen button while doing so. This will cause our plugin to save a screenshot of our map to a folder within our game called Mapshots. Pull this up in your editing software of choice.
View attachment 144124
Let's add a grid to the mix - make sure that your grid options are set to 48 by 48! Let's align our map with the grid provided.
View attachment 144126
Now, here comes the fun part - I'm only going to be walking through this part once, but the process is rinse and repeat for every other building and object you want to add to your game (keep in mind you do not need to do this for single tile objects such as rocks and characters, only objects that are over 2 tiles high and or over 2 tiles long).

FIrst, use the select tool and copy a single building (not the shadows).
View attachment 144127
We are going to copy this house, and open it in a new window. Here's how to do that within GIMP.
View attachment 144128
You should have something like this:
View attachment 144129
Next, we want to adjust the the canvas size for our image. We will be increasing the width by 300%, and the height by 400%. You could use the percentage options present in GIMP, but for precise pixels, I would multiply the width by 3, and the height by 4 to get your values.
View attachment 144130
Now, let's export this image in our IMG -> Characters folder on RPG Maker MV. Make sure that when you export it, you are using the character "$" before it's name and are ensuring that it is a PNG file.
View attachment 144133
Using the method above will allow RPG Maker MV to read each section of 240x240 pixels individually, which means that you can then slot an additional 11 Houses into this individual character sheet! These houses are 5x5, which means that every other image inserted must conform to be within that 5x5 area to be selected.
View attachment 144135
Now that you've got the hang of building out the houses, you know the exact process needed to build out the other aspects of your town, such as the trees and statues selected earlier. Since the method to do this is exactly the same as above, I am not going to go into explicit detail, but instead will summarize the process. All you need to do is grab your tree, open it in a new window like we did with our house, increase the width by 300% and height by 400%, save it as $Trees.png, and add in any additional items that fit the tile structure. For ease of access, here are the additional tiles I put together for this tutorial (all resources are owned by Kadokawa and Enterbrain):
1x2 Objects
5x5 Houses
Alright, time to dive into the editor! We're well on our way!
Let's use our existing map, cover it with grass, and format it to work with Mode7 by using notetags as shown below:
View attachment 144140
Next, we're going to place our events! This is where the magic happens - let's start by placing a couple of houses.
View attachment 144141
View attachment 144142
In the image above, I have decided on 3 houses for my village. The red squares show where the houses will actually be placed. Using this, I have designed a pathway through to each houses, created the general landscape, and placed other events such as the trees and statues we made earlier. Here is what I have:
View attachment 144143
Next, we want to add our Region Restrictions - this is important , as we want to give a sense that the player can't simply walk into Mordor, I mean behind the houses. This is what I decided on for my region restrictions:
View attachment 144144
Now there's only one thing left to do!
Let's play test our game for the first time...and behold a storybook world made possibly by the Ultra Mode7 plugin!
View attachment 144145
Pat yourself on the back, you did a fantastic job!
This is just the tip of the iceberg - what will you create next?
Have fun, and happy game designing!
-~-O-~-~-O-~-~-O-~-​
Thanks a bunch for this tutorial !!
 

AnimaScorpius

Modern Mage/WorldCrafter
Veteran
Joined
Oct 7, 2015
Messages
112
Reaction score
190
First Language
English, French
Primarily Uses
RMMV
Nice tutorial my friend.
 

sefeloth

Veteran
Veteran
Joined
Oct 24, 2016
Messages
36
Reaction score
5
First Language
english
Primarily Uses
It looks great, but why would you say it's not viable for a full length game? I don't see why not.
 

GoodSelf

Zhu Li! Do the thing!
Veteran
Joined
Jul 23, 2016
Messages
590
Reaction score
1,110
First Language
English
Primarily Uses
RMMV
It looks great, but why would you say it's not viable for a full length game? I don't see why not.
The mapping style is very intensive, and creating things like caves and interiors requires a lot of work. This is why I suggest using this method for a smaller game, as for a full length game, you will be making a lot of sacrifices in terms of map design to get this done, so with that in mind, I wouldn't recommend this for a large project.
 

sefeloth

Veteran
Veteran
Joined
Oct 24, 2016
Messages
36
Reaction score
5
First Language
english
Primarily Uses
The mapping style is very intensive, and creating things like caves and interiors requires a lot of work. This is why I suggest using this method for a smaller game, as for a full length game, you will be making a lot of sacrifices in terms of map design to get this done, so with that in mind, I wouldn't recommend this for a large project.
That makes sense. Thank you
 

GraySorrow

Veteran
Veteran
Joined
Feb 18, 2016
Messages
32
Reaction score
5
First Language
English
Primarily Uses
Hey a WAYYYY easier way to use Ultra Mode 7 for mapping is to use Yanfly's Doodads. All of the placed items from doodads are automatically standing. No eventing required. Not only does this save valuable proccessing power by reducing the amount of events you have on the map, but you also can use ANY image as a doodad including pre built houses like in the image the OP used. Heres how my game looks with this style of mapping/eventing. Even the walls are doodas.

 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Brioche with a crème patissiere filling is so tasty!
A group of Game creators and others who trying to revive the Feel of Multiplayer and TOWN/ROLEPLAY games
Wow, lots of RPG Maker MV stuff on sale on Steam for 50%-75% off. Steam, why you not tell me?!
looking for help on top secret project
The nick "Toeuia" that I'm using comes from a, idk, you okay the chess game while chit chatting them. The first two are students. Then you know, finally, the champion, and then the champion's sensei. I played like this so many times until suddenly there's another chess master. Very naive but super smart. After he lost, he kinda advised me not to give up on chest. Because the next one was never seen beaten. Touya.

Forum statistics

Threads
99,383
Messages
964,650
Members
131,001
Latest member
funland
Top