Start Developing HTML5 games in Phaser using TypeScript

TypeScript is a superset of JavaScript which compiles to plain JavaScript. Anyone with an intermediate knowledge in JavaScript knows that as the project complexity increases, the number of classes and script files increases. JavaScript differs from other languages and the OOP is done through prototypical inheritance. Lack of typing and intellisense in IDE is another problem. TypeScript solves all these and helps developers with all the things they need – typing, auto-completion etc. TypeScript came from Microsoft and thus both Visual Studio and Visual Studio Code has full support for the syntax with intellisense. Continue reading

Creating an html5 game like concentration

In this tutorial, we are going to explore various features of the phaser library by creating an html5 game like concentration. One of the advantages of using the phaser library is its cross-platform compatibility. And it is very easy to prototype a game. You can learn so much things by going into the phaser website.

There are so many tutorials on internet about phaser or this games. But here, we are going to explore various aspects like loading texturepacker spritesheet, using phaser custom signals, phaser tweens etc. It is not what you create, but how you create the game.

Continue reading

Multiscreen development in phaser 2.4.2

Earlier, I posted a tutorial on scaling the game and assets for multiple devices. But it does not work very well in latest phaser version 2.4.2(as if the time of writing). So I thought it will be good to post an updated version for the latest phaser.

The idea is simple, Create a group and add all of your game objects into that group. After that, scale and position the group correctly to display the game fully inside the browser/device. The scaling and positioning is done such a way that there will be no black bars around the game and it will be in the correct aspect ratio. Continue reading

Multi screen game development in Phaser

Note: This tutorial was targeted for a previous version of the Phaser library. The updated version can be found here.

Phaser is a robust, famous multi-platform game development framework based on the fast PIXI library. It is getting much attention now-a-days. There are so much examples there in http://examples.phaser.io/, and thus learning Phaser is very simple.

First of all, thanks for the team behind this excellent library. When we consider multi-platform development, we need to think about multiple resolutions and devices. Using high quality assets in big screen devices will ensure your game will look beautifully on those. But this high quality assets will affect performance of low end devices, so we need to load the graphics for each devices separately and scale up or down the game according to the screen resolution.
Continue reading

SoundWrapper class for SoundJS

CreateJS libraries are very helpful in creating stunning html5 games and apps. This library has a SoundJS library which can be used to play sounds. It can decide which one to load according to the device capability. However, while coding games, we may need to play musics, play sound effects, stop, fade, crossfade etc. For this, we have to manually call some methods. For fading sounds we have to create a loop and reduce the volume of a sound.

Continue reading