Macromedia Flash MX Game Design Demystified phần 8 pptx

so that you can see other areas of it. That navigation can become frustrating when you're trying to move distances, so I also included support for the keyboard arrow keys. I suggest using the arrow keys for easy movement. On that note, skip over to the bottom-right corner of the screen just for a moment, to the reposition button. When you click that button, the world moves back to its starting position. To the right of the directional arrow keys are four items, each of which is draggable. You can click and drag item over the level and then release it. Note that y ou can onl y dra g these items into the area within the black lines on the stage. The first item has the word "gap" written on it. By default, the entire ground from x = 0 to = 4800 is a walkable area. To add areas of no ground—that is, gaps—you drag and drop this movie clip. should note that a gap has no y position, so when you drop this movie clip onto the stage, you don't have to worry about placing it exactly over the ground; all that's necessary is to place it horizontally where you There are three buttons on the gap movie clip: a left arrow, a right arrow, and a minus sign. The arrows controlling and adjusting the width of the gap: The left arrow shrinks the movie clip horizontally. The right arrow makes it wider. The minus sign is something you'll see on all four of the elements. It allows you to remove an item from the stage. If you placed the item but no longer want it on the stage, click the minus button and the item will be removed. The next element is the collectable ice cube item. This is an easy one, as it has no configurable properties. drag it to the position where you want it. Then we have the platform movie clip. Notice that there is only one of these, not three. That is because this one movie cli p can be confi g ured to dis p la y an y of the three t yp es. Dra g the cli p out onto the level. Click the i button on it (the i stands for "info"). This opens an information-display window, where you can edit all of the <block> node attributes. The graphic field can contain any of three values: "cube," "ice platform," or "tree." The type field can contain either of two values: "solid" or "cloud." (The behavior of the rest of the attributes was explained above in the XML.) As soon as you click the update button (or press the Enter or Return key) element is updated and the display window closes. The platform will not start movin g on the sta g e (if set to move) but will display the correct graphic. Finally, we have the enemy movie clip. Drag one onto the stage and click the now-familiar i button. There only three editable fields for this movie clip: the direction for it to start walking, its speed, and its breadth. Remember that when the flag is captured, the level has been completed. The flag is already on the stage, there can only be one flag. You can drag it to any position. Notice the Generate XML button in the bottom-left corner of the screen. When clicked, it takes all of the level data and generates an XML-formatted document for that level, and displays it in the Output window. You can then copy it from the Output window and store it in a text file. You can name that text file anything you like (such as level1.xml). When testing new levels, the procedure I usually follow is this: 1. Rename level1.xml to something else (like level1_.xml) so as not to ruin the original. 2. Build a level using the editor, and copy the XML. 3. Without closing the level editor, open a text editor and paste the level XML data into it, and then save it as level1.xml. 4. O p en the ice_world.swf file ( the standalone one, not in Test Movie mode ) and test this level. It is quick and easy to test, because it is now level 1. 5. To make any changes, close the game and go back to the editor, which is still open. Since editor was open during the testing period, capturing all key presses, chances are good that the level's position is not where you left it. Click the reposition button to reset to the position. You can then move the level to the area that you want to edit. Once you have the level again, return to step 3. 6. Repeat steps 3–5 as needed. When you are happy with the level, do a Save As, using the level number that you want for this file (for example, level7.xml). Then rename level1_.xml back to level1.xml. One major deficiency of this level editor is that it doesn't load in level files that you can then modify to different level file. You must start from scratch every time. Other than that problem, this level editor should provide you with everything you need to create some very interesting levels! Note that while you are testing the game, it will appear to be playing more slowly you would expect. This is because the editor is still open. I l @ve RuBoard I l @ve RuBoard Game Structure and Resource Files In this section we are going to look at the game's structure and at the individual movie clips used in the (such as the hero, the platforms, and the ground). The Game Structure Open ice_world.fla in the Chapter15 directory. The game's main timeline is set up in the same way as used in the other games in this book; the game itself resides on the Game frame. Click the Game frame label. You will see one movie clip in that frame (called game board); double-click it to enter it. The Layers and Frames There are two frames and four layers in this movie clip. The layers are as follows: Actions— Contains all of the ActionScript for the game. Notice that it is on the second of the two frames. is because we need the movie clips in this timeline to be fully instantiated (that is, any ActionScript on the frame of any of these movie clips needs to be loaded) before we try to do anything with them. If the ActionScript was on the first frame, we might try to do something with a movie clip that had not fully been instantiated. Border— Contains a simple white outline of the game area and two buttons. One button toggles the sound (either on or off), and the other takes you back to the menu. Waiting Screen— In this layer we have a movie clip, with an instance name of waitingScreen , that all of the screens that display durin g the chan g eover between levels. It tells you when a level file is loadin g , when the g ame is over (and if you won or lost), and when the next level is finished loadin g and ready to be played. Game Clip— This layer contains a movie clip with an instance name of gameClip . It contains the hero, the flag, the ground, the background, and all of the other movie clips that will be added to the game. We will discuss this in more detail next. The gameClip instance The gameClip movie clip instance (with a library name of game) contains (or will contain, once they are attached by the main game ActionScript) all of the level graphics. Double-click the movie clip to enter it. are three layers within. The top layer is a mask layer that masks the two layers beneath it. It masks an 680 by 350, which is the amount of area we intend to see at any time in the g ame. The two layers beneath each contain one movie clip, with instance names of bg and overlay . The bg instance contains the background movie clip, which is quite large. Notice that its registration point is the upper-left corner and is (0, 0). The overlay movie clip instance contains the hero and will contain every attached movie clip when a level is created. The instance name of the hero movie clip is man . As the hero moves to the right (in an actual game), the overlay instance will be moved left so that the character is always near the center of the screen. As the character moves up, the overlay instance moves down. Also, the bg movie clip instance moves in the opposite direction from the character in a subtler way. goal is to keep the character in the middle of the screen as much as possible. The one exception is when character reaches the boundaries of the level. At the be g innin g of the level, the hero is at the left boundary (which means the bg and overlay instances can't scroll any further), and the hero does not have to stay in the center of the screen. But after the hero moves far enough away from the boundaries, the screens start scroll. At this time you might want to open up the game and play it again, paying attention from the perspective someone who now knows the movie-clip structure. Notice that the overlay and bg instances move independently and at different rates. Notice what happens at the boundaries. Supporting Movie Clips Now let's look at the rest of the movie clips used in the game, the ones that illustrate or animate individual pieces of the game. Open up the library and take a look inside the clips described below. man This movie clip contains the hero. There is only one movie clip inside, with an instance name of animation . Notice that its registration point is in the center at the feet of the hero. When the hero is walking in one direction, we face him in that direction. When he turns around, we just reverse his _xscale property so he is facing the other direction. man animation While in the man clip above, double-click the animation instance inside. Now you're in the man animation You will see that this is the movie clip that contains the five states of the hero: standing, walking, j umpin g , and dead. (Each of these states has a frame label and an area in the timeline of its own, except standing, which is the first frame and has no label.) platform The platform movie clip has three frame labels, one for each platform type. There is one movie clip in this timeline that spans all three of the frame labels. It has an instance name of item , and it contains the collectable object (the ice cube). This is the collectable item that can be contained within a platform. If the j umps from underneath a platform and hits it, and a collectable item comes out from the top, then it did so using this internal movie clip. Also notice that we have two black lines on each of the three frame labels. placement determines the platform's boundaries. If you want to adjust the boundaries of a platform, then those lines around. The left boundary is determined by the x = 0 position, and the top boundary is by the y = 0 position. This movie clip has a linkage identifier of platform . ice cube This movie clip, with a linkage identifier of ice cube , has two frame labels: Display and Capture. The frame is shown for the ice cubes that are just sitting around. When an ice cube is captured (by the hero running into it or bumping a platform from below), the Capture frame is played. floor This movie clip simply contains the graphic of the ground and has a linkage identifier of ground . It can be with multiple instances of itself to give the feeling of long stretches of ground. ground corner This movie clip helps the edge of the ground appear smooth where there is a gap. This is not mandatory; it's j ust more p leasin g to the e y e than a shar p cliff. It has a linka g e identifier of corner . end flag This is the flag the game player must capture to complete a level. It has a linkage identifier of flag . The first frame shows the flag at full mast. After the player runs into the flagpole, this movie clip plays an frame 20, a function is executed: where.levelComplete() This serves as a simple time delay to end the level and display the "level complete" message. The where reference is set from the main code area, as you will see in the next section. baddy This is the movie clip of the enemy. It contains two movie clips. One contains the animation of the enemy walking and dying, and has an instance name of animation . The other one is a box, which becomes invisible when the game starts, that is used to detect a collision between the hero and the enemy itself. It has an instance name of hitArea . I l @ve RuBoard I l @ve RuBoard Game Code This game has a lot of ActionScript. Don't be intimidated by it, though, because there is not much in the way techniques that you haven't seen before, and for the most part the code is simple. It's just that in this game, man y thin g s can ha pp en that we have to use code to check for. For instance, when detectin g a collision of the hero with a platform, we need to do the following: 1. Check the left side. If hitting, reposition the hero. 2. Check the right side. If hitting, reposition the hero. 3. Check the top. If the hero is on the top, then do we also need to move him a little bit if the platform is moving? 4. Check the bottom. If the hero hits from underneath, are there collectable items hidden in there? If so, how many? Is the hero crouched under the platform? If so, move him out. None of those things are difficult—there are just many situations to cover. Those are only a few of the detection questions answered with code. Above I didn't even include cloud properties that we need to check (such as a tree)! This game takes a very object-oriented (OO) approach. I used my fledgling knowledge of OO programming create this game, and I'm happy with the results. The code is easy to understand and can be extended having to rewrite it. Object-Oriented Programming Over the last few years there has been a big push for Flash coders to start coding in an object- oriented (OO) way. OO coding, also known as Object-Oriented Programming (OOP), contains no syntax with which you are not already familiar. It is more a state of mind and adherence to some structures. We have been using many techniques throughout this book that are considered OO— instance, the A* algorithm, the isometricAS object, and the ElectroServerAS object (which you see in Chapter 13, "Dissecting a Chat"; and in the multiplayer game chapters 17 and 18, Tac-Toe: Your First Multiplayer Game" and " 9-Ball"). When you see something coded in an OO it is usually pretty easy to understand. For instance, in Ice World we have a game object, which contains a hero object (make sense so far?). The hero object contains certain methods, like () , walkLeft() , and crouch() . That is as complicated as it gets in this game! OO coding is a structured way of programming things to work. Let me give you a comparison. If I did not use OO, then I might just have a function called on the timeline. But what if the enemy also could jump? Then I would have to rename that to, let's say, heroJump() , and create a second function called enemyJump() . OO coding makes If you don't already have ice_world.fla open, then open it now. We are going to go through some of the pieces of ActionScript, but not all of it. (As a reminder, we're looking at the game board movie clip.) ActionScript Not Found in a Function There are about 50 lines of ActionScript in this game that are not contained within a function (or the onEnterFrame event). These perform the tasks that only need to occur once within the game. We will look these actions here. The game object The game ob j ect is the container for all of the information in the g ame. This includes, but is not limited to, the level data (once it's been loaded from an XML file), the hero object, and all of the constants used the game, such as friction and gravity. The game object is defined first: game = {}; The bg object The bg object is created to store information about the background image. The background image is scrolled subtly as the hero runs around the level. In order to calculate how much to scroll the background, we need know the width and height of the background. All of this information is stored in the following lines of ActionScript: 1 1 1 1 game.bg = {}; 2 2 2 2 game.bg.clip = gameClip.bg; 3 3 3 3 game.bg.x = 0; 4 4 4 4 game.bg.y = 0; 5 5 5 5 game.bg.height = game.bg.clip._height; 6 6 6 6 game.bg.width = game.bg.clip._width; The overlay object This object is used to store information about the overlay movie-clip instance inside the gameClip That is the movie clip that contains the hero as well as all of the other level elements except the We create an object for the overlay so that we can keep track of its position in an OO way. 1 1 1 1 game.overlay = {}; 2 2 2 2 game.overlay.clip = gameClip.overlay; 3 3 3 3 game.overlay.x = 0; 4 4 4 4 game.overlay.y = 0; You can see in lines 3 and 4 that we initially give the overlay object x and y positions of 0. This is because it starts at that position. When the hero moves around the level, the overlay will also move, and its x and y positions will be updated. much easier and more intuitive to g ive each ob j ect the abilit y to p erform the function. So it would be enemy.jump() and hero.jump() . OO tends to be easily extended (that is, you can easily add a method, such as hero.explode without colliding with other code), easy to conceptualize, and easy to understand. But it has one big problem: performance. For games like Ice World, performance is not that big of an issue. But for games that require a lot of calculations done very frequently (like 9-ball), OO may be too verbose. You might have to optimize in a non-OO way to gain performance. My knowledge of OOP is growing every day, but I still have much to learn. There are many concepts I've read about or heard about in lectures that I'm sure I will eventually adopt. If you interested in OOP in Flash, you should participate in forum discussions (or just read them) on resource sites such as Ultrashock.com ( www.ultrashock.com). The hero object The hero object serves many functions. It represents the hero character of the game, and it stores a lot of information about the hero, such as his position, his dimensions, and the number of lives he has. In what you see here, we will define a lot of methods onto this object later in the code. Those methods will for events like jumping, walking, and crouching. 1 1 1 1 game.hero = {}; 2 2 2 2 game.hero.clip = gameClip.overlay.man; 3 3 3 3 hero = game.hero; 4 4 4 4 hero.lives = game.numLives-1; 5 5 5 5 clip = game.hero.clip; 6 6 6 6 hero.xmov = 0; 7 7 7 7 hero.startx = 50; 8 8 8 8 hero.starty = 320; 9 9 9 9 hero.standingHeight = 50; 10 10 10 10 hero.crouchingHeight = 30; 11 11 11 11 hero.width = 23; 12 12 12 12 hero.height = hero.standingHeight; 13 13 13 13 hero.ymov = 0; 14 14 14 14 hero.minXmov = .75; 15 15 15 15 hero.maxXmov = 12; 16 16 16 16 hero.groundWalkIncrement = 1.7; 17 17 17 17 hero.airWalkIncrement = .85; 18 18 18 18 hero.pushSpeed = 4; 19 19 19 19 hero.walkIncrement = hero.groundWalkIncrement; 20 20 20 20 hero.jumpSpeed = 23; 21 21 21 21 hero.clip.swapDepths(1000000); Notice that in line 3 we define a shortcut to the hero object. This is done as a convenience and is not It is just easier to type hero than game.hero. In line 9 we set a property to the hero object called standingHeight . This is the height of the hero when he is standing. In the next line we set a property crouchingHeight . This is the hei g ht of the hero when he is crouchin g . When the hero is on the level and he crouches and then stands, internally the code switches the hero.height property between and crouchingHeight . This allows the hero to fit into places when crouched that he couldn't when In line 14 we set minXmov . When the hero is moving at a speed less than this number, we set his speed to In the next line we set maxXmov . This is used as a speed cap—we don't let the hero move at an x speed than this number. In line 16 we set a property called groundWalkIncrement . This is the amount added to your x speed in frame in which you have the left or right arrow key pressed. Notice that the next line sets a property called airWalkIncrement , and its number is a little smaller than the value in groundWalkIncrement . We do this because you should have control over your character in the air, as in other popular platform games—but quite as great control as if you were on the ground. (In line 19 there is a walkIncrement property whose value gets changed from the groundWalkIncrement value to the airWalkIncrement value based on the location—ground or air—of the hero). In line 18 we set a property called pushSpeed . If there is a platform you can only move under by running, crouching, and sliding, then we need to make it so that you can't get stuck. So if you are under a platform you are crouched, then you slowly get pushed in a certain direction, based on a speed of pushSpeed . Next we set jumpSpeed . This is the initial speed at which you move upward on the screen when you jump. Finally, we swap the hero movie clip to a very high depth. At this new depth, the hero will always be above everything else. Miscellaneous Property Definitions of the Game Object These are the rest of the properties on the game object. Except for lines 6–11, this ActionScript should be understood with no further explanation. 1 1 1 1 game.level = 1; 2 2 2 2 game.numLevels = 5; 3 3 3 3 game.runDecay = .85; 4 4 4 4 game.depth = 10000; 5 5 5 5 game.floor = 330; 6 6 6 6 game.viewableHeight = 350; 7 7 7 7 game.viewableWidth = 680; 8 8 8 8 game.walkAbleWidth = 4800; 9 9 9 9 game.walkAbleHeight = 4000; 10 10 10 10 game.xScrollFactor = (game.bg.width-game.viewableWidth)/ game.walkAbleWidth; 11 11 11 11 game.yScrollFactor = game.bg.height/game.walkAbleHeight; 12 12 12 12 game.gravity = 2; 13 13 13 13 game.windResistance = .92; 14 14 14 14 game.numLives = 3; Let's look at lines 6–11. The goal in these lines is to determine how much the background needs to be when the hero moves. We do this by storing the dimensions of what we can see and the dimensions of what can't see. In lines 6 and 7 we store the viewable dimensions of the level. This tells us that at any given time can see 680 pixels across and 350 pixels up and down. The next two lines define how far (at a maximum) we will allow the hero to walk both horizontally and vertically. These numbers are arbitrary; you can pick any y ou want. The idea is, thou g h, that if the character were to walk from one side of the defined area all the wa y to the other side, then the background image will have scrolled one full scroll … so I'd recommend usin g lar g e numbers as I did here. The large number will make it so that the background won't scroll too fast and will appear to be moving fairly naturally or realistically. If you think the background is still scrolling too fast, then make these numbers even larger. In lines 10 and 11 we determine the scrolling factors based on a ratio of background-image dimensions to the walkable areas. levelLoaded() The ActionScri p t used in this function deals almost entirel y with p arsin g throu g h the XML, which is be y ond the scope of this book. For information on XML parsing, please see Appendix D, "XML Basics in Flash." But here, should at least go over the big picture of what this function does. Once the level XML file is loaded, this is executed. It parses through the XML and creates a few objects and some arrays, and then adds the clips to the level. Here are the objects and arrays it creates: game.flag game.flaggame.flag game.flag — This object is used to store the x and y positions as well as a movie-clip reference of the flag. game.platforms.column game.platforms.columngame.platforms.column game.platforms.column — This array stores an object for each platform that contains information about platform, including the x and y positions, type of platform, width and height of the platform, and a reference the movie clip. game.baddies game.baddiesgame.baddies game.baddies — This array contains an object for each enemy. It contains the enemy's position as well as a reference to the enemy's movie clip. game.collectables game.collectablesgame.collectables game.collectables — This array contains an object for each collectable item; the object stores the x and y positions of the item and a reference to its movie clip. game.grounds game.groundsgame.grounds game.grounds — This array stores objects representing the areas of the ground that are walkable (meaning that they are not gaps in the floor). The onEnterFrame Event As with most games, in Ice World we have an onEnterFrame event that is set up to repeatedly call a series functions. Here it is: 1 1 1 1 this.onEnterFrame = function() { 2 2 2 2 if (game.inPlay) { 3 3 3 3 if (!hero.dead) { 4 4 4 4 listenForKeys(); 5 5 5 5 } 6 6 6 6 addFrictionAndGravity(); 7 7 7 7 createTempPosition(); 8 8 8 8 if (!hero.dead) { 9 9 9 9 baddyDetection(); 10 10 10 10 platformDetect(); 11 11 11 11 collectableDetect(); 12 12 12 12 detectFlag(); 13 13 13 13 checkFloor(); 14 14 14 14 } 15 15 15 15 renderScreen(); 16 16 16 16 } 17 17 17 17 }; There is an if statement that contains all of the function calls. It executes the actions within the if if game.inPlay is true . The inPlay property of the game object is set to true when the startLevel() function is called. There is a property on the hero object called dead . When the hero dies, dead is set to true ; otherwise it is false . Line 4, listenForKeys() , is executed if hero.dead is not true . The listenForKeys() function checks to see if any of the arrow keys or the spacebar is currently pressed. If one of those keys is pressed, hero's movement is affected. Lines 6 and 7 decrease the horizontal movement due to friction (either air or ground friction) and increase the hero's y velocity by the gravitational amount. In line 8 we check (again) to see if the hero is dead. If he's not, then we execute lines 9–13. In line 9 we for collisions between the hero and the enemies. In line 10 we execute platformDetect() , which checks collisions between the hero and the platforms. We then check for collisions between the hero and the collectable objects by executing collectableDetect() in line 11. In line 12 we check to see if the hero reached the flag, and in line 13 we check to see if the hero has fallen far enough to stand on the floor. listenForKeys() This function is called in every frame by the onEnterFrame event. It checks to see if the directional arrow or the spacebar is pressed. If any of those hero-control keys are pressed, then the hero's current state may change (for example, walking changes to a jump). If you think about it from a programming point of view, can see that controlling the hero and making him look as real as possible can get a little confusing. Here some rules and behaviors for Ice World. z The hero can onl y j um p if he is currentl y on the g round or on a p latform. ( In some g ames the hero can jump in mid-air, but not in this game.) z The hero can jump when crouching, but cannot walk when crouching. z While in the air (crouching or not), the hero can be controlled to move left or right. z The controllability of the hero is less sensitive while in the air. That means that if the hero jumps, the game player can control the hero's direction, but not as easily as if the character were on the ground. When you can look at a bulleted list of rules, as above, then the functionality doesn't seem as confusing to code. Still, there are a few things that can be tricky to control. For instance, when you press the down arrow button, the hero should crouch. But what if the hero ran, then crouched and slid underneath a platform, and then you released the down arrow button? The hero would then stand up if you (as the programmer) did not foresee this situation. What happens in this situation (in this game and in other similar games) is that the stays crouched but is slowly pushed (by code) to one side of the platform or the other. When the hero the edge, he is automatically un-crouched. You will see more about this in the platformDetect() function. Here is the listenForKeys() function: 1 1 1 1 function listenForKeys() { 2 2 2 2 hero.wasCrouching = hero.isCrouching; 3 3 3 3 if (hero.inAir) { 4 4 4 4 hero.walkIncrement = hero.airWalkIncrement; 5 5 5 5 } else { 6 6 6 6 hero.walkIncrement = hero.groundWalkIncrement; 7 7 7 7 } 8 8 8 8 if (Key.isDown(Key.RIGHT) && (!hero.isCrouching || (hero.isCrouching && hero.inAir))) { [...]... this is a two-player game) that you are Player 2 In this case, myTurn is set to false, myLetter is set to "o", and hisLetter is set to "x" Here is the startGame() function: 1 2 3 4 5 6 7 8 9 10 function startGame() { moves = 0; gameInPlay = true; popup.gotoAndStop( "Game Started"); if (myTurn) { popup.msg.text = "The game has begun It is your turn."; } else { popup.msg.text = "The game has begun It is... Math.cos(diagAng*Math.PI/ 180 ); var sinAng = Math.sin(diagAng*Math.PI/ 180 ); //left triangle, inner wall var x = startx+20; var y = starty+height-heightFromBottom-55; l = createLine(x, y, diagAng, diagLength, 2, left_triangle, "laser"); var sx = l.x2; var sy = l.y2; 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72... straight line the game When the game has been won, a pop-up box displays a little message telling the players if they won or lost the game If the board is filled and no one has won, then the game ends in a tie In this event, pop-up window tells both players that the game has no winner Either player can restart the game by the Restart button at the bottom-right part of the screen When a game is restarted,... labeled Game Started, is displayed when a game first starts; it informs the player that the game is under way and whose turn it is The next keyframe is labeled Game Over When game has finished, this frame is displayed It can display any of three messages: "You won!," "You lost!," "Game over There is no winner." The final keyframe is labeled Player Left This frame appears when your opponent leaves the game. .. makes the hero react accordingly Here it is: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 function platformDetect() { var oldOnPlatform = hero.onPlatform; var onPlatform = false; for (var i = 0; i . 8 8 8 8 game. walkAbleWidth = 480 0; 9 9 9 9 game. walkAbleHeight = 4000; 10 10 10 10 game. xScrollFactor = (game. bg.width -game. viewableWidth)/ game. walkAbleWidth; 11 11 11 11 game. yScrollFactor. 2 game. numLevels = 5; 3 3 3 3 game. runDecay = .85 ; 4 4 4 4 game. depth = 10000; 5 5 5 5 game. floor = 330; 6 6 6 6 game. viewableHeight = 350; 7 7 7 7 game. viewableWidth = 680 ; 8. 1 1 game. bg = {}; 2 2 2 2 game. bg.clip = gameClip.bg; 3 3 3 3 game. bg.x = 0; 4 4 4 4 game. bg.y = 0; 5 5 5 5 game. bg.height = game. bg.clip._height; 6 6 6 6 game. bg.width = game. bg.clip._width;