4 . 2. Graphics II

1 / 24

# 4 . 2. Graphics II - PowerPoint PPT Presentation

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)

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

## PowerPoint Slideshow about '4 . 2. Graphics II' - bairn

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

### 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)

● 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

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

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

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]

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

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 );

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

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.

Image Tiles

Tiling a single image to cover a target region

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.

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

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

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

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

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

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;

}

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

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

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;

}

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

### 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.