Quazar3D: Master Tutorial
HomePreviousParentNext

Master Tutorial  »  03. Creating and adding the Viewer camera

03. Creating and adding the Viewer camera

test

Lesson 03

Complete lesson 02

This lesson will teach you how to create, add and modify a Viewer camera. It will teach you how to add and connect blocks and containers in Flowgraph.

  1. To create functionality in blocks you need to turn on the Flowgraph window. Press the Flowgraph , a new window will open.
  2. In this window you can drag the blocks from the Toolbox, Search windows. The window Elements displays the blocks that you are using in the currently opened Flowgraph window. The window Embedded containers lists all predefined containers that the user may include in the Flowgraph.
  3. In the Search window find the block called Init and drag in on the master_tutorial.fg window.
  4. Now we are going to create our first container. Containers are packed with other blocks that create some functionality. Containers are a good way for creating functionalities that are often used in the application. In this way you don't have to create such functionality many times, just copy the container and connect it in the desired place.
  5. To create a container Search for the Container block and drag it on the Flowgraph window.
  6. To name the Container double press on its current name and enter Spawn Player Actor.
  7. Now double press the area below the Container name, a new window will appear. All blocks that have the icon can be edited by double pressing on them. Also a tooltip appears when you place the mouse cursor over such a block.
  8. Press Create, input the name Spawn Player Actor, and press Save and then OK.
  9. A new tab will open in the Flowgraph window, next to the master_tutorial.fg. You can close this window by pressing , and open by double pressing the container below its name.
  10. Now we need to fill the container Spawn Player Actor with content. Open this container and add the first block SignalInput, open it and in Create new: input name Create, press OK. You have just changed the name of the block's output. Note that the container Spawn Player Actor has a new input called Create.
test
  1. Now add second block called DataInput. Open it and name it Spawn Point. In Type section enter Node [Data/Items/World], or select it from the list.
test
  1. Search for the next block Get Property. Add it to the Flowgraph window, open it and in Type enter Node [Data/Items/World], and in Property enter WorldPosition  [Vec3].
test
  1. Now we need to connect the blocks that we have created so far. Press on the triangle next to Create in the SignalInput block, connect the line by pressing on the triangle next to Get input of the DataInput block. The Output from the block DataInput connect to the Input of Get Property block.
test
  1. Now search and add block Node. Connect the Spawn Point and Node to the Node block. Add Vec3 block and connect it to the WorldPosition in Get Property block.
test
  1. Add block Get Property, connect the Succeeded of the previous Get Property with the Input of the new Get Property block. Open it and in Type enter Node [Data/Items/World], and in Property enter WorldRotation  [Quat].
test
  1. Connect the Node in Get Property with the block Node. Add block Quat and connect it to the WorldRotation in Get Property block.

The Quat block can be edited, by double pressing on the colored circle next to its name. Blocks with white circle cannot be edited.

 

test
  1. Add block Create PlayerActor and Player Actor. Connect the output Succeeded of the last Get Property block with the input Input of the Create PlayerActor block. Connect the Result of Create PlayerActor block with block PlayerActor.
test
  1. Now add two blocks Set Property.
    There are two types of Set Property blocks. For this tutorial we are going to use Set Property block found in Toolbox under Actions/Items/Set Property. To identify the block in the Search window mouse over the block and read the tooltip.
    Open the first one and in Type enter Game [Data/Items/Engine], in Property enter Player  [Player]. Open the second one and in Type enter PlayerActor [Data/Items/Players], in Property enter Position  [Vec3].
test
  1. Connect Output of the block Create PlayerActor with the Input of the first Set Property block. Connect Succeeded of the first block Set Property with the Input of the second block Set Property.
test
  1. Add block Game, connect it to the Game in the first Set Property block. Connect the PlayerActor block with the Player in first Set Property block and with PlayerActor in the second Set Property block. Connect the Vec3 block with the Position in second Set Property block.
lesson_03_sceen_11
  1. Add block called Set QuatByEulerAngles. Connect its Input with the Succeeded of the second Set Property block. Add three Real blocks and one Quat. Connect the first Real (set value 180) to Roll. Connect the second Real (set value -90) to Pitch. Connect the third Real (set value 0) to Yaw. Add block Quat and connect it to the Quat in Set QuatByEulerAngles.
