Posts Tagged ‘action’

Llama League

Tuesday, December 15th, 2015

2016-04-09 14.18.09Play crazy llama football with a friend or by yourself in this finger-skills game from Aardman Digital. Pick your location, llama and bling. Then learn the perfect moment to kick the ball into their goal. Build up your trickshot meter and unleash a super shot!

Download for iPhone/iPad
Download for Android phone/tablet
Official webpage

I supported the main developers on this free-to-play mobile game.

Shear Speed

Monday, November 9th, 2015

ShaunTheSheep-ShearSpeedHelp the flock make their escape from Trumper in this endless runner game from Aardman Digital. I supported the main development team on this free mobile game, rather than being one of the main contributors.

 

Download for iPhone/iPad
Download for Android phone/tablet
Download for Kindle Fire

Official webpage

The Twits: Twit or Miss

Saturday, October 17th, 2015

TwitOrMissWatch Roald Dahl’s famous characters The Twits having their dinner, and save Mrs Twit from Mr Twit’s disgusting eating habits. As food flings out of his mouth and across the table, you have to swipe to flick it away from Mrs Twit. Let her get hit too many times, and she’ll wake up with the grumps. Build up a ghastly score by performing trick shots in this fun game developed with Aardman Digital.

Download Twit or Miss for iOS

Download Twit or Miss for Android

Hero Squad 2

Sunday, June 29th, 2014

HeroSquad2Race to the emergencies as fast as you can in this open-world driving game. This is a sequel to the original popular Hero Squad game, with all new missions, new gameplay mechanics and a new continuous score-attack mode.

 

Play Hero Squad 2: Rapid Response in your browser.

Wizards vs Aliens: The Eye of Bashtarr

Sunday, June 29th, 2014

WizardsVsAliensTest your platforming and puzzling skills in this game for the CBBC show Wizards vs Aliens, built by Aardman Digital. Use each character’s strange and unusual powers of magic and science to levitate rocks, hack enemy sentries, control the environment, slow time and more.

Play Wizards vs Aliens in your browser.

I worked on level design, UI and back-end server integration on this project, with the talented Tom Milner as lead developer.

Home Sheep Home 2: Steam

Wednesday, February 26th, 2014

hsh2_steamOnce upon a time I made a cute browser game called Home Sheep Home for Aardman Animations. It was a surprise hit, so we built a sequel, Home Sheep Home 2: A Little Epic. We released this on the web in low-res episodes, and on iOS as an app, and as a glorious super-high-res packed-with-extras Windows desktop version.

But this was the little game that dreamt of being on Steam, the PC’s premier download platform. It’s taken years to get there, but finally it has made it!  And in style too, with tons of Steam achievements and lovely Steam cloud saves too. So what are you waiting for? Go and get it immediately! Especially if you enjoyed Thomas Was Alone which takes much of its gameplay mechanics from this game.

Buy on Steam

White-Out

Wednesday, February 26th, 2014

White-OutTest your skills in this multiplayer paint flicking game made in just 48 hours at Global Game Jam 2014. Play White-Out by yourself for , with a friend, or in a group of four people all on the same device. Suitable for young children and adults alike. If you can flick your finger, you can play this!

No longer available on iPad due to Apple purposely obsoleting software just because it’s old. I can recommend many good Android devices!

Play FREE on you Android tablet

This app was featured on the Mac Rumours website. Thanks guys!

Built with Unity3D

unity-logo

Championsheeps 2

Sunday, June 9th, 2013

Compete in sporty sheepy challenges such as Hedgehog Bowling and Sty Diving in this huge update to the original Championsheeps suite of games via the BBC and Aardman Digital.

Play Championsheeps 2

This time around, I worked on the central hub of the project – the part that loads all the other games, keeps your score history and achievements, and so on. I also led the team technically, ensuring all the separate bits from the different developers all integrated and worked together in the end.

We went to town on the nice touches a little bit too, like the physically modelled washing lines and the insane number of new achievements. There’s lots of fun to be found here!

 

Gumball: Dino Donkey Dash

Thursday, November 22nd, 2012

Gumball: Dino Donkey Dash is a game built with Aardman Digital for Cartoon Network to run alongside the popular kids show. Take control of Gumball and Darwin to steal Anais’ favourite toy back from Tina the dinosaur.

