User Tools

Site Tools


en:tutorials:viewport_heads_up_display

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

en:tutorials:viewport_heads_up_display [2017/09/19 03:39 (3 years ago)]
sausage created
en:tutorials:viewport_heads_up_display [2018/02/14 08:46 (2 years ago)]
Line 1: Line 1:
-====== Creating a Heads Up Display (HUD) using a Viewport / Camera and Groups ====== 
- 
-Making a Heads Up Display for tracking objects on the screen can be created very easily with a second Viewport/​Camera and by attaching a child object that renders to a particular Group. 
- 
-That's a mouthful but it's pretty simple to get it going. 
- 
-Below are some assets: an alien, and a tracking icon: 
- 
-{{ :​tutorials:​ship.png |}}{{ :​tutorials:​icon.png |}} 
- 
-Start by setting up the default viewport and camera, and screen size: 
- 
-<code ini> 
-[Viewport] 
-Camera ​       = Camera 
- 
-[Camera] 
-FrustumWidth ​ = 1024 
-FrustumHeight = 768 
-FrustumFar ​   = 2.0 
-FrustumNear ​  = 0.0 
-Position ​     = (0.0, 0.0, -1.0) 
-</​code>​ 
- 
-Next, create a basic alien: 
- 
-<code ini> 
-[Alien] 
-Graphic = AlienGraphic 
-Position = (-300, -200, 0) ~ (300, 200, 0) 
-Rotation = 0 ~ 360 
- 
-[AlienGraphic] 
-Texture = ship.png 
-Pivot = (200, 0, 0) 
-Smoothing = true 
-</​code>​ 
- 
-The alien will be positioned somewhere random. Its inital rotation will be random too. The Pivot on the AlienGraphic is offset 200 pixels as a cheap way of making the alien appear to fly around in circles. We'll use a Rotate FX for that: 
- 
-<code ini> 
-[RotateFX] 
-SlotList = RotateFXSlot 
-Loop = true 
- 
-[RotateFXSlot] 
-Type = rotation 
-StartTime = 0 
-EndTime = 10 
-Curve = linear 
-StartValue = 0 
-EndValue = 360 
-</​code>​ 
- 
-Then add it to the alien: 
- 
-<code ini> 
-[Alien] 
-Graphic = AlienGraphic 
-Position = (-300, -200, 0) ~ (300, 200, 0) 
-Rotation = 0 ~ 360 
-FXList = RotateFX 
-</​code>​ 
- 
-Create the standard viewport and a few aliens in the init() function with: 
- 
-<code c> 
-  orxViewport_CreateFromConfig("​Viewport"​);​ 
- 
-  /* Create a few aliens */ 
-  for (int x = 0; x < 5; x++) { 
-   orxObject_CreateFromConfig("​Alien"​);​ 
-  } 
-</​code>​ 
- 
-Compile and run. There should be 5 aliens flying around in circles (though really turning on a offcentre pivot). 
- 
-Now we're going to create a second viewport that will only be 200 x 200 pixels in size and will sit to the bottom right of the screen: 
- 
-<code ini> 
-[HudViewport] 
-Camera ​           = HudCamera 
-BackgroundColor = (100,​100,​100) 
-Size = (200,200,0) 
-RelativePosition = bottom right 
- 
-[HudCamera] 
-FrustumWidth ​ = 200 
-FrustumHeight = 200 
-FrustumFar ​   = 2.0 
-FrustumNear ​   = 0.0 
-Position ​     = (0.0, 0.0, -1.0) 
-</​code>​ 
- 
-This defines a 200 x 200 sized grey viewport and camera. 
- 
-Create it in the init() function under the existing viewport: 
- 
-<code c> 
-  orxViewport_CreateFromConfig("​Viewport"​);​ 
-  orxViewport_CreateFromConfig("​HudViewport"​);​ 
-</​code>​ 
-  ​ 
-Compile and run. 
- 
-Notice that the aliens fly through both viewports. Both display the same content, the only difference is that the new viewport is a different colour and is smaller. 
- 
-What we really want, is the aliens to render in the normal viewport and a "​tracking icon" to display in the small HUD viewport. 
- 
-The way to achieve this is to first create an icon object, and attach it as a child to the alien: 
- 
-<code ini> 
-[Icon] 
-Graphic = IconGraphic 
- 
-[IconGraphic] 
-Texture = icon.png 
-Pivot = (200, 0, 0) 
- 
-[Alien] 
-Graphic = AlienGraphic 
-Position = (-300, -200, 0) ~ (300, 200, 0) 
-Rotation = 0 ~ 360 
-FXList = RotateFX 
-ChildList = Icon 
-</​code>​ 
- 
-This will give an offset pivot on the icon, just like the alien, so that they rotate in the same place. Then becomes a child of the alien. 
- 
-Run this and you'll see the same as before, but each alien has a red icon attached to it. Both the alien and the icon still display in both viewports. 
- 
-Next we make it that only the alien renders to the normal viewport and the icon to the HUD viewport by setting groups: 
- 
-On the standard camera, declare that it displays anything in the AlienGroup, or anything in the default group: 
- 
-<code ini> 
-[Camera] 
-FrustumWidth ​ = 1024 
-FrustumHeight = 768 
-FrustumFar ​   = 2.0 
-FrustumNear ​  = 0.0 
-Position ​     = (0.0, 0.0, -1.0) 
-GroupList ​    = AlienGroup # default ​ 
-</​code>​ 
- 
-In the HudCamera, only allow display of objects in the HudGroup: 
- 
-<code ini> 
-[HudCamera] 
-FrustumWidth ​ = 200 
-FrustumHeight = 200 
-FrustumFar ​   = 2.0 
-FrustumNear ​  = 0.0  
-Position ​     = (0.0, 0.0, -1.0) 
-GroupList ​    = HudGroup ​ 
-</​code>​ 
- 
-Then set the two objects to display in their respective groups: 
- 
-<code ini> 
-[Alien] 
-Graphic ​  = AlienGraphic 
-Position ​ = (-300, -200, 0) ~ (300, 200, 0) 
-Rotation ​ = 0 ~ 360 
-FXList ​   = RotateFX 
-ChildList = Icon 
-Group     = AlienGroup 
- 
-[Icon] 
-Graphic = IconGraphic 
-Group   = HudGroup 
-</​code>​ 
- 
-Run this and finally you can see each object rendering only in the correct viewport. But the HUD viewport is still very large. The simple solution is to zoom the HudCamera out: 
- 
-<code ini> 
-[HudCamera] 
-FrustumWidth ​ = 200 
-FrustumHeight = 200 
-FrustumFar ​   = 2.0 
-FrustumNear ​  = 0.0  
-Position ​     = (0.0, 0.0, -1.0) 
-GroupList ​    = HudGroup ​ 
-Zoom       = 0.2 
-</​code>​ 
- 
-Run that and you will get a really nice HUD that tracks the movement of the aliens, represented in the HUD as a small red dot icon. 
- 
  
en/tutorials/viewport_heads_up_display.txt ยท Last modified: 2018/02/14 08:46 (2 years ago) (external edit)