View and camera (viewport & camera) Translation

 

View and camera
(Viewport & camera)

 

Revision: nine days

 

Summary

Read the basic object creation (basic class creation), clock handling (clock), and fremes tutorials.
Hierarchy and animations ).

This tutorial shows how to use multi-view technology with multiple cameras. In this tutorial, four views will be created at the same time.

They are viewport1 in the upper left corner and viewport4 in the lower right corner. They share a single camera (camera1). To achieve this function, you only need to configure the camera attribute of the two views in the configuration file, is the same (that is, camera1 ). When we use the left and right buttons of the mouse to rotate the camera (camera1), left
Control or left shift key + direction key for camera scaling. The two associated viewport1 and viewport4 change accordingly.

The viewport2 in the upper-right corner is based on another camera (camrea2). The camera's cone is narrower than the first one, so the display ratio is twice the size. In the program of the tutorial, we cannot set this viewport through any operation.

The last viewport3 is based on camera3, and the configuration of camera3 is exactly the same as that of camera1.

NB: when the two views overlap, the created one is displayed on the top layer.

Finally, there is a fixed box and a world coordinate moving with the mouse in real time, that is to say, no matter how you set the camera, no matter how the mouse moves on that view, the soldier moves relative to the mouse position in the screen in the corresponding viewport.

Use random key characters in the configuration file '~ ', So that the color and size of the viewport and basic object can be randomly created.

