The next concept we are going to learn is the Billboards concept in video games. In a video game, a Billboard is a plane which is always facing the camera. What does that mean? A Billboard is a plane which, as it is facing a camera, gives a 3D sensation by rotating the camera around the plane. OK. To implement this, we need on one side the Billboard's position, the Billboard's size and the camera's rotation. That is, where is the camera looking at. If we have an X,Z coordinates system, that is, a top view, and we have our camera's position, which is looking at this direction. Also we have a Billboard in this position, which will be P. We will take Vector Right from the camera and we will calculate the position of the vertexes in our plane based on this Right Vector. So that here we will have the two vertexes of each side of the plane. This is the vector, as we said, the camera's vector right. If we look at it from an XY plane, our camera's position will be this one, and our plane our Billboard will be defined as value, position P. This will be camera's vector right. And this will be the camera's A vector. And our vertex's position, of the plane on the billboard, will be the one you can see now. These will be the 4 vertexes which define our billboard. If we turn our camera, this one will be vector right. And the billboard will get aligned with the camera. That is, this one will be the new plane, as it is aligned by the camera, so we can always see the plane facing the camera. What does this mean? That, while we rotate, it makes a 3D effect rotating the plane on its P spot, so that it gives it a 3D effect. Well, we use this to make particle effects as well as other effects inside a game, but basically particles. They would be the typical case. To implement a Billboard inside our engine, we've created 3 classes. Billboard classes, billboard animation and billboard manager. Let's go to the classes to understand how it works. We go back to the code and we have the Billboard manager class in our game we will have 2 system types, 2 particle types, or 2 kinds of billboards, ones will be the fire-type billboards, which we will have on the scene, and the others will be Impact Rocket type. Impact Rocket is a vector of a line, in this case, of animated billboards which comes animated. The billboard, which we will have inside the scene it is representing when we shoot a cannon or one of the cannon guns inside our game. Then we have an Alpha blend state, to paint the particles. As they have semi transparency we need an Alpha blend state from DirectX11. Then, as always, we will read an XML file which will allow us to externally integrate the billboards in our game. We will go to the jpg code to see how it works, on one side we have the builder of the class which initializes our class' member variables, then we have the debuilder which deletes each of the member variables, the fires and the many Impact Rockets which we've created on the dynamic memory class. Then we have the Init menu which receives the device and a file name. The file number is basically the XML we are going to use. And we use the device to load the textures we are going to use in the different billboard systems we are using. So on one side we have the explosion particles and the fire explosions. In explosion we have 8 textures and in fire we have 8 textures as well. And we add it to the textures vector from rocket in impact rocket and file. We initialize the device for each of the games. And we do the same for each of the impact rocket and we give it the Alpha blend. Alpha blend simply allows us, as I said before, to paint with semi-transparency. That is, it adds an object or a whole of colors which are organized inside a texture when we paint in our plane our billboard so that it is painted over what it has behind. And what it does is an operation, in this case an addition, in line 84, so we create Alphablendstate. And we will have the initialization part ready. As always we will go to Update method, which will go through all the fires we have in our scenario and tell each one to update giving it the camera controller. We use the camera controller to get the camera's vector up and vector right, as we said before when we explained the billboard concept. And for the impact rocket, what we do is, if it isn't over, that is, if this billboard animation has a disposition time, which means that when the animation is over it isn't going to be replayed anymore, what it will do is updating this impact rocket with the render method, what we skipped before, which establishes AlphaBlend, so we have created the AlphaBlend state, and it calls all the fires and paints them. Then it calls all the active impact rockets, the ones which aren't over yet, and paints each of them giving them the textures we use for each particles system. And finally we deactivate off the Alphablendstate, activating the URL. We have a method SetNewImpactRocket, which will establish a new impact rocket inside a determined position. So what it will do is establishing the impact rocket's position and establishing the next impact rocket for the next one which will come as new rocket, that is, we have created certain amount of impact rockets on the screen which can be represented in it, during no more than a frame, and what we do is recycling it, which means, first we use 0, then 1, then 2. And thus until you get to the last one. When we get to the last one we use 0 again. It's a way of not having to create objects dynamically. This kind of vectors is very usual. And then we have startElement, which will have an XML file to the folder where the XML files are, executable, data XML and files. We have an XML file where it defines 3 fire billboards to us. The XYZ position, the size and the frame start. FrameStart is simply to avoid all the billboards starting in the same frame. It's a way to make it random or define a value for it. So if we go to the XML file we see that when the start element comes, if we get the BillboardFire element we will get the properties, the attributes. That is, X multiplied by Y multiplied by Z, size, FrameStart. And we will create the billboard animation from the attributes we have read in the XML file. And here ends the billboard manager part. Let's go to the billboard class. The only thing billboard class contains is billboard's position. Vector right and vector up of the camera, and RenderableVertexs, will allow us to convert the buffer with the vertex buffer and paint this billboard on the screen. We are going to use the effect to paint on the billboard and the sizes 6X and 6Y on the billboard. We have different methods. On one side we have the builder which builds all the variables member of our billboard. Then we have the debuilder which deletes the RenderableVertexs that we have created in the Init method we see next. Init method will build this RenderableVertexs. The billboard format is the one you see on the screen. We have 4 positions on X,Y,Z. As it has no depth Z will be 0. And then we have to define our 4 vertexes based on these positions. Which is what we see on the screen. With its texture coordinates. You can see it here. Vertexes structure is defined by lines 35 to 41. And then we define the indexes. That is, the first triangle is transformed by vertexes 0, 2, 1, that is, a, c, b. And the second triangle will be formed by vertexes 2, 1 ,3. 2, 1, 3 is c, b, d. Then, with this, as we are painting stripified triangles, we can paint our system, our particle, our billboard. We load the billboard's effect. If we go to the effect code, in this case the hdcl has a billboard effect. If we open it we see we have a VertexShader and a PixelShader. In the Vertexshader we calculate from the position the vertex gives us based on the vector right and the vector up and the billboard's position. The formula is the one we see in line 33. We get the billboard's position in X,Y,Z and we add it the vector right of the camera and the total position and coordinate of X and the vertex we are getting by the axis ng size of the billboard. And we also add it the position of the axis and the vertex we are getting from the camera's vector up and the billboard's Y size. And with this what we will do is calculating the position of this vertex facing the camera. The last parameter is the 1 so that when we multiply it by the view matrix and the projection matrix is multiplied correctly as they are float 4. As we already have the coordinate in the matrix World coordinates, we multiply it by the view matrix and then by the projection matrix. Lines 34 and 35. We establish the positions of the textures coordinates. We go up and in the shader we simply reproduce the textures based on the urls they gave us. Here we have an extra code, which is the color. We can take it off. And then we can delete the commented code. So with this we have our billboard effect. the billboard.CBB. Billboard code. We basically need two methods. As we have always done, we have done the initialization part and now we are going to do the update part. The only thing we do in the update part is calculating the vector right and up of the camera and saving them in the member variables. Camera right vector and camera up vector. And finally in Render mode we set the world matrix to the identity, and we make sure there is the identity matrix. We set in the shader parameters the billboard's position, billboard's size lines 64 and 65, we establish the vector right and vector up of the camera 67 and 68. We establish the texture we are going to paint in the stage 0, in sampler 0, line 70, and we render our RenderableVertex. We had stripified triangles passing the device, the effects and the parameters. They need to get to the shader, and with this we render our billboard. Now we will get to the billboard animation class. It is based on a billboard but in this case what we are using is an animated billboard, which means each frame is going to use a different texture. In this case. We could do it with an Atlas but in this case we've decided to do it with a textures vector. So we have the billboard's billboard variable, the current texture's identifier, the number of textures we have, the animation's total time, the time per image, whether the animation has to loop, and the variable member 21 which tells us if the animation has ended. Then we have different methods we will explain next. In the builder we initialize how the member variables are made. In D we update the current time depending on the lapsus time. If the current time is bigger than the time per image, we go to the next image as long as we haven't ended yet. If we have to loop it we must have ended the animation, it is the element TRUE. Otherwise the element will stay False. And we update in case we have surpassed the time per image, we update the time to 0, to initialize the time of the current image. We also updated in line 19 the billboard depending on the camera controller. Init will update and initialize the billboard using the device and the render will paint the billboard we have depending on the textures vector giving it the currently corresponding texture. That is, we give the vector the current text element. This way, we will get an animated billboard.
