https://wiki.multitheftauto.com/wiki/Introduction_to_Scripting_the_GUI_-_Part_3?feed=atom&action=historyIntroduction to Scripting the GUI - Part 3 - Revision history2024-03-28T09:06:47ZRevision history for this page on the wikiMediaWiki 1.39.3https://wiki.multitheftauto.com/index.php?title=Introduction_to_Scripting_the_GUI_-_Part_3&diff=60326&oldid=prevSurge at 22:21, 5 November 20182018-11-05T22:21:52Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:21, 5 November 2018</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l287">Line 287:</td>
<td colspan="2" class="diff-lineno">Line 287:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:GUI_Tutorials]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:GUI_Tutorials]]</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[hu:Introduction to Scripting the GUI - Part 3]]</ins></div></td></tr>
</table>Surgehttps://wiki.multitheftauto.com/index.php?title=Introduction_to_Scripting_the_GUI_-_Part_3&diff=39776&oldid=prevQaisjp: Undo revision 39775 by Qais (talk)2014-06-08T01:07:40Z<p>Undo revision 39775 by <a href="/wiki/Special:Contributions/Qais" title="Special:Contributions/Qais">Qais</a> (<a href="/wiki/User_talk:Qais" class="mw-redirect" title="User talk:Qais">talk</a>)</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:07, 8 June 2014</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l287">Line 287:</td>
<td colspan="2" class="diff-lineno">Line 287:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:GUI_Tutorials]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:GUI_Tutorials]]</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[Category:Tutorials]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
</table>Qaisjphttps://wiki.multitheftauto.com/index.php?title=Introduction_to_Scripting_the_GUI_-_Part_3&diff=39775&oldid=prevQaisjp at 01:07, 8 June 20142014-06-08T01:07:04Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:07, 8 June 2014</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l287">Line 287:</td>
<td colspan="2" class="diff-lineno">Line 287:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:GUI_Tutorials]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:GUI_Tutorials]]</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Category:Tutorials]]</ins></div></td></tr>
</table>Qaisjphttps://wiki.multitheftauto.com/index.php?title=Introduction_to_Scripting_the_GUI_-_Part_3&diff=22258&oldid=prevR3mp at 01:53, 8 January 20102010-01-08T01:53:21Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:53, 8 January 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l14">Line 14:</td>
<td colspan="2" class="diff-lineno">Line 14:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>We will be using '''absolute''' position values.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>We will be using '''absolute''' position values.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>As noted in <del style="font-weight: bold; text-decoration: none;">the </del>[[<del style="font-weight: bold; text-decoration: none;">Introduction to Scripting the GUI</del>|Previous <del style="font-weight: bold; text-decoration: none;">tutorial</del>]], all the GUI must be made client side. </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>As noted in [[<ins style="font-weight: bold; text-decoration: none;">:Category:GUI_Tutorials</ins>|Previous <ins style="font-weight: bold; text-decoration: none;">tutorials</ins>]], all the GUI must be made client side. </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>If you are following on from that tutorial, open up your gui.lua file to work with.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>If you are following on from that tutorial, open up your gui.lua file to work with.</div></td></tr>
</table>R3mphttps://wiki.multitheftauto.com/index.php?title=Introduction_to_Scripting_the_GUI_-_Part_3&diff=22254&oldid=prevR3mp at 01:44, 8 January 20102010-01-08T01:44:51Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:44, 8 January 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l283">Line 283:</td>
<td colspan="2" class="diff-lineno">Line 283:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>At this point, you should have a basic teleport window, allowing the player to teleport to any of the 3 major cities in San Andreas.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>At this point, you should have a basic teleport window, allowing the player to teleport to any of the 3 major cities in San Andreas.</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">For further help with GUI, see the [[:Category:GUI_Tutorials|GUI tutorials]].</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:GUI_Tutorials]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:GUI_Tutorials]]</div></td></tr>
</table>R3mphttps://wiki.multitheftauto.com/index.php?title=Introduction_to_Scripting_the_GUI_-_Part_3&diff=22253&oldid=prevR3mp at 01:41, 8 January 20102010-01-08T01:41:35Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:41, 8 January 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l4">Line 4:</td>
<td colspan="2" class="diff-lineno">Line 4:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Note that this tutorial builds on content covered in the [[Introduction to Scripting the GUI|GUI Scripting Introduction]].'''</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Note that this tutorial builds on content covered in the [[Introduction to Scripting the GUI|GUI Scripting Introduction]].'''</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Image:Gui_teleport_tutorial.PNG|thumb|GUI Teleport Window]]</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Making the GUI==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Making the GUI==</div></td></tr>
</table>R3mphttps://wiki.multitheftauto.com/index.php?title=Introduction_to_Scripting_the_GUI_-_Part_3&diff=22250&oldid=prevR3mp: Created page with ''''Introduction to Scripting the GUI - Part 3 (Teleport Window)''' In this tutorial we will make a simple city teleport window, with 3 buttons (one for each city) that when clic…'2010-01-08T01:38:09Z<p>Created page with ''''Introduction to Scripting the GUI - Part 3 (Teleport Window)''' In this tutorial we will make a simple city teleport window, with 3 buttons (one for each city) that when clic…'</p>
<p><b>New page</b></p><div>'''Introduction to Scripting the GUI - Part 3 (Teleport Window)'''<br />
<br />
In this tutorial we will make a simple city teleport window, with 3 buttons (one for each city) that when clicked will teleport you to that city.<br />
<br />
'''Note that this tutorial builds on content covered in the [[Introduction to Scripting the GUI|GUI Scripting Introduction]].'''<br />
<br />
==Making the GUI==<br />
<br />
===Getting set up===<br />
The first thing we need to do is create our GUI elements.<br />
For this tutorial we will be using one [[Element/GUI/Window|window]], three [[Element/GUI/Button|buttons]] and one [[Element/GUI/Text_label|label]].<br />
We will be using '''absolute''' position values.<br />
<br />
As noted in the [[Introduction to Scripting the GUI|Previous tutorial]], all the GUI must be made client side. <br />
<br />
If you are following on from that tutorial, open up your gui.lua file to work with.<br />
<br />
If you are not, browse to /Your MTA Server/mods/deathmatch/resources/myserver/ directory, and create a folder named "client". <br />
Under /client/ directory, create a text file and name it "gui.lua".<br />
<br />
If you have not already done so, do not forget to include the new gui.lua file in the meta.xml of the main resource, and label it as a client script:<br />
<syntaxhighlight lang="xml"><br />
<script src="client/gui.lua" type="client" /><br />
</syntaxhighlight><br />
<br />
===Making the window===<br />
In this file we will now write a funtion that creates the window.<br />
To create a window we will use [[guiCreateWindow]]:<br />
<syntaxhighlight lang="lua"><br />
-- create the function that will hold our gui creation code<br />
function createTeleportWindow()<br />
-- get the screen width and height<br />
local sWidth, sHeight = guiGetScreenSize()<br />
<br />
-- create the window, using some maths to find the centre of the screen<br />
local Width,Height = 231,188<br />
local X = (sWidth/2) - (Width/2)<br />
local Y = (sHeight/2) - (Height/2)<br />
<br />
-- create the window<br />
teleportWindow = guiCreateWindow(X,Y,Width,Height,"City Teleporter",false)<br />
<br />
-- stop players from being able to resize the window<br />
guiWindowSetSizable(teleportWindow,false)<br />
end<br />
</syntaxhighlight><br />
This will create a basic window in the centre of the screen that cannot be resized, with the title "City Teleporter".<br />
<br />
===Making the label===<br />
Next, we will add the label describing what the buttons do.<br />
To create a label we will use [[guiCreateLabel]]:<br />
<br />
'''Note that we are now writing more code for our existing 'createTeleportWindow' function. This is not a new function and is meant to replace what you already have.'''<br />
<syntaxhighlight lang="lua"><br />
function createTeleportWindow()<br />
local sWidth, sHeight = guiGetScreenSize()<br />
<br />
local Width,Height = 231,188<br />
local X = (sWidth/2) - (Width/2)<br />
local Y = (sHeight/2) - (Height/2)<br />
<br />
teleportWindow = guiCreateWindow(X,Y,Width,Height,"City Teleporter",false)<br />
<br />
guiWindowSetSizable(teleportWindow,false)<br />
<br />
-- create a label with our instructions on<br />
teleportLabel = guiCreateLabel(18,23,191,33,"Click a button to teleport to that location",false,teleportWindow)<br />
<br />
-- set the horizontal alignment of the label to center (ie: in the middle of the window)<br />
-- also note the final argument "true" <br />
-- this turns on wordwrap so if your text goes over the edge of the label, it will wrap around and start a new line automatically<br />
guiLabelSetHorizontalAlign(teleportLabel,"center",true) <br />
end<br />
</syntaxhighlight><br />
You will now have a simple window with some centered instructions at the top.<br />
<br />
===Making the buttons===<br />
Now we need to add the city teleport buttons.<br />
To create a button we will use [[guiCreateButton]]:<br />
<br />
'''Note that we are now writing more code for our existing 'createTeleportWindow' function. This is not a new function and is meant to replace what you already have.'''<br />
<syntaxhighlight lang="lua"><br />
function createTeleportWindow()<br />
local sWidth, sHeight = guiGetScreenSize()<br />
<br />
local Width,Height = 231,188<br />
local X = (sWidth/2) - (Width/2)<br />
local Y = (sHeight/2) - (Height/2)<br />
<br />
teleportWindow = guiCreateWindow(X,Y,Width,Height,"City Teleporter",false)<br />
<br />
guiWindowSetSizable(teleportWindow,false)<br />
<br />
teleportLabel = guiCreateLabel(18,23,191,33,"Click a button to teleport to that location",false,teleportWindow)<br />
<br />
guiLabelSetHorizontalAlign(teleportLabel,"center",true) <br />
<br />
-- create the button for teleporting to Los Santos<br />
teleportButtonLS = guiCreateButton(18,63,195,35,"Los Santos",false,teleportWindow)<br />
<br />
-- slightly below that, create another button for teleporting to San Fierro<br />
teleportButtonSF = guiCreateButton(18,103,195,35,"San Fierro",false,teleportWindow)<br />
<br />
-- slightly below that again, create another button for teleport to Las Venturas<br />
teleportButtonLV = guiCreateButton(18,143,195,35,"Las Venturas",false,teleportWindow) <br />
<br />
-- hide the gui<br />
guiSetVisible(teleportWindow,false)<br />
end<br />
</syntaxhighlight><br />
<br />
===Using the function we wrote===<br />
Now our 'createTeleportWindow' function is ready, but it wont do anything until we call it.<br />
It is recommended to create all GUI when the client resource starts, hide them, and show them to the player later when needed. <br />
<br />
Therefore, we'll write an event handler for [[onClientResourceStart]] to create the window:<br />
<syntaxhighlight lang="lua"><br />
-- add our event handler, using the root element of the resource<br />
-- this means it will only trigger when its own resource is started<br />
addEventHandler("onClientResourceStart", getResourceRootElement(getThisResource()), <br />
function ()<br />
-- call the createTeleportWindow function to create our gui<br />
createTeleportWindow()<br />
end<br />
)<br />
</syntaxhighlight><br />
Now that we have our GUI created, we need a way for the players to open the window.<br />
<br />
===Opening the GUI===<br />
There are several ways this could be done, depending on your personal preference or the particulars of the situation.<br />
For this tutorial, we will use a simple [[addCommandHandler|command]].<br />
<br />
To open the GUI, we will use the command /teleportme :<br />
<syntaxhighlight lang="lua"><br />
-- create our function<br />
function openTeleportWindow()<br />
-- show the window<br />
guiSetVisible(teleportWindow,true)<br />
<br />
-- show the mouse cursor<br />
showCursor(true,true)<br />
end<br />
<br />
-- define the command /teleportme to call the openTeleportWindow function<br />
addCommandHandler("teleportme",openTeleportWindow)<br />
</syntaxhighlight><br />
Next, we need to make the buttons actually teleport the player.<br />
<br />
==Scripting the button==<br />
<br />
Now that we have created our GUI and the players are able to open it, we need to make it work. <br />
<br />
===Detecting the click===<br />
As described in previous tutorials, when the player clicks on any part of the GUI, the event "onClientGUIClick" will be triggered for the GUI component you clicked on. <br />
With that in mind, we will attach an event handler to each of our 3 teleport buttons: <br />
<syntaxhighlight lang="lua"><br />
-- attach the event onClientGUIClick to teleportButtonLS and set it to trigger the 'teleportPlayer' function<br />
addEventHandler("onClientGUIClick", teleportButtonLS, teleportPlayer, false)<br />
<br />
-- attach the event onClientGUIClick to teleportButtonSF and set it to trigger the 'teleportPlayer' function<br />
addEventHandler("onClientGUIClick", teleportButtonSF, teleportPlayer, false)<br />
<br />
-- attach the event onClientGUIClick to teleportButtonLV and set it to trigger the 'teleportPlayer' function<br />
addEventHandler("onClientGUIClick", teleportButtonLV, teleportPlayer, false)<br />
</syntaxhighlight><br />
Put this code into your 'createTeleportWindow' function, '''after''' the buttons have been created.<br />
<br />
Note how we have set all 3 buttons to trigger the 'teleportPlayer' function.<br />
<br />
This allows us to easily expand our code later on (for example, to add more teleport locations) with a simple if statement in the function.<br />
<br />
===Managing the clicks===<br />
Now that we can detect clicks on all our buttons, we need to manage what happens when we do.<br />
<br />
As we just noted, we will do this using the 'teleportPlayer' function.<br />
We will use if statements to check which button has been clicked, then trigger a custom server event with the specified teleport coordinates to move the player:<br />
<syntaxhighlight lang="lua"><br />
-- create our function, and add button and state parameters (these are passed automatically with onClickGUIClick)<br />
function teleportPlayer(button,state)<br />
-- if our button was clicked with the left mouse button, and the state of the mouse button is up<br />
if button == "left" and state == "up" then<br />
-- if the player clicked on the LS teleport button<br />
if source == teleportButtonLS then<br />
<br />
-- trigger the server with our Los Santos coordinates<br />
triggerServerEvent("movePlayerToPosition",getLocalPlayer(),1479.6,-1612.8,14.0,0)<br />
<br />
-- output a message to the player<br />
outputChatBox("Welcome to Los Santos!")<br />
<br />
-- otherwise, if the player clicked on the SF teleport button<br />
elseif source == teleportButtonSF then<br />
<br />
-- trigger the server with our San Fierro coordinates<br />
triggerServerEvent("movePlayerToPosition",getLocalPlayer(),-2265.5,534.0,35.0,270)<br />
<br />
-- output a message to the player<br />
outputChatBox("Welcome to San Fierro!")<br />
<br />
-- otherwise, if the player clicked on the LV teleport button<br />
elseif source == teleportButtonLV then<br />
<br />
-- trigger the server with our Las Venturas coordinates<br />
triggerServerEvent("movePlayerToPosition",getLocalPlayer(),2036.9,1545.2,10.8,270)<br />
<br />
-- output a message to the player<br />
outputChatBox("Welcome to Las Venturas!")<br />
<br />
end<br />
<br />
-- hide the window and all the components<br />
guiSetVisible(teleportWindow, false)<br />
<br />
-- hide the mouse cursor<br />
showCursor(false) <br />
end <br />
end<br />
</syntaxhighlight><br />
<br />
<br />
If you wanted to add more locations, you could simply add a new button to your GUI and check for it in this function using another if statement.<br />
For example:<br />
<syntaxhighlight lang="lua"><br />
function teleportPlayer(button,state)<br />
if button == "left" and state == "up" then<br />
...<br />
<br />
elseif source == yourNewButton then<br />
triggerServerEvent("movePlayerToPosition",getLocalPlayer(),xCoord,yCoord,zCoord,rotation)<br />
end<br />
...<br />
end<br />
end<br />
</syntaxhighlight><br />
<br />
===Creating the serverside event===<br />
At this point we now have all the code needed on the client side, <br />
so open up your serverside 'script.lua' file (from the [[Scripting Introduction|Introduction to Scripting]]) or another suitable serverside file to work with.<br />
<br />
<br />
On the clientside, we are triggering the server event "movePlayerToPosition". So, we will first define that event.<br />
To do that we will use [[addEvent]], then [[addEventHandler]]:<br />
<syntaxhighlight lang="lua"><br />
-- create our function, with the x,y and z values we passed from the client<br />
function moveThePlayer(x,y,z)<br />
<br />
end<br />
<br />
-- define our custom event, and allow it to be triggered from the client ('true')<br />
addEvent("movePlayerToPosition",true)<br />
-- add an event handler so that when movePlayerToPosition is triggered, the function moveThePlayer is called<br />
addEventHandler("movePlayerToPosition",root,moveThePlayer)<br />
</syntaxhighlight><br />
<br />
===Moving the player===<br />
Now all that is left is to move the player to their new position.<br />
<br />
'''Note that we are now writing more code for our existing 'moveThePlayer' function. This is not a new function and is meant to replace what you already have.'''<br />
<syntaxhighlight lang="lua"><br />
-- create our function, with the x,y and z values we passed from the client<br />
function moveThePlayer(x,y,z,rotation)<br />
-- check we have a position and rotation<br />
if x and y and z and rotation then<br />
-- get the players current skin, so we can spawn them again without losing it<br />
local skin = getElementModel(client)<br />
<br />
-- spawn the player<br />
spawnPlayer(client,x,y,z,rotation,skin)<br />
<br />
-- make sure the players camera is on his character<br />
setCameraTarget(client,client)<br />
end<br />
end<br />
</syntaxhighlight><br />
Note the use of [[spawnPlayer]] rather than, for example, [[setElementPosition]].<br />
Using [[spawnPlayer]] has several advantages, such as being able to set the position when 'de-spawned' or dead, and automatically refilling health.<br />
Of course, [[setElementPosition]] would work just as well to simply move them, so the choice is yours.<br />
<br />
Also note the use of the variable "client", it's an internal variable used by MTA to identify the player who triggered the event.<br />
<br />
<br />
At this point, you should have a basic teleport window, allowing the player to teleport to any of the 3 major cities in San Andreas.<br />
<br />
[[Category:GUI_Tutorials]]</div>R3mp