Download - 4 . 2. Graphics II
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
Start10 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
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]
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 ) {
int viewPortOffset = viewPortX; int drawOffset = 0;int imageIdx = 0; int drawWidth;
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,vy Start10 mins9 mins8 mins7 mins6 mins5 mins4 mins3 mins2 mins 1 min 30 secFinished
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
int drawXOffset = 0, drawYOffset = 0;int tileXOffset = viewPortX, tileYOffset = viewPortYint drawWidth = 0, drawHeight = 0;
while( drawXOffset < width ){
drawYOffset = 0; tileYOffset = viewPortY;while( drawYOffset < height )
{
}
tileHe
ight
tileWidth
width
height
viewPortX, viewPortY
drawXOffset, drawYOffset
int drawXOffset = 0, drawYOffset = 0;int tileXOffset = viewPortX, tileYOffset = viewPortYint 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
int drawXOffset = 0, drawYOffset = 0;int tileXOffset = viewPortX, tileYOffset = viewPortYint 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 = viewPortYint 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
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
int drawXOffset = 0, drawYOffset = 0;int tileXOffset = viewPortX, tileYOffset = viewPortYint 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 += 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:Consider
usage
Start10 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
Summary
To do:Complete Question
ClinicComplete/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