Archive for the 'Conference' Category

05
Sep
12

Box of Delights. Fun for all the family.

By swingpants Leave a Comment
Categories: Conference
Tags: , , , , , , ,

For my session at the amazing Reasons to be Creative conference I will talk through three areas that BBC Children’s have developed for in the last year. These are Installations, Desktop Browser and Mobile. Each is a different journey of how to make games in that space.

In the installation section I’ll talk through the implementaion of optical flow for the Flash Maestro project – a collaboration with BBC R&D and the BBC Philharmonic. Also, I’ll talk through a similar implementation with a game made for Blue Peter’s Big Olympic tour. Code will be cracked open, and the experience demonstrated – fully interactively.

BBC Children’s have made some amazingly successful desktop browser games this year. I’ll describe the efforts, processes and game design decisions that have helped bring extra quality.

In the mobile space, my team have put in a lot of effort into investigating the mobile web. We researched optimal methods for rendering graphics, making physics lightweight and also how to develop against the way kids use devices.

With a great deal of opportunity in the HTML5/JS mobile web gaming space, I’ll describe findings, and offer tips on why, how and what agencies need to ‘skill up’ on to be successful.

‘Box of Delights’ is on in the Brighton Pavillion from 2.30pm to 3.30pm. Sept 5th 2012

This is going to be a lot of fun.

Advertisement
02
Sep
12

Reasons to be Creative 2012

By swingpants Leave a Comment
Categories: Conference
Tags: , , , ,

‘Reasons’ is a festival for creative artists, designers and coders. Bringing together the best minds from the worlds of art, code, and design.

Reasons to be Creative is the evolution of the amazing Flash on the Beach conference. It has a more inclusive focus, now covering all web technologies. This helps bring together an amazing set of speakers from JS/Mobile Web App guru Jake Archibald to the creative code behemoths who rose from the Flash community Mario Klingemann and Joa Ebert. The tone will be one of celebration – a festival for the creative mavericks of the world.

The sessions are split into three tracks. Speakers cover design, code, illustration, animation and the creative process – but the conference is about much more than that. Inspiration sessions are designed to refill the tanks and send delegates away from the event with drive, enthusiasm and ideas to last the whole year – this alongside a whole list of new contacts and friends that could help build the next web masterpiece.

My ‘must see’ sessions:

    Eugene Zatepyakin – Actionscript Computer Vision
    Ahmed & Gill – The Random Adventures of Internet Explorer
    Conrad Winchester – I’ve got a super computer and I know how to use it!
    Mario Klingemann – Better Livign Through Lasers
    Jake Archibald – Application Cache: Douchebag
    Frank Reitberger – Highly Illogical
    Rob Bateman – Forward to Foundation
    Joa Ebert – Abstract Abstractions
    Mike Jones – Designing Game Interfaces
    David Lenaerts – A Trick of Light
    Jon Howard – Box of Delights. Fun for all the family <– Of course!
    Grant Skinner – Building Fun (with CreateJS & HTML5)

http://www.reasonstobecreative.com/

26
Feb
12

Games for Kids: Flash vs HTML5 – Presentation Content

By swingpants 2 Comments
Categories: Actionscript, Conference, CSS, Flash, Flash Games, Games, HTML5, Javascript, References and Uncategorized
Tags: , ,

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

By swingpants 2 Comments
Categories: Actionscript, as3, Conference, Flash, Flash Games, Games, HTML5 and Javascript
Tags:

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.

07
Feb
12

HTML5 Game Dev. Flipping a DIV – Horizontally Inverting content with Javascript and CSS

By swingpants 2 Comments
Categories: Code Snippet, Conference, CSS, Games, HTML5 and Javascript
Tags: , , ,

As I prepare for my talk at FITC Amsterdam (Feb 2012) I’m building a web game in both Flash & HTML5.

I’m aiming my HTML5 build at the mobile web (but will try to reach as many desktop browsers as possible) – so it will need to run optimally across Android & iOS.

I’ve discovered a few issues so far that for the purpose of record and reference I’ll post here in game lab.

First up. I have a player character that I’m animating via a spritesheet. I need the character to be able to face left and right.

I made the assumption that I could drop the sheet into a div (as background image) and then apply a scaleX transition to the div when I need to face left, and remove the transition when I need to turn right.

I’m applying the horizontal flip by adding a CSS classname to the div.

The CSS:

.flip-horizontal
{
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH; /*for IE*/
-ms-filter: “FlipH”;
}

Then when I need my character to face left I add the class name to the character div:

function faceLeft() {characterDIV.className = “flip-horizontal”;}
function faceRight() {characterDIV.className = “”;}

So, is this good? Works fantastically on the desktop browsers and really well on Android.

BUT, on iOS (iPad in my tests) there is a BIG lag when the webkit transform is applied.

I mean big – in my game there can be up to a second long hang. Totally unacceptable for any game usage (unless as a one shot on initialisation).

The answer? Unfortunately I couldn’t come up with a technical solution. I had to resort to putting the reverse animation on the spritesheet. This gives me the performance I want – but at the expense of more weight to the game.

If my game has many characters then I am essentially doubling my asset weight for those characters. Boo.

12
Sep
11

References from Playability: Making Games for Kids

By swingpants 1 Comment
Categories: Conference, Flash Games, Games and References

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

    10
    Sep
    11

    Flash on the Beach 2011: My Schedule

    By swingpants Leave a Comment
    Categories: Conference
    Tags:

    The amazing Flash on the Beach conference is upon us again. A must every year for me to get my fix of the latest tech, design and web game ideas.

    This year I’m speaking on the monday morning – great for me as I don’t have to sweat it for the following few days.

    Some major clashes this year – I may have to miss Seb Lee Delisle, Stray, Joel Gethin Lewis, Keith Peters, Conrad Winchester and Stefan Richter. Sorry guys – my arm is up for being twisted though.

    Mon 12th Sept 2011
    Keynote.
    Jon Howard – Playability: Making games for kids
    Rob Bateman – Flash 11: Get Ready for Gametime
    Eugene Zatepyakin – Natural Features Tracking and Image Pattern Detection / Recognition
    Han Hoogerbrugge – Prostress of the graphic universe of Han Hoogerbrugge
    Jon Burgerman – A short talk about working and not working and how to waste your time proficiently

    Tue 13th
    Tomek Augustyn – Riding the Hislope
    Joa Ebert – The Tale of a travelling salesman and his four colours
    Mike Chambers – Deconstructing theexpressiveweb.com
    David Lenaerts – Keeping It Real
    Remy Sharp – HTML5: Where flash isn’t needed anymore
    Cyriak Harris – Destroying my laptop with After Effects
    Jame Victore – Who died and made me boss

    Wed 14th
    The Elevator Pitch.
    Thomas Vian – All aboard the game engine
    Lee Brimelow – Render for Speed
    Frank Reitberger – Real(hard)time
    Joshua Davis – The Unknown Voyage

    08
    Sep
    11

    Playability: Making games for kids

    By swingpants Leave a Comment
    Categories: Conference and Flash Games
    Tags: , ,

    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

    « Previous Entries

    Categories

    Reasons to be Creative 2012

    FITC Amsterdam 2012

    Flash on the Beach 2011

    Flash on the Beach 2010

    Swingpants at Flash on the Beach

    Flash on the Beach 2009

    Swingpants at FOTB2009