test
  1. Add block Multiply Quat and connect its Input with the Output of Set QuatByEulerAngles block. The previous Quat block connect with input B. Add Quat block connect it to the Result in Myltiply Quat block. The A in Multiply Quat connect to the very first Quat block.
lesson_03_sceen_13
  1. Add block Set Property. Connect its Input with Output of the block Multiply Quat. Open it and in Type enter PlayerActor [Data/Items/Players], in Property enter Rotation  [Quat].
test
  1. Connect the last Quat block with the Rotation in Set Property block. Connect Player Actor in the Set Property block with the PlayerActor block, next to the Create PlayerActor block.
lesson_03_sceen_15
  1. Add DataOutput block. Open it and name it Created Player Actor. In Type section enter PlayerActor [Data/Items/Players], or select it from the list. Connect Set to the Succeeded of the previous Set Property block.
test
  1. Connect the Created Player Actor in DataOutput with the block PlayerActor.
lesson_03_sceen_17
  1. Add block SignalOutput, open it and name it Output. Connect this Output with Output of the block DataOutput.
test
  1. Go back to master_tutorial.fg window.
  2. Connect the Output of the Init block with Create of the Spawn Player Actor block. Add block PlayerActor and connect it to the Created Player Actor of the block Spawn Player Actor. Go to the Nodes window and create a NodeDummy by pressing Add a Node   and select Dummy Node . Change its name to camera_start_position, drag the node from the Nodes window and drop it on the Flowgraph window. Connect this block with Spawn Point of the Spawn Player Actor block. You can modify the position and rotation of this node, so the application starts from that position. In this tutorial the camera_start_position has following values: Position: (0,0209, 16,3486, 0,8968), Rotation: (0,0000, 0,0000, -72,3069).
test
  1. Now add four blocks Set Property. Open them and create following types and properties for each block:
test
  1. Connect the Output from Spawn Player Actor block with the Input of first Set Property block. Connect Output of the first Set Property block with the Input of second Set Property block. The same for the third Set Property block.
lesson_03_sceen_21
  1. Add four Real blocks. Name them and input values as shown on the screen. Connect the PlayerActor block with PlayerActor and Player in blocks Set Property.
lesson_03_sceen_22
  1. Add two Get Property blocks. Open them and input Type and Property as shown on the image.
test
  1. Connect them as shown on the image. Connect the PlayerActor block to the Player in first Get Property block. Add a block Controls and connect it to the Controls of both Get Property blocks. Add a block Array, change its name to States Array, open it and select ControlsAppState [Data/Items/Controls] and connect it to the States in Get Property.
lesson_03_sceen_24
  1. Add Get ElementArray block, open it and input ControlsAppState [Data/Items/Controls].
test
  1. Connect the Succeeded from the last Get Property block with Input of Get ElementArray block. Connect the States Array block with the Array in the Get ElementArray. Add a block Integer, open it and select CONTROLS_STATE_CROUCH. Connect this block to the Index in the Get ElementArray block. Add a ControlsAppState block, change its name to ControlsAppState - CROUCH and connect it to the Element in Get ElementArray.
test
  1. Now below the block formation that you have just created add a block Update. Add a block Get Property, open it and input following values: in Type - ControlsState [Data/Items/Controls], in Property - State  [Boolean].
test
  1. Connect the Output from the Update with Input of Get Property. Add a block If, connect its Input with Succeeded in the Get Property block. Add a block Boolean, open it and input False. Connect the Boolean block to State in the Get Property and to Condition in the If block.
test
  1. Add a Set Real block. Open it and create two types of input. First double press on the Input0 in Name column and change its name to Crouch_height, in column Value input 0.8 then press   to add the second input, name it Normal_height and in Value input 1.4.
test
  1. Connect the If block with the Set Real block in following manner: True with Crouch_height and False with Normal_height.
test
  1. Add a block Set Property, open it and in Type input PlayerActor [Data/Items/Players], and in Property input CollisionHeight  [Real].
