mirror of
https://github.com/Nimac0/SDL_Minigame
synced 2026-01-12 09:03:42 +00:00
198 lines
9.5 KiB
HTML
198 lines
9.5 KiB
HTML
<!-- HTML header for doxygen 1.10.0-->
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=11" />
|
|
<meta name="generator" content="Doxygen 1.13.2" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>VEGO-Engine: Building a map using Tiled and tmx and loading it</title>
|
|
<link href="tabs.css" rel="stylesheet" type="text/css" />
|
|
<script type="text/javascript" src="jquery.js"></script>
|
|
<script type="text/javascript" src="dynsections.js"></script>
|
|
<script type="text/javascript" src="clipboard.js"></script>
|
|
<script type="text/javascript" src="doxygen-awesome-darkmode-toggle.js"></script>
|
|
<script type="text/javascript">
|
|
DoxygenAwesomeDarkModeToggle.init()
|
|
</script>
|
|
<script type="text/javascript" src="doxygen-awesome-fragment-copy-button.js"></script>
|
|
<script type="text/javascript">
|
|
DoxygenAwesomeFragmentCopyButton.init()
|
|
</script>
|
|
<script type="text/javascript" src="doxygen-awesome-paragraph-link.js"></script>
|
|
<script type="text/javascript">
|
|
DoxygenAwesomeParagraphLink.init()
|
|
</script>
|
|
<script type="text/javascript" src="doxygen-awesome-interactive-toc.js"></script>
|
|
<script type="text/javascript">
|
|
DoxygenAwesomeInteractiveToc.init()
|
|
</script>
|
|
<link href="navtree.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="navtreedata.js"></script>
|
|
<script type="text/javascript" src="navtree.js"></script>
|
|
<script type="text/javascript" src="resize.js"></script>
|
|
<script type="text/javascript" src="cookie.js"></script>
|
|
<link href="search/search.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="search/searchdata.js"></script>
|
|
<script type="text/javascript" src="search/search.js"></script>
|
|
<link href="doxygen.css" rel="stylesheet" type="text/css" />
|
|
<link href="doxygen-awesome.css" rel="stylesheet" type="text/css"/>
|
|
<link href="doxygen-awesome-sidebar-only.css" rel="stylesheet" type="text/css"/>
|
|
<link href="doxygen-awesome-sidebar-only-darkmode-toggle.css" rel="stylesheet" type="text/css"/>
|
|
<link href="custom.css" rel="stylesheet" type="text/css"/>
|
|
</head>
|
|
<body>
|
|
<div id="top">
|
|
<!-- do not remove this div, it is closed by doxygen! -->
|
|
<div id="titlearea">
|
|
<table cellspacing="0" cellpadding="0">
|
|
<tbody>
|
|
<tr id="projectrow">
|
|
<td id="projectalign">
|
|
<div id="projectname">VEGO-Engine
|
|
<span id="projectnumber"> 0.1</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- end header part -->
|
|
<!-- Generated by Doxygen 1.13.2 -->
|
|
<script type="text/javascript">
|
|
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt MIT */
|
|
var searchBox = new SearchBox("searchBox", "search/",'.html');
|
|
/* @license-end */
|
|
</script>
|
|
<script type="text/javascript">
|
|
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt MIT */
|
|
$(function() { codefold.init(0); });
|
|
/* @license-end */
|
|
</script>
|
|
<script type="text/javascript" src="menudata.js"></script>
|
|
<script type="text/javascript" src="menu.js"></script>
|
|
<script type="text/javascript">
|
|
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt MIT */
|
|
$(function() {
|
|
initMenu('',true,false,'search.php','Search',true);
|
|
$(function() { init_search(); });
|
|
});
|
|
/* @license-end */
|
|
</script>
|
|
<div id="main-nav"></div>
|
|
</div><!-- top -->
|
|
<div id="side-nav" class="ui-resizable side-nav-resizable">
|
|
<div id="nav-tree">
|
|
<div id="nav-tree-contents">
|
|
<div id="nav-sync" class="sync"></div>
|
|
</div>
|
|
</div>
|
|
<div id="splitbar" style="-moz-user-select:none;"
|
|
class="ui-resizable-handle">
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
/* @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt MIT */
|
|
$(function(){initNavTree('md_docs_2md-pages_2tilemaps.html',''); initResizable(true); });
|
|
/* @license-end */
|
|
</script>
|
|
<div id="doc-content">
|
|
<!-- window showing the filter options -->
|
|
<div id="MSearchSelectWindow"
|
|
onmouseover="return searchBox.OnSearchSelectShow()"
|
|
onmouseout="return searchBox.OnSearchSelectHide()"
|
|
onkeydown="return searchBox.OnSearchSelectKey(event)">
|
|
</div>
|
|
|
|
<!-- iframe showing the search results (closed by default) -->
|
|
<div id="MSearchResultsWindow">
|
|
<div id="MSearchResults">
|
|
<div class="SRPage">
|
|
<div id="SRIndex">
|
|
<div id="SRResults"></div>
|
|
<div class="SRStatus" id="Loading">Loading...</div>
|
|
<div class="SRStatus" id="Searching">Searching...</div>
|
|
<div class="SRStatus" id="NoMatches">No Matches</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div><div class="header">
|
|
<div class="headertitle"><div class="title">Building a map using Tiled and tmx and loading it</div></div>
|
|
</div><!--header-->
|
|
<div class="contents">
|
|
<div class="textblock"><p><a class="anchor" id="autotoc_md28"></a></p>
|
|
<p>In order to create a map for your game the library has .tmx format support. In order to get .tmx files you use the associated tile editor "Tiled" which gets automatically downloaded when executing the VEGO libraries setup file (the installer is provided the installation itself must be finalized by the user). This section will walk you step by step through the creation of your first map/background using Tiled.</p>
|
|
<p>see also: <a href="https://doc.mapeditor.org/en/stable/manual/introduction/#getting-started">the official Tiled documentation</a></p>
|
|
<h2><a class="anchor" id="autotoc_md29"></a>
|
|
Getting started</h2>
|
|
<p>After opening Tiled, select "New Map", a custom size measured in tiles and as tile size select 32x32 as this is the size the library currently supports. Also choose the size of your canvas, it is recommended you choose the same size as the one you defined in the <a class="el" href="md_docs_2md-pages_2config.html">games config</a> (default is 25w x 20h, measured in tiles, to get the pixel size just multiply by 32 as that is the tilesize the library uses)</p>
|
|
<p><img src="Tiled1.jpg" alt="" width="50%" class="inline"/> </p>
|
|
<p><img src="Tiled2.jpg" alt="" width="50%" class="inline"/> </p>
|
|
<h2><a class="anchor" id="autotoc_md30"></a>
|
|
Create a New Tileset</h2>
|
|
<ol type="1">
|
|
<li>In the editor, go to the lower-right corner and select "New Tileset".</li>
|
|
<li>Give your tileset a name.</li>
|
|
<li>Make sure to select "Embed in map".</li>
|
|
<li>Choose your tilesheet as the source.</li>
|
|
<li>Leave the rest of the settings on default <img src="Tiled3.jpg" alt="" width="50%" class="inline"/> </li>
|
|
</ol>
|
|
<p><img src="Tiled4.jpg" alt="" width="50%" class="inline"/> </p>
|
|
<h2><a class="anchor" id="autotoc_md31"></a>
|
|
Draw Your Environment</h2>
|
|
<p>Once imported, you can select tiles from the tileset and use them to build your environment.</p>
|
|
<h2><a class="anchor" id="autotoc_md32"></a>
|
|
Understand Layers in Tiled</h2>
|
|
<p>Tiled allows you to use multiple layers for organizing your map.</p>
|
|
<p>You need to give your Layers seperate z-Indices to decide their rendering order, the lower the number the earlier it gets rendered. In order to do this:</p><ol type="1">
|
|
<li>Select a layer.</li>
|
|
</ol>
|
|
<ol type="1">
|
|
<li>Right-click "Custom Properties" and go to "Add Property".</li>
|
|
</ol>
|
|
<ol type="1">
|
|
<li>Add a new int property named "zIndex" and give it a number starting with 0 to decide when to render it (the lower the number the more the layer is in the background i.e. tiles on layer 0 will be covered by tiles on layer 1 if they occupy the same space).</li>
|
|
</ol>
|
|
<div class="image">
|
|
<img src="Tiled5.jpg" alt="" width="50%"/>
|
|
</div>
|
|
<p><b>Important: Tiles that should have collision must be placed on a separate layer as custom properties are per layer not per tile.</b></p>
|
|
<h2><a class="anchor" id="autotoc_md33"></a>
|
|
Set Up Collision</h2>
|
|
<p>To add collision to a layer:</p>
|
|
<ol type="1">
|
|
<li>Select the layer you want to have collision.</li>
|
|
</ol>
|
|
<ol type="1">
|
|
<li>Right-click and go to "Custom Properties".</li>
|
|
</ol>
|
|
<ol type="1">
|
|
<li>Add a new boolean property named "collision" and tick the checkbox.</li>
|
|
</ol>
|
|
<div class="image">
|
|
<img src="Tiled5.jpg" alt="" width="50%"/>
|
|
</div>
|
|
<p>Any tile placed on this layer will now automatically have collision—meaning moving entities cannot pass through them.</p>
|
|
<h2><a class="anchor" id="autotoc_md34"></a>
|
|
Saving your work</h2>
|
|
<p>After completeing your map, save it in the asset folder of the library (or any place really the asset folder just exists as a recommendation to easily find all of your maps and textures)</p>
|
|
<div class="image">
|
|
<img src="Tiled6.jpg" alt="" width="50%"/>
|
|
</div>
|
|
<h2><a class="anchor" id="autotoc_md35"></a>
|
|
Loading your work into the game</h2>
|
|
<p>The map gets loaded into the game in <code>GameImplementation.cpp</code>, simply add the path of the map .tmx file to the <a class="el" href="classMap.html">Map</a> constructor </p>
|
|
</div></div><!-- contents -->
|
|
</div><!-- PageDoc -->
|
|
</div><!-- doc-content -->
|
|
<!-- start footer part -->
|
|
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
|
|
<ul>
|
|
<li class="footer">Generated by <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen"/></a> 1.13.2 </li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|