Zoom to point and scale (kineticjs+mousewheel)

This is a simple tip of how to create a zoom to point effect with kineticjs and mousewheel event.

So lets say that you want to zoom into a specific point on a canvas, of course you have used the excellent kineticjs framework, well then you are in luck.

To begin with this is the end-result for all the “quick-fix” people out there.

See the Pen Kineticjs zoom to point by Michael Dobekidis (@netgfx) on CodePen

The rest… come along…

Continue reading

Create grid patterns with canvas (blocks, diamonds, hex)

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.

However after creating a simple “square” grid I wanted also hexagons and diamond grids. And this is what I’m presenting here, how to create “blocks, diamonds and hexagon” grids with one convenient javascript class.

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

Continue reading

My game template on Codecanyon!

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…

http://codecanyon.net/item/gathering-items-game-template-jquery-tweenmax/4525985

Note: The template uses jQuery, jQueryUI for dragging, and GSAP to manage animation and update functions per frame.

Simple HTML5 Easter game [TweenMax as engine]

Logo Image

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!

EGG-HUNTER GAME!

As always… Enjoy!

HTML5 Video on Canvas + pixel manipulation

One of my latest experiments was to create a fullscreen background with a video, for this I used HTML5 video tag and loaded it on a canvas element.
Although it worked it somehow felt incomplete because it was simply a video as background, it needed some edge add to it, for this I decided to use Pixelate library http://close-pixelate.desandro.com/ and extend it so it supported video as well as images.
Github extension can be found also here:

https://github.com/netgfx/close-pixelate

** Note This example is best viewed with latest Chrome or Webkit browser. **

DEMO

Continue reading