Blender to RpgMaker 3d isometric mapping pipeline tutorial.

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.

Spoiler: End result

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.

Spoiler: Blender scene

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:

Spoiler: camera settings

Spoiler: rendering settings

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.

Spoiler: Assign materials

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:

Spoiler: offset filter

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.

Spoiler: Setting up light sources

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.

Spoiler: Subdivision surface modifier

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:

Spoiler: cloth modifier step by step

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!

Spoiler: Postprocessing in photoshop

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)

Spoiler: Collisionmap

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>

Spoiler: overheadmap

Done! you can then try it in game and see how it looks, you can also use Moghunter weather plugin for some extra atmosphere.

Spoiler: In game final result

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!

 

Just a note, Soulpour777 was found to have plagiarized some of his work, so use his plugins at your own discretion. If it's simply a parallax plugin, I'm sure there are many viable alternatives out there.

 

Awesome. I can't wait to play around with this.

 

@mlogan: i had no idea about that, if thats the case i will find an alternative and update the tutorial afterwards, thanks for telling me!

@Arcmagik: cool! i hope you find it useful

 

I use 3dsmax, and after extensive testing I've concluded that the best camera angle is 35 degrees up from the top-down vertical.
characters rendered with that setup, to an output of 32x48 fit perfectly with the stock tilesets.

to achieve that diamond look, turn the camera 30º to either side from the world transform instead of the camera transform

for comparison, that's the angle that Factorio uses, and that's where I got my measurements from

 

I just want to add in a few of my suggestions.

Try to render every obj as their own sprite or spritesheet. A common mistake I see in RM is people create there parallax image parts as layers. So all the images are equal to the full map width/height. That is a bad approach because most of those images will have lot of whitespace (typically more then 50% is whitespace) and with images being that large you're making your game consume more memory. So don't be lazy, split the images into multiple images and crop as much whitespace as you can and place the image with correct coordinates not at 0,0.
Now for the main floor/background, that can be 1 large image because it should be filling up most of the image. But if you have a culling feature, you can split that image apart into mutliple images to take advantage of the culling.

Also for the camera, I go with a rotation of x:60, y:0, z:0 in blender. In other apps the x may be 30 degrees instead, depends on where its resting face is at I guess.

 

@Quxios thank you! that was bothering me yeah, i will try to optimize things more and update the tutorial

 

Oh my god, 1 word for you: AWESOME. Excellent tutorial.

 

@Amarok Thank you very much for this tutorial! I was waiting for this It is excellent! You renders are amazing. Lernt a new thing for myself - a cloth modifier, which I haven't got a chance to use yet!
1)You are using Cycles right? I have been using PBR materials... and now I think I should have used default ones instead cause they probably give more cartony look?
2) What Sun settings are you using? I find it really difficult sometimes to get shading and color to match RTP.... Then again it may be my materials haha.
3) How are you making your characters? Do you use the standard high poly - low poly - UVs - texturing - baking normals - rigging - etc routine? I was thinking about this: Low poly char only --> UV --> Texturing (multiple textures) --> Rigging --> Skinning --> Animation --> Render at high res --> Downscale / super-sample... My idea is that I can downscale render 10 / 100 times to a size of 48 x 96 pixels and this should make low poly look like medium quality 2D sprite.

@gstv87 That's interesting! Aren't RPG maker tiles viewed at 45 degree angle though? I was sure about that... Btw the game you mentioned, I watched some videos on it and I want it badly!

 

Wondeful tutorial, but why not use already a 3d engine (unity, any other)? The result and the process will be more easy and decent.

 

@Alastor01 np! glad you like the tutorial. I will update the parallax part in the coming days, since using doodads is a lot better for that.
As for your questions,
1) nope i use the internal renderer, i found cycles overkill for what i wanted. About the cartoony look, i think that comes down to the textures more than the settings of the material itself. I would study the look of Overwatch for a functional PBR cartoony design.
2) the light setting i use varies from one scene to another, but its usually a very subtle directional light, a sun light and some area lights in interiors. If you have trouble matching the rtp i would give a handpainted unlit material a try, then you can add the shadows manually in photoshop for example after rendering.
3) Actually i was thinking about expanding this tutorial or making a new thread covering the characters creation. Also you guessed right, i usually follow the high poly to low poly pipeline, but for this particular project i used unlit handpainted materials so i did the low poly directly and put all the detail on the texturing, also since its unlit no normals or any extra map required. Then i just render them at 100% put all frames together to make the spritesheet then resize the spritesheet.
Oh for blender there are shaders that render with a pixel art look and work really good, but the documentation is mostly in japanese.

