[Guide] Making spritesheets with Blender
Posted: Tue Aug 12, 2014 9:21 pm
This guide was created for Blender 2.66a, but should apply to any other version (UI might have different layout).
Step 1 - Transparency and shadows
In order to be usable in game, renders must have transparent background.
You can do so in Render section > Shading, by setting Alpha Mode to Transparent as shown below:
To show shadow of object, add a Plane (Add > Mesh > Plane) to the scene and put it under object like this:
Make sure you have only plane selected, then in right panel, select Material section and click on New button:
Now its time to properly setup camera, so our rendered object actually looks like it belongs to the game. In outliner select Camera, move to Object Data section (should have icon of film camera). In this section, change Lens to Orthographics.
Press Numpad 0 (Or, in 3D View, select View > Camera) to see throught camera perspective. Camera is now looking at some unknown position. Try changing Z value in Position until you can see your object:
Note: Actual resolution won't affect camera size, but aspect resolution ratio will also change aspect ratio of camera.
You may noticed, that shadow is on the left from the object, thats wrong, as Factorio has shadows going to right bottom-ish corner.
Also the shadow is little weird (you can't see it properly in low resolution of the render), thats why we change the light type to Sun (currenty its Point).
Select Lamp (or any object you're using for lighting) and go to Object Data section and under Lamp subsection select Sun (I didn't select it in image, because it will change icon of Object Data, which would led to confusion).
Now we need to actually create rotating spritesheet from this object. We will do so by creating Animation.
But, before we do so, If your object is made from more smaller objects, you need to join them into one transform group, so you only need to rotate one object.
Add Empty (Add > Empty > Plain Axes), move it to center of your object, deselect it, select all your objects to be rotated and, as last object, select newly created Empty. Now press [Ctrl] + [P], popup will appear at your mouse. Select Object (Keep Transform).
Step 4.1 - One image
If you need only one image, you can now rotate empty to fit your needs.
Step 4.2 - Rotating spritesheet
Now, we're entering the more complicated stuff.
First we need to move to frame 0. You can do so in Timeline (bottom part of screen in default layout), by changing frame number to 0.
Now move to frame 1, rotate object to face upwards (regarding camera), by going into Object section of Empty. In Transform subsection, change Z Rotation to 45. Press again and select Rotation. This will be first frame of spritesheet.
Decide what will be your frame count, I chose 64, same count as for example car in Factorio. Enter the frame count to End field in Timeline.
Next, move to one frame after the last (65 in this case). We're doing this, because if we set last frame (64) to be completly rotated, there would be two frames of object facing up in the spritesheet.
Now change object Rotation Z to -315, press and select Rotation.
Rotation is now complete. But if you try to play it, it doesn't rotate at constant speed! Thats because Blender is making it smooth.
To fix this, we need to open Graph Editor. With Graph Editor focued, press [A] (lines should be bold now), then press [Shift] + [E], small popup will appear, select Linear Extrapolation.
Animation should now be object rotating at constant speed.
Step 5 - Creating spritesheet
This part is quite complicated and can't be done using regular Blender functions, but some awesome guy actually made addon named Spritfy for this:
http://wiki.blender.org/index.php/Exten ... r/Spritify
You need to have ImageMagick installed (You may need to restart blender after installing it).
To install this plugin, download .py file from link above, open File > User Preferences, go to Addons section and click on Install from file... , find downloaded spritify.py and select it.
Plugin will appear in addons list, find it using search bar at top left and enable it.
Click on Save User Settings and close dialog. Spritfy subsection should be now visible under Render section.
The interface is pretty self-explanatory... but you won't have the File count section visible.
This should be ok for most cases, but with bigger image resolution, problem arises. Factorio can't load images with width or height bigger than 2000px.
You will need to split your spritesheet to multiple smaller spritesheets. Thats why I had to create modification to original script, that adds the File count option:
http://cerno.ch/~kamen/upload/spritify.py
Instalation and controls of modified version is same as original, only difference is the File count option.
Now, all you need to do is render animation:
and spritesheet (s) will be automatically created (if not, click on Generate Sprite Sheet button).
Downloads
factorio_render.blend - Example blender file (created using this guide)
spritify.py - Updated version of spritify allowing creation of multiple files
Step 1 - Transparency and shadows
In order to be usable in game, renders must have transparent background.
You can do so in Render section > Shading, by setting Alpha Mode to Transparent as shown below:
Image 1
Rendered image will now have transparent background, we are half way throught. Now we need to add shadows, but also keep the transparency.
To show shadow of object, add a Plane (Add > Mesh > Plane) to the scene and put it under object like this:
Image 2
the shadow will be now rendered onto the plane. But a problem arises, the plane now covers the transparent background!
Make sure you have only plane selected, then in right panel, select Material section and click on New button:
Image 3
Scroll down in the newly created material until you find Shadow subsection. In this subection, check the Shadows only option:
Image 4
this will hide plane, and leave only the shadow casted onto it. This is the result so far:
Image 5
Step 2 - Camera
Now its time to properly setup camera, so our rendered object actually looks like it belongs to the game. In outliner select Camera, move to Object Data section (should have icon of film camera). In this section, change Lens to Orthographics.
Image 6
Now, we need to move our camera to be under right angle. To do so, go to Object section (with Camera still selected), under Transform section change Position to following: X: 5, Y: -5, Z: 0 and Rotation to X: 45, Y: 0, Z:45
Press Numpad 0 (Or, in 3D View, select View > Camera) to see throught camera perspective. Camera is now looking at some unknown position. Try changing Z value in Position until you can see your object:
Image 7
If the object is too big for the camera, go back to Object Data section of Camera and try changing Orthographics Scale:
Image 8
Finally, we need to determine result image resolution. You can do so in Render section, Dimensions subsection under Resolution. I chose 250 x 200, which is resolution used for bigger objects.
Note: Actual resolution won't affect camera size, but aspect resolution ratio will also change aspect ratio of camera.
Image 9
Our rendered images now looks like this:
Image 10
Step 3 - Lighting
You may noticed, that shadow is on the left from the object, thats wrong, as Factorio has shadows going to right bottom-ish corner.
Also the shadow is little weird (you can't see it properly in low resolution of the render), thats why we change the light type to Sun (currenty its Point).
Select Lamp (or any object you're using for lighting) and go to Object Data section and under Lamp subsection select Sun (I didn't select it in image, because it will change icon of Object Data, which would led to confusion).
Image 11
Now it's up to you to properly position and rotate shadow. You should end up with something similiar to this:
Image 12
If you now render image, you can see, that shadow, althrought rightly positioned, doesn't have any opacity. We can easily fix this by selection Plane we created for shadow receiver, go to it's Material, scrolling down to Transparency section, checking it, and changing Alpha value, I left it at about 0.5, it looked just about right.
Image 13
Result so far:
Image 14
Step 4 - Rotation
Now we need to actually create rotating spritesheet from this object. We will do so by creating Animation.
But, before we do so, If your object is made from more smaller objects, you need to join them into one transform group, so you only need to rotate one object.
Add Empty (Add > Empty > Plain Axes), move it to center of your object, deselect it, select all your objects to be rotated and, as last object, select newly created Empty. Now press [Ctrl] + [P], popup will appear at your mouse. Select Object (Keep Transform).
Image 15
Rotating Empty will now rotate every object under it.
Step 4.1 - One image
If you need only one image, you can now rotate empty to fit your needs.
Step 4.2 - Rotating spritesheet
Now, we're entering the more complicated stuff.
First we need to move to frame 0. You can do so in Timeline (bottom part of screen in default layout), by changing frame number to 0.
Image 16
Now press , new popup will show, select Rotation. This will create basic keyframe with object aligned with axis, which is easier for editing.
Now move to frame 1, rotate object to face upwards (regarding camera), by going into Object section of Empty. In Transform subsection, change Z Rotation to 45. Press again and select Rotation. This will be first frame of spritesheet.
Image 17
Decide what will be your frame count, I chose 64, same count as for example car in Factorio. Enter the frame count to End field in Timeline.
Next, move to one frame after the last (65 in this case). We're doing this, because if we set last frame (64) to be completly rotated, there would be two frames of object facing up in the spritesheet.
Now change object Rotation Z to -315, press and select Rotation.
Image 18
Rotation is now complete. But if you try to play it, it doesn't rotate at constant speed! Thats because Blender is making it smooth.
To fix this, we need to open Graph Editor. With Graph Editor focued, press [A] (lines should be bold now), then press [Shift] + [E], small popup will appear, select Linear Extrapolation.
Image 19
Animation should now be object rotating at constant speed.
Step 5 - Creating spritesheet
This part is quite complicated and can't be done using regular Blender functions, but some awesome guy actually made addon named Spritfy for this:
http://wiki.blender.org/index.php/Exten ... r/Spritify
You need to have ImageMagick installed (You may need to restart blender after installing it).
To install this plugin, download .py file from link above, open File > User Preferences, go to Addons section and click on Install from file... , find downloaded spritify.py and select it.
Image 20
Plugin will appear in addons list, find it using search bar at top left and enable it.
Image 21
Click on Save User Settings and close dialog. Spritfy subsection should be now visible under Render section.
Image 22
The interface is pretty self-explanatory... but you won't have the File count section visible.
This should be ok for most cases, but with bigger image resolution, problem arises. Factorio can't load images with width or height bigger than 2000px.
You will need to split your spritesheet to multiple smaller spritesheets. Thats why I had to create modification to original script, that adds the File count option:
http://cerno.ch/~kamen/upload/spritify.py
Instalation and controls of modified version is same as original, only difference is the File count option.
Now, all you need to do is render animation:
Image 23
and spritesheet (s) will be automatically created (if not, click on Generate Sprite Sheet button).
Downloads
factorio_render.blend - Example blender file (created using this guide)
spritify.py - Updated version of spritify allowing creation of multiple files
!
