Creating Successful Flash Games (notes and slides)

Last night at The London Flash Developers and Designers Meetup Group I gave a talk called Creating Successful Flash Games. I think it was the most fun I've had doing a talk so far, and I've had some really lovely feedback:
"Great evening at South Bank Uni listening to Iain talk flash games. Always nice when you can tell the speaker is passionate about gaming."
"Great talk! It gets better and better. All I can say is thanks,
I learned a lot from your experiences. Also, you explain things really well, you empathize with the situation you are trying to explain. "
I love doing these speaking things so if you are organising a conference or user group I'd love to hear from you - hit me up at iainlobb@googlemail.com.

Anyway, as promised last night here my slides/notes. You can download them as a pdf or simply read them below. It's not the same without my jumping about and "acting" as one person described it, and a lot of the content I just did from memory, but there should still be something useful there. Anyway...

Design or Development?

Designers do graphics and developers do code?
But in games
  • artists do graphics
  • developers do code
  • designers make it fun!
So maybe we need a better definition.
  • Developers solve technical problems
  • Designers solve human problems.
So we all do a bit of both.

With experience and better tools, things move from the development side to the design side. Which makes the whole process more fun!
  • var sound:Sound = new ShotgunSound();
  • var transform:SoundTransform = new SoundTransform();
  • transform.volume = 0.5;
  • var channel:SoundChannel = sound.play(0, 1, transform);
Vs.
  • SoundManager.play(ShotgunSound, 0.5);
What are games?
  • Games are about the relationships between objects in space.
  • ... but videogames layer-on images, characters, narratives, sound and music.
  • Historically, most games are multiplayer (chess, football etc).
  • Videogames allow the computer to take on the role of opponent.
  • ... but multiplayer is still more fun!
Goals
  • Collect objects
  • Kill enemies
  • Reach locations
  • Match objects
  • Solve puzzles
  • Make friends (real or virtual)
  • Pwn noobs
  • Most games use a combination.
Constraints
  • Time limit
  • Health
  • Lives
  • Ammo
  • Money
  • XP / Experience
  • Inventory limit
  • Doors & Keys
  • Enemies, obstacles & puzzles
Modes of interaction
  • Control a single avatar
  • Command multiple agents
  • Manipulate objects
  • Match rhythms
  • Create entities
Input

Flash sucks at input!
Mouse
  • Left button, context menu, wheel.
  • sprite.mouseX and sprite.mouseY
  • No wrapping or moving the cursor.
Keyboard
  • KeyboardEvent.KEY_DOWN and KeyboardEvent.KEY_UP
  • Limited simultaneous presses.
  • CTRL, ALT and SHIFT are a no-go area!
Gamepad.as

Here I come to save the day!


Based on analog joystick input.
  • var gamepad:Gamepad = new Gamepad(stage, true);
  • character.x += gamepad.x * 5;
  • character.y += gamepad.y * 5;
  • if (gamepad. fire1) { fire() };
Use arrow keys, WASD or custom settings.
Duplicate keys and fire rate coming soon.

Mousepad.as
  • Coming soon...
  • For games where you move or aim with the mouse.
  • Similar abilities to Gamepad.as, but for mouse.
Top-down View

True top-down
  • Easy to rotate sprites.
  • Good for driving games etc.
Zelda-style
  • Art is drawn with false perspective.
  • Better for characters.
  • ... but you have to draw every angle.
Movement can be:
  • compass-direction (for characters)
  • or tank-style (for vehicles)
Side-on View
  • Great for showing humanoid characters.
  • Typically involves jumping around implausible vertical spaces called “platforms”.
  • Variable jumps.
  • Double-jumps.
  • In-air movement control.
  • “Brawler” view like Final Fight or Castle Crashers is somewhere between Top-down and Side-on.
Isometric View
  • Graphics are drawn from a fixed 45 degree angle.
  • Good for Sim games, puzzles and driving games.
  • Great for showing buildings – see eBoy.
  • Confusing for player movement – which way is left?
First person View

Either using a 3D engine or pre-rendered from a fixed perspective.
Great for shooting, exploration and puzzle games.

There are other views
  • Follow-cam (basically the same as first person)
  • 3rd person 3D camera (can track players)
  • etc
3D

All games are 3D.
  • A top down game where you can jump.
  • A parallax background behind a platform game.
  • So my new game engine is 100% 3D.
...but most aren’t.
  • Gravity means we live on a 2D plane.
  • We need a definite idea of up and down.
  • 2.5D works really well.
3D

3D is really hard, but the basics are easy:
  • var scaleRatio:Number = focalLength / (focalLength + z3d);
  • y = baseY + (( -z3d + y3d) * scaleRatio);
  • x = baseX + (( z3d + x3d) * scaleRatio);
  • scaleX = scaleY = scaleRatio;
Luckily libraries are available to make your life easier.
3D art is more labour intensive to create, but is much more flexible. Animation is harder still.
If you’re serious, consider switching to Unity3D.

Collision Detection

Built in
  • sprite.hitTestPoint()
  • sprite.hitTestObject()
  • bitmapData.hitTest()
Pythagoras
  • dx = sprite1.x – sprite2.x;
  • dy = sprite1.y – sprite2.y;
  • distance = Math.sqrt((dx*dx)+(dy*dy));
