This project is read-only.

Spanish Version

Making of Blue Dragon

Introduction

The reason for writing this tutorial, is that someone asked in XNACommunity's forum how to make something similar to the fights that take place in BlueDragon. In these fights, you can see the fighters and a small screen on the left side that focuses on one of the fighters. Here you can see what I mean:

BlueDragon.jpg

Let's start

What we are going to do is to create two renders of the scene. One will focus on one of the fighter's position, and the other will have a more globar point of view. For this we will need two cameras and two surfaces. First, let's work on the surfaces.

We're going to draw the zoom camera's image onto the renderTarget, which will be focusing on one of the fighters. Let's create a RenderTarget attribute:

RenderTarget2D RT;


Now let's initialize the renderTarget, with a size of 512 pixels.

protected override void Initialize()
{
 base.Initialize();

 RT = new RenderTarget2D(GraphicsDevice, 512, 512, 1, SurfaceFormat.Color);
}


For the other surface, we are going to use the target buffer, so we don't need anything else.
Now we have to create two cameras, one for each point of view. What we'll do is create a Camera class in a new file camera.cs. This is a very simple class, that contains commonly used attributes. For more information, look at the source code of the example. Here we will focus on the constructor so that we can become familiar with its parameters:

public Camera(Vector3 position, Vector3 lookat, float nearPlane, float farPlane, float aspectRatio, float fieldOfView)


Now we can create the two cameras needed for the example, and we can initialize them with the right parameters:

Camera camera;
Camera cameraZoom;

protected override void Initialize()
{
    base.Initialize();

    RT = new RenderTarget2D(GraphicsDevice, 512, 512, 1, SurfaceFormat.Color);

    camera = new Camera(new Vector3(0, 20, 50), Vector3.Zero, 1, 10000,
        GraphicsDevice.Viewport.Width / GraphicsDevice.Viewport.Height, MathHelper.PiOver4);
    cameraZoom = new Camera(new Vector3(0, 10, 1), new Vector3(5, 10, 0), 1, 10000, 1, MathHelper.PiOver4);
}


Next step will be to use the normal camera to render the scene:

protected override void Draw(GameTime gameTime)
{
    RenderScene();

    base.Draw(gameTime);
}

private void RenderScene()
{
    GraphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.CornflowerBlue, 1, 0);

    DrawTerrain(camera);

    DrawMD3();

    DrawText();
}


What we have achieved so far is:

Image1.jpg

Next we are going to render the scene from the camerazoom's point of view onto the renderTarget. For this we are going to create a new method called DrawCameraZoom:

protected override void Draw(GameTime gameTime)
{
    DrawCameraZoom();

    RenderScene();

    base.Draw(gameTime);
}

private void DrawCameraZoom()
{
    GraphicsDevice.SetRenderTarget(0, RT);

    GraphicsDevice.Clear(Color.CornflowerBlue);

    DrawTerrain(cameraZoom);

    models[0].render(GraphicsDevice,
                        getLocalWorld(new Vector3(40, 70, 0), new Vector3(-MathHelper.PiOver2, -MathHelper.PiOver2, 0), 0.1f),
                        cameraZoom.View,
                        cameraZoom.Projection); 

    GraphicsDevice.SetRenderTarget(0, null);
}

As you can see, first thing to do is to set the GraphicsDevice so that it will render onto our renderTarget. Afterwards, we clean the scene and we render it. We'll only draw one of the models, since only one of them will appear on the screen. We set the device again so that it will draw on the default target.

Now in RT.GetTexture() we have this image:

Image2.jpg

This is precisely what we will use to texturize the plane that we will see on the screen-like scene. Let's add a new DrawPlane() method to RenderScene():

private void RenderScene()
{
    GraphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.CornflowerBlue, 1, 0);

    DrawPlane();

    DrawTerrain(camera);

    DrawMD3();

    DrawText();
}


In this method what we do is render the plane and apply renderTarget's texture using basicEffect:

private void DrawPlane()
        {
            foreach (ModelMesh mesh in plane.Meshes)
            {
                foreach (BasicEffect effect in mesh.Effects)
                {
                    effect.EnableDefaultLighting();
                    effect.Texture = RT.GetTexture();
                    effect.TextureEnabled = true;
                    effect.World = getLocalWorld(new Vector3(-100, 140, 50), new Vector3(MathHelper.PiOver2, MathHelper.Pi / 2.5f, 0), 0.12f);
                    effect.View = camera.View;
                    effect.Projection = camera.Projection;
                }
                mesh.Draw();
            }
        }

Finally, we have completed the scene:

Image3.jpg

In BlueDragon, this screen appears and disappears during the fights, so the next step could be to do this.
I hope that this tutorial was useful, and the example code also.

Example

You can download it in the spanish version**
Spanish Version


Traslated by Juliet R. Moreiro Bockhop

Created by Javier Cantón Ferrero.
MVP XNA-DirectX 2007/2009
MSP 2006/2008
Date 19/08/2008
Web www.codeplex.com/XNACommunity
Email javiuniversidad@gmail.com
blog: mirageproject.blogspot.com

Last edited Aug 19, 2008 at 11:22 PM by khronos, version 7

Comments

No comments yet.