Don’t just buy a new video game, make one! in JS!

at JSONC Asia 2014

Transcript

1. 1
   Don’t just buy a new video game,

   make one! in JS!
   Presented by Akihiro Oyamada (@yomotsu)
   Frontend Engineer at PixelGrid, Inc.
   Nov 21, 2014
   

   View Slide

2. 2
   Don’t just buy a new video game,

   make one! in JS!
   Presented by Akihiro Oyamada (@yomotsu)
   Frontend Engineer at PixelGrid, Inc.
   Nov 21, 2014
   

   View Slide

3. 3
   Hello!

   from Japan
   Frontend Engineer
   at PixelGrid, Inc.
   @yomotsu
   

   View Slide

4. View Slide

5. View Slide

6. How dose it work?
   Why do glitches appear?
   6
   

   View Slide

7. I wanna make it!
   7
   

   View Slide

8. 8
   https://yomotsu.github.io/walkthrough
   

   View Slide

9. 9
   https://www.youtube.com/watch?v=ABPyWx8puzs
   in IE 11 with touch
   

   View Slide

10. 10
    https://www.youtube.com/watch?v=xn8k0lEmKoU
    in Mobile Firefox
    on Android
    

    View Slide

11. 11
    iPhone6 or
    iPhone5s /w iOS8
    

    View Slide

12. 12
    https://www.youtube.com/watch?v=8qRwpHhD_hY
    

    View Slide

13. http://goo.gl/xXOJNV
    13
    

    View Slide

14. View Slide

15. 15
    plus…
    a game collision lib I made
    

    View Slide

16. 16
    while moving on a slope…
    

    View Slide

17. 17
    Actual
    

    View Slide

18. 18
    Expect
    

    View Slide

19. 19
    http://0.0.0.0:8888/example/5_terrain.html
    

    View Slide

20. 20
    https://github.com/yomotsu/threefield.js
    • Collision detection /w Octree
    • Height field via THREE.js mesh
    • Camera vs walls collistion
    

    View Slide

21. video games are
    

    not just for fun
    21
    

    View Slide

22. 22
    https://www.youtube.com/watch?v=6XvmhE1J9PY
    “Don’t just buy a new video game,

    make one”
    ʔ President Obama asks America to learn computer science
    

    View Slide

23. Wanna make a game,

    in JS ?
    23
    

    View Slide

24. 24
    Thank you!
    @yomotsu
    

    View Slide