Monday, 22 February 2010

Monster Ball: a free iPhone game made with Flash CS5 beta and AS3



A short while ago I joined the Flash CS5 beta program and started work on my first iPhone game, and just a short while later it is finished and Monster Ball is live on the AppStore! It's a pretty simple game - you swing a ball and bop some monsters. Anyway, it's free, so please go download it. Here's some notes:
  • The game took only a few days to develop, including submission to the AppStore.
  • Joining the iPhone developer program and getting my head around the Apple submission process took as long as designing and building the game.
  • I actually had to send Apple a fax at one point.
  • ...but once you've signed up and learned all the steps you can get a second app out very easily.
  • I developed and published the whole game on Windows, without any use a of Mac.
  • This meant using OpenSSL to "sign" it, which is not the easiest thing in the world, but Adobe and other beta users provided lots of guidance. Hopefully they will have streamlined this process further by the time CS5 is released.
  • You do, of course, need an iPhone or iPod Touch for testing.
  • Getting your first code running on the iPhone is scarily easy!
  • It's coded in AS3 and I didn't need to use any iPhone specific or even FlashPlayer 10.1 specific APIs.
  • There are a lot of different options around rendering, using GPU and some special new APIs, but as I say, I didn't use them.
  • So my game also works great on the web and I'm currently looking for a sponsor for the web version over at FlashGameLicense.com.
  • This also means that you could very easily use a free web version to promote and sell the paid iPhone version (a la Canabalt).
  • But I decided to give this game away for free so everyone can have a look at what CS5 can do.
  • This is also the first release of a game under my games company name, Dull Dude.
Update: A note on performance
  • A few people have contacted me to say they are getting slow performance on their older-model iPhones and iPods. I suspected this would happen so I already give a warning in the description on iTunes that iPhone 3GS or equivalent is required. The problem is that while developing I didn't have access to an older model iPhone or iPod, only my iPhone 3GS. Without something to test against, it was impossible for me to make the right optimisations for these older devices. As I have written above, Flash CS5 has many graphics rendering options, but I am not utilizing them in my game - I don't want anyone to think this is the best performance that Flash can do. I expect among the many beta testers of Flash CS5 there are some examples with much better performance.

Friday, 19 February 2010

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

Monday, 15 February 2010

Speaking at London Flash Developers and Designers Meetup Group on Thursday


This Thursday, 18th February 2010, I will be giving a talk called "Creating Successful Flash Games" at The London Flash Developers and Designers Meetup Group. The group meets at the Southbank University in London, and caters to designers as well as developers, and all experience levels. I'm going to be mashing-up a load of content from last year's talks, and trying out some new material. If you make games and want to learn some new tricks, or you want to know where to start, then come along!

http://flash.meetup.com/130/calendar/12385008/