<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<script type="text/javascript" language="JavaScript">
//<![CDATA[
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">/*<![CDATA[*/
< !-- div.WebHelpPopupMenu {
position: absolute;
left: 0px;
top: 0px;
z-index: 4;
visibility: hidden;
}
p.WebHelpNavBar {
text-align: right;
}
-->
/*]]>*/</style>
<script type="text/javascript">//<![CDATA[
gRootRelPath = "../../../..";
gCommonRootRelPath = "../../../..";
gTopicId = "9.2.5.8.0_3";
//]]></script>
<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>surface_create_ext</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 for surface_create_ext"/>
<meta name="rh-index-keywords" content="surface_create_ext"/>
<meta name="search-keywords" content="surface_create_ext"/>
</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="surface_create_ext">
<span>surface_create_ext</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>
<!--<div class="body-scroll" style="top: 150px;">-->
<h1>surface_create_ext</h1>
<p>This function allows you to attach a surface to a canvas element that already exists in your web page, meaning that you can effectively split up portions of your game to be drawn at various different places within the page. To that end, you <i>must</i> have defined the canvas element correctly within the <tt>*.html</tt> page of your game using the correct sizes and names that correspond to the surfaces you wish to create. So, you would have your "main" canvas, and then your secondary surface
canvas elements, which will be assigned using this function to the correct surfaces. The following image is an example of how a page with three canvas elements would be set up:</p>
<p><img alt="Multi canvas layour example" class="center" src="../../../../assets/Images/Scripting_Reference/GML/Reference/Drawing/surface_ext_1.png"/>The page layout can be tricky, especially if you wish all the elements to line up correctly, but once
the hard task of creating the layout has been completed, you can then add this <tt>html</tt> file as the default page file for the game using the <a href="../../../../Settings/Game_Options/HTML5.htm">HTML5 Tab</a> of the <a href="../../../../Settings/Game_Options.htm">Game Options</a>.
The next thing you should do is set up your room and views, as each surface will need to be associated with a specific view to "capture" the game images (see the view variable <a href="../../Cameras_And_Display/Cameras_And_Viewports/view_surface_id.htm"><tt>view_surface_id[0...7]</tt></a>).
The image below shows how the game room for the above canvas example would be set out:</p>
<p><img alt="Multi canvas layour example" class="center" src="../../../../assets/Images/Scripting_Reference/GML/Reference/Drawing/surface_ext_2.png"/>Finally you would then use this function to create the surfaces, with the name being the same as that
used for the canvas elements and the size corresponding to the size of that same canvas. The function will return the index of the surface which should be stored in a variable for future function calls. When the surface is first created, it may contain
"noise" as basically it is just an area of memory that is put aside for the purpose (and that memory may still contain information), so you may want to clear the surface before use with a function like <a href="../Colour_And_Alpha/draw_clear_alpha.htm"><tt>draw_clear_alpha()</tt></a>.</p>
<p class="note"><b>NOTE</b>: This function is only available for use with the HTML5 module.</p>
<p> </p>
<h4>Syntax:</h4>
<p class="code">surface_create_ext(name, w, h);</p>
<table>
<tbody>
<tr>
<th>Argument</th>
<th>Description</th>
</tr>
<tr>
<td>name</td>
<td>The name of the canvas element to link the surface to.</td>
</tr>
<tr>
<td>w</td>
<td>The width of the surface to be created.</td>
</tr>
<tr>
<td>h</td>
<td>The height of the surface to be created.</td>
</tr>
</tbody>
</table>
<p> </p>
<h4>Returns:</h4>
<p class="code">Real</p>
<p> </p>
<h4>Example:</h4>
<p class="code">s1 = surface_create_ext("surface1", 192, 550);<br/> s2 = surface_create_ext("surface2", 608, 186);<br/> view_surface_id[1] = s1;<br/> view_surface_id[2] = s2;</p>
<p>The above code creates two surfaces of different sizes, assigning each one to a different canvas element, and then those surfaces are assigned to two views so that the correct part of the room is captured.</p>
<p> </p>
<p> </p>
<p> </p>
<div class="footer">
<div class="buttons">
<div class="clear">
<div style="float:left">Back: <a href="Surfaces.htm">Surfaces</a></div>
<div style="float:right">Next: <a href="surface_resize.htm">surface_resize</a></div>
</div>
</div>
<h5>© Copyright YoYo Games Ltd. 2020 All Rights Reserved</h5>
</div>
<!-- KEYWORDS
surface_create_ext
-->
<!-- TAGS
surface_create_ext
-->
</body></html>