Creating graphics for Illarion

Introduction

The purpose of this page is to give basic instructions on how to create graphics for Illarion should you be interested in helping us out. Remember, Illarion is a free game and was build from scratch by unpaid university students. We're unable to offer any remuneration to your work besides credit and much appreciation. (It also makes a nice portfolio piece!)

Graphics in Illarion are typically created using 3D modelling software such as Maya or Blender. With specific rendering settings, camera angles and lighting position, images of the 3D graphic are rendered as PNG image and cropped out to then be implemented into the game. All these steps will be given to you with this page.

Content

• Image sizes and orientation
• Result image specifications
• Configuration instructions for 3D modelling applications
  • Autodesk Maya 2009

Image sizes and orientation

In general, the weight in bytes of an image is unimportant. However, the size and width must absolutely fit the width of a tile in Illarion (see below image).

When rendering a tile in your 3D modelling application without anti-aliasing, every pixel of the outline must fit this example. If it does, your camera settings are correct. These settings will be explained below for most popular 3D-applications. The space between two levels in the game is exactly 111 pixels (three the height of one tile).

Result image specifications

The output image that is supposed to be used in the client has to meet a few specifications. First of all it is needed that the image is cut to perfect fit. So all rows or columns that consist of transparent pixels around the image must be cut off. The only exception are animations and variations.

A graphic can either contain a animation or a variation. Either way there are multiple images showing the same image. Those images of one object need to have the same dimension, even if that results in images that are not cut to minimal size.

The resulting image itself, has to be a png that uses one of the following colorspace settings:

• 24bit color and 8bit alpha channel
• 24bit color
• 8bit greyscale and 8bit alpha channel
• 8bit greyscale

Configuration instructions for 3D modelling applications

Autodesk Maya 2009

Follow these instructions in order to set up a proper render scene in Autodesk Maya 2009:

1. In the main top menu, click on "Create", then select "Cameras", then select "Camera".
2. A camera will appear in the origin of your stage. Select it. (It should be selected by default)
3. In the smaller menu right above the scene, select "Panels" then select "Look though selected". You are now looking through the lens of the camera you selected (Feel free to rename it in the attributes selector on the right (CTRL+A)
4. In the smaller menu right above the scene, select "View", then "Predefined Bookmarks" and finally "Perspective" to set your camera at the default perspective position. Be sure not to move, rotate or pan your camera at this point. If you do by accident, simply go back into "View", "Predefined Bookmarks" and "Perspective" again.
5. On the right, in the attributes selector, find a tab that says "cameraShape1" (or the name of your camera followed by Shape). If you can not see said tabs, press CTRL+A to switch to the attribute editor.
6. In the cameraShape tab, scroll down the options until you find "Orthographic views". Press the little triangle next to it to reveal its settings.
7. The "orthographic" option should be unchecked by default. Check it if it's not. The Orthographic Width setting will light up so you can edit its value. Enter 5.7 as value then right-click on the text area where you wrote 5.7 and select "Lock Attribute". That makes it so you can not pan, rotate or move that camera anymore.

If you need to move the camera again, instead of unlocking the attribute and having to start all over again, simply right-click on the little camera icon right under the "View" menu and choose "perspective" or any other camera of your choice beside the one you've just set up.

Before you render however, or to preview what your object looks like in the "Illarion orthographic cam" (that you've just set up), simply right-click on the camera icon again and choose the camera you've set up again. It must be the selected one before you render.

Ensure to render your scene with the resolution of 320x240. At this resolution one default square on the Maya grid is the equivalent of an Illarion tile.

It is suggested that you use Maya Software with Production Quality to render. Also, depending on the cases, Maya's default "Box Filter" does a good job at anti aliasing jagged edges.

Thanks to Karl Salameh for these instructions.