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.

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.

8 great tools for hybrid mobile app development

Sometimes hybrid mobile app can be done but without correct tools, the app cant be done on time. It depends how developer choose what type of development tools to develop the mobile app. Mostly there are free and some tools need to be pay in other to use them. There are a several of cons and pros either for free or paid.For example, if the tool is free or in other word is for community edition, the developer wont get any support from the company who create the tools compare to paid tools, the company will give support if occur any issues.

Today I would like to share with you 8 great hybrid mobile app development tools.

Eclipse Juno R2

eclipse juno r2

http://www.eclipse.org

Dreamweaver CS6.5

dreamweaver cs6

http://www.adobe.com

Xcode5

xcode5

https://developer.apple.com

Visual Studio 2012

visual studio 2012

http://www.visualstudio.com/

Chrome

chrome

https://www.google.com

Ripple

ripple

ripple

Slimtext

slimtext

http://slimtext.org/

Github

github

https://github.com/