Earlier this year I was very excited to come across the above. This my friends is a screen shot of the game Google made to celebrate the anniversary of Pac-Man. In their ultimate wisdom they decided to launch a version of their Home Page where the Google logo was actually a playable version of the game Pac-Man, it was all done using HTML5. And that is damned cool.
Kudos to Flash
Before I continue I just want to quickly say that I’ve always loved Flash and indeed I still do. Of course that is providing it is being used correctly, and by that I mean it is being used to make games as opposed to entire websites (urghhh). Once upon a time there were no Flash Alternatives for making decent interactive web content, and for the most part there still isn’t. Especially when we’re talking games, Akihabra is a great HTML5 Game Engine but it is still in its infancy, and indeed it pales in comparison to Flixel the Flash based equivalent. However once upon a time, say 10 years ago, neither Flash nor HTML5 existed and you needed to be a grey bearded linux guru, skilled in the art of writing complex C++ code, to make a game.
Like it or lump it Adobe Flash changed the playing field and raised the bar so damned high, that the people who sit around tables and decide on things like browser based web standards, actually decided to make HTML5 do amazing things that previous web browsers couldn’t do – including the ability to run games. And for that reason alone, for simply raising the bar, you really should be taking your hats off to Flash.
HTML5 is a developing technology used for making websites, and we’re just starting to see its capabilities in more advanced uses such as games. Developers all around the World have started building all sorts of games using HTML5 – we’re looking at platform games, top down games, and even 3D games like castle Wolfenstein.
For those of you who don’t know what HTML is, HTML is the skeleton behind every single website on the internet. Every time you use Facebook you’re looking at an HTML page. Every time you use YouTube you’re looking at an HTML page. Every time you do a Google search… thats right you’re looking at an HTML page. Its everywhere and at the moment its best know for structuring web pages – even this one. Advanced HTML, at least by todays standards, are things like Roll Over buttons, image slide shows, and the ability to Drag and Drop objects around your screen – imagine dragging a virtual product into a Shopping Basket. Well thats pretty fancy for todays web browser.
At least that “was” pretty fancy for a web browser until HTML5 came along. What you can expect to see in the future is infinitely more advanced. Lets extend the logic we just used for dragging and dropping a product into a cart. Now in your mind imagine replacing “drag and drop” for your arrow keys, imagine selecting a product, and then using the arrow keys on your keyboard to steer the product into your shopping cart. Your reward – your product is now ready for purchase.
At a very basic and rudimentary level that is what people in the gaming world might call Collision Detection. Now let us imagine that the Product is a Character in a game and the Shopping Cart is actually a Chest at the end of a level – the Character collides with the Chest and a new page is loaded (we’ll make a game to demonstrate this I promise).
This my friends is all becoming possible in your web browser, once upon a time, not so long ago it was not even close to being possible. In the past you “needed” Flash to do certain things in a web browser. But shortly, one day in the future, you will not. This my friends is a fundamental progression in browser based technology.
HTML5 + DoubleHappy
What does this mean for you? It simply means that your games will run on more devices and web browsers – including the browser that comes with the iPhone / iPpad. For you this is awesome – because it means that you’ll be able to make games that run on these devices without having to even know what a grey bearded linux geek is.
Over the next couple of months we will be extending DoubleHappy so that it produces HTML5 games. We have started putting together a number of prototype games which we will be releasing over coming months – in time, with your help and consultation these games will become the DoubleHappy framework for HTML5 games.]]>
The following image give you an idea of what to expect / what to look out for when making a level. Its really easy to do;
1) Click on the Moving Tile icon in your tool bar
2) Select which tile you want to move
3) Select where you want the moving tile to move to
Done! It really couldnt be much easier then that – unlike the previous game editor we did not have any visual guides to show you where the tile was going to move too. This feature currently can only move one tile at a time but in the future we envisage Moving Tile Sets too. Check it out and lets us know what you think
So far the best font site we’ve found for Japanese fonts is Maniackers, mostly because their fonts are TTF which is a good thing. Maniackers along with a few others are listed below – hope they help you too.
Fonts found on my Japanese Font Trip to Google
» Manicakers – TTF Fonts
» /e font – japanese bitmap font collection
» Eutypoce – free fonts
» Flop Design – all sorts of fonts and stuff
» Font Leech – lots of font related links
» download game fonts]]>
A revolution in Flash game production. An amazing new way for man to interface with machine. The beginning of a new tomorrow. Never before has the world witnessed such a collection of AS3 files.We put it all in the new flixel 2. Groups to help organize game objects, quad trees for faster, more accurate collisions, a cleaner API, plus all the old flixel classics: animated sprites, tilemaps, and particle emitters. Most importantly, flixel is still completely free for personal or commercial use. What are you waiting for? It’s time to make games!
Flixel is becoming an integral part of our long term plan. Why? Because we don’t want to recreate the wheel.
The Flixel engine will allow us to focus on creating an amazing tool for building games. It allows us to focus on our creator and the social networking website that will be built around our games. The social network powered by WordPress will tie into our games database so that you will be able to share your games with your friends where they will be able to rate your games, comment on your games, and of course play them on their Android & Symbian devices.
These guys do some cool stuff. We’re taking the best bits and leaving the worst – nobody wants to have to make something on their desktop. This is the 21st century chaps and we’re going to be doing what they do but it’ll all be done here on this website where you get to it all under the one roof.
For me this is the future. More and more of what we see and do is going online, once upon a time you had to make word docs using Microsft work using Microsoft office. But not any more. Similarly, once upon a time you had to make games for the iPhone and iPad using only tools the big evil corporation wanted you to use to make games. But not any more.
Using Akihabara you can make games that run in any modern web browser including those that come with the iPhone and iPad without having to know difficult programming languages. In a future write up we’ll tell you how.
We love these guys because their tools inspired the design for our level creator.
First step is figuring out what kind of character you want. The requirement here was for a boss character that you would find lurking in a dungeon environment. That opens up a wealth of possibilies such as goblins, golems, rats, skeletons, wizards, suits of armour, etc. We decided we liked the idea of a headless knight, or possessed suit of armour, so I did a bit of research to generate some ideas for the design of our new character. I came upon the idea of a suit of armour dragging around a ball and chain and sketched what I thought this could look like for our game. It would be important to keep the style of the character similar to other things in the game to prevent this new character from appearing out of context.
Then I started some rough sketchy animation, just to get the feel of how he would move around. I wanted him to be relentless and purposeful, yet bogged down by the armour and ball and chain so his motion needed to feel as if he was straining forward.
(I discovered a nice formula for a 6 frame walk cycle where one leg is 3 frames behind the other in sequence, and the sequence is: Down, Back, Lift, Forward, Place, Contact, and then repeat. You can see it best in the brightly coloured legs).
Once I had the rough animation done and looping nicely, I went on to refine the lines of each frame to be pixel perfect, and started to block in the outlines with colour. Then I added shadows and highlights on each part of armour to give depth to the character. This is the finished result of the walk cycle.
Now we needed an attack animation, so I researched clips of people lifting up something heavy and swinging it down – the best example of this was wood chopping. From there I isolated the important frames to give the feel of the action without having an excessive amount of frames (don’t want to spend ages shading 100′s frames).
The flashing numbers in the top corner represent what particular body part is being recycled – this way we don’t have to redraw similar looking parts, we can just find frames where they appear similar and reuse the part. As long as this technique is not overused, it will remain largely unnoticed.
And here is the finished result:
Inspired by minimalist Web 2.0 designs, this new look and feel favours function over form – but still delivers a sleek, stylish aesthetic.]]>
First up we will be showcasing the “Sphinx”. Inspired by Egyptian mythology, the Sphinx is a huge feline with a human head and possess demonic powers of death and destruction. The Sphinx stands resolutely in place as a guardian of the lands beyond, and when intruders approach, it belches forth a plague of flesh-eating locusts. If you get close to destroying the Sphinx, it will charge towards you and tear you to shreds with powerful slashes of its huge golden claws.
Here is the development of the design for the Sphinx so far: