Adding a 3D camera

Beginner Getting started

So far in this "getting started" tutorial series we have been drawing models while using GameMaker's default projection, which is designed for 2D games. In this tutorial you will learn how to add a 3D camera with mouselook to your game.

We will be continuing from where we left off in the Drawing animated models tutorial, but since we are going from 2D to 3D perspective, we have to reconvert our Character.fbx with different settings, otherwise it would not appear right. Use command BBMOD.exe .\Character.fbx -fuvy=false to reconvert the model.

Contents

Creating a camera

Firstly, we need to create a new BBMOD_Camera and change some of its properties. This can be done in the Create event of any object that is going to control the camera - it could be a separate object like OCamera, or even the player object like OPlayer. You just need to make sure that the object that the camera follows has a z variable (which is its position on the Z axis)!

camera = new BBMOD_Camera();
// Change this to your player object that the camera should follow (use
// self in case the camera should follow the object it was created in):
camera.FollowObject = OPlayer;
// Configure the camera's distance from the player (Zoom = 0 would be a
// first-person camera):
camera.Zoom = 5;
// Change these values to configure the camera's offset from the player:
camera.Offset = new BBMOD_Vec3(1, 0, 3);
// Configure the camera's field of view:
camera.Fov = 60;

Note: For more properties you can configure, please have a look at the camera's documentation.

The camera also needs to be updated every frame. This is done by calling its update method in the Step event. Mouselook can be enabled and disabled using its set_mouselook method.

if (mouse_check_button_pressed(mb_any))
{
    // Enable mouselook and hide the cursor when a mouse button is pressed
    camera.set_mouselook(true);
    window_set_cursor(cr_none);
}
else if (keyboard_check_pressed(vk_escape))
{
    // Disable mouselook and show the cursor when the Esc key is pressed
    camera.set_mouselook(false);
    window_set_cursor(cr_default);
}

// If your window is resizable, you can update the camera's aspect ratio
// here too:
camera.AspectRatio = window_get_width() / window_get_height();

// Do not forget to call the camera's update method
camera.update(delta_time);

Warning: Method set_mouselook locks the mouse cursor at its current position! If you use set_mouselook for example in the create event right at the game's start, the mouse position is not know yet to GameMaker and it will be locked at 0,0, which is the top left corner of the window. To fix this, you could for example hide the cursor first, use window_mouse_set to move the cursor into the center of the window and then wait at least 1 frame to enable the mouselook.

Lastly, to apply the camera and render everything from its perspective afterwards, simply call its apply method in the Draw event:

// Everything drawn after this will be rendered from the camera's perspective!
camera.apply();

Ensuring correct draw order

As it is stated above, everything drawn after camera.apply() is rendered from the camera's perspective. This means that you need to make sure that camera.apply() is executed before all of your models are submitted! To do this, you can for example change the instance order under "Layer Properties" in the room editor so that the camera instance is the first on the list:

Camera first in Layer Properties

Or you can create a separate layer with greater depth just for cameras:

Cameras on a separate layer

Rotating player in camera's direction

Now, when you have your camera object ready, you could for example make your character slowly rotate towards the camera's direction when you are walking:

/// @desc Step event
var _inputX = keyboard_check(ord("W")) - keyboard_check(ord("S"));
var _inputY = keyboard_check(ord("D")) - keyboard_check(ord("A"));
if (_inputX != 0 || _inputY != 0)
{
    var _walkingDirection = OCamera.camera.Direction
        + point_direction(0, 0, _inputX, _inputY);
    direction += angle_difference(_walkingDirection, direction) * 0.25;
    _animationNew = _animations.Run;
}
/// @desc Draw event
bbmod_material_reset();
new BBMOD_Matrix()
    .RotateZ(direction)
    .Translate(x, y, z)
    .ApplyWorld();
animationPlayer.submit();
new BBMOD_Matrix().ApplyWorld();
bbmod_material_reset();

Mouselook and walking

And that is all! You can now make both first and third-person games with BBMOD.

Support the development

Support us in developing BBMOD, get priority assistance and more of our amazing tools as a reward!

Become Patron

Don't miss out on a thing!

Create an account, subscribe to newsletter and get notified on new releases, tutorials and special offers.

Register Log in