Bounding box (sorry conversion to HTML has broken this)
  • if (bottom1 <>
  • if (top1 > bottom2) return false;
  • if (right1 <>
  • if (left1 > right2) return false;
  • return(true);
More advanced:
  • Line-line
  • Line-grid
  • Line-circle
  • Point-grid
  • Circle-grid
  • Point-polygon
  • Polygon-polygon
  • And many more!
Physics

Gravity
  • speedY += gravity; y += speedY;
Bouncing
  • speedY *= -0.9;
Beyond that it gets really, really hard!

Luckily there are libraries to help you
Tile Grids

Present since the earliest games.
A neat simplification for games.
  • var gridX:int = sprite.x / tileSize;
  • var gridY:int = sprite.y / tileSize;
  • var grid:Array = [[“air”, ”air”, “trap”, “platform”], [“air”, “platform”, “air”, “air”]];
  • if (grid[gridX][gridY] == “trap”) {killPlayer()};
Helps with collision detection, path-finding, level design.
Powerful but restrictive.

Blitting

Working directly with image data rather than using the standard display list.
  • bitmapData.copyPixels()
  • bitmapData.draw()
  • Matrix transformations
  • “buffers”
  • graphics.beginBitmapFill()
  • graphics.drawTriangles()
  • Can be faster, but harder to do rotations etc
Libraries
Art

Flash is very flexible and can handle a range of styles.
  • Hand-drawn
  • Pixel-art
  • Cell-shaded cartoon
  • Painted
  • 3D rendered
  • Photographic
It normally doesn’t hurt to make your game look like a game though.

Animation

The best animation is done by hand.
Hand-draw frames and position manually.
Tweens are normally better off in code.
  • object.x += (target.x – object.x) * 0.3;
Tweening libraries save you many hours of work.
Tuning and polish
  • Weapon strength, time limits, enemy speed etc in easily modifiable variables or XML.
  • Jump height needs to match level design.
  • Particle effects, flashes, tints, screen shake
  • What happens when you walk into a wall? Do you slide, walk on the spot, flatten against it?
  • Good usability on U.I. – pictorial not text.
  • Freedom of movement, expressiveness, “feel”, playability
You need a hook
  • You need something which is unique to your game.
  • Hook, Unique Selling Point (USP), gimmick, or twist.
  • Character, weapon, unit type, mode of interaction, game mechanic.
  • Don’t just make a clone with different graphics.
  • If you’re going to copy something, work out what about it you’re actually trying copy.
Sound & Music

Can turn a good game into a great game.
Very clunky built-in support.

Fade-in/out, pause, mute, loop, etc:
For sound effects try:
Audacity, Sony Acid Music, Garage Band etc
Record your own!

Instructions
  • Players don’t want to read instructions.
  • Animation works better.
  • Walk-throughs or tutorials are even better.
  • Best of all is no instructions needed.
  • Keep the controls on screen all the time.
Saving

Really easy!
  • sharedObject = SharedObject.getLocal(“game");
  • sharedObject.data.score=9232;
  • sharedObject.flush();
Use “slots” to allow multiple saves.
Progress can also be saved to a server.
Or via level codes.

A.I.
  • Be pragmatic and come up with simple rules that work.
  • You’re not making chess computers here - don’t code the perfect enemy.
  • Enemies are generally slow and weaker than your player – even their bullets move slower!
  • A* path-finding etc is hard, but examples are out there.
Multiplayer

Easy to do 2 players on one computer.
Networked multiplayer adds a new level of fun but greater complexity.
Most solutions require you to have your own server:
But not all!
Turn-based and “deterministic” games require little or no server code.
Real-time games require some Java, JavaScript or C# code on the server.
Server-code may also be needed to stop cheating.
Multiplayer games are less common but command higher prices as they encourage repeat plays.

Business Models

Sponsorship.
  • Portals pay to add their branding to your game and add links back to their site.
  • Exclusive or non-exclusive licenses.
  • “Site locks”
  • Performance deals.
  • £100 – £10,000 per game.
  • http://www.flashgamelicense.com/
Advertising.
Sales.
Client briefs.
  • They pay you money and you make what they tell you to.
  • Steady income but less creative.
  • No chance of getting rich.
  • Can still be cool: e.g. Zwok!, Meta4orce.
  • £1000-£100,000
Thanks!
Double Edged - Nitrome - Play Free Games
Play Don't Look Back, a free online game on Kongregate
Fancy Pants Adventures | Armor Games
Play Boxhead: The Zombie Wars, a free online game on Kongregate
Xeno Tactic - to play free online games
STACKOPOLIS :"The most addictive game since Tetris!"- LCLFC
---===+==O[ Two KingdomS ]O==+===---
BBC - Switch Meta4orce - Launch
Escape game - Flash game
BBC - Switch Meta4orce - Launch
Play Red Remover, a free online game on Kongregate
Shaun the Sheep - Games - Home Sheep Home
Muzer's Blog
Car Drive On Terrain « Muzer's Blog
CANABALT
Play Pop Pirates, a free online game on Kongregate
Twin Shot 2 - Nitrome - Play Free Games

Comments

Bluework said…
Thx for sharing the detail! ;)
19 February 2010 at 19:14
Lawrie said…
Wow, this looks like a great presentation - wish I'd been there to see it. Thanks for sharing it here too - sounds like a really good choice of subjects. Cheers!
22 February 2010 at 19:34
Post a Comment