{"author_name":"Birke","cat":"LD #37","comments":[],"epoch":1481715600,"likes":1,"metadata":{"p_key":"1057","p_author":"Birke","p_authorkey":"0","p_urlkey":"35902","p_title":"Making an entire game in Tilt Brush","p_cat":"LD #37","p_event":"LD37","p_time":"1481715600","p_likes":"1","p_comments":"1","p_status":"UPD5","us_key":null,"us_name":null,"us_username":null,"event_start":"1481241600","event_key":"81","event_name":"Ludum Dare 37"},"text":"<p>Since the start of the current VR revolution I have been more interested in how the technology could be used for creating games rather than just playing them. It should come as no surprise then, that one of my favorite VR apps are Tilt Brush, the 3D painting program that allows for a completely new way of drawing that gives depth to your doodles.<\/p>\n <p>I finally got my own Vive a couple of weeks ago. Since Ludum Dare was around the corner, I decided to make a game where all the art was drawn in Tilt Brush. I thought it would give the game a unique look, and also be a fast way to create 3D content, an important aspect when doing a game jam. You can find the game called <b>The Trans-Interdimensional Laboursaving Transportation Service<\/b> e<a href=\"http:\/\/ludumdare.com\/compo\/ludum-dare-37\/?action=preview&amp;uid=2550\">ntry here<\/a>, as well as on <a href=\"http:\/\/gamejolt.com\/games\/the-trans-interdimensional-laboursaving-transportation-service\/217532\">Game Jolt<\/a> and <a href=\"https:\/\/outofbounds.itch.io\/the-trans-interdimensional-laboursaving-transportation-service\">Itch.io<\/a>. I couldn\u2019t find anyone else who had tried to use Tilt Brush this way, so I decided to write this post on how I did it and my takeaways from the process.<\/p>\n <div id=\"attachment_599526\" style=\"width: 590px\" class=\"wp-caption aligncenter\"><img class=\" wp-image-599526\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTBoxHeader-300x105.png\" alt=\"Terrain, some flowers, and sleepy blobs painted in Tilt Brush and rendered in Unity\" width=\"580\" height=\"203\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTBoxHeader-300x105.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTBoxHeader-768x270.png 768w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTBoxHeader-550x193.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTBoxHeader.png 1582w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><p class=\"wp-caption-text\">Terrain, some flowers, and sleepy blobs painted in Tilt Brush and rendered in Unity<\/p><\/div>\n <p><b>The setup<\/b><\/p>\n <p>Turns out the pipeline to get Tilt Brush sketches into Unity, which is the engine I use, was very straight forward. From inside Tilt Brush you can export an FBX of your sketch. I thought I would have to write my own shaders, but it turned out the Tilt Brush devs already provide a <a href=\"https:\/\/docs.google.com\/document\/d\/11ZsHozYn9FnWG7y3s3WAyKIACfbfwb4PbaS8cZ_xjvo\/edit#\">set of basic shaders<\/a> as well! You still have to manually assign this shader to the imported models in Unity so I ended up writing a small <a href=\"https:\/\/docs.unity3d.com\/ScriptReference\/AssetPostprocessor.html\">AssetPostProcessor<\/a> script that would automatically handle this when the FBX file was copied into the project folder which made it easier to adjust the look of the game since all brush strokes of the same type would share the same material. This would sometimes still break when Unity had to split up the imported mesh because of it\u2019s 65k vertex limit per mesh but it still saved some time. Here is the <a href=\"https:\/\/bitbucket.org\/outofboundsgamesltd\/interdimensional-transporter\">source<\/a> if you want to check it out yourself.<\/p>\n <p><b>What worked well<\/b><\/p>\n <p>The game ended up with the unique look I was after. You can clearly see it\u2019s been drawn by a person which I think gives it it\u2019s own charm. So aesthetically I\u2019m very pleased with the result. Since you can\u2019t really animate a Tilt Brush sketch other than its rotation, scale and location I choose to make a game, where you see a lot of different static environments which worked well.<\/p>\n <div id=\"attachment_599527\" style=\"width: 267px\" class=\"wp-caption alignleft\"><img class=\" wp-image-599527\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TiltBoxEarth-300x169.png\" alt=\"Earth, so boring\" width=\"257\" height=\"145\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TiltBoxEarth-300x169.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TiltBoxEarth-768x433.png 768w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TiltBoxEarth-550x310.png 550w\" sizes=\"(max-width: 257px) 100vw, 257px\" \/><p class=\"wp-caption-text\">Earth, so boring<\/p><\/div>\n <div id=\"attachment_599528\" style=\"width: 264px\" class=\"wp-caption alignright\"><img class=\" wp-image-599528\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Weird-Dimension-300x168.jpg\" alt=\"Pocket Dimension #321754-B, so weird!\" width=\"254\" height=\"142\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Weird-Dimension-300x168.jpg 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Weird-Dimension-768x430.jpg 768w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Weird-Dimension-550x308.jpg 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Weird-Dimension.jpg 892w\" sizes=\"(max-width: 254px) 100vw, 254px\" \/><p class=\"wp-caption-text\">Pocket Dimension #321754-B, so weird!<\/p><\/div>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>If you want people to play your jam game it\u2019s a very good idea to make a build that can be played on the web. I was really surprised how compact the WebGL build was. I haven\u2019t gotten any complaints about the game relying on beefy GPUs to run either which was a nice surprise as well.<\/p>\n <p>Lastly my assumption that it would be a quick method for making art turned out to be mostly correct. Drawing the art inside Tilt Brush was quick, but there was a lot of hurdles getting it into Unity as explained in the next section.<\/p>\n <p><b>What didn\u2019t work so well<\/b><\/p>\n <p>The shaders provided by the Tilt Brush devs only cover the most basic brushes. All the more VFXish of them such as fire, lighting and disco are not supported. \u00a0You don\u2019t get normal maps either, so some brushes such as Ink and Oil look flat when imported into Unity. There\u2019s also no shader to to get the non lit strokes of the Marker brush to show up correctly. I know It\u2019s a simple shader to write, but at the end of the jam I was too sleep deprived to sort it out ,so I ended up just using the premade shaders and calling it a day.<\/p>\n <div id=\"attachment_599536\" style=\"width: 230px\" class=\"wp-caption alignleft\"><img class=\" wp-image-599536\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInTiltBrush-300x211.png\" alt=\"Pattern in Tilt Brush\" width=\"220\" height=\"155\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInTiltBrush-300x211.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInTiltBrush-768x541.png 768w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInTiltBrush-550x388.png 550w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInTiltBrush.png 1027w\" sizes=\"(max-width: 220px) 100vw, 220px\" \/><p class=\"wp-caption-text\">Pattern in Tilt Brush<\/p><\/div>\n <div id=\"attachment_599543\" style=\"width: 282px\" class=\"wp-caption alignright\"><img class=\" wp-image-599543\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInsideUnity-300x169.png\" alt=\"Same Pattern in Unity\" width=\"272\" height=\"153\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInsideUnity-300x169.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInsideUnity-768x433.png 768w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/PatternInsideUnity-550x310.png 550w\" sizes=\"(max-width: 272px) 100vw, 272px\" \/><p class=\"wp-caption-text\">Same Pattern in Unity<\/p><\/div>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>&nbsp;<\/p>\n <p>As you can see the shape of tapered strokes also didn\u2019t match how they look inside Tilt Brush. It\u2019s controlled in the shaders with alpha cutoff, but there wasn\u2019t a value that made them have exactly the same shape as inside Tilt Brush.<\/p>\n <p>There\u2019s some positive news in the horizon though! The team behind Tilt Brush are going to release a set of resources that should make it a lot easier to import your sketches into Unity in the near future so really looking forward to give that a go.<\/p>\n <p>The other main hurdle is that Tilt Brush is really more geared for sketching than for actual content creation. It\u2019s designed to be approachable and playful to interact with. As a result it doesn\u2019t have many of the features you would expect from a program appealing more to professional users. For example you can\u2019t group your sketch into layers making it tricky to delete strokes. The biggest issue though was not being able to set a custom pivot point for exported drawings as shown on the picture below.<\/p>\n <div id=\"attachment_599547\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><img class=\"size-medium wp-image-599547\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Untitled_27_01-300x169.png\" alt=\"Tell me of the pivots of your homeworld Usul\" width=\"300\" height=\"169\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Untitled_27_01-300x169.png 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Untitled_27_01-768x432.png 768w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/Untitled_27_01-550x309.png 550w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><p class=\"wp-caption-text\">Tell me of the pivots of your homeworld Usul<\/p><\/div>\n <p>I compensated for this the standard way with using a GameObject parent as the pivot in Unity, but it was something that I had to spend more time on than I would have liked. Other<\/p>\n <p>features I could also have used, was to just export a part of a sketch and overwrite existing sketches from inside Tilt Brush. Tilt Brush has never crashed on me but I didn\u2019t want to take any chances so I saved fairly often which filled up the gallery really quickly.<\/p>\n <p>Where Tilt Brush also excels is really in creating organic shapes with free hand brush strokes. My concept relied on creating a bunch of objects with harder edges which proved to be fairly time consuming. There is an option to use a straight edge tool, but it took a lot of trial and error to get the stroke orientation correct.<\/p>\n <div id=\"attachment_599548\" style=\"width: 406px\" class=\"wp-caption aligncenter\"><img class=\" wp-image-599548\" src=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTService-300x169.gif\" alt=\"I spent way too much time on drawing the hard edges of the box the player is placed inside while playing the game.\" width=\"396\" height=\"223\" srcset=\"http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTService-300x169.gif 300w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTService-768x432.gif 768w, http:\/\/ludumdare.com\/compo\/wp-content\/uploads\/2016\/12\/TILTService-550x309.gif 550w\" sizes=\"(max-width: 396px) 100vw, 396px\" \/><p class=\"wp-caption-text\">I spent way too much time on drawing the hard edges of the box the player is placed inside while playing the game.<\/p><\/div>\n <p><b>Conclusion<\/b><\/p>\n <p>I really enjoyed making the art for my game with Tilt Brush. Even though getting the sketches into Unity isn\u2019t a perfect process yet it was already a very powerful and quick way to create 3D content. With the new tool chain promised by the Tilt Brush devs on the horizon it will only get better. Next time I\u2019m doing a 3D entry for a game jam I\u2019ll likely use this approach again.<\/p>\n <p><strong>PS!<\/strong><br \/>\n I\u2019m planning to organize an online game jam for making games with Tilt Brush around February next year after the new tool chain has shipped. If you think that would be awesome to participate in follow me on <a href=\"https:\/\/twitter.com\/alexanderbirke\">Twitter<\/a> or <a href=\"https:\/\/www.facebook.com\/playourgamesdude\/\">Facebook<\/a> to stay tuned!<\/p>","time":"December 14th, 2016 6:40 am","title":"Making an entire game in Tilt Brush"}