Archive for the 'Flash Games' Category

12
Sep
11

References from Playability: Making Games for Kids

Here are the references from my talk at Flash on the Beach 2011:


Games:

  • Horrible Histories: Moo Spew
  • Horrible Histories: Gong Farmer
  • Shaun the Sheep: Alien Athletics
  • Deadly 60: Deadly Dash
  • Dick and Dom: Let Rip
  • Swingpant's FOTB Flinger



    Your keyboard doesn’t work:

    The functioning key test app. Many keyboards have a mechanical issue that means if two keys are pressed, certain other ones cannot be registered as being used. On the keyboard I am currently typing on if I press [Down], [LEFT] and then [Space], the [Space] fails to work. If I press [A] and [W], then [Q] fails to work.

    Test your keyboard here: http://bit.ly/keytest
    (Sorry users of keyboards that aren’t exactly like the one I have here – I made the app from a pic of this one)


    Accessibility

  • A simple introduction to web accessibility – Ian Hamilton

  • Recommended Reading on Game Design:

    Game Design Books:

  • The Art of Game Design – Jesse Schell
  • A Theory of Fun for Game Design – Raph Koster
  • Challenges for Game Designers – Brenda Brathwaite & Ian Schreiber

  • Academic Papers:

  • MDA: A Formal Approach to Game Design and Game Research (PDF) – by Robin Hunicke, Marc LeBlanc, Robert Zubek
  • Playability: How to Identify the Player Experience in a Video Game – by José Luis González Sánchez, Natalia Padilla Zea, Francisco L. Gutiérrez.
  • From usability to Playability: Introduction to player centred video game development – by José Luis González Sánchez, Natalia Padilla Zea, Francisco L. Gutiérrez.
  • Dissecting Play: Investigating the Cognitive and emotional motivations and affects of computer gameplay – Lindley, Nacke, Sennerston
  • Flash on the Beach Titles by GMunk

    08
    Sep
    11

    Playability: Making games for kids

    I shall be speaking at this year’s Flash on the Beach conference in Brighton, UK (11th to 14th September 2011).

    The subject is playability in relation to making web games for kids. As a lead developer, tech lead and team leader I have had huge amounts of experience working on game design and development with major kid’s TV brands. It is exciting, fun and always a privilege.

    In the session I will be looking at how a gamedev team is made up, the product lifecycle from idea to release. Important points I’ll look at are the specific needs of the game’s audience. How to design the best control method, the most appropriate aesthetics and which mechanics work best.

    I’ll dig into the elements of a successful game – which measures are used to find out if a game is ‘good’ and successful.

    With constantly shifting sands in the world of the web,I’ll touch on what I see as the future of games for a major broadcaster – what technology will be used and on what platforms.

    During the session I’ll be showing examples of games, video examples and I’ve arranged for a Skype call to the TV offices…

    Playability at FOTB2011

    25
    Feb
    10

    AS3 Flamer Class :: Setting things on fire

    The Flamer Class is a quick and easy method to set things on fire. Throw some fuel (any display object) at the class and make it burn.

    While working on another project I needed to make some lightweight flames. I looked around, tried a bit of perlin noise, some convolution filters – then some PixelBender filtering – I wasn’t really happy with the results.

    I found the excellent Saqoosha’s Fire on Wonderfl.
    This demo had nearly the flicker and colour mapping that I was looking for. Rendering the perlin noise on each frame was causing a bit too much processor overhead for my purposes.
    Instead of rendering two perlin octaves and moving the layers against each other, I took two separate single octave perlin noise bitmaps and rotated one against the other while blending.
    This gives a nice effect and is very lightweight. With the Saqoosha method I was clocking at a steady 26fps, with my lightweight method I could get 90fps.

    To get the flame hues I set up a gradient box, threw some colours at it, loaded those colours into an array which I then pushed to a palette map.

    So how to use the Flamer class:


    import swingpants.effect.Flamer

    var flamer:Flamer=new Flamer(display_object)
    addChild(flamer)

    addEventListener(Event.ENTER_FRAME, enterFrameHandler)
    function enterFrameHandler(event:Event):void
    {
    flamer.update()
    }

    Your object will now be on fire. Feel naughty?

    You can set the render width and height and also set the direction of the flames by setting a point vector.


    var flamer:Flamer=new Flamer(display_object,render_width, render_height, flame_direction_point)
    addChild(flamer)

    //The colour of the flames can be set with one of the presets (There are 4 at the moment – ORANGE_FLAME, BLUE_FLAME, YELLOW_FLAME, GREEN_FLAME – but I will be adding more)
    flamer.setFlameColour(Flamer.BLUE_FLAME)

    //Direction can be set on the fly:
    flamer.setFlameDirection(direction_point)

    Here is a demo of a pure code use of the Flamer: The Flaming Vortex. You can click on the flash to initiate an explosion, and pressing space will change the colour. Have a play:

    Flaming Sun

    Flamer Class. The flaming vortex demo

    This next demo is an example of throwing a movieclip/sprite at the Flamer class. Don’t laugh, I quite literally spent 10 minutes putting the anims together then threw them at the Flamer. Click on Flash to change colour and object.

    Flaming Car

    Flamer Class Demo. Help, my car is on fire

    Lots of fun can be had by throwing different animations at the Flamer. Control some with your mouse/keys. Become a twisted fire starter.

    The Flamer class could do with a few more features, but is a pretty good start. The speed is pretty good, I’m happy to receive any improvement recommendations.

    I have packed the Flamer class and demos up in a zip if you want to have a play:
    DOWNLOAD: Flamer Class and Demos

    DEMO #1: Flaming Vortex
    DEMO #2: Burning Movieclips

    12
    Nov
    09

    FOTB09 Full Presentation Video Now Available

    The full video of my presentation at Flash on the Beach is now available. “How to build a game in 3 minutes” became “How to build 3 games in 3 minutes” (just showing off).

    Flash on the Beach 09 Presentation

    Flash on the Beach 09: 3 Games in 3 Minutes

    On the back of this presentation I have now been invited to do a full hour presentation at FOTB2010, which is great news!!

    I am still (slowly – too many projects on the go at once) building the Games Sketchpad and will post the app and some source as soon as it is ready. It’s already great fun to play with – just needs a bit more functionality.

    04
    Sep
    09

    Swingpants presenting at Flash on the Beach 09

    I’m honoured to be doing a presentation at this year’s Flash on the Beach. My pres is titled “How to make a game in three minutes“, and will be part of the Elevator Pitch: 3 Minute Wonders session. Why is it called an Elevator Pitch? This is based on the maximum amount of time you’d have in a lift (elevator) to explain an idea to someone. 20 Flash luminaries (new and old) will be quick fire presenting cool ideas, concepts, code, design or latest work. It’s sure to be a (data) blast.

    In “How to make a game in three minutes” I will be making a game on the fly. This will incorporate a few topics I’ve been interested in and using heavily, such as colour mapping, collision detection, physics and more. Only three minutes? Yeah, got to prep a few libraries which hopefully I can get ready in time. Certainly I won’t have any time to make mistakes. I’ll post the content here as soon as it is available.

    FOTB is a great event. The best conference in the calendar, which every year has the world’s best Flash/Actionscript/Design talent: Mario Klingemann, Andre Michelle, Carlos Ulloa, Joa Ebert, Grant Skinner, Ralph Hauwert, Seb Lee Delise +++ as well as over 1200 delegates.

    Flash on the Beach Speaker

    Flash on the Beach Speaker

    16
    Mar
    09

    Collision Detection and Bounce Calculation using Colour Maps (part 1)

    Here is a method I developed for a game I produced last year. I had three days, and a top down ball bouncing game with multiple levels to render. Initially I thought I’d use box2D, zero out the gravity, and then build the scenes as box2D models. This looked like taking far too long to create so I needed a quick fire solution. Then it dawned on me: Colour Maps (or to you chaps over the pond Color Maps).

    Now Colour Maps are nothing new, but my idea adds to the technique.

    Colour Mapping means you can build a map of your game scene with various colours representing the walls and objects. To test whether you have collided with an object, instead of numerous intersect calculations you can just test the colour of the pixel(s) underneath your character.

    I realised that if I added a sprite graphic for my ball to the colour map using the Blend Mode ‘add’ then I could see collision. So if I make all the static scene furniture red (0xFF0000) and the ball sprite green (0x00FF00), when they overlap the intersection area becomes yellow.

    Blend Mode collision detection

    Blend Mode collision detection


    So how does this help? I calculated that by using getColorBounds on the intersect yellow, I can draw a line from the centre of the rectangle to the centre of the ball. This now becomes the reflection point. I can reflect the angle of bounce against this to give a very accurate result.

    Calculate the angle of reflection

    Calculate the angle of reflection


    OK. So the method will bounce from a partial intersection – but this means that we are calculating the bounce from a ball embedded within the border/scene furniture. I have improved this by calculating the ball path using a recursive method. The function backtracks to where the edge of the ball touches the furniture and then recalculates the path for the remaining distance to be travelled on the current iteration.
    The Colour Map Bounce system in action

    The Colour Map Bounce system in action

    Here is a link to a quick demo of the method in action. Demo

    Source and example usage is to follow in part 2.

    13
    Feb
    09

    Global Game Jam – The Deep – Capture Detection

    ii) In ‘The Deep’ game we have a string membrane that can contort into many shapes both concave and convex. I needed to be able to detect if a ‘plankton’ (or many) is within the membrane when the digest mechanism is triggered (the creature’s orbs touching together).

    My method was to draw a shape using the membrane as a template. Fill the shape, then test the plankton to see if their coordinates are over the fill colour.

    The Deep: Plankton Capture Detection

    The Deep: Plankton Capture Detection

    1) The creature’s orbs touch triggering the digest mechanism.

    2) Using the vertices on the rope chain draw a shape.

    3) Colour fill the shape.

    4) Find the extents of the shape. Calculate the bounding box. Now check to see which plankton are within the bounding box. Take the coordinates of each of these plankton and test whether they have the fill colour at that coordinate. If so, then the plankton must be inside and is therefore digested. Points scored.

    Again the source of the game can be found here.

    13
    Feb
    09

    Global Gam Jam – The Deep – How to produce a string in water with AS3

    I attended the Global Game Jam 2009 recently – forming the team ‘Fish Don’t Flock’. We produced a game called ‘The Deep’ – in 48 sleepless hours.

    In the game you get to control a deep sea bio-luminescent creature that is formed from two orbs and a membrane. The creature eats plankton by enveloping it inside it’s membrane.

    There were a couple of innovations we managed fit into the game. The first I will detail here, the other will be in my next post.

    (i) We needed to make the membrane behave like a ribbon under water:

    I’m a huge fan of Box2D, and have done a few AS3 rope experiments. To get the behaviour I wanted, I figured that I could chain together a series of balls within Box2D, turn off the gravity for the top-down underwater view effect. This way I could detect collisions and if all creatures have mass within the physics engine they would interact correctly with the membrane.

    The Deep: Rope membrane

    The Deep: Rope membrane

    (1) Create a chain out of box2D circles.

    (2) Link the chain circles using revolute joints.

    (3) Draw membrane/rope by drawing from joint point to joint point and add orb sprite.

    (4) Remove rendering of circles.

    The source is available for this game here.
    (Obviously it was a rush job so expect a lot of code imperfection.)




    Categories

    FITC Amsterdam 2012

    Flash on the Beach 2011

    Flash on the Beach 2010

    Flash on the Beach 2009

    Swingpants at FOTB2009

    Twitter Updates


    Follow

    Get every new post delivered to your Inbox.