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.

Transcript

1. There and back again: A game dev’s tale @pyko @pyko
2. prologue
5. create stuff
8. chapter 1
10. games
11. problem
16. prototype
17. quick & hacky
19. validation
20. chapter 2
21. the real thing
22. MVP
25. play testing
26. TDD
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 () { … }); ! });
37. change
39. UI :(
41. chapter 3
43. cordova create [dir] [id] [name]
44. my-cordova-app config.xml hooks platforms plugins www
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
62. chrome://inspect
64. device testing
65. gotcha!
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
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
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.