1 / 24

4 . 2. Graphics II

4 . 2. Graphics II. Image Ribbons and Image Tiles. Image Ribbons. Building a scrollable background using several ‘joined’ images. To do: Consider game applicability. Image Ribbons. ● An image ribbon is a sequence of connected images (1+) (maybe looped)

bairn
Download Presentation

4 . 2. Graphics II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 4.2.Graphics II Image Ribbons and Image Tiles

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

  3. To do: Consider game applicability Image Ribbons ● 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

  4. I1 w1 I2 w2 In wn h x=0, y=0 x = xVS x = xVE Image Sequences (developing a generic approach) Given the following: ● n images ( I1 … In) with the same height, h, but different widths (w1 … wn) ● With the first image, I1, starting at x location 0 ● A viewport of height h ranging between x values vSto vE 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 Start 30 sec 9 mins 8 mins 7 mins 10 mins 1 min 4 mins 3 mins 2 mins 6 mins 5 mins Finished

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

  6. drawHorizontal( Graphics2D graphics2D ) { intviewPortOffset = viewPortX; intdrawOffset = 0; intimageIdx = 0; intdrawWidth; while(imageOffsets[imageIdx +1] < viewPortX ) imageIdx++; viewPortX – viewport start relative to ribbon h x=0, y=0 imageOffsets[0] imageOffsets[1] imageOffsets[n] imageOffsets[n+1]

  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 ) { intviewPortOffset = viewPortX; intdrawOffset = 0; intimageIdx = 0; intdrawWidth; drawOffset += drawWidth; viewPortOffset = (viewPortOffset + drawWidth) % imageOffsets[numImages]; imageIdx = (imageIdx+1) % numImages; } } old viewPortOffset new viewPortOffset drawWidth old drawOffset new drawOffset

  10. Layer and object viewport confusion! 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. Image Tiles Tiling a single image to cover a target region

  12. To do: Consider game applicability Image Tile 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.

  13. vw tw vh th vx,vy x=0, y=0 Image Tiles (developing a generic solution) Given the following: ● An image tile, starting from 0,0 with width tw and height th ● A viewport starting from vx,vy (somewhere within the tile) and with width vw and height vh 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. Start 30 sec 9 mins 8 mins 7 mins 10 mins 1 min 4 mins 3 mins 2 mins 6 mins 5 mins Finished

  14. Tile Drawing : Wordy Solution 1 Start drawing from vx,vy 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

  15. int drawXOffset = 0, drawYOffset = 0; int tileXOffset = viewPortX, tileYOffset = viewPortY int drawWidth = 0, drawHeight = 0; width height tileHeight viewPortX, viewPortY tileWidth 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 ) { } width drawXOffset, drawYOffset height tileHeight viewPortX, viewPortY tileWidth

  17. intdrawXOffset = 0, drawYOffset = 0; inttileXOffset = viewPortX, tileYOffset = viewPortY intdrawWidth = 0, drawHeight = 0; while( drawXOffset < width ) { drawYOffset = 0; tileYOffset = viewPortY; while( drawYOffset < height ) { drawWidth = tileWidth - tileXOffset; if( drawWidth > width - drawXOffset ) drawWidth = width - drawXOffset; ; } drawXOffset tileXOffset drawXOffset tileXOffset drawXOffset tileXOffset tileWidth tileWidth tileWidth Full tile width Tile ends outside Tile starts 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 ); } drawHeight drawXOffset drawYOffset tileXOffset tileYOffset drawWidth

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

  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. Image Use in Your Game Thinking about image animations, transforms, ribbons, tiles, etc. in your game

  23. Image use in your game… drawX, drawY 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 Question Clinic : This process should raise questions. Feel free to ask (and/or include in the Question Clinic) Start 30 sec 1 min 2 mins 3 mins 4 mins 8 mins 7 mins Finished 9 mins 10 mins 5 mins 6 mins

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

More Related