{"author_name":"Omiya Games","cat":"LD #32","comments":[],"epoch":1429733940,"likes":2,"metadata":{"p_key":"17800","p_author":"Omiya Games","p_authorkey":"20557","p_urlkey":"53106","p_title":"How to make the graphics for Star Driller Ultra","p_cat":"LD #32","p_event":"LD32","p_time":"1429733940","p_likes":"2","p_comments":"0","p_status":"UPD5","us_key":"20557","us_name":"Omiya Games","us_username":"\/author\/taro\/","event_start":"1429228800","event_key":"27","event_name":"LD32"},"text":"<p>[Cross-posted from <a href=\"http:\/\/www.omiyagames.com\/how-to-make-the-graphics-for-star-driller-ultra\/\" target=\"_blank\">ma blag<\/a>]<\/p>\n <p>So a lot of praises has been made about the graphics in <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-32\/?action=preview&amp;uid=20557\"><strong>Star Driller Ultra<\/strong><\/a>. How did we make such beautiful graphics in a short amount of time?<\/p>\n <p>Well, actually, it&#8217;s a lot easier than you think.<\/p>\n <h2>Part 1: Making the model in Blender<\/h2>\n <p>First, open Blender.<\/p>\n <div id=\"attachment_1850\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender1.png\"><img class=\"size-large wp-image-1850\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender1-609x356.png\" alt=\"Easy enough...\" width=\"609\" height=\"356\" \/><\/a><p class=\"wp-caption-text\">Easy enough&#8230;<\/p><\/div>\n <p>Next, click on &#8220;File&#8221; on the menu bar, then &#8220;User Preference.&#8221; Tap the &#8220;Input&#8221; tab, and change the &#8220;Select With:&#8221; from the dreaded default Right to the far more sensible Left. Finally, click &#8220;Save User Settings.&#8221;<\/p>\n <div id=\"attachment_1852\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender2.png\"><img class=\"size-large wp-image-1852\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender2-609x327.png\" alt=\"You will thank me later.\" width=\"609\" height=\"327\" \/><\/a><p class=\"wp-caption-text\">You will thank me later.<\/p><\/div>\n <p>Uhh&#8230;where were we? Oh, yes: make a shape.<\/p>\n <div id=\"attachment_1850\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender1.png\"><img class=\"size-large wp-image-1850\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender1-609x356.png\" alt=\"Way ahead of you.\" width=\"609\" height=\"356\" \/><\/a><p class=\"wp-caption-text\">Way ahead of you. See? A cube!<\/p><\/div>\n <p>Select that shape with the left mouse button, then go to the right pane and click on the gear tab (called Modifier).<\/p>\n <div id=\"attachment_1853\" style=\"width: 493px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender3.png\"><img class=\"size-full wp-image-1853\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender3.png\" alt=\"Modifier selected\" width=\"483\" height=\"399\" \/><\/a><p class=\"wp-caption-text\">Modifier selected<\/p><\/div>\n <p>Click on &#8220;Add Modifier&#8221;, and select &#8220;Wireframe.&#8221;<\/p>\n <div id=\"attachment_1855\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender4.png\"><img class=\"size-large wp-image-1855\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender4-609x530.png\" alt=\"And this is where the magic is about to start!\" width=\"609\" height=\"530\" \/><\/a><p class=\"wp-caption-text\">And this is where the magic is about to start!<\/p><\/div>\n <p>Now your shape is a wireframe!<\/p>\n <div id=\"attachment_1856\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender5.png\"><img class=\"size-large wp-image-1856\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender5-609x426.png\" alt=\"It doesn't look that nice, though.\" width=\"609\" height=\"426\" \/><\/a><p class=\"wp-caption-text\">It doesn&#8217;t look that nice, though.<\/p><\/div>\n <p>After that, it&#8217;s just a matter of adjusting the thickness value on the modifier.<\/p>\n <div id=\"attachment_1857\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender6.png\"><img class=\"size-large wp-image-1857\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Blender6-609x339.png\" alt=\"That's more like it!\" width=\"609\" height=\"339\" \/><\/a><p class=\"wp-caption-text\">That&#8217;s more like it!<\/p><\/div>\n <p>Now you can save this model in your Unity project&#8217;s Assets folder, and let the game engine do the rest.<\/p>\n <h2>Part 2: Toon shading in Unity<\/h2>\n <p>Next, we need to import some toon shaders in Unity. Open Unity, then click on &#8220;Assets&#8221; under the menu bar, and select &#8220;Import Package -&gt; Effects.&#8221;<\/p>\n <div id=\"attachment_1862\" style=\"width: 562px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty1.png\"><img class=\"size-full wp-image-1862\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty1.png\" alt=\"It's a poorly-worded location to put toon shaders into.\" width=\"552\" height=\"444\" \/><\/a><p class=\"wp-caption-text\">It&#8217;s a poorly-worded location to put toon shaders into.<\/p><\/div>\n <p>Open the Unity project, and drag your new model into the Scene.<\/p>\n <div id=\"attachment_1864\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty2.png\"><img class=\"size-large wp-image-1864\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty2-609x547.png\" alt=\"Wait a minute...that's not toon shading!\" width=\"609\" height=\"547\" \/><\/a><p class=\"wp-caption-text\">Wait a minute&#8230;that&#8217;s not toon shading!<\/p><\/div>\n <p>On the Inspector panel, there&#8217;s the Material component properties displayed on the bottom. Scroll down there, and change it&#8217;s shader to &#8220;Toon -&gt; Lit&#8221;<\/p>\n <div id=\"attachment_1865\" style=\"width: 408px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty3.png\"><img class=\"size-full wp-image-1865\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty3.png\" alt=\"Ooooh! So many shaders!\" width=\"398\" height=\"439\" \/><\/a><p class=\"wp-caption-text\">Ooooh! So many shaders!<\/p><\/div>\n <p>The cube will still look a bit ugly because it doesn&#8217;t have a ramp set. Change the ramp to a horizontal monochrome gradient that&#8217;s 2 pixel tall, and 256 pixels wide. This will act as the gradient applied to the object in response to the lighting.<\/p>\n <div id=\"attachment_1866\" style=\"width: 380px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty4.png\"><img class=\"size-full wp-image-1866\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty4.png\" alt=\"A very sharp gradient as a toon ramp.\" width=\"370\" height=\"263\" \/><\/a><p class=\"wp-caption-text\">A very sharp gradient as a toon ramp.<\/p><\/div>\n <p>For <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-32\/?action=preview&amp;uid=20557\"><strong>Star Driller Ultra<\/strong><\/a>, we used the ramp below:<\/p>\n <div id=\"attachment_1866\" style=\"width: 266px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/bitbucket.org\/OmiyaGames\/ludum-dare-32\/src\/bc3ff9fa600b3d7c2bc37ed9caddd1d945f82ed0\/Assets\/Images\/UtilToonGradient.png?at=default\" target=\"_blank\"><img src=\"https:\/\/bytebucket.org\/OmiyaGames\/ludum-dare-32\/raw\/bc3ff9fa600b3d7c2bc37ed9caddd1d945f82ed0\/Assets\/Images\/UtilToonGradient.png\" alt=\"\" width=\"256\" height=\"20\" \/><\/a><p class=\"wp-caption-text\">Enlarged for your viewing pleasure.<\/p><\/div>\n <p>After that, just change the Main Color on the material to whatever you want it to be.<\/p>\n <div id=\"attachment_1869\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty5.png\"><img class=\"size-large wp-image-1869\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty5-609x412.png\" alt=\"Let's make it unoffensive green.\" width=\"609\" height=\"412\" \/><\/a><p class=\"wp-caption-text\">Let&#8217;s make it unoffensive green.<\/p><\/div>\n <h2>Part 3: Image effects (bloom!)<\/h2>\n <p>But wait! If you switch from Scene pane to Game pane, you&#8217;ll notice the graphics isn&#8217;t as awesome as <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-32\/?action=preview&amp;uid=20557\"><strong>Star Driller Ultra<\/strong><\/a>.<\/p>\n <div id=\"attachment_1870\" style=\"width: 458px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom1.png\"><img class=\"size-full wp-image-1870\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom1.png\" alt=\"Not awesome enough.\" width=\"448\" height=\"392\" \/><\/a><p class=\"wp-caption-text\">Not awesome enough.<\/p><\/div>\n <p>That&#8217;s because we&#8217;re missing some image effects; specifically, bloom. Fortunately, we&#8217;ve already imported it, remember?<\/p>\n <div id=\"attachment_1862\" style=\"width: 562px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty1.png\"><img class=\"size-full wp-image-1862\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Unty1.png\" alt=\"Again, poorly worded.\" width=\"552\" height=\"444\" \/><\/a><p class=\"wp-caption-text\">Again, poorly worded.<\/p><\/div>\n <p>Click on your camera, and in the inspector pane, use Add Component to add the following three image effects, <em>in order<\/em>.<\/p>\n <ol>\n <li>Image Effects -&gt; Camera -&gt; Vignette and Chromatic Aberration(Adds darker, blurry parts at the corner of the screen)\n <p><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom2.png\"><img class=\"alignnone size-full wp-image-1871\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom2.png\" alt=\"Bloom2\" width=\"241\" height=\"366\" \/><\/a><\/li>\n <li>Image Effects -&gt; Bloom and Glow -&gt; BloomAndFlares(Adds blooming light effect)\n <p><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom3.png\"><img class=\"alignnone size-full wp-image-1872\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom3.png\" alt=\"Bloom3\" width=\"241\" height=\"366\" \/><\/a><\/li>\n <li>Image Effects -&gt; Other -&gt; Antialiasing(Soften shapes with jaggy edges)\n <p><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom4.png\"><img class=\"alignnone size-full wp-image-1873\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom4.png\" alt=\"Bloom4\" width=\"241\" height=\"366\" \/><\/a><\/li>\n <\/ol>\n <p>Furthermore, for <a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-32\/?action=preview&amp;uid=20557\"><strong>Star Driller Ultra<\/strong><\/a>, We&#8217;ve adjusted the values in each of these image effects under the inspector as follows:<\/p>\n <div id=\"attachment_1875\" style=\"width: 412px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom5.png\"><img class=\"size-full wp-image-1875\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom5.png\" alt=\"Lots of numbers.\" width=\"402\" height=\"445\" \/><\/a><p class=\"wp-caption-text\">Lots of numbers.<\/p><\/div>\n <p>And that&#8217;s about it. You can see the results for yourself.<\/p>\n <div id=\"attachment_1876\" style=\"width: 506px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom6.png\"><img class=\"size-full wp-image-1876\" src=\"http:\/\/www.omiyagames.com\/wp-content\/uploads\/2015\/04\/Bloom6.png\" alt=\"A true work of art.\" width=\"496\" height=\"565\" \/><\/a><p class=\"wp-caption-text\">A true work of art.<\/p><\/div>","time":"April 22nd, 2015 3:19 pm","title":"How to make the graphics for Star Driller Ultra"}