Introduction to Computer Game Production: 2D Graphics based on S. Madhav (2014) Game Programming Algorithms and Techniques, Addison-Wesley Dr. Mathias Lux Klagenfurt University 2D Graphics 2D rendering mostly limited by display device capabilities • Nowadays LCD • influenced from cathode ray tube (CRT) By Blue tooth7 (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by- sa/3.0)], via Wikimedia Commons CRT • Scan lines and pixels per scan line • way back: vertical blank interval (VBLANK) Early game systems couldn’t store all pixels in RAM, ie. 320 pixels on 200 scan lines Color Buffers & Vertical Sync • Newer hardware has color buffer – Game writes into buffer – CRT gun reads from buffer • Problem with synchronization – Buffer updated while reading? – Buffer just updated in VBLANK? Screen tearing Double Buffering • Two instead of one buffers – Write into one buffer – Wait for VBLANK, then switch buffers function RenderWorld() // Draw all objects in the game world ... wait for VBLANK swap color buffers } Double & Triple Buffering • LCD Monitors can still experience tearing – so double buffering is still a good idea • Switching in VBLANK – caps framerate to refresh rate of the monitor – option: switch when ready • Some games use triple buffering – further smooth out frame rates – at cost of input lag, cp. VR Sprites 2D visual object, that can be drawn with a single image at any given frame. • backgrounds, objects, avatars, ... • games often have hundreds of sprites • so sprites need to managed efficiently Sprite Formats and Loading • Format depends on system capabilities – iOS can natively handle PVR – TGA can be handled natively, but is uncompressed – JPG and PNG have to decoded • Typically ones uses libraries/frameworks – SDL, libGDX, cocos2d, ... Drawing Sprites • Like painting on a canvas – from back to front • Painter’s Algorithm – All sprites are sorted from back to front – Drawn beginning with the background Painters Algorithm (CC) BY Gabriel Napetschnig Sprite Class class Sprite ImageFile image int drawOrder int x , y function Draw() // Draw the image at (x,y) ... } } Drawing Sprites SortedList spriteList // When creating a new sprite... Sprite newSprite = specify image and desired x/y newSprite.drawOrder = set desired draw order value // Add to sorted list based on draw order value spriteList .Add( newSprite.drawOrder , newSprite ) // When it's time to draw... foreach Sprite s in spriteList s .Draw() } Where is (x,y)? • Choice is arbitrary • Decided upon by framework (x,y) top left (x,y) bottom left (CC) BY Gabriel Napetschnig Animating Sprites Typically based on flipbook animations • A series of images is played in rapid succession • This creates illusion of motion (>~ 12 fps) • Smooth animation may require 24 fps and more Animation (CC) BY Gabriel Napetschnig Implementing Animation • Array of images per Sprite – Example: 0-9 walking, 10-19 running – start, end & current frame have to be managed class AnimFrameData // The index of the first frame of an animation int startFrame // The total number of frames for said animation int numFrames } class AnimData // Array of images for all the animations ImageFile images [] // The frame data for all the different animations AnimFrameData frameInfo [] } Animated Sprite class AnimatedSprite inherits Sprite // All of the animation data AnimData animData // The particular animation that is active int animNum // The frame number of the active animation being displayed int frameNum // Amount of time the current frame has been displayed float frameTime // The FPS the animation is running at (24FPS by default). float animFPS = 24.0f function Initialize( AnimData myData , int startingAnimNum ) function UpdateAnim( float deltaTime ) function ChangeAnim( int num ) } Animated Sprite • Control speed through animFPS – Go faster, run slower, etc. • Switch animations through animNum – Eg. from walking to running • Synchronize with game time – For switching frames Sprite Sheets • In the past images’ side length had to be powers of 2 (2, 4, 8, 16, 32, 64, ...) – so padding was applied images to satisfy this • It’s not required any more, but still valid – so padding for an animation ends up with a lot of unused space. • Idea: put everything in a single image file Sprite Sheets Sprite Sheets – TexturePacker {"frames": [ { "filename": "barricade.psd", "frame": {"x":371,"y":1587,"w":999,"h":376}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":25,"y":142,"w":999,"h":376}, "sourceSize": {"w":1024,"h":1024} }, { "filename": "car-top1-red.psd", "frame": {"x":1,"y":1,"w":575,"h":1021}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":284,"y":0,"w":575,"h":1021}, "sourceSize": {"w":1024,"h":1024} }, ... TexturePacker 2d Graphics • Basics • Sprites • Scrolling • Tile Maps Scrolling • Sometimes games don’t fit on one screen • Avatar moves through world • Camera moves along Scrolling Fair use, https://en.wikipedia.org/w/index.php?curid=533608 Scrolling - Examples • Xenon 2 Megablast – https://www.youtube.com/watch?v=gBMBXkoTbwE • Rick Dangerous – https://www.youtube.com/watch?v=zfxES5zAuZ8 Single Axis Scrolling • Scrolling the game world on one axis only – ie. right to left, top to bottom • Infinite Scrollers, eg.Jetpack Joyride – https://www.youtube.com/watch?v=OBWtXm1_a6U • We assume: all textures are in-memory Single Axis Scrolling • Splitting background in screen sized segments – say 20-30 segments for the sake of an example • Given their world (x,y) coordinates – we can position them on the screen Single Axis Scrolling Setting up the background const int screenWidth = 960 // An iPhone 4/4S sideways is 960x640 // All the screen-sized image backgrounds string backgrounds [] = { "bg1.png" , "bg2.png" , /*...*/ } // The total number of screen-sized images horizontally int hCount = 0 foreach string s in backgrounds Sprite bgSprite bgSprite.image .Load(s) // 1st screen would be x=0, 2nd x=960, 3rd x=1920, ... bgSprite.x = hCount * screenWidth bgSprite.y = 0 bgSpriteList .Add( bgSprite ) screenCount ++ } Single Axis Scrolling Painting the background // camera.x is player.x as long as its clamped within the valid range camera.x = clamp( player.x , screenWidth / 2, hCount * screenWidth – screenWidth / 2) Iterator i = bgSpriteList .begin() while i != bgSpriteList .end() Sprite s = i .value() // find the first bg image to draw if ( camera.x – s.x ) < screenWidth // Image 1: s.x = 0, camera.x = 480, screenWidth/2 = 480 // 0 – 480 + 480 = 0 draw s at ( s.x – camera.x + screenWidth /2, 0) // draw the bg image after this, since it might also be visible i ++ s = i .value() draw s at ( s.x – camera.x + screenWidth /2, 0) break end i ++ loop Infinite Scrolling • Games that scroll until player dies • There’s no end to the world – endless runners like Canabalt • Textures have to used multiple times – background is repeating Parallax Scrolling • Background is broken into multiple layers – far away (eg. mountains) moving very slowly – ground layer is moving fastest • Three layers are sufficient – More add to the depth • Used by many popular games – Angry Birds, Jetpack Joyride, … Parallax Scrolling Source: http://en.wikipedia.org/wiki/Parallax_scrolling Parallax Scrolling: Examples • Adapt speed per layer: float speedFactor = 0.2f draw s at ( s.x – ( camera.x – screenWidth /2) * speedFactor , 0) • Example: Canabalt – https://youtu.be/IMBg75_TiLw?t=1m13s • Example: California Games – https://youtu.be/Qw56bU9Hfww Four Way Scrolling • World scroll both ways – horizontally and vertically – for most 2D games since Super Mario Bros. 2 • Point of origin? – Often in top left corner Four Way Scrolling • Implementation adds the y-axis … // updating camera on y-axis camera.y = clamp(player.y, screenHeight / 2, vCount * screenHeight – screenHeight / 2) [...] // drawing sprites on the right (x,y) draw s at ( s.x – camera.x + screenWidth /2, s.y – camera.y – screenHeight / 2) Tile Maps • Scrolling of screen sized segments is limited • Considering Legend of Zelda … – huge outdoor landscapes – massive dungeons – https://youtu.be/c4bvZZa5Mtg?t=5m10s Tile Maps • Tile maps partition worlds – into polygons of equal size – each having a sprite assigned • Tile sets – organize the sprites referenced by the tile map – eg. trees, empty ground, doors, walls, … Jazz Jackrabbit 2 Tile Maps • Support by many frameworks – Cocos2D, libGDX, Phaser, … • Size of the tiles – typically 2^n, ie. square with 32 pixels per side – fitting nicely into common screen sizes • iPhone 960x640 -> 30x20 tiles Tile Set & World Generation 1 2 3 4 5 6 8x3 00001300 12234600 45564613 Benefits of Tile Maps • Skinning easily possible • Level editor separate from engine • Rapid prototyping with existing tile sets • Support in many frameworks Tiled Open Source Tile Map Editor Isometric tiles Isometric tiles • Square tiles rotated by 45° – Sometimes also hexagons • Can exceed boundaries (on top) – Implies depth through painters algorithm – Painting from back ie. trees obstruct other tiles Procedurally generated content • Tile maps are especially used with procedurally generated game levels – Level design is based on rules – Rules leave a lot of space for randomness – Therefore, a dungeon looks different every time you enter it. • Examples – Spelunky – tile maps – Diablo – isometric tiles maps.