4 . 2. graphics ii
DESCRIPTION
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) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/1.jpg)
4.2. GRAPHICS IIImage Ribbons and Image Tiles
![Page 2: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/2.jpg)
IMAGE RIBBONSBuilding a scrollable background using several ‘joined’ images
![Page 3: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/3.jpg)
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
![Page 4: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/4.jpg)
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
![Page 5: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/5.jpg)
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
![Page 6: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/6.jpg)
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]
![Page 7: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/7.jpg)
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
![Page 8: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/8.jpg)
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 );
![Page 9: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/9.jpg)
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
![Page 10: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/10.jpg)
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.
![Page 11: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/11.jpg)
IMAGE TILESTiling a single image to cover a target region
![Page 12: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/12.jpg)
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
![Page 13: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/13.jpg)
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
![Page 14: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/14.jpg)
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
![Page 15: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/15.jpg)
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
![Page 16: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/16.jpg)
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
![Page 17: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/17.jpg)
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
![Page 18: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/18.jpg)
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;
}
![Page 19: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/19.jpg)
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
![Page 20: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/20.jpg)
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
![Page 21: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/21.jpg)
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;
}
![Page 22: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/22.jpg)
IMAGE USE IN YOUR GAMEThinking about image animations, transforms, ribbons, tiles, etc. in your game
![Page 23: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/23.jpg)
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
![Page 24: 4 . 2. Graphics II](https://reader035.vdocuments.site/reader035/viewer/2022062410/5681658f550346895dd85d41/html5/thumbnails/24.jpg)
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