Phaser.io how to use atlasHash to your advantage.

Lately I have been using Phaser.io as a game framework/engine. And one thing that is quite tedius, is to manage your Sprites and animation frames, it is roughly 40% of your game development time.

However there is one tool that now -that officially supports Phaser- cuts down this time at least by 90%.

View more info or download TexturePacker here: https://www.codeandweb.com/texturepacker

The tool is named TexturePacker and allows the load of all your assets and combines them very conveniently into a single Spritesheet and exports that Spritesheet along with a .json file that “tells” Phaser where to find each frame (based on coordinates on the spritesheet), this is called an atlasJSONHash/atlasJSONArray.

I have attached a video showcasing a very rough export that I will use to create today’s codepen example (see below).

Here is the end result of our game.

See the Pen OPpgZw by Michael Dobekidis (@netgfx) on CodePen.

Continue to see details about creating a Player and animations with atlasJSONHash.

Continue reading

[HTML5 Game] Nightcast, horror game

title
Nightcast is a horror game that places the player in the role of an adventurer that moves through a dark forest (too dark) and has only his trusty flashlight to guide him. As ghosts appear the player needs to dispatch them swiftly before the fear overwhelms him.
features

Game is ready to be compiled using Phonegap (config.xml included)

You can view/get the game here: Nightcast on Codecanyon

Phaser Powered Android Game: Okto*

Last week I launched my first Android Game that is powered by the amazing gaming framework Phaser. It is a reflexes and coordination game.

You can download it for free from Android PlayStore here

Okto Gameicon_96

You can also learn a bit for the Phaser Game framework from here: Phaser.io



The game source code is now available from Envato Codecanyon here: Okto* @ Codecanyon.

The compilation of the game was done with Adobe Phonegap Build.

Enjoy!

Remote collision detection (for games)

Hello all, so I have been pretty active on the “create games” front but not so much for blogging, sorry about that… So I come to you now with a Pen that razed over 1500+ views on codepen and 14 hearts so far…

It’s my implementation of a remote collision detection system that uses degrees instead of bounding boxes. This works well for games where you want to calculate the position of the shoot but the “cannon/lazer/fazer/tower” is not near the target, so instead of creating long bounding-boxes. We just calculate the degrees between the source (cannon) and the target(enemy). And when the cannon is rotated on those degrees it can fire.

Here I will show how a tank can “detect” the enemy. Here’s a quick example and the code will follow:

See the Pen Remote collision detection by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Guess Who? HTML5 Game

I have released another HTML5 game on CodeCanyon.
big_banner
A classic game for a modern browser

Features:
HTML5 and CSS3 technologies
Supports all modern browsers and tablets
Multi-language architecture
Highly customizable to change avatars/pictures/names/questions
Fully functional with AI
No-globals means wordpress compatible
Files include version of the game in Greek. Names and questions can be changed to every language.

Game is already responsive but can be further extended via media-queries.


Continue reading

Flex / Air post apocalyptic battleship game [Post-Grid]

Hello, I have just released a new Flex/Air game on ActiveDen. Check it out!

large-banner

– It features smart A.I to play against.
– Source files include cross-platform Air application AND Flex Web-application.
– High customization available.
– Based on latest Official Adobe Flex SDK (4.6)

You can find it here: LINK

Using SoundJS for games

So I was building a new game and wanted to include some sounds and an ambient sound as background music. So I bought a sound from Envato Audio Jungle, and also I asked my cousin to make me an ambient/sci-fi/space sound… He came up with a rather nice composition for a space game.
So I wanted to incorporate all these into my game, so I used one of the best libraries for javascript sound out there, SoundJS

What I did however is to create a custom javascript function/class to handle all of the game sounds and have them ready for playback when I need to fire a bullet or stop the background-sound.

EXAMPLE Here

This is how I did it:
Continue reading

Simple HTML5 Easter game [TweenMax as engine]

Logo Image

A happy HTML5 game for Easter, it was developed in under 8 hours with JQuery/UI, HTML5 canvas, and TweenMax from Greensock for the rendering and animation stuff.

Background is from April Wallpapers of Smashing Magazine!
Egg graphics are from MediaLoot freebie set of easter-eggs!

Font is Luckiest-Guy from Google web-fonts!

Tweet if you liked it, and feel free to comment here if you have any questions about the implementation or your high-scores!

EGG-HUNTER GAME!

As always… Enjoy!