- Joined
- Dec 15, 2016
- Messages
- 294
- Reaction score
- 723
- First Language
- Spanish
- Primarily Uses
- RMMV
Blender to RpgMaker 3d isometric mapping complete tutorial.
Hello there! since ive seen some interest in my 3d to rpg maker pipeline so i finally decided to share how its done.
I have to say that im no programmer, so im sure there must be much better ways to achieve this regarding optimization, but this can still
be a good starting point for you if you are looking to go beyond what rpg maker can do by default.
Also, even so blender is extensively used you dont really need to be a 3d modeler to work with this pipeline, feel free to use placeholders or free/bought 3d assets if you dont feel like learning modeling.
Photoshop is also used to give the mapping the last touches, but any similar software works too.
For this tutorial i recommend creating a new project, you will also need a few plugins, install them in this order:
PLUGINS NEEDED:
Quxios:
-Qplus
-Qmovement
-QM+Collisionmap
-Qsprite
SoulPour777:
-Sleipnir Mapping Overlay System (I use this one but any parallax plugin like this one should work)
In this tutorial i will show you how to create an interior room with just a few details, but once you get the hang of it there is no limit to what you can do.
Step One: Setting up the scene in blender.
Youtube is full of blender tutorials, if you have never used a 3d modeling application before i strongly recommend you to follow a few of them until you get accustomed to how the interface works. You should also get familiar with at least the basics of 3d modeling and rendering. The polycount.com wiki is a really good starting point along with youtube:
http://wiki.polycount.com/wiki/Polycount
First thing is setting up the isometric camera, of course we dont need it to be a real math correct isometric view, just the "fake" isometric view often used in videogames will suffice. You can either set up the camera yourself or you can use this little plugin for blender:
https://wiki.blender.org/index.php/Extensions:2.6/Py/Scripts/Add_Mesh/Create_IsoCam
Once you get the camera set up press 5 on your numeric keyboard to switch from perspective to orthogonal view. After that press 0 on the numeric keyboard to look at the scene from the camera perspective, press 0 again to go back to the regular view.
After that is done you can start building your scene, if you have ever used an in game editor where you can place and customize stuff this is a bit like that. Here is how the scene should look with just the 3d meshes (objects) from the isometric perspective.
As you can see mostly everything is done out of very basic shapes, with the exception of cloth, but that is by far the easiest thing to do.
You will also need to tweak the rendering properties of the camera to suit your game needs. Here are my settings for reference:
Step two: Texturing and rendering.
After the camera is properly set up and you have already decided on the rendering settings, its time to to start texturing the scene, adding lights and rendering the scene.
Careful, rendering takes a lot of power, so if you are not confident on your machine specs dont go too crazy with the rendering quality!
Being just one person trying to develop a whole game, i recognize that speed and efficiency are crucial.
For that reason i only model complex objects when its absolutely needed like in the case of characters, weapons, special props, etc. Then how do we avoid that cartoony minecraft look? (unless you want that of course, but still keep reading
)
Easy, through texturing and blender modifiers.
I will also introduce you to a very important concept in today's game development industry: modularity.
In a non modular pipeline, you model a barrel for example, then you manually texture it and you can reuse that particular barrel.
In a modular pipeline the textures, materials and 3d assets are all interchargeable with one another, this speeds up things exponentially and can potentially save you years worth of work.
NOTE: in order to texture a mesh, the object needs to have proper Uvs, sadly explaining that requires a tutorial on its own, thats why i suggested getting familiar with 3d itself before getting started with this tut.
Textures also need to be tileable, but thats rather easy to achieve with photoshop, if your textures are 1024x1024 just use the offset filter with 512x512, then paint over any undesired inconsistencies until you are satisfied with how it looks:
You can add aditional maps to your materials to achieve better results, things like normal, displacement and roughness/metalness maps but creating those maps manually is rather advanced and probably out of the scope of the average rpg maker dev so i wont go into how to create them in this tutorial. Another option is using specialized software like BitmaptoMaterial or Substancepainter/designer to create them.
Now you should add lights to your scene.
First you need a directional light, either sun or hemi lights will work. The origin of these lights is located outside of the scene itself thus it will affect the whole scene no matter where the light is located. The difference with sun and hemi is that the inclination and rotation of the sun light object will affect the scene differently, casting different shadows while hemispheric light will cover the entire scene.
This light shouldnt be too bright, unless your scene takes place in broad daylight. Also play with the color in order to get the athmosphere right. If you are a painter, anything you know about painting lights can be extrapolated here.
Then you can add several point lights whenever you want the scene to be more bright, just put them at the center of every lightsource in the scene that isnt the sun/moon.
Finally i will explain blender modifiers.
Blender has an awesome way to modify and retouch 3d meshes in a non destructive way, thats called modifiers.
In my isometric renders i use two modifiers extensively:
First is the subdivider modifier, this comes in really handy to model stuff quickly since blender will keep dividing the mesh on its own so you dont have to model everything polygon by polygon. I wouldnt use it for really important stuff but for things like stage props and inanimate objects in general its rather useful.
And second is the cloth modifier, actually this one is so easy to use and offer such good results it feels like cheating but dont let that bother you!
The only downside it has it that it requires an awful lot of polygons on any mesh its applied so for real time rendering it would be useless, but thankfully we are only interested in pre-rendered graphics in this tutorial.
First you need to add a collision modifier to whatever surface the cloth is going to interact with, if you are making a carpet you should add the modifier to the floor it will cover. Then on edit mode press space and subdivide the mesh you are going to use as cloth, the more you subdivide it the better the cloth will look but the more resources it will take to render.
You can see a step by step process here:
once you are ready to render your scene hit F12 and take a look at how your scene works, once you are satisfied save the image as PNG and take it to photoshop for the last touches.
Step three: Post-processing in photoshop.
Retouching some details can mark the difference, start by painting over any rough edges and adding some shading here and there like shadows and lights whenever the basic geometry is too evident.
Then make a duplicate of the image and put over all other layers, apply a gaussian blur and put the layer on lighten mode at an opacity level of your choosing (whatever looks best) this is the same technique used in anime backgrounds btw!
Step four: Creating the parallax background.
We are almost done, all there is left is to create two things: the collision map and the overhead map.
1 the collision map: You need to make use of Quxios collision map plugin for this. Simply add a new layer in photoshop and paint over anything that your character is not supposed to step into, like this (well this one was done in a hurry, you should take your time with yours)
Collision maps are saved in your game parallax folder, inside the editor add this notetag to your map: <cm:!yourcollisionmapname>
2 overhead map: Like i mentioned earlier i use Soulpour777 sleipnir parallax plugin, but any plugin that allows you to create a parallax layer over the player will work. Carefully select whatever areas are going to be on top of the player and other events, you can use the lasso tool for example. Then hit layer via copy and save the picture will only the overhead layer visible.
In the case of Slepipnir plugin its on your game overhead folder, you also need to add this notetag to your map:
<overhead:!youroverheadmapname>
Done! you can then try it in game and see how it looks, you can also use Moghunter weather plugin for some extra atmosphere.
And thats all for this tutorial, feel free to ask any questions you may have, or if you feel like there is something missing, etc.
I would also love to see anything created with this pipeline or at least in this style so dont hesitate to post!
I also hope it will be useful to someone in some way or another, cheers!
Hello there! since ive seen some interest in my 3d to rpg maker pipeline so i finally decided to share how its done.
I have to say that im no programmer, so im sure there must be much better ways to achieve this regarding optimization, but this can still
be a good starting point for you if you are looking to go beyond what rpg maker can do by default.
Also, even so blender is extensively used you dont really need to be a 3d modeler to work with this pipeline, feel free to use placeholders or free/bought 3d assets if you dont feel like learning modeling.
Photoshop is also used to give the mapping the last touches, but any similar software works too.
For this tutorial i recommend creating a new project, you will also need a few plugins, install them in this order:
PLUGINS NEEDED:
Quxios:
-Qplus
-Qmovement
-QM+Collisionmap
-Qsprite
SoulPour777:
-Sleipnir Mapping Overlay System (I use this one but any parallax plugin like this one should work)
In this tutorial i will show you how to create an interior room with just a few details, but once you get the hang of it there is no limit to what you can do.
Step One: Setting up the scene in blender.
Youtube is full of blender tutorials, if you have never used a 3d modeling application before i strongly recommend you to follow a few of them until you get accustomed to how the interface works. You should also get familiar with at least the basics of 3d modeling and rendering. The polycount.com wiki is a really good starting point along with youtube:
http://wiki.polycount.com/wiki/Polycount
First thing is setting up the isometric camera, of course we dont need it to be a real math correct isometric view, just the "fake" isometric view often used in videogames will suffice. You can either set up the camera yourself or you can use this little plugin for blender:
https://wiki.blender.org/index.php/Extensions:2.6/Py/Scripts/Add_Mesh/Create_IsoCam
Once you get the camera set up press 5 on your numeric keyboard to switch from perspective to orthogonal view. After that press 0 on the numeric keyboard to look at the scene from the camera perspective, press 0 again to go back to the regular view.
After that is done you can start building your scene, if you have ever used an in game editor where you can place and customize stuff this is a bit like that. Here is how the scene should look with just the 3d meshes (objects) from the isometric perspective.
As you can see mostly everything is done out of very basic shapes, with the exception of cloth, but that is by far the easiest thing to do.
You will also need to tweak the rendering properties of the camera to suit your game needs. Here are my settings for reference:
Step two: Texturing and rendering.
After the camera is properly set up and you have already decided on the rendering settings, its time to to start texturing the scene, adding lights and rendering the scene.
Careful, rendering takes a lot of power, so if you are not confident on your machine specs dont go too crazy with the rendering quality!
Being just one person trying to develop a whole game, i recognize that speed and efficiency are crucial.
For that reason i only model complex objects when its absolutely needed like in the case of characters, weapons, special props, etc. Then how do we avoid that cartoony minecraft look? (unless you want that of course, but still keep reading
)Easy, through texturing and blender modifiers.
I will also introduce you to a very important concept in today's game development industry: modularity.
In a non modular pipeline, you model a barrel for example, then you manually texture it and you can reuse that particular barrel.
In a modular pipeline the textures, materials and 3d assets are all interchargeable with one another, this speeds up things exponentially and can potentially save you years worth of work.
NOTE: in order to texture a mesh, the object needs to have proper Uvs, sadly explaining that requires a tutorial on its own, thats why i suggested getting familiar with 3d itself before getting started with this tut.
Textures also need to be tileable, but thats rather easy to achieve with photoshop, if your textures are 1024x1024 just use the offset filter with 512x512, then paint over any undesired inconsistencies until you are satisfied with how it looks:
You can add aditional maps to your materials to achieve better results, things like normal, displacement and roughness/metalness maps but creating those maps manually is rather advanced and probably out of the scope of the average rpg maker dev so i wont go into how to create them in this tutorial. Another option is using specialized software like BitmaptoMaterial or Substancepainter/designer to create them.
Now you should add lights to your scene.
First you need a directional light, either sun or hemi lights will work. The origin of these lights is located outside of the scene itself thus it will affect the whole scene no matter where the light is located. The difference with sun and hemi is that the inclination and rotation of the sun light object will affect the scene differently, casting different shadows while hemispheric light will cover the entire scene.
This light shouldnt be too bright, unless your scene takes place in broad daylight. Also play with the color in order to get the athmosphere right. If you are a painter, anything you know about painting lights can be extrapolated here.
Then you can add several point lights whenever you want the scene to be more bright, just put them at the center of every lightsource in the scene that isnt the sun/moon.
Finally i will explain blender modifiers.
Blender has an awesome way to modify and retouch 3d meshes in a non destructive way, thats called modifiers.
In my isometric renders i use two modifiers extensively:
First is the subdivider modifier, this comes in really handy to model stuff quickly since blender will keep dividing the mesh on its own so you dont have to model everything polygon by polygon. I wouldnt use it for really important stuff but for things like stage props and inanimate objects in general its rather useful.
And second is the cloth modifier, actually this one is so easy to use and offer such good results it feels like cheating
but dont let that bother you! The only downside it has it that it requires an awful lot of polygons on any mesh its applied so for real time rendering it would be useless, but thankfully we are only interested in pre-rendered graphics in this tutorial.
First you need to add a collision modifier to whatever surface the cloth is going to interact with, if you are making a carpet you should add the modifier to the floor it will cover. Then on edit mode press space and subdivide the mesh you are going to use as cloth, the more you subdivide it the better the cloth will look but the more resources it will take to render.
You can see a step by step process here:
once you are ready to render your scene hit F12 and take a look at how your scene works, once you are satisfied save the image as PNG and take it to photoshop for the last touches.
Step three: Post-processing in photoshop.
Retouching some details can mark the difference, start by painting over any rough edges and adding some shading here and there like shadows and lights whenever the basic geometry is too evident.
Then make a duplicate of the image and put over all other layers, apply a gaussian blur and put the layer on lighten mode at an opacity level of your choosing (whatever looks best) this is the same technique used in anime backgrounds btw!
Step four: Creating the parallax background.
We are almost done, all there is left is to create two things: the collision map and the overhead map.
1 the collision map: You need to make use of Quxios collision map plugin for this. Simply add a new layer in photoshop and paint over anything that your character is not supposed to step into, like this (well this one was done in a hurry, you should take your time with yours)
2 overhead map: Like i mentioned earlier i use Soulpour777 sleipnir parallax plugin, but any plugin that allows you to create a parallax layer over the player will work. Carefully select whatever areas are going to be on top of the player and other events, you can use the lasso tool for example. Then hit layer via copy and save the picture will only the overhead layer visible.
In the case of Slepipnir plugin its on your game overhead folder, you also need to add this notetag to your map:
<overhead:!youroverheadmapname>
Done! you can then try it in game and see how it looks, you can also use Moghunter weather plugin for some extra atmosphere.
And thats all for this tutorial, feel free to ask any questions you may have, or if you feel like there is something missing, etc.
I would also love to see anything created with this pipeline
or at least in this style so dont hesitate to post! I also hope it will be useful to someone in some way or another, cheers!
