This is the second part (and most recent) of a parallax tutorial and animation using GSAP TweenMax. Before we begin a little bit of theory behind the parallax effect.
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. The term is derived from the Greek παράλλαξις (parallaxis), meaning “alteration”. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.
Here’s an example of the final effect
See the Pen Parallax with Tweenmax by Michael Dobekidis (@netgfx) on CodePen.
Recently as I was building a new game, I realized that one of the most re-used elements across a variety of games is the “modal”, whether it is a countdown, a message modal or a game-over modal.
So I thought to create a little snippet that would make creating a modal an easier task, with the following script we can create a large combination of either text, bitmaptext or images.
So enough with the presentation, lets see how it looks, in this codepen I created six examples for all tastes.
See the Pen Phaser Modals by Vasilis Stoidis (@7linternational) on CodePen.
So let’s see what this script can support.
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.
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.
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