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

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:
http://www.greensock.com/splittext/

Continue reading

facebooktwittergoogle_pluspinterestlinkedin
linkedin

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:

http://www.webdesignerdepot.com/2014/04/3-stunning-css-animation-effects-that-will-captivate-your-users/

Continue reading

facebooktwittergoogle_pluspinterestlinkedin
linkedin

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

facebooktwittergoogle_pluspinterestlinkedin
linkedin

[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.

facebooktwittergoogle_pluspinterestlinkedin
linkedin

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

facebooktwittergoogle_pluspinterestlinkedin
linkedin

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

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Replay system for KineticJS and HTML5 Canvas

I have been struggling with the lack of replay procedures in HTML5 gaming, with flash things were quite easy because we could save all of our game sessions as movies or swf files that could be later on viewed. With HTML5 we don’t quite have that, or it is not as easy. So I was thinking of ways to produce movies from canvas.
And then it hit me… images can produced as urls and canvas can be exported as an image, and what are continuously changing images? A movie!

So I went on and made a codepen about this. And quite frankly it kinda looks awesome. Of course some more brilliant minds than mine could dig into this and help me make it truly useful for all.

So let’s see the pen first. The procedure is as follows:

We click record and move the box around
Then we stop and we watch the movie that was produced.

See the Pen Record & playback for canvas by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

facebooktwittergoogle_pluspinterestlinkedin
linkedin

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

facebooktwittergoogle_pluspinterestlinkedin
linkedin