test
  1. Connect the Input of Set Property block with the Output of Set Real block. Add a Real block, name it playerActor Height and connect it to the CollisionHeight of the Set Property block and Result of the Set Real block.
test
  1. Now connect the PlayerActor block with PlayerActor in Set Property block and ControlsState in Get Property block with ControlsAppState - CROUCH block.

Described connections are indicated in yellow.

lesson_03_sceen_33
  1. Now we have to create another container. Add a Container block to the master_tutorial.fg. Name it CameraModifier. This container is rather complex, so use the application Lesson 03 as point of reference as much as you can.
  2. First add Init, Create ControlsDummy and ControlsDummy blocks. Connect the Output of the Init block with the Input of the Create ControlsDummy. Connect Result of the Create ControlsDummy block with the ControlsDummy block.
test
  1. Add Get Property block, open it and input in Type: Controls [Data/Items/Controls], in Property: States  [Array].
test
  1. Connect the Output from the Create ControlsDummy to the Input of the Get Property block. Connect the Controls in the Get Property block with the Controls Dummy block. Add a block Array, name it States Array and connect it to the States in Get Property block.
test
  1. Add block Get ElementArray, open it and choose ControlsAppState [Data/Items/Controls].
test
  1. Connect the Succeeded from the Get Property block to the Input of the Get ElementArray block. Connect the Array block with the Array in Get ElementArray block. Add ControlsAppState block, change its name to ControlsAppState - FORWARD and connect it to the Element in Get ElementArray block. Add Integer block, open it and select CONTROLS_STATE_FORWARD, connect it to the Index of the Get ElementArray.
test
  1. Now add six more Get ElementArray blocks, open them choose ControlsAppState [Data/Items/Controls]. Connect them all to each other, starting with Output of the already connected Get ElementArray block. Add six ControlsAppState blocks,change their names to: ControlsAppState - BACKWARD, ControlsAppState - LEFT. ControlsAppState - RIGHT, ControlsAppState - CROUCH, ControlsAppState - JUMP, ControlsAppState - RUN, connect them to input Elements of the six added Get ElementArray blocks. Add six Integer blocks, open them and choose for each: CONTROLS_STATE_BACKWARD, CONTROLS_STATE_MOVE_LEFT, CONTROLS_STATE_MOVE_RIGHT, CONTROLS_STATE_CROUCH, CONTROLS_STATE_JUMP, CONTROLS_STATE_RUN. Connect each Integer block to Index of the six Get ElementArray blocks. Connect the States Array block to Array in six Get ElementArray blocks.
lesson_03_sceen_39
  1. Below the first line of blocks add two Get Property blocks. Open the first one and input in Type: Engine [Data/Items/Engine], in Property: Controls  [Controls], in the second Get Property block input in Type: Controls [Data/Items/Controls], in Property: States  [Array].
test
  1. Connect the Init block with the first Get Property block. Add Engine block and connect it to the Engine in the first Get Property block. Add Controls block and connect it to the Controls in the first Get Property block. Connect the Succeeded in the first Get Property block with the Input of second Get Property block. Connect the Controls block with the Controls in the second Get Property block. Add an Array block, name it States Array and connect it to the States in the second Get Property block.
test
  1. Now add seven Get ElementArray, Integer and ControsAppState blocks. Open all Get ElementsArray blocks and choose ControlsAppState [Data/Items/Controls]. In blocks Integer choose the same values as in the line above. Change names of the ControlsAppState blocks as in the line above. Connect all the blocks in the same manner as in the line above.

You can copy and paste blocks on the Flowgraph window by using CRTL+C and CTRL+V.

lesson_03_sceen_42
  1. Below the second line of blocks add blocks: MousePress, IsMouseButton, MouseRelease and Integer. Connect the OnPress in the MousePress block with the Input of IsMouseButton. Connect Button in MousePress block with Integer block and Integer block with Button in IsMouseButton block.
test
  1. Add SetBoolean block. Connect Succeeded in the IsMouseButton block with True in Set Boolean block. Connect OnRelease in MouseRelease block with False in SetBoolean block. Add Boolean block, change its name to canRotate? and connect it to the Result in SetBoolean block.
