| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| public:t-vien-08-1:lab_6_materials [2008/02/14 03:19] – hannes | public:t-vien-08-1:lab_6_materials [2024/04/29 13:33] (current) – external edit 127.0.0.1 |
|---|
| ====== Lab 6 - Avatars and HUD ====== | ====== Lab 6 - Avatars and HUD ====== |
| |
| <note warning>Under construction, please wait</note> | |
| |
| ==== Before You Start ==== | ==== Before You Start ==== |
| |
| ==== Roaming Ralph with a HUD ==== | ==== Roaming Ralph with a HUD ==== |
| | |
| | {{public:t-vien-08-1:ve-lab6-screenshot.png|}} |
| |
| In this exercise you'll start with a fully working 3rd person world with Ralph as your avatar. You'll then add a couple of classic HUD features, namely the **health bar** and the **overhead map**. | In this exercise you'll start with a fully working 3rd person world with Ralph as your avatar. You'll then add a couple of classic HUD features, namely the **health bar** and the **overhead map**. |
| - The healthbar calls a little too much attention to itself on the display. Make it semi-transparent so that it blends in better. Don't forget to enable transparency in the scene graph (HINT: setTransparency). | - The healthbar calls a little too much attention to itself on the display. Make it semi-transparent so that it blends in better. Don't forget to enable transparency in the scene graph (HINT: setTransparency). |
| - **Displaying Dynamic Health:**\\ Now make the healthbar start decreasing **while** the Avatar is running and then gain full health when the Avatar stops running. HINT: For any FSM class, you can query the **state** member variable to see what state it is in. | - **Displaying Dynamic Health:**\\ Now make the healthbar start decreasing **while** the Avatar is running and then gain full health when the Avatar stops running. HINT: For any FSM class, you can query the **state** member variable to see what state it is in. |
| - **Adding a HUD Panel:**\\ So far you have been adding visual information to the 3D scene, but let's create a simple HUD (Heads-Up-Display) panel that stays in front of the 3D scene, no matter where you are looking. For this construction, start filling in the **setupHUD()** method in **World**. You will actually just create a single HUD panel that will contain two elements: (1) A button that makes the panel slide up and down, and (2) an overhead map that works like a GPS. First, get the panel showing and the panel sliding button working. Create a new node under "aspect2d" that you can call **panel**. You attach everything to this node that you want sliding with it.\\ | - **Adding a Sliding HUD Panel:**\\ So far you have been adding visual information to the 3D scene, but let's create a simple HUD (Heads-Up-Display) panel that stays in front of the 3D scene, no matter where you are looking. For this construction, start filling in the **setupHUD()** method in **World**. You will actually just create a single HUD panel that will contain two elements: (1) A button that makes the panel slide up and down, and (2) an overhead map that works like a GPS. First, get the panel showing and the panel sliding button working. Create a new node under "aspect2d" that you can call **panel**. You attach everything to this node that you want sliding with it.\\ |
| - Attach the panel background image to the panel node. You can create the panel image as a node in a tree with a single call to **[[http://panda3d.org/wiki/index.php/OnscreenImage|OnScreenImage]]** - you set its parent with the **parent** attribute (otherwise the parent defaults to aspect2d). Create the panel image with the texture called **panel.tif** and scale it to **(0.36,1,0.40)**. Within the World **redraw** method, set the position of this panel to **(-base.getAspectRatio()+0.36,0,-0.60)**. | - Attach the panel background image to the panel node. You can create the panel image as a node in a tree with a single call to **[[http://panda3d.org/wiki/index.php/OnscreenImage|OnScreenImage]]** - you set its parent with the **parent** attribute (otherwise the parent defaults to aspect2d). Create the panel image with the texture called **panel.tif** and scale it to **(0.36,1,0.40)**. Within the World **redraw** method, set the position of this panel to **(-base.getAspectRatio()+0.36,0,-0.60)**. |
| - Attach the panel button to the panel node. You can use the following button specification:<code python> | - Attach the panel button to the panel node. You can use the following button specification:<code python> |
| rolloverSound = <your sound here>, | rolloverSound = <your sound here>, |
| clickSound = <your sound here>, | clickSound = <your sound here>, |
| parent=<parent node here>)</code> You can use the sounds from this week's gui demo or simply not specify new sounds to use the default Panda3D sounds. The function that the button calls, should be a function that toggles the HUD panel between fully visible and mostly hidden. There's already a **toggleHUD** method stub you could use. | parent=<parent node here>)</code> You can use the sounds from this week's gui demo or simply not specify new sounds to use the default Panda3D sounds. The function that the button calls, should be a function that toggles the HUD panel between fully visible and mostly hidden. There's already a **toggleHUD** method stub you could use. Remember that you have to set the button position in the **redraw** method. A good position of the button is **(-base.getAspectRatio()+0.535,0,-0.26)**. |
| - Set up a couple of intervals that will slide the panel in and out of view. You can make it slide down until all you can see is the button. Fill in the **toggleHUD** method to start the correct interval when the button is pressed. | - Set up a couple of intervals that will slide the panel in and out of view. You can make it slide down until all you can see is the button. Fill in the **toggleHUD** method to start the correct interval when the button is pressed. |
| - **Adding Overhead Map:**\\ The following code is an **OverheadMap** object that can be attached to a scene graph. Add this object to your panel and have it show you where your avatar is located any given moment. It is good for you to know that the world dimensions in the x-y plane are approximately **(-128,-68,48,48)**. You will need to scale and reposition your map until it fits the panel depression. Also, to enable transparency on the 2D scene graph, you'll need to call **setTransparency** again because it is a separate scene graph from **render**. Make sure this is all working fine.<code python> | - **Adding an Overhead Map:**\\ The following code is an **OverheadMap** object that can be attached to a scene graph. Add this object to your panel and have it show you where your avatar is located any given moment. It is good for you to know that the world dimensions in the x-y plane are approximately **(-128,-68,48,48)**. You will need to scale and reposition your map until it fits the panel depression. Also, to enable transparency on the 2D scene graph, you'll need to call **setTransparency** again because it is a separate scene graph from **render**. Make sure this is all working fine.<code python> |
| class OverheadMap(NodePath): | class OverheadMap(NodePath): |
| | |
| self.avatar.setColor(0,1,0,1) | self.avatar.setColor(0,1,0,1) |
| | |
| def addLandmarks(self, landmarks, color=P.Vec4(1,0,0,0.5)): | def addLandmarks(self, landmarks, color=Vec4(1,0,0,0.5)): |
| """ Take in a list of (x,y) touples in world coordinates and place them | """ Take in a list of (x,y) touples in world coordinates and place them |
| as little dots on the map in the given color """ | as little dots on the map in the given color """ |
| self.avatar.setPos((x-self.xoffset)*self.xscale,-0.01,(y-self.yoffset)*self.yscale) | self.avatar.setPos((x-self.xoffset)*self.xscale,-0.01,(y-self.yoffset)*self.yscale) |
| </code> | </code> |
| - **Populating Overhead Map:**\\ Now add some landmarks to your world and have them show up on your map as little red squares. You can use the **Models/box.egg** object. Initialize a few of these boxes by storing a list of (x,y) tuples and then iterate through the list to place them in the world. You should also be able to send the list directly into the map's **addLandmarks** method and have the locations of the boxes light up. You'll need to fill in the rest of that method. Test to see if this is all working. | - **Populating the Overhead Map:**\\ Now add some landmarks to your world and have them show up on your map as little red squares. You can use the **Models/box.egg** object. Initialize a few of these boxes by storing a list of (x,y) tuples and then iterate through the list to place them in the world. You should also be able to send the list directly into the map's **addLandmarks** method and have the locations of the boxes light up. You'll need to fill in the rest of that method. Test to see if this is all working. |
| - **Make it a Game:**\\ If you feel adventurous, change this application into a game where the health bar starts to drop as time passes and the only way to regain full health is to touch a box, which then disappears. You win the game if you reach all the boxes. By randomizing the initial box locations, you'll really need the map to help you play this game. | - **Make it a Game:**\\ If you feel adventurous, change this application into a game where the health bar starts to drop as time passes and the only way to regain full health is to touch a box, which then disappears. You win the game if you reach all the boxes. By randomizing the initial box locations, you'll really need the map to help you play this game. |
