<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<script type="text/javascript" language="JavaScript">
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
if ((parseInt(navigator.appVersion) == 4) && (navigator.appName == "Netscape")) {
origWidth = innerWidth;
origHeight = innerHeight;
onresize = reDo;
}
onerror = null;
</script>
<style type="text/css">
< !-- div.WebHelpPopupMenu {
position: absolute;
left: 0px;
top: 0px;
z-index: 4;
visibility: hidden;
}
p.WebHelpNavBar {
text-align: right;
}
-->
</style>
<script type="text/javascript">
gRootRelPath = "../../..";
gCommonRootRelPath = "../../..";
gTopicId = "9.2.14.0_10";
<script type="text/javascript" src="../../../template/scripts/rh.min.js"></script>
<script type="text/javascript" src="../../../template/scripts/common.min.js"></script>
<script type="text/javascript" src="../../../template/scripts/topic.min.js"></script>
<script type="text/javascript" src="../../../template/scripts/topicwidgets.min.js"></script>
<script type="text/javascript" src="../../../whxdata/projectsettings.js"></script>
<link rel="stylesheet" type="text/css" href="../../../template/styles/topic.min.css"/>
<link rel="stylesheet" type="text/css" href="../../../template/Charcoal_Grey/topicheader.css"/>
<meta name="topic-status" content="Draft"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>clickable_add</title>
<meta name="generator" content="Adobe RoboHelp 2019"/>
<link rel="stylesheet" href="../../../assets/css/default.css" type="text/css"/>
<meta name="rh-authors" content="Mark Alexander"/>
<meta name="topic-comment" content="Reference page for clickable_add"/>
<meta name="rh-index-keywords" content="clickable_add"/>
<meta name="search-keywords" content="clickable_add"/>
</head>
<body>
<div class="topic-header rh-hide" id="rh-topic-header" onclick="rh._.goToFullLayout()">
<div class="logo">
</div>
<div class="nav">
<div class="title" title="clickable_add">
<span>clickable_add</span>
</div>
<div class="gotohome" title="Click here to see this page in full context">
<span>Click here to see this page in full context</span>
</div>
</div>
</div>
<div class="topic-header-shadow rh-hide" id="rh-topic-header-shadow"></div>
<h1>clickable_add</h1>
<p>With this function you can create a custom, clickable, icon that acts as a "button" outside of the game canvas, but within the browser window itself. The function will return an id value which must be stored in a variable to be used in all
further button functions that reference the new icon. This function is very useful to prevent the browser creating a pop-up window when clicking on the button as it is all done through GameMaker Studio 2 itself.</p>
<p>You must first set the position, which is relative to the (0,0) of the browser window (top left corner) and then give the texture page entry for the sprite you wish the button icon to have (see: <a href="../Asset_Management/Sprites/Sprite_Information/sprite_get_tpe.htm"><tt>sprite_get_tpe()</tt></a>).
You can then specify either a URL to open or a script (from the Asset Browser of GameMaker Studio 2) to be opened or run. The "target" parameter that you specify is the same as the standard JavaScript "name" value when you
use the <tt>open()</tt> method (be aware that all but '_self' may result in the browser blocking, or asking the user if they wish to allow it) and the "params" argument is the same as the JavaScript "specs" parameter for
controlling what properties the new window/tab should display (not all browsers may support all features). If you are using the icon to run an internal script, these last two arguments can be left as empty strings "".</p>
<p>Valid targets are:</p>
<p> </p>
<table>
<tbody>
<tr>
<th>Target</th>
<th>Description</th>
</tr>
<tr>
<td>_blank</td>
<td>Opens the linked document in a new window or tab.</td>
</tr>
<tr>
<td>_self</td>
<td>Opens the linked document in the same frame as it was clicked (this is default).</td>
</tr>
<tr>
<td>_parent</td>
<td>Opens the linked document in the parent frame.</td>
</tr>
<tr>
<td>_top</td>
<td>Opens the linked document in the full body of the window.</td>
</tr>
</tbody>
</table>
<p> </p>
<p>Valid parameters are:</p>
<p> </p>
<table>
<tbody>
<tr>
<th>Parameters</th>
<th>Description</th>
</tr>
<tr>
<td><b>'height=[</b>px<b>]'</b></td>
<td>The height of the window, with the minimum value being 100.</td>
</tr>
<tr>
<td><b>'width=[</b>px<b>]'</b></td>
<td>The width of the window, with the minimum value being 100.</td>
</tr>
<tr>
<td><b>'left=[</b>px<b>]'</b></td>
<td>The left position of the window.</td>
</tr>
<tr>
<td><b>'top=[</b>px<b>]'</b></td>
<td>The top position of the window (IE only).</td>
</tr>
<tr>
<td><b>'location=[</b>boolean<b>]'</b></td>
<td>Whether or not to display the address field (default is 1).</td>
</tr>
<tr>
<td><b>'menubar=[</b>boolean<b>]'</b></td>
<td>Whether or not to display the menu bar (default is 1).</td>
</tr>
<tr>
<td><b>'resizable=[</b>boolean<b>]'</b></td>
<td>Whether or not the window is resizable (default is 1).</td>
</tr>
<tr>
<td><b>'scrollbars=[</b>boolean<b>]'</b></td>
<td>Whether or not to display scroll bars (default is 1).</td>
</tr>
<tr>
<td><b>'status=[</b>boolean<b>]'</b></td>
<td>Whether or not to add a status bar (default is 1).</td>
</tr>
<tr>
<td><b>'titlebar=[</b>boolean<b>]'</b></td>
<td>Whether or not to display the title bar. This is ignored unless the calling application is an HTML Application or a trusted dialog box (default is 1);</td>
</tr>
<tr>
<td><b>'toolbar=[</b>boolean<b>]'</b></td>
<td>Whether or not to display the browser toolbar (default is yes).</td>
</tr>
</tbody>
</table>
<p><br/> It is also worth noting that if the URL argument you pass in is the name of a <a href="../../GML_Overview/Script_Functions.htm">script function</a> (ie: it doesn't start with "http://") AND the script is called <tt><b>gmcallback_*</b></tt> then you can get direct feeds into an html5 event. GameMaker Studio 2 script function names are <i>not</i> obfuscated if they begin with <tt>gmcallback_</tt>.</p>
<p> </p>
<h4>Syntax:</h4>
<p class="code">clickable_add(x, y, tpe, url, target, params);</p>
<table>
<tbody>
<tr>
<th>Argument</th>
<th>Description</th>
</tr>
<tr>
<td>x</td>
<td>The x position within the <i>window</i>.</td>
</tr>
<tr>
<td>y</td>
<td>The y position within the <i>window</i>.</td>
</tr>
<tr>
<td>tpe</td>
<td>The texture page entry for the sprite to be used.</td>
</tr>
<tr>
<td>url</td>
<td>The URL (website address) to link to, or the script to be run.</td>
</tr>
<tr>
<td>target</td>
<td>This is the target area to open the URL in (see description).</td>
</tr>
<tr>
<td>params</td>
<td>The various parameters for the icon (see description).</td>
</tr>
</tbody>
</table>
<p> </p>
<h4>Returns:</h4>
<p class="code">Real</p>
<p> </p>
<h4>Example:</h4>
<p class="code">home_but = clickable_add(32, 32, sprite_get_tpe(spr_MS_Home, 0), "http://macsweeney_games.com", "_blank", "width=700, height=500, menubar=0, toolbar=0, scrollbars=0");</p>
<p>The above code creates a clickable DOM icon at the position (32, 32) of the page that the game canvas is running on. The icon uses the sprite referenced from the texture page as "spr_MS_Home" and when clicked the icon will open a new window
for the specified URL and with the defined properties for that window.</p>
<p> </p>
<p> </p>
<p> </p>
<div class="footer">
<div class="buttons">
<div class="clear">
<div style="float:left">Back: <a href="Web_And_HTML5.htm">Web And HTML5</a></div>
<div style="float:right">Next: <a href="clickable_add_ext.htm">clickable_add_ext</a></div>
</div>
</div>
<h5>© Copyright YoYo Games Ltd. 2020 All Rights Reserved</h5>
</div>
</body></html>