Posts Tagged ‘animation’

• By Rich

  Tags

  animation, conversion, flash, sprites

  Posted in

  HTML5

  14 comments

  12 Tools for Converting Flash Games to HTML5

  18th Jul 2012

  14

  As well as making our own games we also convert Flash games to HTML5 for clients. And having just finished our 9th conversion we’ve learnt a number of lessons along the way. So for fellow developers doing the same as us here is a list of our favourite tips, tools and libraries. Hopefully some of these can help you, and if you’ve got any others you would recommend then please leave a comment.

  1) One Size Doesn’t Fit All

  Every game we’ve done so far has been converted with the mobile web in mind. After all Flash is still plenty strong enough on Desktop, so our work has been in taking popular games designed for desktop and porting them ‘down’ to mobile browsers. As you’d expect the most immediate problem is that depending on how old the games are they can vary in size dramatically. From the classic 550 x 400 to more modern 800 x 600 and above. And needless to say, these don’t often play nicely with mobile resolutions.

  The base minimum you are likely to need to support is 320 x 480 (portrait) or 480 x 320 if the game will be in landscape. This caters for iPhone 3 and older Android handsets. However before you start resizing graphics always factor in how much room the browser UI will take-up. For example on an iPhone 3 you will lose the top 20px to the status bar and the bottom 44px to the navigation controls, neither of which can be removed in default browsing mode. In portrait mode this gives you a visible area of 416px once you have scrolled the URL bar out of the way and a paltry 268px in landscape mode, less than the 8 year old Nintendo DS. On iPads, Android phones and tablets such as the Kindle Fire this changes again.

  In short you should plan your game like you’d plan a presentation for an overhead projector: don’t put crucial information or items such as the “Play” button near the edges. And whatever you do, don’t assume that everyone will be playing your game at the same resolution. Stats from one of our own titles shows a staggering 4,000+ different reported  resolutions.

  Handy tip: If you’re going to mock-up screen shots for your client, make sure you do so with the browser UI visible. If you don’t they may assume the game is going to be full screen ‘just like a normal app’ when in reality it won’t. It may also save you precious design time later on if your designers know up-front they shouldn’t use device resolutions as their template.

  

  2) Different graphics for Low Res and High Res Devices

  I’m not going to labour on this point for long, but depending on the game you should almost certainly expect to be creating two sets of assets: SD (low resolution) and HD (high resolution) and dynamically load them based on device capabilities. You don’t want to squeeze a tiny game into the middle of an iPad screen for example, and as they’ve typically got the processing power to take advantage of pushing more pixels around it’d be wise to use that. There are a myriad of ways to deal with resizing your game for devices, and they all depend on how the game is built (canvas or DOM). Whatever you do don’t under-estimate the amount of work that goes into this aspect, but do plan for it up front.

  Read More

• By Rich

  Tags

  3D, animation, game, racing, WebbliRacers, WebbliWorld

  Posted in

  Aardman

  3 comments

  New Game: Webbli Racers is live!

  19th Dec 2009

  3

  I’ve talked before about the kids virtual world called WebbliWorld that myself and the Aardman Digital team built. Well it’s been an extremely busy 4th quarter for us as we’ve been releasing hundreds of in-world updates, as well as producing a really excellent racing game called WebbliRacers:

  

  The game has a dual purpose, and two versions exist. One to be released “into the wild” to entice new visitors to the world. And a full version that lives within WebbliWorld which has all 4 tracks and a comprehensive (and fun!) achievement system built into it. Do well and you’ll unlock special items of clothing to wear. Do very well and you can unlock items to decorate your pod (house) with. Do really well and you’ll get awarded special trophies to show-off to your peers 🙂

  The game was developed by Julian Scott (of Drift Runners fame) with art and animation by the Aardman Digital team. It’s a really beautiful game, and takes the unique and wakky style of WebbliWorld and uses it to full effect as these screen shots show:

  

  Track 1 – The cute little traffic cones blink and change colour when hit

  

  Track 2 – Take the hidden routes for extra coins

  

  Track 3 – Oh I do like to be beside the sea side!

  

  Track 4 – Looks so yummy be careful not to lick your monitor!

  I urge you to try it 🙂 You’ll need an account on WebbliWorld, but that’s a 30 second process and is 100% free. Once you are in-world click the map icon on the menu and look for the arcade machine on the left-hand side. There you’ll find the “WebbliWhizzers” zone, which is the in-world leaderboard and place to play WebbliRacers.

  The game has so many nice little touches, from the skid marks, puffs of smoke, jumps, extreme driving bonuses and excellent animation. Lots of what looks like 3D animation (spinning coins, rotating traffic cones) were in fact all hand-animated by the ever talented Robin Davey directly in Flash.

  The 4th track is my personal favourite. Originally it was going to be a volcano level, with lava and tikki statues and the like. But it was rightly decided this was a little too dull for WebbliWorld, so the idea of a “chocolate mountain” was born. So the whole track winds around caramel, marshamllow, chocolate and sticky oozing syrup volcanoes. When you drive through the goo you leave a beautiful messy trail behind:

  

  Click here to visit WebbliWorld – I look forward to seeing you on the leaderboard 🙂 and if you see “WebbliMunro” in world, come over and say hi!