{"id":23476,"date":"2015-12-16T12:52:34","date_gmt":"2015-12-16T20:52:34","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=23476"},"modified":"2015-12-16T12:52:34","modified_gmt":"2015-12-16T20:52:34","slug":"build-your-own-game-levels-with-cointime","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/build-your-own-game-levels-with-cointime\/","title":{"rendered":"Build Your Own Game Levels with CoinTime"},"content":{"rendered":"<p>\t\t\t\tCreating a game requires many different skill sets, from programmers who write the code dealing with movement, animation, collisions, and scoring, to designers who draw the artwork and build the levels to play.\u00a0Our <a href=\"http:\/\/developer.xamarin.com\/samples\/mobile\/CoinTime\/\">CoinTime sample<\/a> demonstrates both aspects of game development: you can browse the CocosSharp C# code to learn how cross-platform 2D game development works, and you can also view and edit the levels.<\/p>\n<p>Today, I&#8217;m going to quickly cover how to create and edit game levels in CoinTime, so you can do some holiday hacking with our <a href=\"https:\/\/blog.xamarin.com\/indie-game-developers-get-xamarin-for-free\/\">free Xamarin subscriptions for indie game developers<\/a>\u00a0and create your own playable game without <em>any<\/em> programming at all! Before you start, download\u00a0<a href=\"http:\/\/developer.xamarin.com\/samples\/mobile\/CoinTime\/\">CoinTime<\/a>\u00a0and get it running on your iOS or Android device or simulator. Note that it&#8217;s much easier to play on a real device, as the left-right and jump controls are designed for two-handed play. They are invisible, but work as shown in the screenshot below.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-23498\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/CoinTime1-1024x507.png\" alt=\"CoinTime1\" width=\"650\" height=\"322\" \/><\/p>\n<p>Follow these steps to create and edit levels in <b>CoinTime<\/b>:<\/p>\n<h2>1. Locate the level files<\/h2>\n<p>Now that you&#8217;ve got the game running, find the level data files in the solution. They are in <code>\/CoinTime\/Assets\/Content\/levels\/<\/code> and are named <b>level0.tmx<\/b> through <b>level6.tmx<\/b>.<\/p>\n<h2>2. Add a new level<\/h2>\n<p>In the folder <code>\/CoinTime\/Assets\/Content\/levels\/<\/code>, you can edit the existing <b>level7.tmx<\/b> or duplicate and rename any of the existing levels. The levels <i>must<\/i> be sequentially numbered in order for the game engine to load them (so the next one would be <b>level8.tmx<\/b>, and so on).<\/p>\n<p>Now share the new level file in both platform projects. Go to the following directory in each project:<\/p>\n<ul>\n<li><b>Android<\/b>: <code>Assets\/Content\/levels\/<\/code><\/li>\n<li><b>iOS<\/b>: <code>Content\/levels\/<\/code><\/li>\n<\/ul>\n<p>Use <b>right-click &gt; Add &gt; Add Files&#8230;<\/b> to choose the new <b>level7.tmx<\/b> file. When prompted, choose to <b>Add a link to the file<\/b> (don&#8217;t copy it). Finally, set the <code>Build Action:BundleResource<\/code> on iOS and <code>Build Action:AndroidAsset<\/code> on Android.<\/p>\n<h2>3. Edit the new level<\/h2>\n<p>The level files can be edited with the donation-ware tool <a href=\"http:\/\/www.mapeditor.org\/\">Tiled (download for Mac and Windows)<\/a>. The screenshot below shows a custom &#8220;X&#8221; level that I&#8217;ve created in <b>Tiled<\/b>:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-23486\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/Screen-Shot-2015-12-15-at-4.23.25-PM-1024x715.png\" alt=\"Screen Shot 2015-12-15 at 4.23.25 PM\" width=\"750\" height=\"524\" \/><\/p>\n<p>Editing a level with <b>Tiled<\/b> follows these steps:<\/p>\n<ol>\n<li>Select from the <b>Layers<\/b> pad at the top-right (Background, Terrain, or Entities). You can check and un-check layers to show and hide them while editing. The currently <i>selected<\/i> layer is where tiles will be placed.<\/li>\n<li>Choose the tile you want to place from the <b>mastersheet<\/b> pad at the bottom-right. It contains all the background, terrain, and entity (player, coin, enemy, door) tiles you need. Use the scrollbars to see all of the tile options.<\/li>\n<li>The tile may optionally have custom properties, which will show in the left-side <b>Properties<\/b> pad when you select it in the mastersheet. Check the <b>Properties<\/b> pad as you select tiles in the <b>mastersheet<\/b>, especially for the <b>Entities<\/b> layer.<\/li>\n<li>Place the tile in the level designer. When drawing the background and terrain, you&#8217;ll need to place lots of tiles to fill in the level.<\/li>\n<\/ol>\n<p>Each layer has a special purpose in <b>CoinTime<\/b>, and you should only place tiles that belong in that layer:<\/p>\n<ul>\n<li><b>Background<\/b>: this layer scrolls behind the game play. Use the scenery tiles from the <b>mastersheet<\/b> in this layer.<\/li>\n<li><b>Terrain<\/b>: this is the layer that contains the ground and obstacles for the player to move around. Use ground tiles from the <b>mastersheet<\/b> (they have a custom property <code>SolidCollision:true<\/code>) and optionally add trees, fences, and other non-collision tiles for effect. To create a &#8216;trap&#8217;, use the spiky tile with custom property <code>EntityType:Spikes<\/code> in the mastersheet; if the player falls on them, the game will end.<\/li>\n<li><b>Entities<\/b>: this is where you place all of the coins to collect, enemies that can attack the player, a single player tile (indicating where the level will begin), and a pair of door tiles (where the level will end). Every tile that is placed in the Entities layer has a custom property so that the game engine code knows how to process it:\n<ul>\n<ul>\n<li><b>Player<\/b>: Check the <b>Properties<\/b> pad for the <code>EntityType:Player<\/code>.<\/li>\n<li><b>Coin<\/b>: Has <code>EntityType:Coin<\/code> custom property.<\/li>\n<li><b>Enemy<\/b>: Has <code>EntityType:Enemy<\/code>.<\/li>\n<li><b>Door<\/b>: The main tile has <code>EntityType:Door;YOffset:4<\/code>. When placing the door tile, also add the half-tile above it (<code>RemoveMe:True<\/code>).<\/li>\n<\/ul>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-23488\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/CoinTimeTiles.png\" alt=\"CoinTimeTiles\" width=\"350\" height=\"124\" \/><\/p>\n<ul>\n<ul>You can examine the existing level files to see how the different elements are used.<\/ul>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>4. Play your new level<\/h2>\n<p>Once you&#8217;ve saved the changes in <b>Tiled<\/b>, you should be able to run <b>CoinTime<\/b> and play your new level. Here&#8217;s my custom &#8220;X&#8221; level, <a href=\"https:\/\/github.com\/xamarin\/mobile-samples\/blob\/master\/CoinTime\/CoinTime\/Assets\/Content\/levels\/level7.tmx\">which is in the levels folder already<\/a>), to also try:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-23489\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/CointTimeX-1024x614.png\" alt=\"CointTimeX\" width=\"650\" height=\"390\" \/><\/p>\n<p>Breaking into game development may seem overwhelming, but <a href=\"https:\/\/developer.xamarin.com\/samples\/mobile\/CoinTime\/\">CoinTime<\/a> shows you just how easy it is to program\u00a02D games with CocosSharp\u00a0and allows you to create\u00a0your own levels without any programming experience.\u00a0<span style=\"line-height: 1.5\">You can edit all of the existing <\/span><b style=\"line-height: 1.5\">CoinTime<\/b><span style=\"line-height: 1.5\"> levels, or create as many new levels as you would like. Once you&#8217;re comfortable with editing levels, <a href=\"https:\/\/developer.xamarin.com\/guides\/cross-platform\/game_development\/cocossharp\/\">take a look at the CocosSharp C# game engine<\/a> to see how it works. Maybe your next hack can be adding squashable enemies or another game feature!<\/span>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a game requires many different skill sets, from programmers who write the code dealing with movement, animation, collisions, and scoring, to designers who draw the artwork and build the levels to play.\u00a0Our CoinTime sample demonstrates both aspects of game development: you can browse the CocosSharp C# code to learn how cross-platform 2D game development [&hellip;]<\/p>\n","protected":false},"author":570,"featured_media":23486,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4],"class_list":["post-23476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>Creating a game requires many different skill sets, from programmers who write the code dealing with movement, animation, collisions, and scoring, to designers who draw the artwork and build the levels to play.\u00a0Our CoinTime sample demonstrates both aspects of game development: you can browse the CocosSharp C# code to learn how cross-platform 2D game development [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/23476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/570"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=23476"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/23476\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=23476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=23476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=23476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}