1. 4.2. G RAPHICS II Image Ribbons and Image Tiles

2. Building a scrollable background using several ‘joined’ images

3. ● An image ribbon is a sequence of connected images (1+) (maybe looped) ● A moveable viewport (i.e. the corresponding game object size) onto the ribbon is maintained ● Ribbons can be a good way of handling backgrounds in a scroller/platform game Viewport To do: Consider game applicability

4. Given the following: ● n images ( I 1 … I n ) with the same height, h, but different widths (w 1 … w n ) ● With the first image, I 1, starting at x location 0 ● A viewport of height h ranging between x values v S to v E Develop an algorithm, drawRibbon(), that determines which bits of which images should be displayed as they fall within the viewport. You should assume that the image strip loops around on itself. Hint: Assume imageOffset[n] holds the x start offset of image n I 1 w 1 I 2 w 2 I n w n h x=0, y=0 x = x VS x = x VE Start 10 mins9 mins8 mins7 mins6 mins5 mins4 mins3 mins2 mins 1 min 30 secFinished

5. drawHorizontal ( Graphics2D graphics2D ) { int viewPortOffset = viewPortX; int drawOffset = 0; int imageIdx = 0; int drawWidth; h x=0, y=0 viewPortOffset – viewport start draw offset relative to ribbon drawOffset – start draw offset relative to viewport drawWidth – width to draw across ribbon

6. drawHorizontal ( Graphics2D graphics2D ) { int viewPortOffset = viewPortX; int drawOffset = 0; int imageIdx = 0; int drawWidth; while(imageOffsets[imageIdx +1] < viewPortX ) imageIdx++; h x=0, y=0 viewPortX – viewport start relative to ribbon imageOffsets[0] imageOffsets[1]imageOffsets[n+1]imageOffsets[n]

7. drawHorizontal ( Graphics2D graphics2D ) { int viewPortOffset = viewPortX; int drawOffset = 0; int imageIdx = 0; int drawWidth; while(imageOffsets[imageIdx +1] < viewPortX ) imageIdx++; while( drawOffset < width ) { drawWidth = imageOffsets[imageIdx+1] - viewPortOffset; if( drawOffset + drawWidth > width ) drawWidth = width - drawOffset; Case 1: Image fully within viewport Case 2: Image not fully within viewport

8. drawHorizontal ( Graphics2D graphics2D ) { int viewPortOffset = viewPortX; int drawOffset = 0; int imageIdx = 0; int drawWidth; while(imageOffsets[imageIdx +1] < viewPortX ) imageIdx++; while( drawOffset < width ) { drawWidth = imageOffsets[imageIdx+1] - viewPortOffset; if( drawOffset + drawWidth > width ) drawWidth = width - drawOffset; graphics2D.drawImage( images[imageIdx], drawOffset, 0, drawOffset+drawWidth, height, viewPortOffset-imageOffsets[imageIdx], viewPortY, viewPortOffset-imageOffsets[imageIdx]+drawWidth, viewPortY + height );

9. drawHorizontal ( Graphics2D graphics2D ) { int viewPortOffset = viewPortX; int drawOffset = 0; int imageIdx = 0; int drawWidth; drawOffset += drawWidth; viewPortOffset = (viewPortOffset + drawWidth) % imageOffsets[numImages]; imageIdx = (imageIdx+1) % numImages; } old drawOffset drawWidth new drawOffset old viewPortOffsetnew viewPortOffset

10. Assume the game comprises two layers: background layer (a scrolling image ribbon) game layer (holding game characters) Both layers are linked. When the game layer viewport is moved, the background object in the background layer moves the image ribbon viewport by the same amount. Game layer: Same height as screen, much wider than screen. Contains lots of game objects. Background layer: Same height and width as screen. Contains a single object displaying an image ribbon.

11. Tiling a single image to cover a target region

12. An image tile is simply an image that is intended to be repeatedly drawn next to itself in a tiled pattern. Tiled images can often be found within games as a means of providing a memory efficient means of generating background surfaces, etc. To do: Consider game applicability

13. x=0, y=0 thth twtw Given the following: ● An image tile, starting from 0,0 with width t w and height t h ● A viewport starting from v x,v y (somewhere within the tile) and with width v w and height v h Develop an algorithm, drawTiles(), which will fill up the viewport with image tiles. Suggestion: express what you would do in words first then turn that into an algorithm. vwvw vhvh v x,v y Start 10 mins9 mins8 mins7 mins6 mins5 mins4 mins3 mins2 mins 1 min 30 secFinished

14. 1 Start drawing from v x,v y and draw as much of image tile as possible 2 Move along the y-axis to where is the topmost bound of drawn tile 3 Draw another tile here (with the same x value as the original tile). 4 Keep doing steps 2 and 3 until we’ve painted the entire ‘column’ 5 Move along the x-axis to the rightmost bound of the last drawn tile 6 Repeat step 2,3,4 and 5 for this ‘column’ 7 Keep moving along the x-axis until whole viewport is painted Tile Drawing : Wordy Solution

15. int drawXOffset = 0, drawYOffset = 0; int tileXOffset = viewPortX, tileYOffset = viewPortY int drawWidth = 0, drawHeight = 0; tileHeight tileWidth width height viewPortX, viewPortY drawXOffset, drawYOffset – relative to the viewport tileXOffset, tileYOffset – relative to the tile

16. int drawXOffset = 0, drawYOffset = 0; int tileXOffset = viewPortX, tileYOffset = viewPortY int drawWidth = 0, drawHeight = 0; while( drawXOffset < width ) { drawYOffset = 0; tileYOffset = viewPortY; while( drawYOffset < height ) { } tileHeight tileWidth width height viewPortX, viewPortY drawXOffset, drawYOffset

17. int drawXOffset = 0, drawYOffset = 0; int tileXOffset = viewPortX, tileYOffset = viewPortY int drawWidth = 0, drawHeight = 0; while( drawXOffset < width ) { drawYOffset = 0; tileYOffset = viewPortY; while( drawYOffset < height ) { drawWidth = tileWidth - tileXOffset; if( drawWidth > width - drawXOffset ) drawWidth = width - drawXOffset; ; } tileWidth drawXOffset tileXOffset tileWidth drawXOffset tileXOffset tileWidth drawXOffset tileXOffset Full tile width Tile starts outside Tile ends outside

18. int drawXOffset = 0, drawYOffset = 0; int tileXOffset = viewPortX, tileYOffset = viewPortY int drawWidth = 0, drawHeight = 0; while( drawXOffset < width ) { drawYOffset = 0; tileYOffset = viewPortY; while( drawYOffset < height ) { drawWidth = tileWidth - tileXOffset; if( drawWidth > width - drawXOffset ) drawWidth = width - drawXOffset; drawHeight = tileHeight - tileYOffset; if( drawHeight > height - drawYOffset) drawHeight = height - drawYOffset; }

19. int drawXOffset = 0, drawYOffset = 0; int tileXOffset = viewPortX, tileYOffset = viewPortY int drawWidth = 0, drawHeight = 0; while( drawXOffset < width ) { drawYOffset = 0; tileYOffset = viewPortY; while( drawYOffset < height ) { drawWidth = tileWidth - tileXOffset; if( drawWidth > width - drawXOffset ) drawWidth = width - drawXOffset; drawHeight = tileHeight - tileYOffset; if( drawHeight > height - drawYOffset) drawHeight = height - drawYOffset; graphics2D.drawImage( drawXOffset, drawYOffset, drawXOffset+drawWidth, drawYOffset+drawHeight, tileXOffset, tileYOffset, tileXOffset+drawWidth, tileYOffset+drawHeight ); } drawWidth drawXOffset drawYOffset tileXOffset tileYOffset drawHeight

20. while( drawXOffset < width ) { drawYOffset = 0; tileYOffset = viewPortY; while( drawYOffset < height ) { drawYOffset += drawHeight tileYOffset = (tileYOffset+drawHeight) % tileHeight; } drawXOffset += drawWidth; tileXOffset = (tileXOffset+drawWidth) % tileWidth; } drawWidth drawXOffset drawYOffset tileXOffset tileYOffset drawHeight

21. int drawXOffset = 0, drawYOffset = 0; int tileXOffset = viewPortX, tileYOffset = viewPortY int drawWidth = 0, drawHeight = 0; while( drawXOffset < width ) { drawYOffset = 0; tileYOffset = viewPortY; while( drawYOffset < height ) { drawWidth = tileWidth - tileXOffset; if( drawWidth > width - drawXOffset ) drawWidth = width - drawXOffset; drawHeight = tileHeight - tileYOffset; if( drawHeight > height - drawYOffset) drawHeight = height - drawYOffset; graphics2D.drawImage( drawXOffset, drawYOffset, drawXOffset+drawWidth, drawYOffset+drawHeight, tileXOffset, tileYOffset, tileXOffset+drawWidth, tileYOffset+drawHeight ); drawYOffset += drawHeight tileYOffset = (tileYOffset+drawHeight) % tileHeight; } drawXOffset += drawWidth; tileXOffset = (tileXOffset+drawWidth) % tileWidth; }

22. Thinking about image animations, transforms, ribbons, tiles, etc. in your game

23. Think about how your game might use animations, fonts, image transforms, ribbons and tiling. How can the above be used to support your game. Does it need to be adapted or extended? Are there any questions over how they can/should be used? To do: Consider usage Start 10 mins9 mins8 mins7 mins6 mins5 mins4 mins3 mins2 mins 1 min 30 secFinished Question Clinic : This process should raise questions. Feel free to ask (and/or include in the Question Clinic) drawX, drawY

24. To do: Complete Question Clinic Complete/iterate the design for graphics use in your game Write code that loads, displays, animates, tiles, etc., images. Today we explored: How image ribbons can be used within games How image tiling can be used within games