Creating a 2D game using planes with textures

Questions & Answers
1

Hey,

We are in the process of looking at the possibility of switching over to the Unity game engine for our next game. The game is going to be an isometric 2D game.

I’ve been doing a bit of research but it doesn’t seem like there is much to go from. The biggest question in mind right now is what the best way is of working with 2D images and then texturing them onto planes to give the effect of a 2D sprite? Will you need to work at specific dimensions for the images when texturing them onto a plane surface?

I’ve been playing around with it a bit but it’s giving some weird problems. First of all, say I have an image from the game like this:

balloon

Importing it into Unity gives some odd artifacts in the image, like so:

alt text

So the question is, how do you use 2D images on planes to create the effect of a 2D sprite? And why do we get these weird flaws and artifacts on imported images?

2

What you see in your texture is to be expected.

First, the distortion comes from the fact that Unity scales your texture’s resolution to the nearest power of two, for performance, and for quality (mipmapping will only work for power-of-two textures). If you do want to prevent this (which might be desired if you are really just doing 2D and want to display your textures at a pixel-perfect 1:1 resolution), set the texture to “GUI” instead of “Texture” in the import settings (i.e., in the inspector, after you selected your texture).

Secondly, what you see around the balloon are just the RGB values of your fully transparent pixels. Contrary to popular belief (and apparently, the who Photoshop world), fully transparent pixels do have an RGB value, and this value is important and cannot be ignored. For example, if all these pixels are fully white (or any other color), you will get pixel errors from interpolation, e.g., when using mipmapping.

As these pixels are 100% transparent (In the preview window there is a small RGB-icon. Click on it to toggle between displaying the RGB and the Alpha channel), it is generally irrelevant what RGB color they have - except for the problems I mentioned above.

To answer the rest of your question, it is quite simple to create a pixel-correct 2D-scroller in Unity. Use an orthographic camera, and set the orthographic size of your camera to half the desired vertical size of your viewport in worldcoordinates. Then place your 2D objects parallel to the camera at arbitrary distances. See any 2D game tutorials for further details.

EDIT: One more thing: The size and size distortion is not really relevant. You can map any texture of any size to a plane of your desired proportions (in your example, the plane could be 133x207, or 1.33x2.07, or something similar). The only disadvantage is that you might get interpolation problems (=slightly blurry images) if your texture resolution is too small, or one axis has much higher resolution than the other. For example, if you scale your image outside Unity to say 1024x32, it will still display correctly and undistorted when you apply it to a 133x207 sized plane. But the X resolution is wasted, since your original X resolution was much smaller, and the image will look quite blurry in Y direction, because your Y-resolution is now only 32.