Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Super Gun Kids: The Making Of by Iain Lobb

16,444 views

Published on

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

  • Be the first to comment

Super Gun Kids: The Making Of by Iain Lobb

  1. 1. Super Gun Kids: The Making Of… Iain Lobb
  2. 2. HTML5
  3. 3. ...will not bementioned in this talk.
  4. 4. What is this talk really about?
  5. 5. Secrets of successful vapourware.
  6. 6. “If only I was in charge...”
  7. 7. 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.”
  8. 8. Owl Spin
  9. 9. Owl Spin• Skill / puzzle maze-avoider.• 2 weeks development.• 2 weeks site locks / sponsor integration.• Overall, a successful game!• But not a runaway success.
  10. 10. 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.
  11. 11. Alice, Beyond the Looking Glass
  12. 12. Alice, Beyond the Looking Glass
  13. 13. 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.
  14. 14. Super Gun Kids
  15. 15. Super Gun Kids
  16. 16. 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.
  17. 17. I don’t want to make retro games.
  18. 18. Old-school Flash Game
  19. 19. Retro Flash Game
  20. 20. Ray Man Origins
  21. 21. Limbo
  22. 22. Megaman X +Super Crate Box + Rayman Origins
  23. 23. 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!
  24. 24. 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.
  25. 25. 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.
  26. 26. 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.
  27. 27. Let’s see it then!
  28. 28. 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.
  29. 29. How I organise my code...
  30. 30. 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
  31. 31. 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
  32. 32. Dull Dude Framework• Entity – Body • Position • Rotation • Velocity – PhysicsController – FlashView – Health – WeaponManager • Weapons
  33. 33. Super Gun Kids• 150 classes - 13,270 lines of code• Kid (Entity) – PlatformPhysicsController (PhysicsController) – Stylist – BonesAnimator• Item• Mission• (weapons, enemies, bullets, pickups, particles, )
  34. 34. 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
  35. 35. Display List was theleast-worst option for this game...
  36. 36. ...but I could have got an extra bit of performancewith blitting, if I’d invested more time.
  37. 37. Stage3D would probably have been commercialsuicide... unless I wrote my own fallback.
  38. 38. 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.
  39. 39. 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.
  40. 40. How I make vector art...
  41. 41. Before and After
  42. 42. MOAR GUNS
  43. 43. Factory Zone
  44. 44. Castle Zone
  45. 45. How Amanda does digital painting...
  46. 46. In this hat.
  47. 47. Pencil doodles
  48. 48. Pencil doodles
  49. 49. 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.
  50. 50. The mega mood board!
  51. 51. How I make the animations...
  52. 52. 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
  53. 53. Get player feedback from the start(but hold on to your vision).
  54. 54. 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.
  55. 55. Deep thoughts...
  56. 56. Making games is hard.Don’t let anyone tell you it’s easy.
  57. 57. Good art completelytransforms how people see your game.
  58. 58. Find a good partner(or you will go insane).
  59. 59. I wish making gameswas more like playing games.
  60. 60. If you want to makemoney, don’t do what I’m doing!
  61. 61. Pick an idea that willtake two days to build, and give yourself two weeks to build it.
  62. 62. Hofstadters Law: It always takes longer than youexpect, even when you take into account Hofstadters Law.
  63. 63. Sometimes the smartest thing is toabandon your game.
  64. 64. How long can yousurvive with no income?
  65. 65. Last 12 months Super Gun Kids Owl Spin Freelance WorkMoney Time
  66. 66. Reduce your overheads• Cycle instead of driving.• Shop at Aldi.• Don’t rent an office.• Don’t have employees.• Move somewhere cheap.
  67. 67. Do freelance work• Don’t work for fixed fees.• Work on-site if possible.• Price at market rates (£200-£500+ per day)
  68. 68. 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.
  69. 69. 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.
  70. 70. Strength in numbers!
  71. 71. 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.
  72. 72. Code in the bank• Countless framework improvements.• Robust character customizer.• Flash level editor.• Robust platform physics.• Bones animation system.• Platform Astar pathfinding.
  73. 73. 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).
  74. 74. Regrets• None.
  75. 75. Thanks!@iainLobb

×