Back to Space
Download as PPTX, PDF0 likes162 views
This document summarizes the development of a VR game called "Back to Space" by an ICT consultant. It was created using A-Frame and Three.js for web-based VR. The developer explored different platforms for testing the game in VR, including Chrome extensions, mobile phones with Daydream, and borrowed VR headsets. The game started as a basic concept with cubes but evolved to include shaders, world generation, and different components. It was released on Construct Arcade and may be released on other platforms in the future after additional polish.
Back to Space
- 3. 🌞 ICT Consultant @ Centric C# ASP.NET, .Net Core Angular 🌜 Live Coder @ home WebXR NL Meetup JavaScript Modern Web
- 6. 💻 📱 💲 🥽
- 8. Johnny Smiter: Episode Zero Don’t look back!VR is back
- 9. A web framework for building virtual reality experiences Component based • Unity : GameObjects and MonoBehaviors • A-Frame : Entities and Components
- 12. 2 Ideas • Haunted Mansion • Space Invaders
- 13. • 3D Studio • Custom scripts • Photoshop • ShaderTool • Codepen
- 14. • Basic concept and gameplay first. Very rough and with cubes. • All in VSCode • TODO+ for ‘work items’ • Frameworks: • A-frame • Inspector for debugging • ThreeJS, came with A-Frame • WebPack • Glslify • Snippets in VSCode
- 15. concept and gameplay first
- 19. Components
- 20. Code Snippet
- 23. • GLSL • Wireframe look
- 24. World generation
- 27. • In browser • New Chrome Extension • On phone • With daydream • With borrowed Oculus Rift • With help from people in our Twitch community
- 28. • Learned a lot about shaders and compiling the project • GLSLify to bundle shaders • Controllers are different on various platforms • Screen mirroring for Oculus Rift via tool • Zip on Linux is smaller
- 32. • Release on Construct Arcade
- 33. • Fix a few minor bugs • Add more invaders and more variation • Better music/sfx • AR Version • Featured on FireFox Reality • Release on ???
Editor's Notes
- #4: Who am I, What do I do and Why!
- #6: JS coding competition for HTML5 Game Developers. Around a theme, This years theme was ‘Back’.
- #7: JS coding competition f or HTML5 Game Developers.
- #8: Show some examples in screenshots A-Frame, Three.JS or Babylon.js are allowed through a specific URL Doesn’t count in 13KB
- #9: Show some examples in screenshots A-Frame, Three.JS or Babylon.js are allowed through a specific URL Doesn’t count in 13KB
- #11: https://glitch.com/~butternut-Colby
- #13: Started 1 week late, due to summer vacation, but got the basic idea written down. 2 ideas: Haunted mansion where ‘someone’ or ‘something’ is sneaking up behind you Space Invaders Went with the second
- #16: First screenshot – Working game. I knew I would be able to do it
- #17: Intense gameplay. Testing live on stream.
- #18: difficultiess
- #19: Since then made a few updates to my common WebVR Build Pipeline to include HTML as well. Copies code from SRC to DIST Combine all .js into 1 file Compiles .scss to .css Include GLSL Different pipeline for Dev and Prod Show Webpack
- #20: controls everything, heart of the game
- #21: Show GameComponent, InvaderComponent, AppearComponent
- #22: Real Textures are too big. Generate them in code. Title => https://codepen.io/Sorskoot/pen/aboLegK
- #23: Real Textures are too big. Generate them in code. Title => https://codepen.io/Sorskoot/pen/aboLegK Sun => https://codepen.io/Sorskoot/pen/qBWpRea Show Codepens Shot Code for sky Perlin Noise based
- #24: Basic vertex shader, complex fragment shader - with some js code GLSL 3.0 for OpenGL ES 3
- #25: Donut shape as mask perlin noise Removed all faces that have 3 points at 0,0,0 Show Code
- #26: Flash version of sfxr => http://www.superflashbros.net/as3sfxr/ IN EDGE DEV!!!