4.2. G RAPHICS II Image Ribbons and Image Tiles. Building a scrollable background using several ‘joined’ images

4.2. GRAPHICS IIImage Ribbons and Image Tiles

IMAGE RIBBONSBuilding a scrollable background using several ‘joined’ images

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

To do:

Consider

game

applicability

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 vS to 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

I1 w1 I2 w2 In wn

h

x=0, y=0 x = xVS x = xVE

Start

10 mins9 mins8 mins7 mins6 mins5 mins4 mins3 mins2 mins 1 min 30 secFinished

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



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]




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




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



drawOffset += drawWidth;viewPortOffset = (viewPortOffset + drawWidth) % imageOffsets[numImages];imageIdx = (imageIdx+1) % numImages;

} }

old drawOffsetdrawWidth

new drawOffset

old viewPortOffset new viewPortOffset

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 TILESTiling a single image to cover a target region

Image TileAn 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

Image Tiles (developing a generic solution)

x=0, y=0

th

tw

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

vh

vx,vyStart


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

Tile Drawing : Wordy Solution

int drawXOffset = 0, drawYOffset = 0;int tileXOffset = viewPortX, tileYOffset = viewPortYint drawWidth = 0, drawHeight = 0;

tileHe

ight

tileWidth

width

height

viewPortX, viewPortY

drawXOffset, drawYOffset – relative to the viewporttileXOffset, tileYOffset – relative to the tile


while( drawXOffset < width ){

drawYOffset = 0; tileYOffset = viewPortY;while( drawYOffset < height )

{

}

tileHe

ight

tileWidth

width

height

viewPortX, viewPortY

drawXOffset, drawYOffset




{drawWidth = tileWidth - tileXOffset;if( drawWidth > width - drawXOffset ) drawWidth = width - drawXOffset;

; }

tileWidth

drawXOffset tileXOffset

tileWidth


tileWidth


Full tile width Tile starts outside Tile ends outside





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

drawXOffsetdrawYOffset

tileXOffsettileYOffset

drawHeight

while( drawXOffset < width ){ drawYOffset = 0; tileYOffset = viewPortY;

while( drawYOffset < height ) {

drawYOffset += drawHeighttileYOffset = (tileYOffset+drawHeight) % tileHeight;

}

drawXOffset += drawWidth;tileXOffset = (tileXOffset+drawWidth) % tileWidth;

}

drawWidth

drawXOffsetdrawYOffset

tileXOffsettileYOffset

draw

Heig

ht






graphics2D.drawImage( drawXOffset, drawYOffset,drawXOffset+drawWidth, drawYOffset+drawHeight,tileXOffset, tileYOffset, tileXOffset+drawWidth, tileYOffset+drawHeight );

drawYOffset += drawHeighttileYOffset = (tileYOffset+drawHeight) % tileHeight;

}

drawXOffset += drawWidth;tileXOffset = (tileXOffset+drawWidth) % tileWidth;

}

IMAGE USE IN YOUR GAMEThinking about image animations, transforms, ribbons, tiles, etc. in your game

Image use in your game…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:

Conside

r usage

Start


Question Clinic : This process should raise questions. Feel free

to ask (and/or include in the Question Clinic)

drawX, drawY

Summary

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

Documents

4.2. G RAPHICS II Image Ribbons and Image Tiles. Building a scrollable background using several ‘joined’ images