test
  1. Add Update, If and Set Real blocks. Connect the Update block with Input in the If block. Connect the canRotate? block with the Condition in If block. Open the Set Real block and change the name of Input0 to Reset. Connect the False in If block with Reset in Set Real block.
test
  1. Add two Get Property blocks. Open them and in the first one input in Type: Controls [Data/Items/Controls], in Property: MouseDX  [Real], in the second one input in Type: Controls [Data/Items/Controls], in Property: MouseDY  [Real].
test
  1. Now connect the True in If block with the Input of the first Get Property block. Connect the two Get Property blocks through Output - Input. Add two Real blocks, name them DX and DY. Connect the DX block to MouseDX in the first Get Property block. Connect the DY block to MouseDY in the second Get Property block. Connect the Result in the Set Real block to DX and DY blocks.
test
  1. Connect the Controls from both Get Property blocks to the block Controls placed in the second line (connections marked in yellow).
test
  1. Add two Set Property blocks, open them and in the first one input in Type:Controls [Data/Items/Controls], in Property: MouseDX  [Real]. In the second one input in Type: Controls [Data/Items/Controls], in Property: MouseDY  [Real].
test
  1. Connect both Set Property blocks through Output - Input. To the first Set Property block connect the Output from the Set Real block and Output from the second Get Property block. Connect the DX block to the MouseDX in Set Property block and the DY block to the MouseDY in the Set Property block. The Controls of both Set Property blocks connect to the block ControlsDummy in the first line (connections marked in yellow).
lesson_03_sceen_50
  1. Now add seven Get Property blocks, open each of them and input in Type: ControlsState [Data/Items/Controls], in Property: State  [Boolean].
test
  1. Connect the Output of the second Set Property block with the Input of the first Get Property block. Connect next Get Property blocks with each other by connecting Output and Input. Add seven Boolean blocks, open them and by pressing on the white box select False. Connect one Boolean block to State of each Get Property block.
lesson_03_sceen_52
  1. Connect the each ControlsState from the Get Property blocks to corresponding ControlsAppState blocks in the second line: ControlsAppState - FORWARD,  ControlsAppState - BACKWARD, ControlsAppState - LEFT,ControlsAppState - RIGHT, ControlsAppState - CROUCH, ControlsAppState - JUMP, ControlsAppState - RUN (connections marked in yellow).
lesson_03_sceen_53
  1. In the fourth line add seven Set Property blocks, open each of them and input in Type: ControlsState [Data/Items/Controls], in Property: State  [Boolean].
test
  1. Connect the Output from the last Get Property block in line three with Input of the first Set Property block in line four. Connect next Set Property blocks with each other by connecting Output and Input. Connect the State from each Set Property to Boolean blocks in line three.
lesson_03_sceen_55
  1. Now connect the ControlsState from the seven Set Property blocks with the corresponding ControlsAppState blocks in line one : ControlsAppState - FORWARD,  ControlsAppState - BACKWARD, ControlsAppState - LEFT, ControlsAppState - RIGHT, ControlsAppState - CROUCH, ControlsAppState - JUMP, ControlsAppState - RUN (connections marked in yellow).
lesson_03_sceen_56
  1. Add Get Property, Set Property blocks. Open the Get Property block and input in Type: Game [Data/Items/Engine], in Property: Player  [Player]. Open the Set Property block and input in Type: Player [Data/Items/Players], in Property: Controls  [Controls].
test
  1. Connect the Input from the last connected Set Property block to the Input of the newly added Get Property block. Connect the Succeeded from the Get Property to the Input of the newly added Set Property block. Add Game block and connect it to the Game of the Get Property block. Add Player block and connect it to the Player of the Get Property block and to Player of the Set Property block.
test
  1. Connect the Controls of the last added block to the block Controls Dummy in the first line.
lesson_03_sceen_59
  1. Now, after pressing Play  in the upper toolbar, you can move around on the scene by using W, A, S, D, jump with E and crouch with Q. The camera view can be changed by holding the left mouse button and moving the mouse in any direction.
  2. The next lesson will teach you how to create a functional GUI, add buttons, 2D graphics and how to connect interaction to these elements

 

  Previous lesson || Next lesson