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.
Classic hangman game with a plot twist
Dictionary with over 1800 words
Supports themes, and theme creation
Includes two themes ( blackboard and notepad )
Adaptive design that manages size in different devices
Included video help file for changing Theme
Check how easy it is to change themes:
I have released another HTML5 game on CodeCanyon.
A classic game for a modern browser
HTML5 and CSS3 technologies
Supports all modern browsers and tablets
Highly customizable to change avatars/pictures/names/questions
Fully functional with AI
No-globals means wordpress compatible
Files include version of the game in Greek. Names and questions can be changed to every language.
Game is already responsive but can be further extended via media-queries.
Hello, I have just released a new Flex/Air game on ActiveDen. Check it out!
– It features smart A.I to play against.
– Source files include cross-platform Air application AND Flex Web-application.
– High customization available.
– Based on latest Official Adobe Flex SDK (4.6)
You can find it here: LINK
So I was building a new game and wanted to include some sounds and an ambient sound as background music. So I bought a sound from Envato Audio Jungle, and also I asked my cousin to make me an ambient/sci-fi/space sound… He came up with a rather nice composition for a space game.
This is how I did it:
Hello, I just released a grid pattern constructor on Envato Codecanyon. This Grid-pattern is ideal for wireframe templates, blueprint designs or as a simple background.
The grid contains a build-in mechanism for responsive re-draw, and can be easily customized to include other grid-patterns, right now it can produce: blocks, diamonds, hexagons, circles and diagonal lines
You can find it here: Canvas Multi-Grid
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.
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…
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