How to create tiles

From Post-Apocalyptic RPG wiki

Jump to: navigation, search

Established workflow.png This article covers an established workflow.

Established workflows have been discussed among and agreed upon by the development department(s). They should serve as documentation how these workflows are successfully utilized in the project.


This tutorial is intended to show how to make a simple ground tile in Blender. I presume you more or less already know your way around Blender, its interface and how basic stuff works, like materials, rendering and camera settings.

Contents

Important note

The current tutorial was written for creating 70*36px legacy tiles. We've later switched to int * (72*36px) size for tiles so these sizes are officially supported at this point:

  • 72*36px
  • 144*72px
  • 216*108px
  • 288*144px
  • 360*180px
  • etc.

This article has NOT been updated to reflect the new agreed upon tilesize yet. Any Blender user is encouraged to update this article to work with the new tilesize standards.

Needed Stuff

First we need a square tileable, seamless texture. Around 150x150 pixels big should do well enough. You can get such textures online or make them yourself. In case you get them from the Internet, be sure to check the texture's license so it's compatible with PARPG. Anyway, here is an example of a useful texture.

Simple Tile Dirt.png

Next, we will need the PARPG Rendering setup, which is a Blender file used to make sprites out of 3d models. You can get the file here. There is (will be) also a wiki article explaining the Rendering setup, what stuff it contains and how to use it. You can grab the latest rendering setup for Blender from SVN: http://parpg-svn.cvsdude.com/parpg/trunk/media/blender/rendering_setup_01.blend

In Blender

So, open the Blender file and let's begin. Create a plane at default location and with no rotation. The default plane Blender creates is 2BU x 2BU big (BU=Blender Unit). We need 1BU x 1BU, so resize the plane. Now unwrap the plane, and give it a material with the square texture we have. Here are the settings I used:


Simple Tile Texture Settings.png


It's very important you lower the Filter value from 1.0 to 0.1. This value tells Blender how much it should blur the texture and we don't want any (otherwise the final tile sprite won't show the details as there are on the texture).

Also, be sure to map the texture to UV in the Map Input panel.

Camera and Rendering Settings

A basic tile sprite in PARPG is (surprisingly!) 1 tile big, that is 1x1. All objects / tile sprites that fit into 1 tile, should use the Camera 1x1 as the active camera. If it's not active already, do this by selecting it and pressing ctrl+0 (the 0 on the numpad that is).

A Basic tile sprite size in PARPG is 72x72 pixels, so set these values in the rendering setting. In addition, pick the Key and RGB settings as on the image below. Key and RGB are only enabled when rendering terrain tiles. Why is that, I'll explain in the next section.

Simple Tile Render Settings.png

Anyway, now that we have all the settings set, render the tile and save the image. This is what you should get:

Simple Tile Tile.png

The resulting tile should have 2px on each corner and a size of 72x36px. If that's not the case you may have set a wrong size in the rendering setup or used the wrong sampling filter.

In GIMP / Photoshop

When it comes to tile sprites, we want them to have sharp borders, i.e. no anti-aliasing, otherwise they wouldn't fit properly together in a grid (you'd have noticeable seams). However, you do want to have the anti-aliasing effect on the rest of the tile, so it doesn't look like a blob of pixel noise. Blender doesn't know how to anti-alias the inner part of a tile and leave the edges sharp (with no anti-aliasing). This is why we used the settings Key and RGB in the previous step. This way we ended with a tile sprite that is anti-aliased in the middle and with sharp edges. The only problem is, it has a black background.

The remaining thing to do is to open the tile sprite in an image editor and remove this black background and make it transparent. So instead of

Simple Tile Tile.png

we end up with

Simple Tile Final Tile.png

And this is something we can now use in PARPG. The end.

Not Really the End

This is just one of the ways to make a tile. Here we used a simple plane with a texture. However, we could also model the surface we'd like to have, for example concrete slabs, or metal panels and what not. In addition, details can be added as 3d models, e.g. small stones or we could even use a particle emiter, to make grass strands.

Simple Tile Example1.png
Simple Tile Example2.png
Simple Tile Example3.png
Personal tools