Interconnecting nodes with lines using Phaser

Hello all, I haven’t posted in a while but this is an effect that I think deserves a place in here. What this effect does is to make tweening of nodes and the lines connected to those nodes move as well. I’m using Phaserjs for this and depending on your version of the browser it will show as either WebGL or Canvas.

Without any further delay here is the final effect

 

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

Advanced:

See the Pen Phaser interconnecting nodes x3 by Michael Dobekidis (@netgfx) on CodePen.373

Continue to code break down and tutorial

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

PhaserSlider UI Component for Phaser.io

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

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


PhaseSlider functionality

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Phaser.io 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

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Phaser.io 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 Vasilis Stoidis (@7linternational) on CodePen.

Nice huh?

So let’s see what this script can support.

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

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

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

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!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin