OVERVIEWTools 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?
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.
GAMES?
A BRIEF HISTORYOF GAME GRAPHIC DESIGN
EARLY COMPUTERS HAD LITTLE TO NO RAM
MEMORY TO STORE GRAPHICS
SpaceWar for DOS
WHEN WE FINALLY GOT GRAPHIC STORAGE, IT
WAS (AND SOMETIMES STILL IS)
SHARED
= 2K
Image by StarRoivas
EARLY DESIGNERS HAD SEVERE STORAGE LIMITS
AND HAD TO GET CREATIVE
EARLY PROGRAMMERS ALSO HAD LIMITS AND HAD TO GET EQUALLY
CREATIVE
+
THIS TECHNIQUE CALLED TILE MAPPING IS ALIVE
AND WELL, EVEN TODAY (EVEN IF WE’VE LOST THE GRID…)
BUT EVERYTHING IS BIGGER, BETTER, FASTER
TODAY
SO, WHY DO ANY OF THIS?
Image by Apple, Inc.
THINGS ARE BETTER TODAY, BUT THERE WILL
ALWAYS BE LIMITS (AND THAT MIGHT BE A GOOD THING…)
. . . . . . . . . . . . LIMITATIONSDESIGNING WITH
SIZE&SPEEDRELATED, BUT NOT EQUAL
SIZE&SPEED
• Download • Loading time • Storage • …?
• Responsiveness • “Feel” • Fluidity • …?
FRAMERATE& FOOTPRINT
60FPS = 0.0167SECONDS PER FRAME
60 UPDATES EVERY SECOND
CLASSIC GRAPHICS FRAME BUFFER
320PX * 200PX * 4-BITS = 32K
THE MODERN GRAPHICS PIPELINE
FRAMERATE& FOOTPRINT
THE MODERN GRAPHICS PIPELINE
1TB 16GB 2GB
THE MODERN GRAPHICS PIPELINE
16GB 1GB 24MB
TO MAKE MATTERS WORSE, VIDEO MEMORY IS UNCOMPRESSED AND HAS SIZE RESTRAINTS
TEXTURE RESTRAINTS
POWER OF 2, AND SQUARE
• 128X128 • 256X256 • 512X512 • 1024X1024
1280px
720p
x
2048X2048px @12MB
3.52MB
NOW WE’VE SET OUR CONSTRAINTS, HOW DO
WE DESIGN AROUND THEM?
. . . . . . . . . . . . TOOLS&GLUETHE RIGHT
WE HAVE THREE MAIN TYPES OF GRAPHIC
DESIGN IN OUR GAMES.
BACKGROUNDS FOREGROUNDS, AND
CHARACTERS
EACH HAS A TOOL AND SOME GLUE THAT HOLDS
THEM TOGETHER
TILED (FREE AND OPEN) IS OUR COMPOSITION
TOOL
TILEDWRAPPER (CUSTOM SOFTWARE BY PONYWOLF)
IS THE GLUE THAT INTEGRATES THESE MAPS INTO OUR ENGINES