Archive for the 'Flash Games' Category

26
Feb
12

Games for Kids: Flash vs HTML5 – Presentation Content

Here are the notes for the content of my FITC Amsterdam 2012 presentation Games for Kids: Flash vs HTML5. There are links here to some of the demos, notes and references.

I set myself the objective of learning best practice in game design using HTML5. To best discover all of the foibles and dark corners of this new technology I set myself the constraint of using NO libraries. I wanted to build a game that would work across many devices, and exhibit some sophistication. The presentation details the discoveries made on this journey, showing how I’ve optimised the game engines – and some of the hacks that I’ve felt necessary to apply.

Demo Panel for Session - Click through

While experimenting with HTML5 touch I found some Android devices had a terrible response. It took me a while to realise that it was my display method, Canvas, that caused the poor performance. Moving to displaying with DOM gave me a workable response on most devices.

Multi-touch Ball Physics

A first quick attempt at gameplay interaction was to build a simple ball physics engine. This gives many options in game design and allows for good utilisation of the major strength of mobile devices: touch input. Getting this to work across multiple devices and operating systems gave me confidence that I could achieve a consistency of performance.

Eggy Eggy Pig - visual design by Eloisa(9) & Lola(7)

With the help of my daughters, I set about designing and building a platform game. Eggy Eggy Pig. The requirement was for platforms and surfaces that could run at any angle, as well as spritesheet animations, triggered interactions, collectables and parallax scrolling. Of course control method was key too.

Optical Flow with Lucas Kanade (Flash)

After looking what can be done with HTML5, it is important to understand what can’t be done. Any game project should start with the question ‘what is the appropriate technology to achieve our objectives?’. In many cases the answer will not be HTML5. I show a couple of cases where Flash could be the only solution, including a look at Maestro Flash – a production implementation of the Lucas Kanade optical flow method.

References:

21
Feb
12

Games for Kids. Flash vs HTML5

For my session at FITC Amsterdam 2012 I’ll be talking about making games for kids.

More and more, mobile devices are allowing people to visit our websites away from the desktop. The sites that I work on chiefly consist of games (Flash) and video content (delivered via Flash). This means that mobile devices without Flash will only be able to gain access to a very small amount of content. To improve this situation we are looking at broadening our game content to include HTML5 builds.

HTML5 has a great deal of promise, and in the future we will be able to achieve amazing things within the browser. But what about now? What can be achieved on the current crop of those mobiles and tablets that are available to children?

To explore the development of HTML5 games, I set myself the task of building whole game prototypes with NO libraries. Here, I felt the best way for me to discover and analyse the issues was to code raw.

With a target of mobile and tablet devices I figured that I’d need to hand-roll my own highly performant physics systems, and I wanted this to be fairly sophisticated. I will describe my methods with code and visual examples.

Throughout the session I’ll detail my discoveries. What are the most optimal ways to achieve cross (mobile) browser game builds? How do you achieve high performance on low spec devices? How do you optimise assets? What tools are good to use?

I’ll look at what we can and can’t do with HTML5 – some of the exciting possibilities and some of the game related (currently)missing features.

Also, what next for the mobile technology and gaming? HTML%, Apps or the cloud?

I’ll be posting the session content – game prototypes and performance tests – here on the GameLab before my FITC Amsterdam session.

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




    Categories

    Reasons to be Creative 2012

    FITC Amsterdam 2012

    Flash on the Beach 2011

    Flash on the Beach 2010

    Flash on the Beach 2009

    Swingpants at FOTB2009

    Twitter Updates

    Error: Twitter did not respond. Please wait a few minutes and refresh this page.


    Follow

    Get every new post delivered to your Inbox.