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

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:

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

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

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

Secret Word, (a hangman game with a twist)

I have launched yet another game. This time is a classic hangman game build with HTML5 Canvas and Javascript.


Classic hangman game with a plot twist

Game Features:

Dictionary with over 1800 words
Supports themes, and theme creation
Includes two themes ( blackboard and notepad )
Adaptive design that manages size in different devices
Included video help file for changing Theme

Check how easy it is to change themes:

Guess Who? HTML5 Game

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

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