RunUO Community

This is a sample guest message. Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

[Custom Art] Aligning Images Tutorial

otimpyre

Sorceror
Aligning images tutorial By:Otim Pyre 3/08/2011


Ultima Online images are called tiles. Because, in the game the are all aligned to fit together on a grid.Just like tiles of a kitchen floor. All images in ultima are based around the standard floor tile. They are all aligned and centered around this tile or on it. All floor tile canvases are 247x247 pixels the actual floor tile without the canvas is 44x44 pixels. The reason the sizes are different is Because, the game is Isometric, which is to say it is skewed or crooked.
All floor tiles in the game are rotated at a 45 degree angle
For creating new images the floor tile should be used as your base. However you can't always just paste images directly onto this tile. Because, the canvas is to small. That brings us to height. The height of images are a based on the wall image.In the game walls have a height of 20 this is considered to be the ceiling of a 1 story building. Stairs have a height of 5 so a stair case leading to a roof would consist of 4 stairs 4x5=20

o.FloorTile.png 5 Stair.png20 WallTile.png

Images can be aligned anywhere within the floor tile base and upward. I've colored a floor tile green & red to illustrate good, & bad.
GoodBad.png If your placed image is going to go higher the the green area

FloorTile.png Then your canvas will need to be taller as shown below

Stair.png If it exceeds the height more you have to increase you canvas size

WallTile.png So with this information I can use the images, color, and layers to align an image precisely prior to ever even seeing it in the game. I will show you a template you can use to get that custom image right where I want it.

By overlapping a floor tile with a wall tile I can get a visual reference to place my image. I've used colors only for teaching. Again the red region is no mans land. Everywhere else is usable. Placing an image higher above the floortile in the air will make it appear to float.Examples of floating objects would be like reward banners and such. Placing an image above the wall will make it crash into rooftops or bleed through ceilings if you were to use the image decorating indoors.

Alignment.png My Template.
I then create a new layer to receive the new image I want to align.
I take the image I want to align and isolate it by itself using magic wand> invert selection> copy>
I then paste as new selection over my template on the new layer. Like so moving it into the spot
I want.
Almost.png I can now visually see how it will be aligned in game its dead center and it won't bleed through the ceiling.
Now I select the background layer AKA my template and fill it with the color
TRUE WHITE RBG 255 255 255 or HTML #FFFFFF
Or
RBG 0 0 0 or HTML #000000 TRUE BLACK which the game will read as invisible.
And now my image is complete ready to be installed into my art.mul
Finally.png That concludes the alignment tutorial. Hope this was useful.
 
Top