Building HTML5 Games with ImpactJS – Part 1

In this tutorial you will develop simple html5 game using impactjs library. You will learning:

  • Setup Development Environment
  • Build a complete game with core logic, collision detection, and player and enemy behavior
  • Display and animate game artwork with sprite sheets
  • Add sound effects, background music and text
  • Create screens to display stats and in-game status
  • Prepare to publish by compile your game files into single file

Overview

Impact is a JavaScript game framework created by Dominic Szablewski. Impact takes advantage of the modern browser’s Canvas element in order to create high-performance 2D games on the Web and even mobile. One of the biggest advantages of using Impact is that it is easy to pick up, comes with very good code examples, has an active community, and has a very robust level editor called Weltmeister. The only barrier of entry is the licensing fee for the software, since it is not open source. After purchasing a license, you do get the full source code, the Weltmeister level editor, and free current major version updates (1.x). While there are other open source and free JavaScript game frameworks out there, Impact has an extra level of polish I haven’t seen with anything else so far. http://impactjs.com/

impactjs

impactjs

What do you need for this tutorial

Setting Up a New Impact Project

Before we can start this tutorial, you need to make sure you already purchased Impactjs library from link above and install all the software that I mention it before. To get started, copy the Impact project into your localhost. You should see the following files

Impact project files

Impact project files

You can rename impact folder to you own game project name. Mine is myNewGame. Here is a quick breakdown of everything in the folder:

  • index.html – This is the main .html file that runs your game.
  • lib – This is the core code for Impact and where you will store your own game-specific JS files. This also contains the source code for Weltmeister.
  • media – This is the assets directory, and where all game art and sound files will go.
  • tools – This directory contains .php scripts to minify your game’s JS files and make it harder for people to have access to the game’s source code. This is part of the license and is important so you don’t accidentally distribute the source code.
  • weltmeister.html – This is the level editor’s .html file.

Open your chrome and navigate to http://localhost:8888/myGame/index.html.

It Works!

It Works!

What is canvas? On the HTML canvas, you can draw all kinds of graphics, from simple lines, to complex graphic objects. The HTML <canvas> element (introduced in HTML5) is a container for canvas graphics. An HTML canvas is a rectangular area on an HTML page. Canvas has several methods for drawing paths, boxes, circles, text, and graphic images. http://www.w3schools.com/html/html5_canvas.asp

Modules

You can refer here for more details, http://impactjs.com/documentation/class-reference/ig-core.

Core Classes

Impact is made up of several core classes that revolve around the game framework and all the necessary systems such as rendering, maps, sounds, and more. All the classes are in the ig namespace, which is set up by the core class. http://impactjs.com/documentation/class-reference/ig-core

Level Editor

One of the best features of Impact is its level editor called Weltmeister. It is located in the libs/weltmeister folder inside the Impact project.

Weltmeister

Weltmeister

Next tutorial we will discuss about sprites and how to design the artwork for our HTML5 game. Stay tune.

Resources for build HTML5 games

Be sure to check out these websites, all of which provide helpful extra information.

HTML5 game

HTML5 game

All about IAPS

bit.ly/io6BYiv

In-app purchases are more efficient if they are optimised to use the psychology of the player to its advantage. The overwhelming success of some of the titles has led to OFT stepping in with a set of regulations that are well worth checking out.

Documentation of crafty.js 

crafty.js.com/api/Crafty.html

Having a deep understanding of your chosen tolls is paramount to being able to use them efficiently. The manual for Crafty.js provides a great overview of the overview of the various functions that are contained in the framework. For most of them, a small example with further data is also provided.

Gamasutra

www.gamasutra.com

GamaSutra is the online version of the Game Developer magazine. The website provides a smorgasbord of interesting, amusing and inspiring content that can be useful for game developers and designers. Some of the stories also take a helpful look at marketing.

Html5 game engine

Html5 game engine

Html5 game engine

html5gameengine.com

The web is full of game engines. The HTML5 Game Engine list contains an overview of all products that are available. You can list the engines by their feature set, or even analyse them by popularity or specifies such as frequency of update.

Reference: web designer, ISSUE 225

Setting up your cocos2d-js environment

In this tutorial, I will show you how to setup a Cocos2d-JS development environment. What is cocos2d-js ? Cocos2d-js is Cocos2d-x engine’s javascript version which include Cocos2d-html5 and Cocos2d-x JSBinding. It support full Cocos2d-x features with a set of simplified javascript friendly APIs.

Cocos2d-JS Structure-2

Cocos2d-JS Structure-2

What you need for this tutorial?

Download and install Webstorm 8.0. Download latest cocos2d-js here, http://www.cocos2d-x.org/filedown/cocos2d-js-v3.0-beta.zipDownload and install Chrome 34 and the JetBrains-IDE-support extension.  Download Android NDK and SDK. Extract cocos2d-js-v3.0-beta into your machine. CD to your cocos2d-js directory. Mine is /Applications/cocos2d-js. Then run setup.py.

cd /Applications/cocos2d-js
python setup.py
cocos2d-js

cocos2d-js

Then create a new project.

cocos new MyNewGame -l js -d /Users/MNurdin/Documents/Game
cocos2d-js

cocos2d-js

You can run Cocos2d-JS project with a Websever.

cd /Users/MNurdin/Documents/Game/MyNewGame
cocos run -p web
cocos2d-js

cocos2d-js

cocos2d-js on Webserver

cocos2d-js on Webserver

You also can compile and run project in Cocos2d-x on iOS, android and Mac. 

cocos compile -p ios|android|mac
cocos run -p ios|android|mac
Compile and run project in Cocos2d-x JSB

Compile and run project in Cocos2d-x JSB

Download WebStorm and run it.  Choose Create New Project from Existing Files.

WebStorm 8

WebStorm 8

Choose Source files are in a local directory, no Web server is yet configured and click Next to continue

WebStorm 8

WebStorm 8

At this step, you should expand the directory tree to specify where you put your MyNewGame source code. After you have specified the correct directory, note that the Finish button is still gray. Now we should set the directory as Project Root. Click the Project Root button and the Finish button will be activate.

WebStorm 8

WebStorm 8

Now we debug Cocos2d-JS javascript code within WebStorm. Connect WebStorm to Chrome with JB chrome extensions. Right click the index.html under /Users/MNurdin/Documents/Game/MyNewGame and choose Debug ‘index.html’.

Debug Cocos2d-JS javascript code within WebStorm

Debug Cocos2d-JS javascript code within WebStorm

Debug Cocos2d-JS javascript code within WebStorm

Debug Cocos2d-JS javascript code within WebStorm

Debug Cocos2d-JS javascript code within WebStorm

Debug Cocos2d-JS javascript code within WebStorm

In this tutorial, I have shown you the basic steps to configure cocos2d-html5 to work with WebStorm 8, including configuring syntax aware auto complete and debugging. The process is quite simple and straightforward. If you have any questions or suggestion of this tutorials, please let me know.