Iain talks about his journey in making Super Gun Kids and the lessons he learned.

1. Super Gun Kids: The
Making Of…
Iain Lobb

2. HTML5

3. ...will not be
mentioned in this talk.

4. What is this talk really
about?

5. Secrets of successful
vapourware.

6. “If only I was in
charge...”

10. All these things that I’ve done...
• 50+ professional games.
• Bazillion awards.
• Cool sounding job titles.
• Internet celebrity.
• But not one bit of work I can point to
and say: “That’s the best thing I can
do.”

11. Owl Spin

12. Owl Spin
• Skill / puzzle maze-avoider.
• 2 weeks development.
• 2 weeks site locks / sponsor
integration.
• Overall, a successful game!
• But not a runaway success.

13. Alice, Beyond the Looking Glass
• Planned as 1 week game jam-style
project.
• Quickly snowballed into “2 month
project”.
• Styled as Victorian book illustrations.
• Puzzle-platformer.

14. Alice, Beyond the Looking Glass

15. Alice, Beyond the Looking Glass

16. Alice, Beyond the Looking Glass
• Abandoned after 1 month of
development.
– Too many ideas to fit in a reasonable scope.
– No single core mechanic.
– Flash performance not adequate to realise vision
for game.
– Bad fit for portal market.
– Doubts about monochromatic styling.
• Engine tech recycled into Super Gun
Kids.

17. Super Gun Kids

18. Super Gun Kids

19. Super Gun Kids
• Platform-shooter-RPG.
• Theme chosen for better match with
portal market.
– Guns, Zombies, Ninjas, Vampires, Robots.
• ...but also my nostalgia for toys.
• Lay groundwork for future games.
• Learn how to make bigger games.

20. I don’t want to make
retro games.

21. Old-school Flash Game

22. Retro Flash Game

23. Ray Man Origins

24. Limbo

25. Megaman X +
Super Crate Box +
Rayman Origins

26. Story
• Setting / game-world over story.
• Save “Kid City” from zombies, vampires
and robots.
• Mission text and in-game set pieces.
• Villain characters, but the hero is “you”.
• Cut-scenes and set pieces are really time
consuming!

27. Art
• Vector cartoon characters in front of
painted backdrops.
• I really wanted to do the art!
• Really glad I brought Amanda in to do the
backgrounds, logo etc.
• Last time I do the art for a big project – but
I did learn a lot.

28. Art
• Characters and levels based on Fisher Price /
Lego / Imaginex play sets and 80s GI Joe.
• “Kid City” is based on modern Dutch / Danish
architecture.
• Castle level is based on haunted house rides.
• Factory level is based on Tate Modern /
Cathedrals / Warhammer 40k.
• Map screen is inspired by theme park maps.

30. Gameplay
• Games should have “second-to-second”,
“minute-to-minute” and “hour-to-hour”
gameplay.
– Tight platforming “kinaesthetics”, with lots of
running, jumping, shooting and collecting.
– Keep interest through environment, enemy
and weapon variety.
– Provide closure through story progression.

33. Let’s see it then!

34. Workflow
• Paint in PhotoShop, export PNGs.
• Edit sounds in Audacity / Audition. (Adobe
Creative Cloud totally worth it!)
• Import assets to Flash.
• Add vector art, layout, level design and
animation.
• Set export classes for assets.
• Export SWC.
• Add SWCs to FlashDevelop.
• Code and compile in FlashDevelop.

35. How I organise my
code...

36. 3rd Party Libraries
• TweenMax by GreenSock
• AS3Signals by Robert Penner
• Mochi / Google analytics
• Mochi / CPMStar ads
• Kongregate API
• Doomsday Console by Andreas Rønning
• “The Miner” code analyser

37. Dull Dude Framework
• 99 classes – 7,592 lines of code
• Gamepad (already open sourced!)
• Screen
– MainScreen
– GameScreen
• SoundPlayer
• Vector2D (partially based on Glaze)
• MathHelper
• SaveHelper
• VectorPhysicsManager
• NapePhysicsManager
• Bones Animator

38. Dull Dude Framework
• Entity
– Body
• Position
• Rotation
• Velocity
– PhysicsController
– FlashView
– Health
– WeaponManager
• Weapons

39. Super Gun Kids
• 150 classes - 13,270 lines of code
• Kid (Entity)
– PlatformPhysicsController (PhysicsController)
– Stylist
– BonesAnimator
• Item
• Mission
• (weapons, enemies, bullets, pickups,
particles, )

