CINXE.COM
Importing and using tilemaps · Kenney
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <title>Importing and using tilemaps · Kenney</title> <meta name='description' content=''> <meta name='keywords' content='Games, Software, Game assets, Assets, Gamedev'> <meta name='author' content='Kenney'> <link rel='stylesheet' type='text/css' href='https://www.kenney.nl/data/css/bootstrap-grid.min.css?1' /> <link rel='stylesheet' type='text/css' href='https://www.kenney.nl/data/css/fonts.css?1' /> <link rel='stylesheet' type='text/css' href='https://www.kenney.nl/data/css/kenney.css?1' /> <link rel='stylesheet' type='text/css' href='https://www.kenney.nl/data/css/kenney-sidebar.css?1' /> <link rel='stylesheet' type='text/css' href='https://www.kenney.nl/data/css/animate.min.css?1' /> <link rel='stylesheet' type='text/css' href='https://www.kenney.nl/data/css/code-github-dark-dimmed.css' /> <!-- OpenGraph !--> <meta property='og:url' content='https://www.kenney.nl/knowledge-base/game-assets-2d/importing-and-using-tilemaps' /> <meta property='og:type' content='article' /> <meta property='og:title' content='Importing and using tilemaps · Kenney' /> <!-- Meta !--> <meta name='twitter:card' content='summary_large_image'> <meta property='twitter:domain' content='kenney.nl'> <meta property='twitter:url' content='https://www.kenney.nl/knowledge-base/game-assets-2d/importing-and-using-tilemaps'> <meta name='twitter:title' content='Importing and using tilemaps · Kenney'> <meta property='og:image' content='https://www.kenney.nl/data/img/kenney-promo.png' /> </head> <body class='wrapper'> <a href='https://kenney.nl/donate' class='warning no-select'><img src='https://www.kenney.nl/data/img/sparkles.svg' height='20px' style='vertical-align: bottom; margin-right:0.25em' /> Our game assets are free because of <u>donations</u> from the community, consider one if you can!</a> <div id='header-container'> <div id='header'> <div class='logo-full mobile-show'> <a href='https://www.kenney.nl'><img src="https://www.kenney.nl/data/img/logo.png" srcset="https://www.kenney.nl/data/img/logo@2.png 2x"/></a> </div> <div class="navigation"> <ul> <li class='icon mobile-show'><a href='#' onclick="openNavigation()"><span><img width='20' height='20' style='vertical-align: middle;' src='https://www.kenney.nl/data/img/icons/menu.svg'/></span></a></li> <li class='logo mobile-hide'> <a href='https://www.kenney.nl'><img src="https://www.kenney.nl/data/img/logo.png" srcset="https://www.kenney.nl/data/img/logo@2.png 2x"/></a> </li> <div class='mobile-hide'> <li class='item '><a href='https://www.kenney.nl/games'><span>Games</span></a></li> <li class='item '><a href='https://www.kenney.nl/tools'><span>Tools</span></a></li> <li class='item '><a href='https://www.kenney.nl/assets'><span>Assets</span></a></li> <li class='item '><a href='https://www.kenney.nl/starter-kits'><span>Starter Kits</span></a></li> </div> </ul> </div> <div class="navigation right"> <ul class='mobile-hide'> <li class='icon'><a target='_blank' href='https://twitter.com/KenneyNL'><span><img style='vertical-align: middle;' src='https://www.kenney.nl/data/img/icons/twitter.svg'/></span></a></li> <li class='item '><a href='https://www.kenney.nl/donate'><span>Donate</span></a></li> </ul> </div> <div id="sidebar" class='sidebar' class='no-select'> <a href="javascript:void(0)" class="close" onclick="closeNavigation()">×</a> <div class="sidebar-menu"> <a href="https://www.kenney.nl/games">Games</a> <a href="https://www.kenney.nl/tools">Tools</a> <a href="https://www.kenney.nl/assets">Assets</a> <a href="https://www.kenney.nl/starter-kits">Starter Kits</a> </div> <hr> <div class="sidebar-menu small"> <a href="https://www.kenney.nl/support">Support</a> <a href="https://www.kenney.nl/knowledge-base">Knowledge Base</a> <a href="https://www.kenney.nl/donate">Donate</a> <a href="https://twitter.com/KenneyNL" target="_blank">Twitter</a> </div> </div> <div id="sidebar-notifications" class='sidebar lato no-select'> <a href="javascript:void(0)" class="close" onclick="closeNotifications()">×</a> <h3>News</h3> </div> <div style='clear:both'></div> </div> </div> <div id='content'> <section class='no-padding mobile-padding'> <div class='container narrow'> <div class='row'> <div class='col'> <div class='text-left'> <p class="link" style="font-size:0.9em; font-weight:bold"><a href="https://www.kenney.nl/knowledge-base/game-assets-2d"><span class="chevron-left"></span>Game assets (2D)</a></p> <div class='mobile-text-center'> <h1>Importing and using tilemaps</h1> <p class='tags horizontal-list'> <span>Guide</span> <span>January 6th, 2024</span> <span>1 min read</span> </p> </div> </div> <div class='article text-left text-content mobile-text-justify'> <span style='font-style:italic'><p><p>Many Kenney game assets come with tilemaps, sheets of sprites that are all in an uniform size. You can often find a <em>tilemap.txt</em> file included with the download which contains information on the tilesheet.</p></p></span> <ol id='headers-content' class='index'></ol> <p><h2 id="Tiled">Tiled</h2> <ul> <li>Select: <code>File</code> › <code>New</code> › <code>New Tileset...</code></li> <li>Select the tilemap image file</li> <li>Find the tile width, height and spacing values in the included <em>tilemap.txt</em> file</li> </ul> <h2 id="Construct">Construct</h2> <ul> <li>Right click › <code>Insert New Object</code></li> <li>Select the "Tilemap" component</li> <li>Click the folder icon and select the tilemap image file, then close the dialog</li> <li>Select the tilemap object</li> <li>Copy the tile width, height and spacing values (X and Y are the same) in the included <em>tilemap.txt</em> file</li> </ul> <h2 id="Unity">Unity</h2> <ul> <li>Add the tilemap image to your project</li> <li>Select the image, and select "Sprite (2D and UI)" as texture type</li> <li>Set sprite mode to "Multiple" and click the "Sprite Editor" button</li> <li>On the top of the new dialog click "Slice" and select "Grid By Cell Size" as type</li> <li>Copy the tile width, height and spacing values (X and Y are the same) in the included <em>tilemap.txt</em> file</li> <li>Click "Slice" and close the dialog</li> <li>Select: <code>Window</code> › <code>2D</code> › <code>Tile Palette</code></li> <li>Click "Create New Palette", then "Create" and select a folder to save</li> <li>Drag the tilemap sprite onto the palette and select a save folder</li> <li>Select: <code>GameObject</code> › <code>2D Object</code> › <code>Tilemap</code></li> <li>Set the grid size of the tilemap to the tile size divided by 100 (i.e. 16px = 0.16)</li> </ul></p> </div> </div> </div> </div> </section> <style> .tags{ font-family: 'Noto Sans', sans-serif; color: #00000075; } .index{ font-size:0.95em; border:1px solid #d3d7d9; border-radius:0.3em; padding:1em 3em; margin:2em 0; } .index li{ padding-left: 1.1em; } .index li::marker { font-weight:bold; color:#00000050; } .index li a{ color:#1d7abf; } .index li a:hover{ color:#262633; } .article a{ color:#1d7abf; } .article a:hover{ color:#262633; } .article h2{ font-size:1.75em; } .article h3{ font-size:1.2em; } .article h3:before{ content:'•'; color:#d3d7d9; padding-right:0.5em; margin-left:-0.5em; } </style> </div> <footer> <div class='row mobile-stack'> <div class='col horizontal-list'> <span>Copyright © 2010 - 2024 · All rights reserved</span> </div> <div class='col text-right mobile-text-center mobile-margin-top horizontal-list'> <a href='https://www.kenney.nl/support'>Support</a> <a href='https://www.kenney.nl/knowledge-base'>Knowledge Base</a> <a href='https://www.kenney.nl/privacy-policy'>Privacy Policy</a> <a href='https://www.kenney.nl/terms-of-service'>Terms of Service</a> </div> </div> </footer> <link rel='stylesheet' type='text/css' href='https://www.kenney.nl/data/css/lity.min.css' /> <script type='text/javascript' src='https://www.kenney.nl/data/js/mobile-menu.js'></script> <script type='text/javascript' src='https://www.kenney.nl/data/js/jquery.slim.min.js'></script> <script type='text/javascript' src='https://www.kenney.nl/data/js/lity.min.js'></script> <script type='text/javascript' src='https://www.kenney.nl/data/js/kenney.js'></script> <a style='display:none' rel="me" href="https://mastodon.gamedev.place/@kenney">Mastodon</a> </body> </html> <script> var header_id = $('.text-content > h2, .text-content > h3').map(function() { return this.id; }); var header_name = $('.text-content > h2, .text-content > h3').map(function() { return $(this).html(); }); var header_depth = $('.text-content > h2, .text-content > h3').map(function() { return $(this).prop('tagName'); }); var sub_open = false; var content = ""; for(var h = 0; h < header_id.length; h++){ if(header_depth[h] == 'H3' && !sub_open){ content += '<ol style="list-style-type:lower-alpha; margin-bottom:0; margin-left:-0.5em">'; sub_open = true; } if(header_depth[h] != 'H3' && sub_open){ content += '</ol>'; sub_open = false; } //$('#headers-content').append('<a href="#' + header_id[h] + '" class="' + header_class + '">' + header_name[h] + '</a><br>'); content += '<li><a href="#' + header_id[h] + '">' + header_name[h] + '</a></li>'; } $('#headers-content').append(content); if(header_id.length == 0){ $('#headers-content').hide(); } </script>