TOOLS&GLUETHE BASICS OF GAME GRAPHICS

. . . . . . . . . . . . MICHAEL WILSON@STOPWILSON | WWW.PONYWOLF.COM

PRESENTED BY

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

Corona SDK

THAT’S COOL, BUT HOW TO I GET GRAPHICS INTO

THESE TOOLS?

. . . . . . . . . . . . BACKGROUNDSDESIGNING

78K

4MB(1024*1024*4)

. . . . . . . . . . . . FOREGROUNDSDESIGNING

. . . . . . . . . . . . CHARACTERSDESIGNING

131K2MB(1024*512*4)

. . . . . . . . . . . . TOGETHERBRINGING IT ALL

THINK OF GRAPHIC DESIGN FOR GAMES AS

BUILDING A SERIES REUSABLE MODULES

THESE MODULES DEFINE THE VISUAL STYLE

THEN, PROGRAMMERS ADD INTERACTIVITY TO

THOSE MODULES

FINALLY, LEVEL AND GAME DESIGNERS ORGANIZE THOSE

MODULES INTO SOMETHING FUN AND

COMPELLING

PLAY IT, LOVE IT, HATE IT, SCREAM, SHOUT,

COMPROMISE, RE-CODE, RE-DRAW, SCRAP IT,

SALVAGE IT.

THEN REPEAT.

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