I had fixed the spelling and layout mistakes, but Blogger re-aranged everything so you'll just have to read around them.
When I was trying to work out how to make manialinks, the problem I came across was I couldn't work out what <frame> & <quads> were. There were no tutorials explaining HOW to put the manialink together, only what commands to use.
In this tutorial I will show you how to make a BASIC manialink using the new "Forever" elements introduced in TMUF(Trackmania United Forever).
I will show you how to use the <frame> and the <quad> to make a basic page, with a button to download a track.
OK, before you start, you will need the following:
KLF_manialinkeditor: Here
A web host (I recommend "000webhost.com")
Trackmania United Forever:)
It also helps to know a little bit of XML.
First, you need to open klf_manialinkeditor.
Up the top left, there is a button called 'Preview' this is used to view your manialink in TM.
Now, a manialink page consists of frames and quads. Frames are a thin line in a square shape. When you add a quad to the Frame, it fills in the area inside the frame, so you can see it. This is what your Manialink is built on. Look at the picture below to see what I mean.
Click Here
If you understand what I mean, continue. If not, I recommend to keep reading it and try to understand, and do a google search on what they are.
Now, first, we type in the XML heading for the manialink.(below) Type it into klf_manialinkeditor exactly the same as shown:
<?xml version="1.0" encoding="utf"-8" ?>
Next, we have to tell Trackmania what type of XML we're using. So type the opening tag:
'<manialink>'
This tells TM the XML is in a manialink format.
Ok, this is what we have so far:
<?xml version="1.0" encoding="utf"-8 ?>
<manialink>
Next we have to start a frame. Frames always come before quads, so type this:
<frame posn="0 0 0">
This might look complex at first sight, but it isn't. Let's break it down.
The 'frame' is telling TM to display a frame. You can't see it, because it is invisible until you add a quad to it. I'll show you this later. This is why you use quads. (I'll show you that next).
The "posn="0 0 0" is telling TM what position to put the frame in. The 1st "0" is the X-axis, or how far left or right the frame is positioned on your screen.
At "0" the frame is around the center of your screen. When you go into the negatives (e.g. -50) it would move the frame more to the left. +50 would move the frame more to the right.
The 2nd "0" is the Y-axis, or how far up or down the frame is on your screen. At "0" it's around the center of your screen.
If the number is in the positives, it'll go further up on your screen, and in the negatives, down.
The 3rd "0" is the Z-axis, or how near or far the frame is. At "0" it's at the normal placement in the Z-axis. If you go into the negatives, it'll go further back, and if it gets into the positives, it'll come closer.
To end the frame, you type '</frame>' this tells TM that it's the end of the frame so you can have multiple frames without them getting mixed up. This is hard to explain so here's an example:
<?xml version="1.0" encoding="utf-8" ?> -This tells TM what version of XML it's using.
<manialink> -This tells TM it's a Manialink document.
<frame posn="0 0 0"> -This tells TM what position to put the frame in.
<quad posn="0 0 0" sizen="20 20" style="Bgs1InRace" substyle="BgWindow2"/> -This tells TM what to do with the quad.
</frame> -This ends the frame.
</manialink> -This ends the Manialink document.
OK, so now it's time to add the frame we made to our manialink:
<?xml version="1.0" encoding="utf"-8 ?>
<manialink>
<frame posn="0 0 0">
We now need to add some stuff inside the frame so we can see it.
This is where "quads" come in. Here is what a typical quad looks like:
<quad posn="0 0 0" sizen="20 20" style="Bg1InRace" substyle="BgWindow2"/>
Let's have a closer look.
Quad's are a single line tag, they start and end on the same line, unlike the frame tag which carries over multiple lines.
The 'quad posn="0 0 0"' is the same as the <frame posn="0 0 0">, as it changes the X, Y, and Z axis of the quad.
The 'sizen="0 0"' changes the size of the quad. The 1st "0" is the X-axis, and the 2nd "0" is the Y-axis.
The 'style="Bgs1InRace"' tells TM to use the styles under "Bgs1InRace". It's how TM lists the styles.
The 'substyle="BgWindow2"' Is the TYPE of style that is listed under "Bgs1InRace".
To illustrate this, look at the picture:
Click Here
Note: The Z-axis is used for layers. For example if you wanted a quad on top of another quad, you would increase the Z-axis so it appears on top.
The same if you want it behind another quad. You would decrease the Z-axis, and the quad would appear behind the other.
------------------------------------------------------------------------------------------------------------
OK, so now we put this together.
<?xml version="1.0" encoding="utf"-8 ?>
<manialink>
<frame posn="0 0 0">
<quad posn="0 0 0" sizen="0 0" style="Bgs1InRace" substyle="BgWindow2"/>
But we need to change the size of the quad so we can see it!
To do that, go to 'sizen="0 0"', and change size by typing how high and wide you want it to be with the X and Y axis .
Remember, X is the 1st "0", Y is the 2nd "0", and Z is the 3rd "0".
Now, so you can see what you've done, we have to 'close' the XML document.
To do this, you have to add the </frame> and </manialink> tag.
When you have the '/', it means you are ending the commands.
So your manialink document should look like this now:
<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<frame posn="0 0 0">
<quad posn="0 0 0" sizen="0 0" style="Bgs1InRace" substyle="BgWindow2"/>
</frame>
</manialink>
Then press "preview" up the top of the klf_manialinkeditor.
It should open up TM and show you a preview of your manialink.
If you haven't changed the size, you'll see nothing, because the quad's size is 0x0!
So change it if you haven't already.(i.e set them to 20x20.)
OK, now I want you to muck around with the X,Y, and Z axis so you can see what they do.
Keep in mind, you won't see any difference with the Z axis because you have nothing overlapping your quad. Try making lots of different quads and overlap them. Look at the following code to see what I mean:
<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<frame posn="0 0 0">
<quad posn="0 0 0" sizen="20 20" style="Bgs1InRace" substyle="BgWindow2"/>
</frame>
<frame posn="10 -15 0">
<quad posn="0 0 0" sizen="20 20" style="Bgs1InRace" substyle="BgWindow2"/>
</frame>
<frame posn="-10 15 0">
<quad posn="0 0 0" sizen="20 20" style="Bgs1InRace" substyle="BgWindow2"/>
</frame>
</manialink>
You may have noticed that when you move the frames, the quads move with them. This is handy if you have heaps of tags inside a single frame, and you wanted to move all of them to another place on your screen.
----------------------------------------------------------------------------------------------------------------
Now it's time to add some text!
Text comes in tags called 'label'. This is what some text would look like:
<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<frame posn="0 0 0">
<quad posn="-30 25 0" sizen="60 40" style="Bgs1InRace" substyle="BgWindow2"/>
<label posn="-16 8 0" scale="2" text="Look at this text!"/>
</frame>
</manialink>
OK, lets have a closer look:
<label posn="-16 8 0" scale="2" text="Look at this text!"/>
The 'label posn="-16 8 9"' is, again, the position of the text. You know, X, Y, and Z axis.
The 'scale="2"' is the size of the text.
The 'text="Look at this text!"', is the text itself.
Copy my example and try changing the text, size, and position of it.
----------------------------------------------------------------------------------------------------------------------
Now, I think it's time to explain what the difference is between a Manialink and a Maniacode.
Manialinks are the basic page you see when you browse the manialinks in TM's in-game browser.
Maniacodes are little XML documents that tell TM to execute things, like when you download a track.
We will study Maniacodes later in this tutorial.
Now we have a little manialink with some text. So now is the time to decide if you want to charge Coppers (Trackmania's virtual money) for your tracks and things on your manialink.
To do so, we have to make a maniacode to download and install a track, and a link that links to the maniacode from the manialink.
I guess this is not that clear at first, so have a look at the next picture:
Click Here
OK so now we need a link to download a track. Here is an example:
<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<frame posn="0 0 0">
<quad posn="-50 30 0" sizen="100 50" style="Bgs1InRace" substyle="BgWindow2"/>
<label posn="-20 -8 0" scale="1.5" text="Download Track!" style="CardButtonMedium" manialink="put link to the maniacode here"/>
</frame>
</manialink>
As you can see here, I have changed the style of the text. It's style is 'CardButtonMedium'.
There are lots of styles, but I have chosen this one for the example.
You may also notice, in the label tag, there is a word called 'manialink="put link to the maniacode here"'.
This is just a link to another Maniacode or Manialink.
Inside the "", it has 'put link to the maniacode here'. I have put that in there, because we have no link to the Maniacode that will download the track.
In a few minutes, we'll make a maniacode and finish the link, so don't worry about it at the moment.
I have also changed the scale of the text, and typed 'Download Track!' so people who see your manialink, will know to click that button to download your track.
Soooooooo... now we need to make a maniacode, because there is no way to download a track through your manialink without it.
Here is an example of a maniacode that downloads a track:
<?xml version="1.0" encoding="utf-8" ?>
<maniacode>
<install_track>
<name>Your Track's name</name>
<url>Your Track's URL</url>
</install_track>
</maniacode>
Now, as far as I know, there is no way to test a maniacode. So make sure you have typed it out the right way!
The maniacode is quite simple.
Here is what it means:
<maniacode> = Tells TM that this xml document is in Maniacode format.
<install_track> = Tells TM to install the track.
<name>Track's name</name> = Tells TM the tracks name.
<url>Track's URL</url> = Tells TM where to find your track on the internet, because everything that you download off a manialink has to be on the internet. Which is why you use a web host.
</install_track> = Tells TM to end the command.
</maniacode> = Tells TM that it's the end of the maniacode.
So when you've typed that out (or copied it if you're lazy), you have to find the track that you want to put on your manialink.
Follow these steps:
#1. Get your track.
#2. Go to your web host.
#3. Upload the track.
#4. Open a new tab, and type your domain name in the search bar at the top of the browser.
#5. Once you have found your index of your stuff on the Internet, right click on the track's name.
#6. When the little window opens up, click 'Copy link location'.
#7. Open up your maniacode that you have typed out.
#8. Put the link that you copied in this part of your maniacode: <url>Your Track's URL</url>
#9. Now put the name of your track in this part of your maniacode: <name>Your Track's name</name>
#10. Save your maniacode!(in klf manialink editor).
---------------------------------------------------------------------------------------------------------------------------------
You now should have the following:
Your Manialink document,
Your Maniacode document.
Now, when you are surfing manialinks, and you find a track you want to download, what would you do if there were no picture of the track? You wouldn't download it
because for all you know, it could be an awful track!
So you should put a screenshot of your track on your manialink.
Here is what it would look like:
<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<frame posn="0 0 0">
<quad posn="-50 30 0" sizen="100 50" style="Bgs1InRace" substyle="BgWindow2"/>
<label posn="-20 -12 0" scale="1.5" text="Download Track!" style="CardButtonMedium" manialink="dm7"/>
<quad posn="-25 18 1" sizen="50 30" image="http://manialink.net76.net/ScreenShot81bb.jpg"/>
<quad posn="-47.5 28 2" sizen="95 8" style="Bgs1InRace" substyle="BgTitle3_4"/>
<label posn="-10 28 3" scale="3" sizen="10 10" text="$i$s$000Drifter"/>
</frame>
</manialink>
This is a working manialink, as my link to download the track 'Drifter' works. (BTW, my track costs 7 coppers...)
Have a look at what I have done with this example:
<?xml version="1.0" encoding="utf-8" ?>
<manialink>
<frame posn="0 0 0">
<quad posn="-50 30 0" sizen="100 50" style="Bgs1InRace" substyle="BgWindow2"/>
<label posn="-20 -12 0" scale="1.5" text="Download Track!" style="CardButtonMedium" manialink="dm7"/> I have put a working link in the manialink command.
<quad posn="-25 18 1" sizen="50 30" image="http://manialink.net76.net/ScreenShot81bb.jpg"/> I have put a URL to a screenshot i have uploaded to my web host.
<quad posn="-47.5 28 2" sizen="95 8" style="Bgs1InRace" substyle="BgTitle3_4"/> I added another quad to make it look nice. It's the green area above the picture.
<label posn="-10 28 3" scale="3" sizen="10 10" text="$i$s$000Drifter"/> I have added text on top of the green quad. Also notice, I have formatted it with Itallics, Shadow, and made the words black.
</frame>
</manialink>
IMPORTANT!!! Make sure you save your work as you go! There is nothing worse than hours of work down the drain with a click of the mouse button!!!
Ok you should have this now:
Manialink with link to download your track. (You can copy mine and mess with it if you want)...
Maniacode to download and install your track.
Your track(.GBX)
A picture of your track(.jpg)
-------------------------------------------------------------------------------------------------------------------
Now is the hardest part - Putting it all together!
Follow these steps carefully: (keep in mind that I'm using 000webhost.com, because it works very well. Some things may be different with other hosts).
#1. Go to your web host.
#2. Upload your Track, and the picture of your track.
#3. Open a new tab, and type your domain name in the search bar at the top. You should find your domain index.
#4. Click on the the picture link on your index.
#5. Go up to the top of your browser, and copy the url.
#6. Put the url in your MANIALINK, where I put mine. Make sure you save it. DO NOT PUT IT IN YOUR MANIACODE! I want to make that clear, so you don't get mixed up.
#7. Upload your MANIACODE to the web host.
#8. Go to your domain index, and click refresh so you can see the latest stuff you just uploaded.
#9. Open a new tab, and google TM Player Page. Here's a link if you can't find it: (link goes here).
#10. Sign in with your TM account(your username and password).
#11. On the bottom left, you'll see a button that says 'Manialinks/Maniacodes'
#12. Now you have to register your MANIACODE with Nadeo(the guys that made Trackmania).
#13. Go to this tutorial that shows how to do it: (put the link here).
#14. Now get your MANIALINK, and open it up in klf_manialinkeditor.
#15. Put the CODE of your MANIACODE in the link, like mine. Have another look if you have forgotten.
#16. Upload your MANIALINK to your web host.
#17. Now register your MANIALINK with Nadeo, like when you did the MANIACODE. But remember to tick 'Manialink' instead of 'Maniacode'.
#18. If you have done everything EXACTLY how I said, open up Trackmania.
#19. Go to the in-game browser.
#20. Type in the code that was assigned to your MANIALINK.
-------------------------------------------------------------------------------------------------
If you've done everything right, your manialink should open up in you in-game browser.
Always check all buttons and stuff work correctly on your manialink before you advertise it.
Also, check out my manialink! Type 'dml2' in the in-game browser.
Here's a few ways to advertise your manialink:
In your name! Type this in the profile section, under your name: $h[the code to your manialink]Your name$h
On TMX track exchange.
On the back of your car :)
In your description(under profile in TrackMania).
I hope this tutorial helped you. Thanks for reading :)
