Tools and Glue covers the nuts and bolts of how graphics get prepared for games and how developers pack so many visuals into the tiny footprint of mobile games through level design and the thought process behind graphic pipelines and organization. Simply said, how do we design through device limitations and open a graphically rich world so large it can capture our imaginations, yet so small that it fits into our pocket?

1. TOOLS&GLUETHE BASICS OF GAME GRAPHICS

2. . . . . . . . . . . . .
MICHAEL WILSON
@STOPWILSON | WWW.PONYWOLF.COM
PRESENTED BY

3. OVERVIEW
Tools and Glue covers the nuts and bolts of
how graphics get prepared for games and how
developers pack so many visuals into the tiny
footprint of mobile games through level design
and the thought process behind graphic
pipelines and organization.
Simply said, how do we design through device
limitations and open a graphically rich world
so large it can capture our imaginations, yet so
small that it fits into our pocket?

4. WHO THE ______ARE YOU?
I am a seasoned technologist and entrepreneur with
experience in every aspect of the digital entertainment,
software and advertising industries.
With over 15 years of software development leadership in
retail software and enterprise web development, my
teams have deployed code for many fortune 500
companies including Procter & Gamble, IBM and
Electronic Arts.
Projects under my direct technical lead have won many
awards including a Webby, selection as an Independent
Games Festival Finalist and the coveted Cannes Gold
Cyber Lion.

7. GAMES?

8. A BRIEF HISTORY
OF GAME GRAPHIC DESIGN

9. EARLY COMPUTERS
HAD LITTLE TO NO RAM
MEMORY TO STORE
GRAPHICS

10. SpaceWarforDOS

11. WHEN WE FINALLY GOT
GRAPHIC STORAGE, IT
WAS (AND SOMETIMES STILL IS)
SHARED

12. = 2K
ImagebyStarRoivas

13. EARLY DESIGNERS HAD
SEVERE STORAGE LIMITS
AND HAD TO GET
CREATIVE

16. EARLY PROGRAMMERS
ALSO HAD LIMITS AND
HAD TO GET EQUALLY
CREATIVE

17. +

19. THIS TECHNIQUE CALLED
TILE MAPPING IS ALIVE
AND WELL, EVEN TODAY
(EVEN IF WE’VE LOST THE GRID…)

21. BUT EVERYTHING IS
BIGGER, BETTER, FASTER
TODAY
SO, WHY DO ANY OF
THIS?

22. ImagebyApple,Inc.

23. THINGS ARE BETTER
TODAY, BUT THERE WILL
ALWAYS BE LIMITS
(AND THAT MIGHT BE A GOOD THING…)

24. . . . . . . . . . . . .
LIMITATIONS
DESIGNING WITH

25. SIZE&SPEEDRELATED, BUT NOT EQUAL

26. SIZE&SPEED
• Download
• Loading time
• Storage
• …?
• Responsiveness
• “Feel”
• Fluidity
• …?

27. FRAMERATE&
FOOTPRINT

28. 60FPS = 0.0167SECONDS PER FRAME
60 UPDATES EVERY SECOND

29. CLASSIC GRAPHICS FRAME BUFFER
320PX * 200PX * 4-BITS = 32K

30. THE MODERN GRAPHICS PIPELINE

32. FRAMERATE&
FOOTPRINT

33. THE MODERN GRAPHICS PIPELINE
1TB 16GB 2GB

34. THE MODERN GRAPHICS PIPELINE
16GB 1GB 24MB

35. TO MAKE MATTERS
WORSE, VIDEO MEMORY
IS UNCOMPRESSED AND
HAS SIZE RESTRAINTS

36. TEXTURE RESTRAINTS
POWER OF 2, AND
SQUARE
• 128X128
• 256X256
• 512X512
• 1024X1024

37. 1280px
720px
2048X2048px @12MB
3.52MB

38. NOW WE’VE SET OUR
CONSTRAINTS, HOW DO
WE DESIGN AROUND
THEM?

39. . . . . . . . . . . . .
TOOLS&GLUE
THE RIGHT

40. WE HAVE THREE MAIN
TYPES OF GRAPHIC
DESIGN IN OUR GAMES.

41. BACKGROUNDS
FOREGROUNDS, AND
CHARACTERS

42. EACH HAS A TOOL AND
SOME GLUE THAT HOLDS
THEM TOGETHER

43. TILED (FREE AND OPEN)
IS OUR COMPOSITION
TOOL

45. TILEDWRAPPER
(CUSTOM SOFTWARE BY PONYWOLF)
IS THE GLUE THAT INTEGRATES
THESE MAPS INTO OUR ENGINES

46. Corona SDK

47. THAT’S COOL, BUT HOW
TO I GET GRAPHICS INTO
THESE TOOLS?

48. . . . . . . . . . . . .
BACKGROUNDS
DESIGNING

56. 78K
4MB
(1024*1024*4)

58. . . . . . . . . . . . .
FOREGROUNDS
DESIGNING

63. . . . . . . . . . . . .
CHARACTERS
DESIGNING

68. 131K2MB
(1024*512*4)

69. . . . . . . . . . . . .
TOGETHER
BRINGING IT ALL

70. THINK OF GRAPHIC
DESIGN FOR GAMES AS
BUILDING A SERIES
REUSABLE MODULES

71. THESE MODULES DEFINE
THE VISUAL STYLE

73. THEN, PROGRAMMERS
ADD INTERACTIVITY TO
THOSE MODULES

75. FINALLY, LEVEL AND
GAME DESIGNERS
ORGANIZE THOSE
MODULES INTO
SOMETHING FUN AND
COMPELLING

77. PLAY IT, LOVE IT, HATE IT,
SCREAM, SHOUT,
COMPROMISE, RE-CODE,
RE-DRAW, SCRAP IT,
SALVAGE IT.
THEN REPEAT.

78. . . . . . . . . . . . .
QUESTIONS?
GOT ANY