We built the game in OS X. You should be able to repeat these steps if you use a Linux operating system (eg Ubuntu), or even Windows.
- Installed basic development tools
You may have some of these installed already, so you might be able to skip some of these steps.
1.1 git and git flow
1.2 node and npm
1.3 yeoman, gulp, and phaser-coffee-gulp
1.4 ruby and gem
1.5 compass
1.6 Sublime Text with the CoffeeScript plugin
- Used phaser-coffee-gulp to create a barebones Phaser game
2.1 $ mkdir wad14-game && cd $_
2.2 $ sudo yo phaser-coffee-gulp
2.3 added these lines to "devDependencies" in package.json:
"coffee-script": "~1.8.0",
"gifsicle": "~1.0.3"2.4 $ gulp
- Set up the game to be hosted on GitHub Pages
3.1 $ nano .gitignore and comment-out or delete the ‘build’ directory
3.2 $ cp build/index.html index.html
3.3 $ nano index.html and add <base href="build/"> to the <head>
3.4 $ nano README.md to start writing this ‘How to’ guide
3.5 $ git flow init, and choose gh-pages as the production branch
3.6 copied a GPL ‘LICENSE’ file from a previous project
3.7 $ git add .
3.8 $ git commit -am '+ 0.0.0 Initial setup, before versioning'
3.9 incremented version to '0.0.2' in package.json and bower.json
3.10 $ git flow release start 0.0.2
3.11 $ git commit -am '+ 0.0.2 Initial release, to test GitHub Pages'
3.12 $ git flow release finish 0.0.2
3.13 created a new repository in GitHub
3.14 $ git remote add origin https://github.com/aidsalliance/wad14-game.git
3.15 $ git push -u origin gh-pages
3.16 $ git push -u origin develop
3.17 $ git push --tags
3.18 visited http://aidsalliance.github.io/wad14-game/ to check GitHub Pages
3.19 tidied up ‘README.md’ and released version 0.0.4
- Pasted functionality from previous Phaser tryout into real app
4.1 $ gulp to open the game in a browser window and start watching for changes
4.2 $ git flow feature start convert-tryout-to-real-app
4.3 version '0.0.5-1' in package.json and bower.json, and commit
4.4 corrected HTML window title
4.5 saved ‘wad14-game.sublime-project’ for easy access to ‘src/’ and ‘README.md’
4.6 pasted in ‘ref/breakin.js’, a tryout we based on Phaser’s Breakout example
4.7 pasted breakin’s images and slice-data in ‘src/assets/images/’
4.8 restarted gulp, ctrl-c followed by $ gulp, to take in new files
4.9 loaded the images and slice-data in ‘src/game/states/preloader.coffee’
4.10 display the images in ‘src/game/states/game.coffee’ (browser console helps)
4.11 bumped version to '0.0.5-2', track new files with $ git add ., and commit
4.12 defined Pathogen and Brick classes in ‘src/game/classes/’
4.13 bricks rotate around nucleus, pathogens appear at random from top and bounce
4.14 collisions detected: bricks are destroyed correctly, nucleus hit ends game
4.15 bumped version to '0.0.5-3', track new files and commit
4.16 $ git flow release start 0.0.6 released version '0.0.6', pushed to GitHub
- Added four increasingly difficult levels, a score, and end-of-level messages
5.1 $ git flow feature start levels
5.2 moved compile-error logs to the Terminal, in ‘gulp/util/handleErrors.coffee’
# Just log to console.
notify.onError
title: 'Compile Error'
message: '<%= error.toString().substr( error.toString().indexOf("/src/") ) %>'
notifier: (options, callback) ->
.apply this, args5.3 add/renamed states ‘splash’, ‘level-one’, ‘level-one-complete’, ‘game-over’
5.4 bumped version to '0.0.7-1', track new files and commit
5.5 created generic ‘Level’ and ‘Message’ classes
5.6 pasted simple ‘score’ system from ‘breakin.js’
5.7 added states ‘level-two/three/four’ and ‘level-two/three-complete’
5.8 bumped version to '0.0.7-2', track new files and commit
5.9 $ git flow feature finish levels, $ git flow release start 0.1.0
- Renamed game to ‘Cell Survivor’, and added real graphics and messages
6.1 find/replace 'wad14-game' to 'cell-survivor' in all files
6.2 $ git flow release finish 0.1.0, $ git flow feature start messages
6.3 used the ‘Message’ class for all message screens
6.4 added work-in-progress messages from ‘Game script.docx’
6.5 bumped version to '0.1.1-1', track new files and commit
6.6 moved all ‘Level’ arguments into a single ‘opt’ object
6.7 special game-over screen for level four
6.8 bumped version to '0.1.1-2', track new files and commit
6.9 drew nucleus, pathogens, and bricks in Photoshop, converted to GIF
6.10 drew background in Photoshop, converted to JPEG
6.11 resized to 600x600 in ‘src/game/main.coffee’ and ‘src/sass/main.scss’
6.12 added new images to ‘src/game/states/preloader.coffee’
6.13 simplified collision-type detection, using name property
6.14 slowed down game, to begin tuning difficulty
6.15 bumped version to '0.1.1-3', track new files and commit
6.16 release start 0.1.4, bumped to '0.1.4', release finish, pushed to GitHub
- Responsive landscape/portrait, and outer-frame elements
7.1 $ git flow feature start frame, bumped to '0.1.5-1'
7.2 remove pathogens which have traversed the screen, and commit
7.3 game wrapped in window-filling CSS table with #header and #footer elements
7.4 use setBounds() and camera.y to hide pathogens as they enter and leave
7.5 bumped version to '0.1.5-2' and commit
7.6 installed jQuery via bower
7.7 used jQuery to switch landscape and portrait modes, and resize canvas
7.8 pathogens enter from left and exit right in portrait mode
7.9 bumped version to '0.1.5-3', track and commit
7.10 created vein-wall graphics and added to game
7.11 created frame icons and added to game (not yet functional)
7.12 bumped version to '0.1.5-4', track and commit
7.13 made frame icons resize neatly, landscape and portrait
7.14 added links to frame icons, with css animated hover state
7.15 moved score from a game-overlay into the frame
7.16 bumped version to '0.1.5-5', track and commit
7.17 passed ‘powerups’ array to ‘Levels’ class
7.18 bumped version to '0.1.5-6', track new files and commit
7.19 amended some message text, and made level 3 easier
7.20 feature finish, release 0.1.6, pushed to GitHub
- Powerup functionality and in-game popups
8.1 $ git flow feature start powerups
8.2 added buildWall(), called when levels start, and when a pill is clicked
8.3 added a basic condom-shield graphic, which disappears after a short delay
8.4 fixed basic shield and pill functionality, to work on all levels
8.5 bumped version to '0.1.7-1', track and commit
8.6 HIV appears on level 1, but cannot hit the cell wall or nucleus
8.7 HIV ends level 2 when touched, and just breaks walls on levels 3 and 4
8.8 console.log() text at various steps in the user journey
8.9 bumped version to '0.1.7-2', track new files, and commit
8.10 HTML and CSS popup, opacity 0, with dismiss-x
8.11 popup appears at various steps in the user journey
8.12 improved playability of levels, and increasing difficulty
8.13 bumped version to '0.1.7-3', track new files, and commit
8.14 feature finish, release 0.1.8, pushed to GitHub
- Added animation, soundtrack, sound effects, and ‘Cell Survivor’ logo
9.1 $ git flow feature start animation
9.2 simple animation when HIV infects the nucleus
9.3 explode() method works on viruses, bricks, and the nucleus
9.4 bumped version to '0.1.9-1', tracked new files, and commit
9.5 added colour to popup text
9.6 added ten sfx, for in-game actions
9.7 added background music
9.8 After a player reaches level 3, the first three popups are never shown again
9.9 bumped version to '0.1.9-2', tracked new files, and commit
9.10 added background to message button, and created and added Cell Survivor logo
9.11 bumped version to '0.1.9-3', tracked new files, and commit
9.12 feature finish, release 0.1.10, pushed to GitHub
- Amends before initial launch version
10.1 $ git flow feature start amends
10.2 “Visit the International HIV/AIDS Alliance home page” hover text on icon
10.3 added the word ‘SCORE:’ above the score
10.4 speeded up the HIV virus on level 1
10.5 URL on game-over screens is now www.aidsalliance.org/worldAIDSday
10.6 added a link to the ToU in the bottom-left corner of the screen
10.7 created Terms of Use, at ‘tou.html’
10.8 splash screen has age/parental guidance text
10.9 Alliance branding on game over screen
10.10 feature finish, release 0.1.12, pushed to GitHub
10.11 fixed ‘tou.html’ links, hotfix 0.1.14, pushed to GitHub
10.12 icons, metadata, Facebook and Twitter
10.13 minor HTML fixes, hotfixes 0.1.16 and 0.1.18
10.14 pink shield, hide ‘Well done for using…’ if not used
10.15 hide first 3 popups if player reaches level 2
10.16 keyboard input for rotation, and dismissing popups and levels
10.17 hotfix 0.1.20, pushed to GitHub
10.18 text amends, hotfix 0.1.22, pushed to GitHub
10.19 screen is kept clean during boot, hotfix 0.1.26
10.20 amended Alliance header-icon link, hotfix 0.1.28
10.21 added Google Analytics
10.22 never see a popup twice, hotfix 0.1.30
10.23 added special game-over for Level three, hotfix 0.1.32
- View and record high scores, and backend leaderboard system
11.1 $ git flow feature start leaderboard
11.2 temporarily removed all popups
11.3 created and added icons for Terms of Use and High Scores
11.4 created ‘high-scores.html’
11.5 bumped version to '0.2.1-2', tracked new files, and commit
11.6 feature finish, release 0.2.2, pushed to GitHub
11.7 better ‘SCORE:’ label, fixed relative URLs, hotfix 0.2.4
11.8 better portrait fit, fixed fb in portrait-mode, hotfix 0.2.10
11.9 fixed mouse/touch controls at small window sizes, hotfix 0.2.12
11.10 “Game NOT Over”, sicker nucleus, always go to L2, hotfix 0.2.14
11.11 feature leaderboard again, began simple ‘High Score’ popup form
11.12 changed Level 2 game-over go to Level 2 complete, instead
11.13 continued ‘High Score’ popup form
11.14 bumped version to '0.2.16', tracked new files, and commit
- Google Translate, and HTML text in end-of-level screens
12.1 $ git flow feature start translate
12.2 added http://translate.google.com/translate_tools to all HTMLs
12.3 ‘message.coffee’ now uses HTML instead of canvas-text
12.4 bumped version to '0.2.17', tracked new files, and commit
12.5 $ git flow feature finish translate
12.6 $ git flow release start 0.3.0
- Fix Google Translate on Firefox
13.1 $ git flow feature start translate-fix
13.2 bumped version to '0.3.1-1' and commit
13.3 <base target="_blank"> becomes <base target="_self">
13.4 bumped version to '0.3.1-2' and commit
13.5 $ git flow feature finish translate-fix, $ git flow release start 0.3.2
- Slow down level 2, and regularise pathogen appearance
14.1 $ git flow feature start slow-down-level-2
14.2 bumped version to '0.3.3-1' and commit
14.3 @game.damage (bricks destroyed) delays HIV appearance
14.4 bumped version to '0.3.3-2' and commit
14.5 @pathogens.length and @levelFrameCount modify @opt.spawnRate
14.6 bumped version to '0.3.3-3' and commit
14.7 $ git flow feature finish slow-down-level-2, $ git flow release start 0.3.4
- Instructions Icon
15.1 $ git flow feature start instructions-icon
15.2 bumped version to '0.3.7-1' and commit
15.3 added help-toggle.coffee to enable the new help icon
15.4 bumped version to '0.3.7-2' and commit
15.5 $ git flow feature finish instructions-icon, $ git flow release start 0.3.8
- Update for latest Browsers
16.1 $ git flow feature start latest-browsers
16.2 bumped version to '1.0.1-1' and commit
16.3 fixed responsive resize issues in latest browsers
16.4 bumped version to '1.0.1-2' and commit
16.5 $ git flow feature finish latest-browsers, $ git flow release start 1.0.1
- Update for iOS 9
17.1 $ git flow feature start ios9
17.2 bumped version to '1.0.2-1' and commit
17.3 fixed text size issues in latest iOS
17.4 bumped version to '1.0.2-2' and commit
17.5 $ git flow feature finish ios9, $ git flow release start 1.0.2
- 0.0.2 initial release, to test GitHub Pages
- 0.0.4 GitHub Pages works, tidy up before build proper
- 0.0.6 basic game mechanic ready for testing
- 0.1.0 score, levels, and CNAME, renamed game to ‘Cell Survivor’
- 0.1.4 some real graphics
- 0.1.6 vein walls, frame icons, responsive layout
- 0.1.8 powerups and popups
- 0.1.10 animation, soundtrack, sfx and ‘Cell Survivor’ logo
- 0.1.12 first round of amends before initial launch version
- 0.1.14 hotfix ‘tou.html’ links
- 0.1.16 icons, metadata, Facebook and Twitter
- 0.1.18 minor fixes to the HTML files
- 0.1.20 keyboard input
- 0.1.22 text amends
- 0.1.24 qik fix
- 0.1.26 cleaner boot
- 0.1.28 amend header link
- 0.1.30 Google Analytics, and never see a popup twice
- 0.1.32 special game-over for Level three
- 0.2.2 can view High Scores
- 0.2.4 better ‘SCORE:’ label
- 0.2.10 better portrait-mode fit
- 0.2.12 fix mouse/touch controls at small window sizes
- 0.2.14 various late amends
- 0.2.15-1 begin simple leaderboard input field
- 0.2.16 qik update of Levels logic
- 0.2.17 Google Translate
- 0.3.0 Google Translate
- 0.3.1 hotfix button url
- 0.3.1-2 fix Google Translate on Firefox
- 0.3.2 fix Google Translate on Firefox
- 0.3.3-1 begin simple slowing down level 2
- 0.3.3-2 HIV cannot appear until 6 bricks destroyed
- 0.3.3-3 Regularise the frequency of pathogen appearance
- 0.3.4 better pathogen appearance
- 0.3.6 hotfix high-scores URL
- 0.3.7-1 begin instructions-icon
- 0.3.7-2 with
help-toggle.coffeeand help icon - 1.0.0-1 begin lib-upgrade
- 1.0.0 lib-upgrade
- 1.0.1-1 begin latest-browsers
- 1.0.1-2 fixed responsive resize issues in latest browsers
- 1.0.1 latest browsers
- 1.0.2-1 begin ios9
- 1.0.2-2 fixed text size issues in latest iOS
- 1.0.2 ios9