There and back again: A game dev's tale

5d55ebf3f3024443f7a5ded289a469bf?s=47 Peggy Kuo
November 21, 2014

There and back again: A game dev's tale

Presented at JSConfAsia 2014, Singapore

In this talk, I’ll take you through my journey of creating my game Trichroma (https://play.google.com/store/apps/details?id=com.psychopyko.dx3.trichroma), and share both the technical and non-technical lessons I learned along the way that enabled me to pull it over the finish line and bring it home.

5d55ebf3f3024443f7a5ded289a469bf?s=128

Peggy Kuo

November 21, 2014
Tweet

Transcript

  1. There and back again: A game dev’s tale @pyko @pyko

  2. prologue

  3. None
  4. None
  5. create stuff

  6. None
  7. None
  8. chapter 1

  9. None
  10. games

  11. problem

  12. None
  13. None
  14. None
  15. None
  16. prototype

  17. quick & hacky

  18. None
  19. validation

  20. chapter 2

  21. the real thing

  22. MVP

  23. None
  24. None
  25. play testing

  26. TDD

  27. None
  28. None
  29. None
  30. None
  31. None
  32. then grid game over is full if

  33. describe(‘grid’, function () { ! it(‘should know when it is

    full (game over)’, function () { … }); ! }); then grid game over is full if
  34. describe(‘grid’, function () { ! it(‘should know when it is

    empty (level up)’, function () { … }); ! });
  35. describe(‘grid’, function () { ! it(‘should blow up if adding

    tile to a space that already has a tile’, function () { … }); ! });
  36. None
  37. change

  38. None
  39. UI :(

  40. None
  41. chapter 3

  42. None
  43. cordova create [dir] [id] [name]

  44. my-cordova-app config.xml hooks platforms plugins www

  45. None
  46. cordova platform add android

  47. my-cordova-app config.xml hooks platforms plugins www

  48. my-cordova-app config.xml hooks platforms android plugins www

  49. AndroidManifest.xml assets cordova CordovaLib libs platform_www res src … my-cordova-app

    config.xml hooks platforms android plugins www
  50. AndroidManifest.xml assets cordova CordovaLib libs platform_www res src … my-cordova-app

    config.xml hooks platforms android plugins www
  51. <widget id=“com.psychopyko.dx3.trichroma” android-versionCode=“1” version=“1.0.0” xmlns=“http://www.w3.org/ns/widgets” xmlns:cdv=“http://cordova.apache.org/ns/1.0”> ! <name>Trichroma</name> … <preference

    name=“Fullscreen” value=“true”/> <preference name=“Orientation” value=“portrait”/> <icon src=“res/logo.png”/> … </widget>
  52. <widget id=“com.psychopyko.dx3.trichroma” android-versionCode=“1” version=“1.0.0” xmlns=“http://www.w3.org/ns/widgets” xmlns:cdv=“http://cordova.apache.org/ns/1.0”> ! <name>Trichroma</name> … <preference

    name=“Fullscreen” value=“true”/> <preference name=“Orientation” value=“portrait”/> <icon src=“res/logo.png”/> … </widget>
  53. <widget id=“com.psychopyko.dx3.trichroma” android-versionCode=“1” version=“1.0.0” xmlns=“http://www.w3.org/ns/widgets” xmlns:cdv=“http://cordova.apache.org/ns/1.0”> ! <name>Trichroma</name> … <preference

    name=“Fullscreen” value=“true”/> <preference name=“Orientation” value=“portrait”/> <icon src=“res/logo.png”/> … </widget>
  54. <widget id=“com.psychopyko.dx3.trichroma” android-versionCode=“1” version=“1.0.0” xmlns=“http://www.w3.org/ns/widgets” xmlns:cdv=“http://cordova.apache.org/ns/1.0”> ! <name>Trichroma</name> … <preference

    name=“Fullscreen” value=“true”/> <preference name=“Orientation” value=“portrait”/> <icon src=“res/logo.png”/> … </widget>
  55. <widget id=“com.psychopyko.dx3.trichroma” android-versionCode=“1” version=“1.0.0” xmlns=“http://www.w3.org/ns/widgets” xmlns:cdv=“http://cordova.apache.org/ns/1.0”> ! <name>Trichroma</name> … <preference

    name=“Fullscreen” value=“true”/> <preference name=“Orientation” value=“portrait”/> <icon src=“res/logo.png”/> … </widget>
  56. plugins

  57. cordova plugin add [plugin-key]

  58. cordova build android

  59. cordova run android --target=xyz

  60. None
  61. None
  62. chrome://inspect

  63. None
  64. device testing

  65. gotcha!

  66. None
  67. None
  68. chapter 4

  69. problem

  70. my-cordova-app config.xml hooks platforms plugins www

  71. index.html css img js my-cordova-app config.xml hooks platforms plugins www

  72. my-cordova-app config.xml hooks platforms plugins www index.html css img js

  73. solution

  74. my-cordova-app config.xml hooks platforms plugins www my-cordova-app

  75. my-cordova-app

  76. my-cordova-app awesome-app

  77. my-cordova-app awesome-app index.html css img js

  78. index.html css img js my-cordova-app awesome-app

  79. index.html css img js my-cordova-app/www awesome-app

  80. lazy

  81. None
  82. sass: { cordova: { options: { style: ‘compressed’, sourcemap: ‘none’

    }, files: { ‘cordova/www/css/main.css’: ‘css/main.scss’ } } }
  83. sass: { cordova: { options: { style: ‘compressed’, sourcemap: ‘none’

    }, files: { ‘cordova/www/css/main.css’: ‘css/main.scss’ } } }
  84. sass: { cordova: { options: { style: ‘compressed’, sourcemap: ‘none’

    }, files: { ‘cordova/www/css/main.css’: ‘css/main.scss’ } } }
  85. sass: { cordova: { options: { style: ‘compressed’, sourcemap: ‘none’

    }, files: { ‘cordova/www/css/main.css’: ‘css/main.scss’ } } }
  86. sass: { cordova: { options: { style: ‘compressed’, sourcemap: ‘none’

    }, files: { ‘cordova/www/css/main.css’: ‘css/main.scss’ } } }
  87. sass: { cordova: { options: { style: ‘compressed’, sourcemap: ‘none’

    }, files: { ‘cordova/www/css/main.css’: ‘css/main.scss’ } } }
  88. uglify: { cordova: { files: { 'cordova/www/js/external.min.js': ['libs/*.js'], 'cordova/www/js/main.min.js' :

    ['js/*.js'] } } }
  89. uglify: { cordova: { files: { 'cordova/www/js/external.min.js': ['libs/*.js'], 'cordova/www/js/main.min.js' :

    ['js/*.js'] } } }
  90. uglify: { cordova: { files: { 'cordova/www/js/external.min.js': ['libs/*.js'], 'cordova/www/js/main.min.js' :

    ['js/*.js'] } } }
  91. uglify: { cordova: { files: { 'cordova/www/js/external.min.js': ['libs/*.js'], 'cordova/www/js/main.min.js' :

    ['js/*.js'] } } }
  92. uglify: { cordova: { files: { 'cordova/www/js/external.min.js': ['libs/*.js'], 'cordova/www/js/main.min.js' :

    ['js/*.js'] } } }
  93. grunt.registerTask(‘cordova’, [‘sass:cordova’, ‘uglify:cordova’]);

  94. simplify

  95. good news!

  96. cordova platform add browser

  97. cordova run browser

  98. \o/

  99. chapter 5

  100. learn

  101. friends

  102. scope

  103. deadline

  104. start

  105. None
  106. credits

  107. Deborah, Grace, Leanne

  108. prologue chapter 1 chapter 2 chapter 3 chapter 4 chapter

    5 lethorin Lewis3222 Pikku-Piru mistermoster marydoodles dodoalbino deviantart
  109. thenounproject dribbble MVP Kirill Shikhanov Arthur Shlain Till Teenck

  110. THE END.