Skip to content

sebaslogen/kamelo

Repository files navigation

Kamelo: The Handcrafted Animal Party

Capture

Description

Our first HTML5 game in 2D handcrafted with love and beasts. Based on the code and topics of course HTML5 Game Development (https://www.udacity.com/course/cs255) Note: The game works best on the Chrome web browser (www.google.com/chrome)

Authors

  • Sound engine and sound FXs: Jose Carlos T. C. (tapisky)
  • Game design and implementation: Sebastian L. G. (sebaslogen)
  • Play-Doh artwork & graphics: Ale & Sebas

Play the game online

Use left and right arrows to move Kami (a.k.a. the beast) and click with the mouse on the fly to catch it! Can you catch 50 flies to WIN the game? http://sebaslogen.github.io/kamelo/ProtoKameo1/ProtoKameo1/ or https://googledrive.com/host/0B1WrYF_rngpJN2c4LV8yWUZ4ckk/index.html

Screenshot: https://raw.github.com/sebaslogen/kamelo/master/capture.png

Source code

https://github.com/sebaslogen/kamelo

Tasks and bugs management

https://trello.com/board/kamelo/51499e326d78063b490017f9

License

Attribution 3.0 Unported (CC BY 3.0) - http://creativecommons.org/licenses/by/3.0/

Third party libraries

Game design in a nutshell

  • All graphics are handmade, with a combination of Play-Doh handcrafting and digital painting based on the original game concept design https://raw.github.com/sebaslogen/kamelo/master/concept_art.jpg
  • Physics library Box2D is used for flies collision but firing detection is done in a much faster and simple way to avoid unnecessary processing.
  • Layering on several canvas allows to clear and repaint parts of Kami body without having to use different resources (less bandwidth VS small extra processing).
  • Coloration of Kami's body is done using pixel color modifications on the required area of the canvas (avoiding processing of transparent pixels).
  • Sound and images are processed in atlases to reduce server requests, only big files are keep separately to allow simultaneous downloads and speed up game loading. Sound is processed with howler.js library
  • Assets (sound, images and heavy javascript) are loaded asynchronously to improve initial game load time. Around 1 second for initial paint on screen!
  • All sprites and fill patterns that have to be computed are cached once in off-screen canvases to reuse without recalculating. Images are cached to off-screen canvases to improve performance on some browsers.
  • Added support to firefox with different mouse events and fps performance improvements (still better in chrome).

Speed and load tests: http://tools.pingdom.com/fpt/#!/u7fODP5hJ/https://googledrive.com/host/0B1WrYF_rngpJN2c4LV8yWUZ4ckk/index.html