[HTML5 Game] Nightcast, horror game

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.

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

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

Add/Remove text from HTML using only CSS

This is a neat trick that recently came very handy as I wanted to change the text of a paragraph tag but only had access to the .css file of the page.

Heres what it looked like:

<p class="someclass">
   <a href="#">Some Link</a>
   "Some text embeded in the paragraph tag, oh my!"

Yes it was that bad. So here’s what I came up with (might be around for sometime now, but could not find something fast in google)

The CSS:

   color: rgba(0,0,0,0); /* to make inside text invisible */
   text-align: center;
   white-space: pre;

.someclass a {
   display: none;

.someclass:before {
   content: "Powered by Netgfx.com";
   text-align: center;
   font-weight: bold;

So what we did here was to make the existing text invisible by applying a color using rgba and setting the alpha to 0, and then add some new text with the css “content” attribute and the pseudo-selector :before/:after.

Problem solved!

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.


Animated Ad with Greensock SplitText

Hello again, so I was asked to create an impressive Ad banner for a server company (a quite good one). Since most of the animation would involve letters I thought of the Greensock SplitText plugin.
And the result was extremely nice, it received over 1000 views on codepen in under 3 days.

Here is the animation in action, as always explained code follows.

See the Pen SplitText – Massive grid animation by Michael Dobekidis (@netgfx) on CodePen.

Find more info about SplitText plugin here:

Continue reading

Create Animated Menu for Mobile fallback

Recently I read a very interesting article about some css animations. One of my favorites was the one with the menu that looks like a fallback for mobile devices. So I thought to replicate the effect (with some twist) with greensock TimelineMax (you can also use TimelineLite).

Here is what the end effect will look:

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

The article for CSS animations can be found here:


Continue reading

Kineticjs Drag & Drop

KineticJS inherently supports dragging of elements, but what if you need “Drop” as well, sure you may drop anything anywhere on the stage but most of the times we want to be able to drop stuff in a pre-defined position and then apply some transformation. This is an example how we can achieve something like this easily.

Here is a codepen DEMO:

See the Pen Kinetic JS drag n drop by Michael Dobekidis (@netgfx) on CodePen.

So let us break it down and see how it is constructed.

Continue reading

[Tip] Fix AS3-Flex Error #2032 Stream Error

Recently I encountered an error #2032 within a two year project in Flex, for three days I struggled with it and tried almost everything, this is why I’m posting this here so that it might save someone else time.

This error occurred when I tried to do an HTTPService call to the Back-End and send some really heavy file. The file would require Back-End parsing and when that was over it would return a result. However mid-way the POST call would be interupted and I was presented with a #2032 Stream Error fault.

The solution was both simple and extremely hidden and in my opinion stupid. In the HTTPService I had set the property:

this.requestTimeout = 3800;

However as shown in this post: http://stackoverflow.com/questions/8820715/flex-httpservice-times-out-anyway

This property is NOT taken into consideration by the HTTPService.

It needs:

import flash.net.URLRequestDefaults;
URLRequestDefaults.idleTimeout = 1200000; // or any amount of time in ms

This way we override the default timeout of EVERY call and thus the request no longer fails…

I truly hope this helps someone as the above post helped me.

Top Down Tilemap Editor beta

Hello all, this time I’m releasing one big tool as open-source, I have been working on this for the past few weeks and I think it can be of use to some.
So what is a top-down-tilemap-editor, it is a tool that can help when creating top-down maps for various games or simply to print them.

I struggled with many other programs and tilemap editors but almost all were lining towards platform games, however I’m mostly working with topdown games. So I started to create a map-editor that would be easy to use and would export a json string that I could import to my game and be ready to go.

Show case

So what can this map editor do for you:

  • Import of JSON as exported by it.
  • Export of JSON bases on the names of the tile images e.x (corner.png will become corner in the json)
  • Load of a sample Map for quickstart
  • Load extra items along with tiles
  • Load custom tiles from Dropbox
  • Print tiles for export
  • Adjust Width and Height of Map

You can fork or simply download it here: TNTMapEditor on Github

Or try it out here: TNTMapEditor DEMO

Feel free to post any bugs or request features on the github page. (Issues page)
If you use it for a project drop me a line if you wish.

Sample export: http://nightlycoding.com/wordpress/wp-content/uploads/2014/03/www.netgfx.com_trunk_games_tntmap_preview.pdf

Click and Drag multi-selection rectangle with Javascript

This is a nice solution for a problem occured when making strategy games or wireframe applications. Or generally when we want to select multiple items and have them in a visible group.
It is a rather simple solution once the math make sense.

Here’s a nice example I made on codepen. Simply click and drag to form a rectangle around one or both of the objects.

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

Continue reading