{"id":130,"date":"2019-06-29T12:02:53","date_gmt":"2019-06-29T12:02:53","guid":{"rendered":"http:\/\/www.missionctrlgames.com\/?p=130"},"modified":"2019-06-29T12:51:30","modified_gmt":"2019-06-29T12:51:30","slug":"pseudo-3d-tiles","status":"publish","type":"post","link":"http:\/\/www.missionctrlgames.com\/?p=130","title":{"rendered":"Pseudo-3D Tiles"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I&#8217;ve been asked how I created the 3D effect in my upcoming game, so I thought I&#8217;d write up a little explanation without going into too much detail.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The most important thing are the tiles themselves.  It&#8217;s a simple brick pattern. We only need the bricks on the edges of the tile, but they should be offset so opposite rows don&#8217;t line up. This will be important once we stack them. Also note the 1-pixel blue border around the edges of the tile.  This will be the mortar between one layer and the one below it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"128\" src=\"http:\/\/www.missionctrlgames.com\/home\/wp-content\/uploads\/2019\/06\/brickwall2.gif\" alt=\"\" class=\"wp-image-133\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now we create 3 layers of tiles, with a simple y-axis offset to simulate the height of the wall. The first and third layers are identical. But the trick here is to rotate the second layer so the bricks don&#8217;t line up and we get the alternating brick pattern. (This step is actually a lot more complicated and involves rotating, mirroring, and some other tricks. You may even want to consider a whole new set of tiles for the middle layer. But you get the general idea.)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"http:\/\/www.missionctrlgames.com\/home\/wp-content\/uploads\/2019\/06\/brickstack-1.gif\" alt=\"\" class=\"wp-image-140\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And here is the result for a whole level.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"370\" src=\"http:\/\/www.missionctrlgames.com\/home\/wp-content\/uploads\/2019\/06\/processA1.gif\" alt=\"\" class=\"wp-image-131\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been asked how I created the 3D effect in my upcoming game, so I thought I&#8217;d write up a little explanation without going into too much detail. The most important thing are the tiles themselves. It&#8217;s a simple brick pattern. We only need the bricks on the edges of the tile, but they should <a class=\"read-more\" href=\"http:\/\/www.missionctrlgames.com\/?p=130\">&hellip;&nbsp;<span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-130","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=\/wp\/v2\/posts\/130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=130"}],"version-history":[{"count":3,"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=\/wp\/v2\/posts\/130\/revisions"}],"predecessor-version":[{"id":141,"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=\/wp\/v2\/posts\/130\/revisions\/141"}],"wp:attachment":[{"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.missionctrlgames.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}