@RocketKnight thanks! also excellent question haha indeed any other 3d engine would have been better, but other engines require knowing how to code in order to be able to do anything with them. Im mostly a 2d/3d artist, and i didnt want to spent years learning something so different to what i do. But the main reason i have to admit is that it was a lot of fun discovering by myself if this could be done or not.

 

@Amarok Oh ye, the Overwatch... Should have the settings I can check Haha, the reason I am using 3D is cause I suck at drawing, I specifically wanted to avoid anything to do with shading / shadows... I know its not good that I ignore them.
That's a nice way to render characters! I have a lot to learn. Ye, I saw the tutorials for pixel art characters in Blender but they seemed outdated and have very scarce documentation / tutorials available.
Oh, how about this: Make a character literally out of pixels - small cubes that you use to build the character in all dimensions on a 48 x 48 x 48 units template, then group cubes in different colors... This should be like pixel art right? You can rig and animate. Shading and shadows should work as well. Anti-Aliazing will remove any sharp ages. Just having random ideas, sorry if off-topic!

 

ish.
there's a crazy optic trick going on there, and depending on your sprite output, they'll fit, or not.
you can kind of see the difference here, with these two sprites.
Liam, is up to date at 35º, Akhara, is outdated (one of the first ones I made) at 45º.... I assumed it was 45º as well.


you can see Akhara is kind of offset a bit, she doesn't quite align with Liam's head.
and when against a wall, their parallels don't quite match.
Galen (the white character to the left) is also at 35º, and he matches much better with Liam

I have a scene where I set up cameras at 45, 35, and 50 degrees, just in case. And I'm still debating how to render a wall.
I managed to render ground sprites to the correct perspective, but walls are being tricky.
(I even managed to render *animations* with that setup, with a new layering technique, and now I can change the Z depth of animations so that they appear as if the character is casting a spell circle on the ground!)

no, you don't.
..................no..................................you don't......................

 

@Alastor01 the problem with cel shading is that its really difficult to make it look good when animated, look at all those crappy looking cg anime, for it to work you need an awesome shader like the guilty gear guys use that can flip the normals of the model according to the camera, between that and a handpainted unlit approach i think the latter is worth a shot haha. What i did was look at handpainted textures and tried to replicate them, im sure you will get cool results after a few tries aswell! also about your idea, thats like voxels? if so i think it can work yeah.

 

it sounds like voxels in principle, but you'll go insane doing it for real.
voxels are absolute.... meaning, if you change the shape of the object (it moves, or jumps) each voxel stays in place, and more are added or removed to complete the shape.
you don't rotate or stretch voxels (at least, you shouldn't) as you would vertices and edges.

no... the best approach is either a cell shader or a good texture, and a good filter.
and by filter I mean the texture filter, not the AA.
the texture filter will help you achieve that overall pixelated look, while the AA will prevent the shape from looking pixelated.
oddly enough, the more detailed the character, the better.... as backwards as it sounds.

 

...I think I'm in love.

 

@Amarok Thanks man! I will try that for sure I need to practice drawing some other textures, besides wood...
@gstv87 Okay, that makes sense. Your pictures shows the difference quite clearly. Btw nice looking characters and tiles! I will change my camera set-ups to 35 degrees then - want to be closer to RTP / RPG resources look.
Haha, is the game very addictive? Factorio.
Ye, I understand, I knew there were some major drawbacks in "voxel" based pixel-art-like modeling. Animation would be tricky for sure... However, it should still work for static objects I think - it's just like drawing pixels but in 3D.
I think I would go for low-medium poly characters. High poly (and dreaded baking) would kill me.