{"id":62,"date":"2010-07-13T14:40:40","date_gmt":"2010-07-13T14:40:40","guid":{"rendered":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/?p=62"},"modified":"2010-07-13T14:40:40","modified_gmt":"2010-07-13T14:40:40","slug":"how-i-make-levels","status":"publish","type":"post","link":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/?p=62","title":{"rendered":"How I make levels"},"content":{"rendered":"<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/finalLevel.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-73\" title=\"finalLevel\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/finalLevel.jpg\" alt=\"\" width=\"450\" height=\"337\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/finalLevel.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/finalLevel-300x224.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<p>One of the most frequent questions I get is how I go about making levels for Sarah&#8217;s Run, so I shall share!<\/p>\n<p>first of all, there has to be an idea for what I want in the level, either in my head or on paper, making it up as I go is possible but it takes a little while and its very likely I lose my train of thought before I get anywhere. so, have a plan, you can come up with one of these anywhere, I was at a train station yesterday, killing time, when I drew this:<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/ticket.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-63\" title=\"ticket\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/ticket.jpg\" alt=\"\" width=\"450\" height=\"266\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/ticket.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/ticket-300x177.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a>sure it&#8217;s messy, but it&#8217;s enough that I can recognise what I was going for with it and could get on with the level making once I got back to my PC.<\/p>\n<p>First up, TILES!<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/tilesB.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-65\" title=\"tilesB\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/tilesB.jpg\" alt=\"\" width=\"450\" height=\"285\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/tilesB.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/tilesB-300x190.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a>I made these and set the texture co-ordinates in Blender a while back, if they are unwrapped at this point it saves time later on when I tweak the texture co-ordinates.<\/p>\n<p>Tiles are pretty sweet for a number of reasons, firstly they are super fast to make levels with, and because I can put them together in Unity itself, I can test the level as I make it really quickly, rather than building the level in another 3D app, and exporting then importing and tweaking settings every time I want to see if a ledge is the right height or a gap is wide enough.<\/p>\n<p>The downside to tiles in unity is that they *can* be very inefficient, especially with how many are in many of the levels in Sarah&#8217;s Run, hence why I place them all inside a &#8216;LevelMesh&#8217; game object that combines all the seperate 3D models for each tile into a single mesh, meaning that whilst I&#8217;m testing drawing the level takes only one draw call, and not about 3000 (I had 7000 draw calls per frame sometimes before I decided I should fix that lol)<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/testing.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-66\" title=\"testing\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/testing.jpg\" alt=\"\" width=\"450\" height=\"337\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/testing.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/testing-300x224.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a>so what follows is lots of adding, testing, tweaking until the level is playable;<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/building.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67\" title=\"building\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/building.jpg\" alt=\"\" width=\"450\" height=\"1800\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/building.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/building-75x300.jpg 75w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/building-256x1024.jpg 256w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a>So, I can play the level, but it&#8217;s not easy to &#8216;read&#8217;. that is, you cant look at the level and quickly see what form the level has, it&#8217;s pretty messy. So we need to juice up the graphics a bit with some lighting (the best way to give a 2D image form IMO) and also make the textures more&#8230; good \ud83d\ude42<\/p>\n<p>so, we export the level and take it into Blender (the export script I use is found <a href=\"http:\/\/www.unifycommunity.com\/wiki\/index.php?title=ObjExporter\">here<\/a> for you unity junkies)<\/p>\n<p>first up we tidy the mesh and clear out any faces that wont be seen, and also use a more recent texture atlas:<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/blend1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68\" title=\"blend1\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/blend1.jpg\" alt=\"\" width=\"450\" height=\"251\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/blend1.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/blend1-300x167.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a>Once that is done, I go around and move the UVs (texture co-ordinates) for different faces so details like the floor borders look right:<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/blend21.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-74\" title=\"blend2\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/blend21.jpg\" alt=\"\" width=\"450\" height=\"215\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/blend21.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/blend21-300x143.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<p>So that&#8217;s what folks call the &#8216;diffuse&#8217; (unlit) texture sorted out, but in Sarahs run my environments have both a diffuse texture and a &#8216;lightmap&#8217; texture that describes the light in the level. so first step for making a lightmap is I put in some meshes I want to act as &#8216;lights&#8217; set them to emit and get blender to calculate &#8216;radiosity&#8217;. it sounds complicated but mostly I click &#8216;go&#8217; and play some guitar hero until it&#8217;s finished.<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/radio.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-70\" title=\"radio\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/radio.jpg\" alt=\"\" width=\"450\" height=\"359\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/radio.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/radio-300x239.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a>once the &#8216;light&#8217; has been calculated, I &#8216;bake&#8217; it onto a texture (that means I get one mesh to copy whatever the lighting is on each face to the relevant part of a texture map). you can see the baked texture on the right of this pic:<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/bake.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-71\" title=\"bake\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/bake.jpg\" alt=\"\" width=\"450\" height=\"269\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/bake.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/bake-300x179.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a>here&#8217;s what the level looks like when we take it back into unity, with both texture working together (after a little tweaking the brightness):<\/p>\n<p><a href=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/backinunity.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-72\" title=\"backinunity\" src=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/backinunity.jpg\" alt=\"\" width=\"450\" height=\"360\" srcset=\"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/backinunity.jpg 450w, http:\/\/sarahsrun.sophiehoulden.com\/devblog\/wp-content\/uploads\/2010\/07\/backinunity-300x240.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a>and just adding the deadly floor and the level is complete!<\/p>\n<p><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"425\" height=\"344\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><param name=\"src\" value=\"http:\/\/www.youtube.com\/v\/bE-0REcpuPs&amp;hl=en_GB&amp;fs=1\" \/><param name=\"allowfullscreen\" value=\"true\" \/><embed type=\"application\/x-shockwave-flash\" width=\"425\" height=\"344\" src=\"http:\/\/www.youtube.com\/v\/bE-0REcpuPs&amp;hl=en_GB&amp;fs=1\" allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object><\/p>\n<p>You can also play the level <a href=\"http:\/\/sarahsrun.sophiehoulden.com\/previews\/sarah_exampleLevel_jul13.html\">here<\/a> if you like.<\/p>\n<p>this is where I say the level is &#8216;done&#8217; but that isn&#8217;t really the case, if this level was going into the game I would have to make quite a few tweaks, such as offsetting the two ledges, especially if it appears earlier in the game, and I&#8217;d need to adjust the size of the gap, how high the electric ceiling is etc. I&#8217;d also like to test if it works better as a 2.5D level (like level 5 in the preview) I suspect it would.<\/p>\n<p>anyway, hope you enjoyed that. \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most frequent questions I get is how I go about making levels for Sarah&#8217;s Run, so I shall share! first of all, there has to be an idea for what I want in the level, either in my head or on paper, making it up as I go is possible but it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,7,5],"tags":[10,11,32,35,9,22,6,25],"class_list":["post-62","post","type-post","status-publish","format-standard","hentry","category-design","category-graphics","category-video","tag-bake","tag-blender","tag-concept","tag-design","tag-lightmap","tag-playable","tag-preview","tag-screenshots"],"_links":{"self":[{"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":0,"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=\/wp\/v2\/posts\/62\/revisions"}],"wp:attachment":[{"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sarahsrun.sophiehoulden.com\/devblog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}