Don’t Look Back! a JS13KGAMES 2019 postmortem

Inspiration

Art direction & gameplay

A game of cowboys and chickens…
Could it really be that simple?!?
To be fair, I did warn you…

Technical choice

  • One for the <a-scene> to keep track of the 3 game states (title screen, game screen and end screen) and add/position the right entities for the current state.
  • One for target <a-entity> to set their sprite, handle their link to other targets and their animations up and down. In retrospect, it should have split into 3 separate components to manage each of these different responsibilities.

Lessons learned

VR Field of View (FOV)

<a-camera>
<!-- about 1.2m wide if positioned 1m in front of the camera
for Google Cardboard and Oculus Go -->
<a-ring position="0 0 -1" radius-inner="0.6" radius-outer="0.61>
</a-ring>
</a-camera>
FOV, not POV

Build script

  • first, watch for any file change and automatically hot-reload the game in my browser
  • second, minify my code with RollupJS + Terser, inline all my JS, CSS & images in the main HTML file, create the zipped submission bundle and report how much of the 13 kB budget is left.
package.json{
"devDependencies": {
"browser-sync": "^2.26.7",
"chokidar-cli": "^2.0.0",
"html-inline": "1.2.0",
"html-minifier": "4.0.0",
"npm-run-all": "4.1.5",
"rollup": "1.20.1",
"rollup-plugin-terser": "5.1.1",
"terser": "4.2.0"
},
"scripts": {
"clean": "rm -rf dist && mkdir dist",
"build": "run-s clean build:*",
"build:img": "cp src/img/*.png dist",
"build:js": "rollup -c --environment MINIFY",
"build:html": "html-inline -b dist -i src/index.html | html-minifier -c htmlmin.json -o dist/index.html",
"build:zip": "zip -FS -qjX9 dist/game.zip dist/index.html && advzip -z -4 dist/game.zip",
"dev": "npm-s clean dev:*",
"dev:js": "rollup -c -w --environment DEBUG",
"dev:html_img": "cp src/index.html src/img/*.png dist"
"dev:lib": "cp src/lib/* dist",
"dev:serve": "browser-sync start --server dist --files dist --host 0.0.0.0 --https",
"dev:watch": "chokidar src/index.html -d 0 -c 'npm run-s dev:html_img'"
}
}

Things I would do differently

Puzzle design

An arrow indicates which other targets get revived when a target is shot. Extra targets for Coil subscribers marked by an extra circle.

Still no content editor

A-Frame’s Web Inspector

Composing music is hard

Conclusion

--

--

--

Software engineer turned manager and father of four, I create pixel art, video games and visual experiments on the Web.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Gamers Rise Up

HotS takes characters from wow classic gold every Blizzard game (the Lost Vikings are even…

My Favorite Game of 2017: “Stories Untold”

I wrote a brief explainer of my game OCG (Obsessive Compulsive Game), but for those who would like…

The monster says “You moved it too far.”

The Theian Journal #1: Rare Skin Reveals, Icons Clash Announcement, Gameplay Updates

Must-Buy Video Game From Year 2010–2020

Planet Of Cyborgs

Scrum According to Endwalker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jerome Lecomte

Jerome Lecomte

Software engineer turned manager and father of four, I create pixel art, video games and visual experiments on the Web.

More from Medium

Optimising images for High DPI displays

Optimising Images for High DPI displays hero banner

Procedural Content Generation through a Data-Driven Approach

Why HTML Is A Must For Every Website.

Pic Of HTML / XML Tag

Adding Search to a Jamstack Site