Play Gumball: Dino Donkey Dash.

All three games within the suite can be played alone or with a friend, at the same keyboard. There’s not enough two-player around-the-keyboard Flash games these days!

The first minigame is Sneak. You have to press the up/down keys as directed, in step with the symbols. Get it wrong and you’ll make more noise, and eventually wake up the sleeping dinosaur.

 

 

Beat the Sneak game, and you’ll move on to Poke. Use a long wobbly pole to tease the stuffed toy from Tina’s sleeping snuggle. Miss too many times, and you’ll inadvertently wake her up and incur her wrath…

 

 

So you’ve got the toy back, but Tina is chasing you through the junkyard where she lives. You’ll have to run and jump to avoid her, passing the donkey back and forth between the characters to escape. Survive the Catch game to get to the end.

 

This suit of three minigames was built to work in 15 separate languages simultaneously. You can actually switch between them dynamically in-game if you know the special cheat keys! Russian, Bulgarian and especially Arabic presented unique technical problems, with Flash not supporting right-to-left scripts very well (we weren’t using the new TLF capabilities due to their performance being terrible).

The translator supports progressive font fallback per textfield – so if the original font doesn’t contain the right characters it will be swapped with a similar looking one that includes more European accents and characters. If that still doesn’t support the right characters, it will be swapped again for Arial. The translator contains an embedded version of each language, which can be replaced by a loaded file at runtime. That can even be reloaded dynamically on a cheat-key. It will also auto-shrink fonts to fit in their given space, so text is never cropped unintentionally.

 

 

 

Hero Squad: Rapid Response

Sunday, November 18th, 2012

Hero Squad: Rapid Response, is an ambitious driving/flying/sailing game built with Aardman Digital for the BBC. It helps promote a new children’s show called Hero Squad on CBBC. Train for active duty in the rescue services alongside the kids in the TV show!

Play Hero Squad: Rapid Response.

This game plays much like the earlier GTA games (now available as fully legal free downloads), but with a lot less nefarious activities. It’s all about getting to the scene of an incident as fast as you can in either a fire engine, a lifeboat, or a coastguard helicopter.

There were quite a few technical innovations required to bring this game to life. We wanted the gameplay to exist in a large free-roaming game world so that you could plat your own route to each incident. You can take shortcuts if you want, and the road layout was meant to look plausibly like a fictional coastal town in the UK. This meant that roads should almost never be set on a grid, which always makes a game map look like an American city.

CGI

You view the action from essentially a top-down view, except that it’s not quite directly above. The camera looks to the north slightly so you can see the sides of buildings, vehicles etc. To achieve this, all relief sprites in the game were created by Aardman’s awesome CGI department, and rendered into 3D turnarounds of each item. Every car, boat, building, tree, fence and even lamp-posts is a multi-layered set of sprites, separated into a colour layer, a shadow layer and sometimes into a matte layer (for vehicle recolouring). The sheer amount of assets included is astonishing, and runs to several thousand separate bitmaps.

Map

The map itself is created in Flash, and composed of the aforementioned sprites for buildings and vegetation, dynamically depth-sorted above textured vector roads and fields. The area of the map is simply huge, being 20480px wide and 12288px tall. Far too big to work on in one piece in Flash. Simply viewing the full size map at once in the IDE easily causes Flash to crash, so the map is broken into 1024x1024px squares. These exist on individual frames in small groups of tiles, so that the seams can be worked on in-situ for each larger area.

At runtime, each tile is only added to the stage as needed, along with all the underlying physics logic for that tile. At any one time, there are only a few small chunks of the map in action, which keeps the number of items being depth-sorted low. It also keeps the amount of objects in Box2D to a minimum, making collisions faster to process. Tile graphics are cached to bitmaps as the vectors are rendered, of course. This doesn’t include buildings and other relief objects however, as these have to be depth sorted against the traffic on the roads.

We processed the map into a single 250 megapixel image after production. Placing it side-by-side with exports of the GTA-3 map, they are roughly equivalent! We believe this to be by far the biggest continuous, non-tileset game area of any Flash game to date. If you know of any bigger, post a comment!

Download large JPEG (1mb)

Download HUGE JPEG (30mb. Warning: This may crash your browser!)

 

 

 