NB: The camera stores its coordinates, scaling, and rotation in orxframe.
In the [[frame | frame] tutorial, we can see that they are part of the orxframe inheritance system. On the other hand, the object should be placed in the viewport associated with its camera.

Detailed description

Generally, we need to first load the configuration file, create the clock and register the callback update function, and finally create the main object information. For implementation details, please contact the previous tutorial.

Although we have created four sdks this time, there is nothing new, just the following four lines of code.

 

Pstviewport =
Orxviewport_createfromconfig ("viewport1 ");

Orxviewport_createfromconfig ("viewport2 ");

Orxviewport_createfromconfig ("viewport3 ");

Orxviewport_createfromconfig ("viewport4 ");

 

As you can see, we only use the reference of viewport1 for subsequent operations.

Let's jump directly to the update function code.

First, we can capture the coordinates of the mouse to set the positions of soldiers. We already have
Tutorial. We have done the same thing here, but it works perfectly in four views. When you move the mouse away from the viewport, the pointer to the world coordinates will be replaced by the orxnull value, so that the movement of soldiers will not be triggered.

Orxvector VPOs;

 

If (orxrender_getworldposition (orxmouse_getposition (& VPOs ),
& VPOs )! = Orxnull)

{

Orxvector vsoldierpos;

 

Orxobject_getworldposition (pstsoldier,
& Vsoldierpos );

VPOs. FZ = vsoldierpos. FZ;

 

Orxobject_setposition (pstsoldier, & VPOs );

}

Before you operate the viewport, follow

The camera associated with the lower-view can be moved, rotated, and scaled. The following code retrieves a camera:

Pstcamera =
Orxviewport_getcamera (pstviewport );

Very simple. Let's implement rotation. (Only some code is available in other directions, but the logic is the same )).

If (orxinput_isactive ("camerarotateleft "))

{

Orxcamera_setrotation (pstcamera,
Orxcamera_getrotation (pstcamera) + orx2f (-4.0f) * _ pstclockinfo-> FDT );

}

Again, we can see that the rotation angle time does not depend on FPS and can be scaled to control the time.

Now let's take a look at the data configuration of the view. Such as slow motion) because the clock's DT is used.

We can see again that the rotation angle time does not depend on FPS but on the clock DT. We can also set the rotation speed by setting the system configuration option, instead of using hard encoding.

The scaling is as follows:

If (orxinput_isactive ("camerazoomin "))

{

Orxcamera_setzoom (pstcamera,
Orxcamera_getzoom (pstcamera) * orx2f (1.02f ));

}

 

Because this code does not use the clock information, it will be affected by the clock frequency and frame rate.

Finally, let's move the camera.

Orxcamera_getposition (pstcamera,
& VPOs );

 

If (orxinput_isactive ("cameraright "))

{

VPOs. FX + = orx2f (500) * _ pstclockinfo-> FDT;

}

 

Orxcamera_setposition (pstcamera,
& VPOs );

Okay. Come here first.

In the following configuration, we will see that the same camera is connected to two different sdks. The operation camera will affect both the views at the same time.

You can directly modify the position and size of the view, as shown below:

Orxfloat fwidth,
Fheight, FX, FY;

 

Orxviewport_getrelativesize (pstviewport,
& Fwidth, & fheight );

 

If (orxinput_isactive ("viewportscaleup "))

{

Fwidth * = orx2f (1.02f );

Fheight * = orx2f (1.02f );

}

 

Orxviewport_setrelativesize (pstviewport,
Fwidth, fheight );

 

Orxviewport_getposition (pstviewport,
& FX, & FY );

 

If (orxinput_isactive ("viewportright "))

{

FX + = orx2f (500) * _ pstclockinfo-> FDT;

}

 

Orxviewport_setposition (pstviewport,
FX, FY );

 

Above
As shown in, there is nothing surprising and very simple.

Let's take a look at the configuration of viewport.

 

[Viewport1]

Camera = camera1

Relativesize = (0.5, 0.5, 0.0)

Relativeposition = top left

Backgroundcolor = (0,100, 0 )~ (0,255, 0)

 

[Viewport2]

Camera = camera2

Relativesize = @ viewport1

Relativeposition = Top right

Backgroundcolor = (100, 0, 0 )~ (255, 0, 0)

 

[Viewport3]

Camera = camera3

Relativesize =
@ Viewport1

Relativeposition = bottom left

Backgroundcolor = (0, 0,100 )~ (0, 0,255)

 

[Viewport4]

Camera = @ viewport1

Relativesize = @ viewport1

Relativeposition = bottom right

Backgroundcolor = (255,255, 0) # (0,255,255) # (255, 0,255)

 

A total of three cameras are associated with four sdks. camera1 is associated with viewport1 and viewport4.

We noticed that the relativesize in the configuration file of viewport1 is set to (0.5, 0.5, 0). It indicates that half of the display size is used on the X axis and Y axis respectively (the Z axis is ignored ). That is to say, the content of the part actually displayed in any view is adjustable, which can be full screen or non-full screen.

Next, we noticed that the relativesize attribute of other sdks is set to @ viewport1. It means that the relativesize attribute inherits the relativesize attribute of viewport1, that is, their relativesize attribute is the same as the relativesize attribute of viewport1. We can also see that the camera attribute of viewport4 is set to @ viewport1, indicating that it inherits from the camera of viewport1.

To avoid overlapping and covering the screen, we can set the relativeposition attribute to a constant character or use a vector to set their proper positions.

The first three views use random red as the background color. The settings are as follows:

Backgroundcolor =
(200, 0, 0 )~ (255, 0, 0)

If you want to set an accurate random color, you can set it in the form of a list. The random colors are yellow, blue, and pink, respectively. The settings are as follows:

Backgroundcolor =
(255,255, 0) # (0,255,255) # (255, 0,255)

This method is equivalent to random in three colors (yellow, blue-green, and magenta.

Finally, let's focus on camera settings.

[Camera1]

Frustumwidth = @ display. screenwidth

Frustumheight =
@ Display. screenheight

Frustumfar= 1.0

Frustumnear= 0.0

Position = (0.0, 0.0,-1.0)

 

[Camera2]

Frustumwidth = 400.0

Frustumheight =
300.0

Frustumfar= 1.0

Frustumnear= 0.0

Position = (0.0, 0.0,-1.0)

 

[Camera3 @ camera1]

The basic property frustum (cone), a part of the world space taken by the camera, will be mapped to the display of the view.

NB: a rectangular shape is used as the cone of a 2D camera.

We can find that camera3 fully inherits from camera1 and does not overwrite any attributes of camera1.

NB: Using fully inherited attributes can be written:[Mysection @ parentsection].

Why are two different cameras used? Only because there can be two different physical entities (physical
Entities): we modified the attributes of camera1 in the code, and camara3 will remain unchanged.

We noticed that the frustumwidth and frustumheight attributes of camera1 inherit from the display screen settings.

NB: When an attribute is inherited, it can be written as mykey.
= @ Parentsection. parentkey. When the two keys are the same, the parent key can be omitted, for example, samekey = @ parentsection.

Finally, we noticed that camera2 has a small cone.

That is to say, camera2 can only see a small part of the world space. Therefore, the view seems to have a magnified effect.

 

Resources

Source code: 05_viewport.c

Configuration File: 05_viewport.ini

 

1) Very
Useful for making HUD & UI, for example

Useful in HUD and UI

2) There are only part of the code in other directions, but the logic is the same.

3) composed
Of keywords top, bottom, center, right and left

By keyword
Top, bottom, center, right, and left

4) '~ '
Character is used as a random operator between two numeric values

'~ 'Character is used between two numbers as a random operator