Sunday, June 30, 2013

Crafty JS Tutorial (DX Ball / Breakout)


This Crafty JS tutorial is part of Alkottab Studio's internship program, to take developers with no previous game development experience in the quickest way to production phase.

  • Previous development experience.
  • The very basics of HTML/CSS/Javascript.
  • Finishing the first part of the Crafty tutorial on its website. [ How Crafty worksDownload and Setup ]

Section 1: Game description:

  • A ball continuously moving and hitting walls and bricks.
  • Bricks are destroyed and points are collected when hit by the ball.
  • User controls a bat and moves it right and left to prevent the ball from hitting the ground.
  • If the ball hits the ground, a life is lost.

Section 2: File Structure:

Before starting the tutorial, it is better to explain how the files are arranged:
  • index file : links to JS files, game div, some simple CSS.
  • js directory: Crafty file and game file.
  • assets directory: images and spritesheets used.

Section 3: Coding considerations:
  • For a cleaner code, some complex game items will be separated as Crafty components to be used later in game scenes.
  • To handle game constants, variables and cross-component calls (like an object wanting to affect the score bar), I will make a simple game manager to contain values and functions connecting between components.

Section 4: Scenes:
  • Loading: A scene only for loading game assets and giving the user a progress indication.
  • Home: Main Menu screen of the game. For now, it will contain only a start button, but it can have more buttons and some graphics representing the game.
  • Game: the scene with the actual play.
  • Total Score: When a user wins or loses, this scene will show the total score.

For the complete tutorial, view the PDF file online (link) or download the PDF + code (link)

No comments:

Post a Comment