Nightly Coding; » Home Page

Phaser.io how to use atlasHash to your advantage.

  By Michael Dobekidis | January 20, 2015 - 10:45 | , , , , , , , ,
Leave a comment

Lately I have been using Phaser.io as a game framework/engine. And one thing that is quite tedius, is to manage your Sprites and animation frames, it is roughly 40% of your game development time.

However there is one tool that now -that officially supports Phaser- cuts down this time at least by 90%.

View more info or download TexturePacker here: https://www.codeandweb.com/texturepacker

The tool is named TexturePacker and allows the load of all your assets and combines them very conveniently into a single Spritesheet and exports that Spritesheet along with a .json file that “tells” Phaser where to find each frame (based on coordinates on the spritesheet), this is called an atlasJSONHash/atlasJSONArray.

I have attached a video showcasing a very rough export that I will use to create today’s codepen example (see below).

Here is the end result of our game.

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

Continue to see details about creating a Player and animations with atlasJSONHash.

Continue reading →

facebooktwittergoogle_pluspinterestlinkedin
linkedin

How to create a Codepen Like/Love button

  By Michael Dobekidis | January 14, 2015 - 20:33 | , , ,
Leave a comment

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.

Continue reading →

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Simple SVG animation with Greensock DrawSVG-Plugin

  By Michael Dobekidis | December 13, 2014 - 15:38 | , , ,
Leave a comment

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

Continue reading →

facebooktwittergoogle_pluspinterestlinkedin
linkedin

[HTML5 Game] Nightcast, horror game

  By Michael Dobekidis | November 27, 2014 - 13:55 | , , , ,
Leave a comment

title
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.
features

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

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

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Add/Remove text from HTML using only CSS

  By Michael Dobekidis | October 22, 2014 - 16:37 | , , ,
Leave a comment

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!

facebooktwittergoogle_pluspinterestlinkedin
linkedin

Phaser Powered Android Game: Okto*

  By Michael Dobekidis | August 3, 2014 - 11:01 | , , , ,
Leave a comment

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

  By Michael Dobekidis | July 31, 2014 - 21:42 | , , ,
Leave a comment

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

  By Michael Dobekidis | June 16, 2014 - 07:40 | , , ,
Leave a comment

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

  By Michael Dobekidis | May 13, 2014 - 08:57 | , , , ,
Leave a comment

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