Article – Using Custom Images in MediaTracker

Written by Alcator. 

This article describes in detail how to work with custom images (JPG ones) in MediaTracker.

It has two main chapters: The first one describes what happens with an image after it has been placed into the MediaTracker clip, the second tells you how to prepare an image for inclusion in a MediaTracker clip.

When you place an image…

Images are placed using the “Image” block type. When you place an image into a MT clip you can see a black and gray checkered flag appear in the middle of your view.

Pic 1 Pic 2

Now, depending on your screen resolution, this flag may have a slightly different look, but in virtually every possible configuration, it will be a rectangle. The ratio of its sides (width-to-height) will be the same as the ratio of your resolution (such as 1024×768, or, which is my case on my widescreen 16:10 notebook, 1280:800), and the size of the rectangle will be exactly one-quarter by one-quarter of the display’s resolution (so, in my case of 1280×800, it will always be 320×200).

Next, you click on the “Browse” button (represented by three dots “…”) on the “Image” line of the properties panel and select one of the images you have prepared in the right folder (more on that later).

Now the actual dimensions of your image become important.

Your image is either a square or a rectangle. If it is a square, it will completely fill the “quarter by quarter” area previously occupied by the “checkered flag” (which means the square will become distorted into a rectangle (!)).

However, if it is not a perfect square, things will happen.

Let’s first assume that your image is a 2:1 rectangle (i.e. it is twice as wide as it is high, such as 200 width and 100 height). The game understands this in the following way: the image was CUT from a square (200 by 200 in the example), and since square would be displayed as “quarter by quarter” rectangle, this cut image must be displayed in proportional way – it must be cut from “quarter by quarter” rectangle in the ratio of the two sides.

In other words, an image that is originally 200×100 will (on my display) look like a 320 x 100 pixels rectangle – so from the original 2:1 ratio it will be widened into 3.2:1 ratio.

The following picture shows the situation for a classic 4:3 displays (such as 1024×768 or 1600×1200). On the left side you see a schematic display divided into four width and height segments; the size at which images will initially appear is shown in red – that’s the “quarter by quarter” area. On the right, the red area is copied four times, and four different “file sizes” are shown as they appear after being inserted. As you can see, no matter what dimensions the file has, they are NOT kept (or, their ratio is not kept) after inserting. Luckily, you can always correct any distortion using the X and Y size of the Image block.

Pic 3

Once you have an image in-game, you can do pretty much the same things as with textual blocks – you can resize it, set its opacity (transparency), rotate it etc. However, you have to be aware of the fact that you don’t know what width-to-height ratio of the screen other players have – some have 4:3, some have 16:10 and some may have 16:9 or even 2.25:1 (very wide screen); this means that if on your 4:3 screen, a square is distorted into 320×240 and you try to negate this distortion by setting X and Y sizes to 1.2 and 1.6 (because 320×1.2 is equal to 240×1.6), it may look like a square on your display, but it WON’T look like one on MY display (because I have 16:10 ratio).

Some values, however, will always work: X/Y size of 4 will, for a square image, result in the respective side being large from one edge of the screen to the other. X/Y position of +/- 0.75 will, for the default size of a square image, cause it to touch the respective edge of the screen.

Pic 4

That’s all there is to it for simple JPG images; should you wish to use transparent images (such as to create rounded corners or holes in them), you will need to convert them to DDS files, which is beyond the scope of this article.

How to prepare an image for insertion into MT

The preparations have 3 steps:

  1. Create the image file – JPG works.
  2. Upload the file to a direct-link capable file-hosting (or personal) web. I recommend FileDen.com; photobucket may object if the image is not a photo.
  3. Create a locator file in [Documents]/Trackmania United/MediaTracker/Images/ directory.

Let’s go through the steps one by one.

The creation of the JPEG file is quite simple; if you don’t have any expensive software for manipulating files, do it as I do: Create the image as BMP in Paintbrush, then use IrfanView (a powerful freeware program) to convert it to 100% quality JPG; or you may use Gimp, which is also powerful and free, although IrfanView has more Windows-like controls.

Uploading the file is also quite simple – you simply register on a file hosting service like fileDEN and after logging in, you upload the file. After that, you get “Direct URL” – that’s the important “code” you need to store (I suggest creating a text file to which you’ll write the URL’s of all your uploaded images so you can quickly find them in case you need to re-use them (as a sign or otherwise)).

This is what the list of all files on fileDEN looks like:

Pic 5

Clicking the marked button will bring the details:

Pic 6

The “URL” is the linking code you need:

Pic 7

Creating the locator file works like this:

Open a simple text editor (not Word! use Notepad if you don’t have anything better). Copy the Direct link URL on the first line and save the file. The name under which you save it is important. If the image filename is “BigArrow.JPG”, then the filename of the locator file will be BigArrow.JPG.loc:

Pic 8

The file must be placed in the previously mentioned “…/MediaTracker/Images/” directory.

Re-run TrackMania; after you do so you will be able to find the image after clicking on “…” in the MediaTracker editor of the Image block.

Pic 9

And that’s it!

You’ve just learned how to work with images!

Advertisements

5 Responses to Article – Using Custom Images in MediaTracker

  1. TimeBreaker says:

    damn, we still ned to make locators? i hoped nadeo has changed that since tmn..

    nice article, maybe the explanation about the resolution was too much and useless, simply say that you can correct the image size with X and Y

  2. Jozii says:

    Stupid question: what are locators and how do I make them?

  3. alcator says:

    Jozii, what are locators: They are (basically) text files which tell the game where on the internet can it locate certain “resource” – such as an image, music file etc. Locator file for resource XYZ.jpg has the name XYZ.jpg.loc (similarly for mux files with music), and contains on the first line the URL (~ web adress) of the resource. So if you’ve posted the XYZ.jpg on your private website alcator.org in the trackmania subfolder, the locator file will contain
    http://alcator.org/trackmania/XYZ.jpg and will be named XYZ.jpg.loc

    Create the locator in any simple text editor like Notepad or PSPad.

    ===

    TB: Actually, the explanation about resolution is very important, since some players have 4:3 ratio and some have 16:10 and it’s NOT possible to ensure that your image looks exactly the same on either display; what looks like a square to you will NOT look like a square to me.

  4. Jozii says:

    Thanks, Alcator 😀

  5. alcator says:

    There’s a demo track that shows a useful image-usage:

    http://united.tm-exchange.com/main.aspx?action=trackshow&id=480361#auto

    🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: