impact-banner

Your First HTML5 game using ImpactJS – part 1

This is the first post from a series of tutorials that will introduce you into the making of HTML5 games using the popular javascript game engine Impact.

 A little about me

My name is Luis Zuno aka Ansimuz a few months ago i finished the biggest project in my life after 2 years of hard work: Elliot Quest an indie adventure game inspired by games like Zelda and Mega-Man. Making a game is not easy task. Especially the start so i want to help others  to start making games by sharing my own experiences and knowledge.

Well enough about me and lets get started. I will try to be the most practical and clear supposing you don’t have much experience in the matter in case you have any  question fell free to post it on the comments below and i will try to respond.

Choosing the Framework

At the moment there is a big list of HTML5 Game frameworks to choose from in our case i’ll go and choose Impact during all the tutorials.

Why HTML5?

First is pretty easy to create HTML5 games without the need of special software. They can run on almost any platform without a third party plugin such Flash. For example you can run an HTML5 game in the following scenarios:

  • A modern web browser that supports canvas
  • A desktop application for Windows, OS or Linux. (You will require to wrap your app using a webview such node-webkit)
  • A mobile device using IOS or Android
  • A gaming console such the WiiU using the NWF
  • An Android based console such the OUYA, The FireTv or the MOJO from MadCatz

Another reason that makes HTML games so attractive right now is that they can be monetized easily through sponsorships or in game ads. As Matthew let us know in his blog where he posts his monthly income. A good place to sell game licenses is the Flash Game Licenses marketplace they now accept HTML5 games.

Why Impact?

Dominic Szablewski the creator of this framework made a very good work with his javascript based engine. It’s pretty robust, it supports OOP, comes with a set of useful tools to debug and display the performance of your games in real time. Besides it comes with one of the awesomest level editors “The Weltmeister Level Editor” that runs natively in your browser window, Very complete and easy to use.

Weltmeister running on the browser
Weltmeister running on the browser

Also is worth noting that around impact theres an active community ready to help you at the impact forums. And the Official docs are well constructed and documented properly so you will always find answers and information about the engine. In my humble opinion Impact is one of the best HTML5 games framework around and is worth the license of 99 USD because Dominic keeps pushing updates regularly so you are not let alone.

Impact Special Features

  • Perfect for 2D tiled games
  • Supports a 3D view using the TwoPointFive plugin 
  • Weltmeister “The Level Editor”
  • Regular updates on the engine
  • Active Community
  • Ejecta frame work and a lot of other tools around

 Other Tools needed

Aside from the engine and a computer you will need the following:

  • A canvas enabled browser. Chrome is a good choice.
  • PHP. It will take care of saving your levels from Weltmeiste
  • Apache. Impact runs from a server. So it install apache locally
  • A text editor. To write your javascript code. I would recommend to get the webstorm IDE from jetbrains. It has a FREE trial version! It supports code hints, autocompletion and will manage your project.
  • An image manipulation software. For our pixel art i would recommend any of the following Photoshop or GIMP which is free.

Whats Next?

Preparing the Work Enviroment and setting our first project. Until next time!

Useful Links

Hey, like this post? Why not share it with a buddy?

Show all Impact Tutorials