{"id":142059973264,"date":"2016-09-02T15:00:22","date_gmt":"2016-09-02T13:00:22","guid":{"rendered":"http:\/\/blog.sketchfab.com\/?p=142059973264"},"modified":"2019-08-15T17:41:58","modified_gmt":"2019-08-15T15:41:58","slug":"tutorial-build-virtual-reality-game-sketchfab","status":"publish","type":"post","link":"https:\/\/sketchfab.com\/blogs\/community\/tutorial-build-virtual-reality-game-sketchfab\/","title":{"rendered":"Tutorial: How To Build a Virtual Reality Game on Sketchfab"},"content":{"rendered":"<p><i><span style=\"font-weight: 400\">This third article in our \u2018Designing for VR\u2019 series focuses on how to set up a VR experience that encourages exploration. Topics covered include making effective use of teleportation for \u2018level design\u2019, adding points of interest to your scene and using animation to create a game-like experience.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400\">Other articles in this series are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><a href=\"http:\/\/blog.sketchfab.com\/how-to-set-up-a-cardboard-vr-scene-for-sketchfab\/\"><span style=\"font-weight: 400\">How to set up a Cardboard VR scene for Sketchfab<\/span><\/a><span style=\"font-weight: 400\">, which focuses on performance issues for mobile platforms. It goes into geometry complexity, texture size, bones animation etc.<\/span><\/li>\n<li style=\"font-weight: 400\"><a href=\"http:\/\/blog.sketchfab.com\/art-spotlight-highland-cow\/\"><span style=\"font-weight: 400\">Art Spotlight: Highland Cow<\/span><\/a><span style=\"font-weight: 400\">, in which Juuso Mattila discusses the impact of textures on the quality and experience of your VR scenes.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400\">Adding Details to Make a Scene Interesting<\/span><\/h3>\n<p><span style=\"font-weight: 400\">A VR experience should be \u2018rich\u2019 enough to pique\u00a0the curiosity of the player. Elements that require extensive exploration or discovery encourage spending more time in your VR scene. A good example of this is Fluttershys Cottage by Discopears below. While not obvious when you first view it in \u2018desktop mode\u2019, it has many tiny staircases for mice hidden away around many corners:<\/span><\/p>\n<div class=\"sketchfab-embed-wrapper\">    <iframe title=\"Fluttershys Cottage - Interior\" class=\"\" width=\"690\" height=\"388\" src=\"https:\/\/sketchfab.com\/models\/b0fd2a0bf4a94c86b91172eac03af80a\/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" xr-spatial-tracking=\"true\" execution-while-out-of-viewport=\"true\" execution-while-not-rendered=\"true\" web-share=\"true\"><\/iframe><\/div>\n<p><span style=\"font-weight: 400\">An important aspect here is to remember that users of low-end VR devices, like Cardboard, will have a fixed camera height (they cannot crouh\u00a0to look under a table, for example). So make sure your \u2018points of interest\u2019 can always be discovered by simply looking up or down.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Also, remember that proximity of objects is important in VR. Only by getting close to an object will it get its three dimensional quality &#8211; objects in the distance will appear flat and, on low-end devices, very blurry or pixelated.<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Level Navigation<\/span><\/h3>\n<p><span style=\"font-weight: 400\">Even without a game engine or complex interactive elements, you\u2019ll find that you can design challenging levels by using a clever navigation design. <\/span><\/p>\n<p>First, you\u2019ll need to get a deep sense of how VR teleportation works. The principle is simple enough: the player can select any visible surface that\u2019s at a 45 degree angle or less and teleport there. So if you cannot see a surface, or if it\u2019s too steep you will not be able to move there.<\/p>\n<p>As an illustration, try the following model (which was not designed as a VR game level): you\u2019ll find that it\u2019s very hard to reach the top of the tower. It can be done, but in this case it feels more like \u2018hacking\u2019 the scene ;-)<\/p>\n<div class=\"sketchfab-embed-wrapper\">    <iframe title=\"Outpost of Anubis\" class=\"\" width=\"690\" height=\"388\" src=\"https:\/\/sketchfab.com\/models\/64503f0bbdd8409988e6dc1da9c8102d\/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" xr-spatial-tracking=\"true\" execution-while-out-of-viewport=\"true\" execution-while-not-rendered=\"true\" web-share=\"true\"><\/iframe><\/div>\n<p><span style=\"font-weight: 400\">So, to ensure a challenging game level, start by designing a \u2018navigation path\u2019. How is the player supposed to travel from start to finish? Block out this path in your scene and test it in VR.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Next, add obstacles between the waypoints in your navigation that will force the player to examine your scene and find the correct path. <\/span><\/p>\n<p>It\u2019s not always easy to see where you\u2019re supposed to go, as the far environment tends to be pixelated with the cardboard, so remember to add visual cues to help the player see where he can go.<\/p>\n<h3><span style=\"font-weight: 400\">Using Animation<\/span><\/h3>\n<p>A great trick is to animate some obstacles (like doors open and close, a bridge that moves etc). One thing to keep in mind when adding animated assets is to keep them simple: a high vertex count and number of bones will slow down your scene a LOT. As always: create, test, repeat!<\/p>\n<p><span style=\"font-weight: 400\">Don\u2019t use animated platform, you will be stuck mid air while the platform continue its route (or maybe use it if you want but keep that in mind!)<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Using Transparency<\/span><\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059973276 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2016\/08\/image01-1.png\" alt=\"image01\" width=\"758\" height=\"361\" \/><noscript><img decoding=\"async\" class=\"aligncenter size-full wp-image-142059973276 lazyload\" src=\"http:\/\/blog.sketchfab.com\/wp-content\/uploads\/2016\/08\/image01-1.png\" alt=\"image01\" width=\"758\" height=\"361\" srcset=\"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2016\/08\/image01-1.png 758w, https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2016\/08\/image01-1-300x143.png 300w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/noscript><\/p>\n<p><span style=\"font-weight: 400\">Finally, you can use transparent objects to your advantage too! They\u2019re a great way to show a glimpse of the remainder of a level without allowing the player to navigate there directly.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Using the tricks above you\u2019ll be able to add some proper puzzle elements to your scene!<\/span><\/p>\n<h2><span style=\"font-weight: 400\">Are you ready to give it a try?<\/span><\/h2>\n<p><span style=\"font-weight: 400\">This example game level by <\/span><a href=\"https:\/\/sketchfab.com\/jeremygo\"><span style=\"font-weight: 400\">Jeremy Goncalves<\/span><\/a><span style=\"font-weight: 400\"> uses about all the principles that I outlined in this article. Jeremy did a great job creating a game that is interesting to explore, uses multiple \u2018puzzle\u2019 techniques and that still performs well enough on mobile devices. He\u2019s currently working on a second level, so be sure to follow him to receive an update when he posts it!<\/span><\/p>\n<div class=\"sketchfab-embed-wrapper\">    <iframe title=\"Level 01 - VR platform game on Sketchfab\" class=\"\" width=\"690\" height=\"388\" src=\"https:\/\/sketchfab.com\/models\/fab60e2d60f34158acef3488c9902526\/embed\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\" xr-spatial-tracking=\"true\" execution-while-out-of-viewport=\"true\" execution-while-not-rendered=\"true\" web-share=\"true\"><\/iframe><\/div>\n<h3><b>Upload your #VR-game!<\/b><\/h3>\n<p>We\u2019ll be collecting and promoting the coolest VR game experiences on Sketchfab. Just upload them and tag with #VR-game and be sure to leave a comment here to share your work!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This third article in our \u2018Designing for VR\u2019 series focuses on how to set up a VR experience that encourages exploration. Topics covered include making<\/p>\n","protected":false},"author":2,"featured_media":142059973266,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[582],"tags":[996,25],"class_list":["post-142059973264","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-tutorial-sketchfab-feature","tag-vr"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/sketchfab.com\/blogs\/community\/wp-content\/uploads\/2016\/08\/image00-4.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142059973264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/comments?post=142059973264"}],"version-history":[{"count":6,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142059973264\/revisions"}],"predecessor-version":[{"id":142059990780,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/posts\/142059973264\/revisions\/142059990780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/media\/142059973266"}],"wp:attachment":[{"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/media?parent=142059973264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/categories?post=142059973264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketchfab.com\/blogs\/community\/wp-json\/wp\/v2\/tags?post=142059973264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}