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…
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!
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:
** Note This example is best viewed with latest Chrome or Webkit browser. **