Letterkenny Institute of Technology

Transcription

1 Letterkenny Institute of Technology BSc in Computing(Games) Subject: Games Programming 1 Stage: 1 Date: Autumn 2007 Examiners: J.G. Campbell Dr. M.D.J. McNeill Time Allowed: Two hours. INSTRUCTIONS Answer four questions from six. Failure to show derivation of answers and/or calculations may resultinlossofmarks. 1

2 1. Vector arithmetic. e 1 e 2 a b c [ 1 0 [ 0 1 [ 5 0 [ 0 4 [ 1 2 (1) (2) (3) (4) (5) d [ 2 1 (6) f g [ 4 3 [ 4 3 (7) (8) (a) (i)computea+b. [2 marks (ii)verifyyouranswerto(i)usingeithertheheadtotailruleortheparallelogramrule. You must provide a diagram. (iii)computef+g (iv) Compute 4f [2 marks [2 marks [2 marks 2

3 (b)thescalarordotproductoftwovectorscanbeexpressedintwoways: u v u v cosθ, (9) whereθistheanglebetweenthem,orintermsthesumofproductsofcomponents, u v(u x v x + ). (10) Whenu x,,v x, denotecomponentswithrespecttoanorthonormalbasis,bothequations give the same result. (i)computef c. (ii)computef e 1. (iii)computea b. (iv)computed f. [2 marks [2 marks [2 marks [2 marks (v)ifu v0andneitherofthemagnitudesofuorvarezero,whatcanyousayabout theanglebetweenuandv? (c) (i)computethemagnitudeofa, a. (ii)computethemagnitudeoff, f. [2 marks [2 marks [2 marks (d)computetheunitvectorˆfwhichisinthesamedirectionasfbuthasunitmagnitude. [3 marks 3

4 2. (a)figure1showsasmallmonochromeimageonasuperimposed10 10grid.Thegreylevelsofthe2 2rectanglesareasfollows:shadedcorrespondstomid-grey,blackto black,andwhitetowhite.thepixeldataarestoredineightbits,i.e.[ Showhowthefirstfourrowsoftheimagewouldbestoredinmemory(writedownthe numbers). Assume that the grid lines are invisible. [5 marks row 0 row 1 row 2 columns Figure 1: Monochrome image of a plane figure. (b)assumenowthatfigure1iscolourandthatshadedcorrespondstoblue,blacktogreen, and white to white. Showhowtheimagewouldbestoredinacomputer. Assumeasbeforethatthegrid linesareinvisibleandthateachcolouruseseightbits,i.e.[ youranswerwill contain lists of numbers, please ensure that you clearly indicate what each number refers to, i.e. row, column, colour. [5 marks (c)therearetwocarssidebysideinacarpark;oneiswhite,oneisred. Whydothey appearastheydo,i.e.thefirstoneappearwhite,andthesecondonered? [4 marks (d)figure2showsanimageofacharacterfroma2dplatformgame.theimagecontains a transparent rather than an opaque background. Explain the need for the transparent background. [4 marks Figure 2: Hero. 4

5 (e)youcanprobablyspotaliasinginfigure2.figure3showsanimageofatriangledrawn on a grid; the triangle is completely black and the background completely white. The imageistobesampledintopixelsateachgridsquare,anddigitisedto8bits[0(black)...255(white). (i) Draw a diagram to show what the digital image will look like, without anti-aliasing. [3 marks (ii)whatvalueswillpixelsa, b, c, dtakeonwithanti-aliasing? Note:digitisedto 8bits,[0(black)...255(white). [4 marks b a c d Figure 3: Anti-aliasing. 5

6 3.Figure4showsJavacodethatdrawssomeshapesandFigure5showstheresultantgraphics. There are two rectangle outlines(one black, one blue), one filled rectangle(blue), one circle (blue), one filled ellipse(red), one ellipse outline(black), and one line(blue). Please note that Rectangle2D.Double operates similarly to Ellipse2D.Double. Please note also that theoriginisatthetoplefthandcornerandthatthex-axispointstotheright(asnormal), but the y-axis points down. (a)basedonthecodeat// A,writeafragmentofcodetodrawarectangleofwidth80 andheight50withitstop-lefthandcornerat(x120,y140). (b)repeat(a)sothattherectangleiscolourgreenandfilled. [4 marks [4 marks (c)writecodetodrawtherectangleat// Ausinglines.Thecodeat// Bshowshowto createanddrawaline. (d)writecodetorotaterectanglerby45 anddrawit. [6 marks [2 marks (e)writecodewhichwilldrawadisk(filledcircle)at(150,50)(topleftofboundingbox) with diameter 80 and filled black. [4 marks (f)writecodewhichwilldrawacirclewithcentreat(180,80)andwithradius20. Be careful,notetheemphasison withcentreat and radius.drawadiagramtoshow how you arrived at the code and parameters. [5 marks 6

7 public class RectangleComponent11 extends JComponent public void paintcomponent(graphics g) Graphics2D g2 (Graphics2D) g; // A double x1 20; double y1 30; double xlen1 30; double ylen1 50; // Construct a rectangle and draw it Rectangle2D.Double r1 new Rectangle2D.Double(x1, y1, xlen1, ylen1); g2.draw(r1); double x2 20; double y2 30; double xlen2 30; double ylen2 50; Rectangle2D.Double r2 new Rectangle2D.Double(x2, y2, xlen2, ylen2); g2.draw(r2); Ellipse2D.Double e1 new Ellipse2D.Double(50, 250, 20, 40); g2.draw(e1); Ellipse2D.Double e2 new Ellipse2D.Double(100, 250, 90, 30); g2.setcolor(color.red); g2.fill(e2); Ellipse2D.Double e3 new Ellipse2D.Double(200, 50, 50, 50); Color c3 new Color(0, 0, 255); g2.setcolor(c3); g2.draw(e3); // B Point2D.Double p1 new Point2D.Double(250, 200); Point2D.Double p2 new Point2D.Double(300, 120); Line2D.Double lin new Line2D.Double(p1, p2); g2.draw(lin); AffineTransform at1 new AffineTransform(); at1.translate(50, 100); g2.transform(at1); g2.draw(r1); at1 new AffineTransform(); at1.rotate(math.toradians(20.0)); g2.transform(at1); g2.fill(r1); Figure4:Javacodetodrawsomeshapes. 7

8 Figure 5: Shapes. 8

9 4. (a) Eqn. 11 shows a Window to Viewport transformation. x d (Vxr V xl) (W xr W xl ) (x w W xl )+V xl, y d (V yt V yb ) (W yt W yb ) (y w W yb )+V yb. (11) Showthateqn.11isascalingplusatranslation,inotherwords,oftheformofeqn.12, witha 12 0,a [ [ [ [ xd a11 a 12 xw tx +. (12) a 21 a 22 y w t y y d Hint.Leta (Vxr V xl) (W xr W xl ) and,likewise,b (V yt V yb ) (W yt W yb ). [8marks (b)seefigure6whichshowsawindowandaviewportandacrudevehicleinthewindow. yw 5 Wyt5 4 3 c(2,4) (6, 5) 100 d(4,4) Vxl0, Vyt100 xd Wyb1 (1, 1) xw Wxl Wxr yd Vxr500, Vyb500 Window Viewport Figure 6: Window and viewport. Showthateqn.11willmap(1,1) (0,500)and(6,5) (500,100).Warning.Negative scaling for y. (c)computetheviewportcoordinatesofwindowpointsc(2,4)andd(4,4). [6 marks [6 marks (d)usetheresultsof(b)and(c),orotherwise,toshowhowthevehiclewillappearinthe viewport. [5 marks 9

10 5.Figure7showsJavacodethatdrawssomerotated,translatedandscaledversionsofa2D house; Figure 8 shows the resultant graphics. For brevity, we do not include createhouse; thetwostatementsjustafter// 1createanddrawtheoriginalofthehouseat(0,0). In the questions that follow, you need not bother setting line stroking/ stippling. (a)basedonthecodejustafter// (a),writeafragmentofcodewhich,usingan AffineTransform, willdrawthecopyofthehouseat(150,50);thecodewasremovedfromfigure7. [4 marks (b)revisethecodefollowing// (b)todrawthehouselyingonitssidewithitsbaseon they-axis asinthediagram,butusingasinglerotation. [4 marks (c)thecodeafter// (c)rotatestrhouse1whichisat(100,150). Explaintherotated positionandwhythehousedoesnottiltonitsbottomleftcornerlikerothouse1. [4 marks (d) Eqn. 13 shows a scaling transformation. Give the components of the scaling matrix that would result from// (d). Ignore the translation. [2 marks [ vx [ sx 0 0 s y [ ux. (13) (e)whatistheinverseofthescalingmatrixineqn.13? [2 marks (f) Using the results of(e) or otherwise, give the AffineTransform which will return the houseat(100, 20)toitsfullsize. [2 marks (g)eqn.14showsthematrixfora45 rotationandeqn.15thematrixfora90 rotation. Usematrixmultiplicationtoshowthattwo45 rotationsmakea90 rotation. [ cos45 sin45 sin45 cos45 [ cos90 sin90 sin90 cos90 [ [ [5 marks. (14). (15) (h)whatistheinverseofthe45 rotationmatrixandhowisitrelatedtoa 45 rotation matrix? [2 marks 10

11 g2.setpaint(color.black); // 1 Shape house createhouse(100, 120, 150); g2.draw(house); // (a) AffineTransform at1 new AffineTransform(); at1.translate(100, 150); Shape trhouse1 at1.createtransformedshape(house); Stroke stroke new BasicStroke(1, BasicStroke.CAP BUTT, BasicStroke.JOIN BEVEL, 0, new float[ 3, 3, 0); g2.setstroke(stroke); g2.draw(trhouse1); //code removed******************** // (b) at1 new AffineTransform(); at1.rotate(math.toradians(45.0)); Shape rothouse1 at1.createtransformedshape(house); stroke new BasicStroke(1, BasicStroke.CAP BUTT, BasicStroke.JOIN BEVEL, 0, new float[ 1, 1, 0); g2.setstroke(stroke); g2.draw(rothouse1); Shape rothouse3 at1.createtransformedshape(rothouse1); stroke new BasicStroke(1, BasicStroke.CAP BUTT, BasicStroke.JOIN BEVEL, 0, new float[ 1, 1, 0); g2.setstroke(stroke); g2.draw(rothouse3); // (c) Shape rothouse2 at1.createtransformedshape(trhouse1); stroke new BasicStroke(1, BasicStroke.CAP BUTT, BasicStroke.JOIN BEVEL, 0, new float[ 5, 5, 0); g2.setstroke(stroke); g2.draw(rothouse2); at1 new AffineTransform(); at1.translate(100,-20); at1.scale(1.0, 0.5); // (d) Shape scaledhouse at1.createtransformedshape(house); stroke new BasicStroke(1, BasicStroke.CAP BUTT, BasicStroke.JOIN BEVEL, 0, new float[ 5, 5, 0); g2.setstroke(stroke); g2.draw(scaledhouse); Figure 7: Java code to draw rotated, translated and scaled house drawings. 11

12 Figure 8: Houses. 12

13 6. (a)howcanparallaxscrollingbeusedtogivea3deffectina2dgame? [5 marks (b)figure10showsalevelmapfileforatile-basedgame. Thespriteandtileimagesare shown in Figure 9.(A background is displayed separately.) Figure 9: Sprites and tiles. 13

14 # Map file for tile-based game # (Lines that start with # are comments) # The tiles are: # (Space) Empty tile # A..Z Tiles A through Z # o Star #! Music Note # * Goal # 1 Bad Guy 1 (grub) # 2 Bad Guy 2 (fly) o o o o o o o o o o o o o o IIIIIII IIIIIII o o 2 o 2 2 2EF EF EGD EF 1 CD 1 1 EGAD * BBBBBBBBGHBBBBBBBGHBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBGAAHBBBBBBBBBBB # # in (c) draw from here --- Figure 10: Map file for tile-based game GiveadetailedcommentaryonhowthecodeinFigures 11and 12usethelevelmap file to initialise the game display. [10 marks (c) Draw the right hand eight columns of the display to demonstrate that you understand themeaningofthemapfile. Question 6, part(d), continues on page 17. [4 marks 14

15 private TileMap loadmap(string filename) throws IOException ArrayList lines new ArrayList(); int width 0; int height 0; // read every line in the text file into the list BufferedReader reader new BufferedReader( new FileReader(filename)); while (true) String line reader.readline(); // no more lines to read if (line null) reader.close(); break; // add every line except for comments if (!line.startswith( # )) lines.add(line); width Math.max(width, line.length()); // parse the lines to create a TileEngine height lines.size(); TileMap newmap new TileMap(width, height); for (int y0; y height; y++) String line (String)lines.get(y); for (int x0; x line.length(); x++) char ch line.charat(x); // check if the char represents tile A, B, C etc. int tile ch - A ; if (tile 0 && tile tiles.size()) newmap.settile(x, y, (Image)tiles.get(tile)); // continued... Figure 11: Level reader for a sprite-tile-based game, part 1. 15

16 // four lines repeated... int tile ch - A ; if (tile 0 && tile tiles.size()) newmap.settile(x, y, (Image)tiles.get(tile)); // check if the char represents a sprite else if (ch o ) addsprite(newmap, coinsprite, x, y); else if (ch! ) addsprite(newmap, musicsprite, x, y); else if (ch * ) addsprite(newmap, goalsprite, x, y); else if (ch 1 ) addsprite(newmap, grubsprite, x, y); else if (ch 2 ) addsprite(newmap, flysprite, x, y); // add the player to the map Sprite player (Sprite)playerSprite.clone(); player.setx(tilemaprenderer.tilestopixels(3)); player.sety(0); newmap.setplayer(player); return newmap; private void addsprite(tilemap map, Sprite hostsprite, int tilex, int tiley) if (hostsprite! null) // clone the sprite from the host Sprite sprite (Sprite)hostSprite.clone(); // center the sprite sprite.setx( TileMapRenderer.tilesToPixels(tileX) + (TileMapRenderer.tilesToPixels(1) - sprite.getwidth()) / 2); // bottom-justify the sprite sprite.sety(tilemaprenderer.tilestopixels(tiley + 1) - sprite.getheight()); // add it to the map map.addsprite(sprite); Figure 12: Level reader for a sprite-tile-based game, part 2. 16

17 (d)explaintheuseofdrawinfigure13inupdatingthepositionsofanumberofsprites inagame.concentrateon// *1and// *2;besuretomentionthecircumstancesin which sprite.getvelocityx() 0 wouldbetrueandhowthetwolines: transform.scale(-1, 1); transform.translate(-sprite.getwidth(), 0); willaltertheappearanceofaspritesuchasgrub1orgrub2infigure9. [6 marks public void draw(graphics2d g) // draw background g.drawimage(bgimage, 0, 0, null); AffineTransform transform new AffineTransform(); for (int i 0; i NUM SPRITES; i++) Sprite sprite sprites[i; // *1 transform.settotranslation(sprite.getx(), sprite.gety()); // *2 if (sprite.getvelocityx() 0) transform.scale(-1, 1); transform.translate(-sprite.getwidth(), 0); // draw it g.drawimage(sprite.getimage(), transform, null); Figure 13: Sprite position updater. 17

18 Appendix A, Trigonometry. sin a opp / hyp y cos a adj / hyp P But hyp 1 so b 90 a r1 b sin a tan a sin a opp y a and cos a x cos a adj x. sin 0 0 cos 0 1 sin 90 1 cos 90 0 etc. Figure14:Sin,cosandandcircle. From Figure 14 we can see from Pythagoras s Theorem that sin 2 θ+cos 2 θ1. (16) Somevalues.sin0 0,sin30 0.5,sin60 3/20.866,sin90 1. cos0 1,cos30 3/20.866,cos60 0.5,cos90 0. Radians. Aradianisabout57 ;itistheanglesubtendedbyanarcoflengthronacircleofradiusr. π/2radians90,πradians180,2πradians360,etc. π Degrees,d,toradians,r:r(180/π) d. CosandSinareperiodicover2πradiansor360. cosandsinrepeatthemselvesafter2πradiansor360deg. Sinisanoddfunction:sin θ sinθ. Cosisanevenfunction:cos θcosθ. 18

19 Useful equations. sin(θ+φ) sinθcosφ+cosθsinφ, (17) sin(θ φ) sinθcosφ cosθsinφ, (18) cos(θ+φ) cosθcosφ sinθsinφ, (19) cos(θ φ) cosθcosφ+sinθsinφ. (20) sin 2 θ+cos 2 θ1. (21) sin 2 θ 1 (1 cos2θ). (22) 2 cos 2 θ 1 (1+cos2θ). (23) 2 cos2θcos 2 θ sin 2 θ1 sin 2 θ2cos 2 θ 1. (24) 19

20 Appendix B, 2D Linear Transformations. Scaling [ vx [ sx 0 0 s y [ ux. (25) Rotation [ vx [ cosb sinb sinb cosb [ ux. (26) Shear Shearalongthexaxis, [ vx [ 1 a 0 1 [ ux. (27) Shearalongtheyaxis, [ vx [ 1 0 b 1 [ ux. (28) Reflection Reflect about the y axis(x-coordinates are negated), [ [ [ vx 1 0 ux. (29) 0 1 Reflect about the x axis(y-coordinates are negated), [ [ vx [ ux. (30) Projection Projection onto x-axis, [ vx Projectionontothey-axis, [ vx [ [ [ ux [ ux. (31). (32) Translation [ vx [ tx t y [ ux +. (33) 20

21 Appendix C, 3D Affine Transformations using Homogeneous Coordinates. Translation v x v z v w t x t y t z u x u z u w. (34) Rotation about the z-axis Rotation about the x-axis Rotation about the y-axis R z (b) R x (b) R y (b) cosb sinb 0 0 sinb cosb cosb sinb 0 0 sinb cosb cosb 0 sinb sinb 0 cosb (35). (36). (37) 21