Physics

In-game physics is provided by the ever-spectacular Box2D. The helicopter is a pretty simple vectored-thrust model. A torque is applied to turn it to a heading, and a rotational friction is applied to fight that action. Forwards/backwards are simple impulses.

Lifeboat physics is more complex. It consists of a virtual keel that opposes sideways motion, but not fore/aft motion. The motor just pushes the boat forwards, and a torque changes it’s heading. It’s actual path of motion however is determined by the sideways-force on the keel.

The firetruck (and all cars/busses/lorries) have the most complex physics model. It has two virtual wheels that operate a bit like the boat’s keel, but at each end of the vehicle. When the player steers, the front wheel is turned smoothly to an angle. Slip angles are calculated from the linear motion at the point of the wheel, and a sideways force is generated and applied. The resultant slip angle force is a simple model that works similarly to real tyres, where more angle means more force – up to a limit. After that, grip drops off progressively. Acceleration/braking is applied as a force along the line of the wheel, and steals from the traction circle available for sideways forces. Accelerating/braking also affects a weight-shift variable, which modifies the grip available (the size of the traction circle) at each end of the vehicle.

This attention to detail means that you can get all sorts of realistic looking situations happening with the firetruck dynamics. Accelerate through a corner and it will understeer. Brake mid corner and it’ll plow straight on. Lift-off mid corner and you’ll get oversteer, which you can catch with opposite lock and a powerslide if you’re skilled enough! If not, you may end up fishtailing, or spinning out entirely. You can do reverse J-turns, and even donuts if you set it up just right with a suitable piece of grass.

For the ground, the same physics are created no matter which vehicle you happen to be driving at the time. There can be sea, air and road traffic existing together no matter which vehicle you’re using. Extensive use of Box2D’s built in collision bits and categories helps differentiate the various things that should collide for each of the vehicles. For example, boats collide with the grass layer so that they never cross land. The helicopter only collides with the special tall building layer, which is not in the same position as the ground building collision layer. The firetruck collides with buildings, vegetation, fences and fields of course, but also collides with the grass layer but with no collision response. It is only used to determine when to put cars into a low-grip situation so they slide further on the grass.

Vehicle AI

Non-player-controlled vehicles in Hero Squad are driven by a computer AI. They follow guides built into the map tiles, but they have to be real drivers. To make collisions with other cars look as realistic as possible, all cars are physically modelled. That means the AI drivers have to actually use an accelerator, brakes and steering just like the player does. They measure their distance from a centre-line that runs down the middle of every drivable road, and try to steer such that they are a set distance to the left of it. When you press space to sound your siren, they internally alter this distance to be greater, and the AI automatically pulls them over to the edge of the road. Drivers are free to go wherever they like, and at any junction they just pick a random direction to drive in. Some roads are marked as one-way, so drivers don’t end up in dead-end streets with nowhere else to go.

Cars are added to the map to random road segments that are off-screen. The AI has to be smart enough to deal with what happens if there are no more road segments – remember there’s not much of the map available at any one time. When they’re lost, and don’t have a current road segment to follow, they are eligible for removal from the world, and are recycled into a new car somewhere else.

Wind/Water currents

When flying the helicopter, and driving the boat, you are pushed around by wind and currents in the water. Both effects are achieved with a bitmap vector field directing the flow of each particle. New particles are instantiated at random. Every frame, they look up the colour in the vector field bitmap. The red channel encodes the left/right force, and blue encodes up/down. The particle simply moves according to that force.

The vector field image itself was created by hand in Photoshop. I started with a simplified monochrome map of the land. Then I painted 0x800000 to the red layer, and 0x000080 to blue. These values are right in the middle, and mean “no force”. Then I painted bright red to the land anywhere I wanted the water to flow right, and black wherever I want it to flow left. The same with blue for up/down. If you want to reduce the amount of current in an area, you simply paint with 0x800000 or 0x000080 to bring the values back to the ‘middle. This is very similar to how Flash’s BitmapDisplacementFilter encodes values.

Once finished, the layers are set to blendmode “add”. The resulting bitmap encodes all the forces that make up the currents. You can use things like the smudge tool and blur filters to alter the smoothness and tweak individual areas. I managed to get the water flowing around rocks, up and down streams and so on with this method.