PhaserSlider UI Component for

I just released my PhaseSlider UI component, which is a (duh!) Slider with many options and functionalities, take a look at the Github repo:

View the example here for advanced:…s/example1.html
or here for basic example:…ples/index.html

PhaseSlider functionality

Continue reading


[Tip] New Solutions on HTML5 Game Development

Three Game Development Tools Compatible with Linux

In a world where technology advances quickly, it’s important for game developers to be able to cater to all platforms. The PlayStation, Xbox, and Wii are no longer the only platforms of choice when it comes to gaming. Today, the primary source of entertainment by millions of people around the world is the smartphone.

Continue reading

linkedin how to apply a grayscale filter [Tip]

So I was looking for a smart/quick/light way to apply grayscale filter to my images but not by using WebGL.
What I found is that by using Image.blendMode = PIXI.blendModes.SATURATION I could simply create an image in Photoshop and apply that blend to it. This way you don’t have to create multiple grayscale versions of the images but simply add one grayscale and re-apply it when you want.

And here’s how you can do it.

Continue reading


Mind the Gap: HTML5 Puzzle game

Hello all,

I have released another puzzle/arcade game called Mind the Gap.

Mind the Gap is a puzzle game where the player needs to throw a spinning disk and reach the victory area on the top, while avoiding the blocks.

The game is perfect for desktop and mobile play, and supports click & touch events.

Created with HTML5 canvas and game framework.

  • Support for mobile and Desktop
  • Ready for launch mobile stores with Phonegap/Cordova
  • 20 Levels of increasing difficulty
  • All game graphics are included (.psd format)
  • Easy config with .json to add infinite amount of levels

Parallax effect animation with TweenMax (part 2)

This is the second part (and most recent) of a parallax tutorial and animation using GSAP TweenMax. Before we begin a little bit of theory behind the parallax effect.

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. The term is derived from the Greek παράλλαξις (parallaxis), meaning “alteration”. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.

Here’s an example of the final effect

See the Pen Parallax with Tweenmax by Michael Dobekidis (@netgfx) on CodePen.

Continue reading


Phonegap/Cordova read images from gallery folder [Tip]

Hello, recently I was working on a project where I wanted to get all the images from the camera but because I wanted to load them in batches I had to find their filenames and store them in a local array for future use.
Since the new cordova file plugin did some changes, there is little information on how to get directories and files.

So here is how it is done on Android (because Apple doesn’t allow access to public folders).

Continue reading


New Game on Codecanyon > Jaws Saga: 3000AD

Hello all
I have launched another game on codecanyon which uses at its core, it is an arcade game of sorts like lunar-lander but with a shark… and rockets… and traps and you must never touch the floor, ok its nothing like lunar-lander apart from the low-gravity…

speed (4)

Check it out: Jaws Saga: 3000AD

Continue reading

linkedin Modal creator

Recently as I was building a new game, I realized that one of the most re-used elements across a variety of games is the “modal”, whether it is a countdown, a message modal or a game-over modal.
So I thought to create a little snippet that would make creating a modal an easier task, with the following script we can create a large combination of either text, bitmaptext or images.
So enough with the presentation, lets see how it looks, in this codepen I created six examples for all tastes.

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

Nice huh?

So let’s see what this script can support.

Continue reading

linkedin how to use atlasHash to your advantage.

Lately I have been using 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:

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