So I have to admit that I’m using Codepen alot, I’m also liking their “love/like” button. So I set to recreate the effect.
This pen is still quite sought after and has received many “likes”
This is the end result
See the Pen Codepen heart by Michael Dobekidis (@netgfx) on CodePen.
Continue if you want to know how it was build.
I wish you all happy new year!
Here’s a little codepen made with the gaming framework Phaser.io
See the Pen Christmas 2014, from 7L by Michael Dobekidis (@netgfx) on CodePen.
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
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.
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:
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:
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.
Potion Master is a puzzle game, where the player has to guess the right combination set by the AI.
This game includes:
- Build-in A.I
- Build-in Tip system
- Sound manager & Sounds
- HD Graphics
- Gracefully scales to different screen-sizes
- Access to local-storage
- Infinite theme posibilities
You can view the game here: Potion Master on Codecanyon
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.
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
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.