40. Choosing a renderer
• Display List
– Easiest
– Integrates with Flash Professional
– Slowest performance
– Scales well to full-screen
• Blitting
– Fast
– Integrates well with pixel art
– No “scene-graph”
• Stage3D
– Fastest
– Only available for 50% of web gamers
• Don’t use Flash!
– Unity, HaxeNME, Corona, Cocos2D, XNA etc etc

41. Display List was the
least-worst option for
this game...

42. ...but I could have got an
extra bit of performance
with blitting, if I’d invested
more time.

43. Stage3D would probably
have been commercial
suicide... unless I wrote my
own fallback.

44. Collisions
• Entity vs World
– Phase 1 - Axis-Aligned Bounding Box (AABB)
– Phase 2 – HitTestPoint
• Entity vs Entity
– Hitbox can be point, circle or rectangle.
– Fast-moving objects perform multiple tests
per frame.

47. Thoughts on level design...
• I hate it.
• Original concept was to have an open-world to
explore, with multiple missions in each area.
• But level design gets exponentially harder as
levels get bigger.
• So switched to a traditional levels.
• Start with a concept on paper.
• Flash sort of works as a level design tool, but an
in-game system would be better.
• Get someone else to do it.

49. How I make vector art...

50. Before and After

51. MOAR GUNS

52. Factory Zone

53. Castle Zone

54. How Amanda does
digital painting...

55. In this hat.

56. Pencil doodles

57. Pencil doodles

60. Amanda’s Digital Art Tips
• Do lots of stuff on paper.
• Get the biggest Wacom you can afford.
• Work big and shrink down.
• But think about how lines will look scaled down.
• If working to someone else’s vision, ask for a doodle /
mood images to work from.
• Use references images!
• Work in greyscale for lighting then add colour with a
“Color Burn” layer.
• Study human anatomy and practice a lot!
• Practice copying other artists’ styles.

61. The mega mood board!

62. How I make the
animations...

63. How I make animations
• Timeline animation of named body parts in
Flash Professional.
• Export SWC.
• Parse animation data.
• Re-animate bones.
– Vary speed of playback including slow motion
– Multiple simultaneous animations on same
character

64. Get player feedback
from the start
(but hold on to your
vision).

65. Results of 1st play test
• Inventory hotkey was really awkward.
• Controlling menus with keyboard was
confusing.
• Inventory was confusing.
• Players expected mouse aim.
• Felt like an arena shooter with platforms,
not a platform game.
• Guns felt underpowered.

66. Deep thoughts...

67. Making games is hard.
Don’t let anyone tell you
it’s easy.

68. Good art completely
transforms how people
see your game.

69. Find a good partner
(or you will go insane).

70. I wish making games
was more like playing
games.

71. If you want to make
money, don’t do what
I’m doing!

72. Pick an idea that will
take two days to build,
and give yourself two
weeks to build it.

73. Hofstadter's Law: It always
takes longer than you
expect, even when you take
into account Hofstadter's
Law.

74. Sometimes the
smartest thing is to
abandon your game.

75. How long can you
survive with no income?

76. Last 12 months
Super Gun Kids
Owl Spin
Freelance Work
Money
Time

77. Reduce your overheads
• Cycle instead of driving.
• Shop at Aldi.
• Don’t rent an office.
• Don’t have employees.
• Move somewhere cheap.

78. Do freelance work
• Don’t work for fixed fees.
• Work on-site if possible.
• Price at market rates (£200-£500+ per
day)

79. Should I make a “big” game?
• Yes, only if:
– You have already made lots of small games.
– You have already created a successful game.
– You have a steady income or cash in the
bank.
– You have tried your idea out as a small
prototype.
– You are not working on your own.

80. What should Flash game
developers be doing right now?
• Cashing in on freelance work while it exists.
• Building a portal audience.
• Diversifying into mobile.
• Working out what you do and don’t enjoy.
• Finding a good partner.
• Making polished 1-4 week games with a
simple premise.

81. Strength in numbers!

82. Iain’s follies
• Local co-op.
• Fully keyboard-driven navigation.
• Full screen support.
• Character customizer.
• 24 weapons.
• Baroque weaponry.
• Characters on map screen.
• 3 separate zones.

83. Code in the bank
• Countless framework improvements.
• Robust character customizer.
• Flash level editor.
• Robust platform physics.
• Bones animation system.
• Platform Astar pathfinding.

84. Changes for next big project
• Cross-platform.
• Hardware rendering (with fallback).
• Unified art style.
• In-game level editor.
• Work with a composer & sound designer.
• More scope control.
• Sell the game to players rather than
sponsor (maybe).

85. Regrets
• None.

86. Thanks!
@iainLobb