I had some free time and thought to experiment a bit with the new DrawSVG plugin from Greensock, it is a plugin that animates the border of an SVG, other parts of the SVG like fill or opacity could already be tweened via TweenMax/Lite.
Here’s a quick tutorial to get you started and I hope you’ll forgive my lousy Illustrator skills…
See the Pen OPNOgM by Michael Dobekidis (@netgfx) on CodePen.
Learn more about the SVG Plugin here: Greensock DrawSVG-Plugin
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
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!"
</p>
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:
.someclass{
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";
color:#ffffff;
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!
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.
Enjoy!
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/
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.
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.
Potion Master is a puzzle game, where the player has to guess the right combination set by the AI.
This game includes:
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:
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
