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:
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
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.
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.
Hello once again, this time I will show a nice technique to create exploding particles with KineticJS.
First of all we setup the stage and the canvas objects.
See the Pen kineticjs collision detection by Michael Dobekidis (@netgfx) on CodePen.
When I first read about flexbox I was quite sceptical because I thought that this would be poorly executed and the developers would have to hack around several things.
But I was delighted to be wrong… flexbox seems quite promising and it actually makes creating a simple timeline graph a 5 minute procedure.
For those unfamiliar with the CSS Flexbox spec here are some cool resources:
Now onward to our little project.
What we are trying to achieve here is to create a “timeline” based block-graph.
This is the end result:
See the Pen Flexbox graph by Michael Dobekidis (@netgfx) on CodePen
While making some experiments with a game, I felt the need to add a grid to the background, after much thinking I decided that canvas should be the “best” solutions for this.
See the Pen Create grids by Michael Dobekidis (@netgfx) on CodePen.
Finally I have had some free time and thought to try my luck with Codecanyon, which is a place were authors and coders get to monetize their works and for people to get some high-quality code/themes/templates/apps build-in and ready to go.
So I managed to “transform” my game of Easter-egg-hunting into a framework for gathering games (games where items drop and the player has to collect them) I added some code, removed much, and generalized the core to actually adapt and be manageable through a JS file that the user can alter to create his own game.
The template offers:
- mobile and modern browser support
- media-queries baked inside
- responsive gameplay
- auto pause when the player changes tab or browser loses focus
- highly customizable options like: background, items, gathering image, score, etc…
- High performace even on mobile devices, by using multiple canvases
- And per frame collision detection
So check it out, and buy if you also want to create your own gathering game…
Note: The template uses jQuery, jQueryUI for dragging, and GSAP to manage animation and update functions per frame.
A happy HTML5 game for Easter, it was developed in under 8 hours with JQuery/UI, HTML5 canvas, and TweenMax from Greensock for the rendering and animation stuff.
Background is from April Wallpapers of Smashing Magazine!
Egg graphics are from MediaLoot freebie set of easter-eggs!
Font is Luckiest-Guy from Google web-fonts!
Tweet if you liked it, and feel free to comment here if you have any questions about the implementation or your high-scores!
As always… Enjoy!