gamemaker 3d draw backgrounds in distance

Matharoo makes games, tutorials and courses using GameMaker. He has joined the states on the blog to share the post-obit quick and exciting use of cameras in GMS2.

In that location's an amazing picayune fob, or rather, feature in GameMaker Studio two, that you possibly didn't know about! Let'south take a look at it in this blog.

I was working on the boondocks area for 1 of my side-projects and was struggling with how to build it. I didn't want to create a generic, 2d tiled area, with just one layer to fill up the background; I wanted it to exist a little more complex and iii-dimensional, while however being a 2D game...

And y'all know what GameMaker Studio 2 has? 3D cameras, and depth-based layers.

Let's learn how this magic can be incorporated into whatever game!

Side-Note:

• You can download the project hither, and have it open on the side, as you lot read this blog.
• There is also a video version of this tutorial (simply make sure to likewise read this post as information technology covers more than the video):

THE Third DIMENSION

If you've used the Room Editor, you'll know that each layer has a "depth" value. So, a layer with a lower depth would be fatigued above a layer that has a higher depth.

Three visible layers with depths 0, 100 and 200

What'southward interesting about this, is that the depth value actually corresponds to the "z" value in 3D space! And so the 3rd dimension, z, would exist the distance of a layer from the camera.

This means that nosotros just need to prepare up our 3D camera properly, and the rest volition be handled past the layer organization!

3D CAMERAS

Using a 3D camera in GML mainly consists of setting up a project matrix and a view matrix.

• The view matrix defines where the camera is, and where it's looking.

• The projection matrix defines how the world is rendered; for example, whether the view is orthographic or perspective, what the field of view is, etc.

VIEW MATRIX

The view matrix can exist set up using the function "matrix_build_lookat":

          var _viewMat = matrix_build_lookat(cam_x, cam_y, cam_z, look_x, look_y, look_z, 0, 1, 0);                  

The role name itself explains how it works: it lets you "expect at" a betoken in 3D infinite, from some other point.

The arguments "cam_x, cam_y, cam_z" represent the 3D position of the photographic camera. Then, the arguments "look_x, look_y, look_z" represent the 3D point where the camera is looking.

And finally, the last iii arguments "0, 1, 0" (in order: x, y, z) correspond the "Upwardly" vector of the camera. It'due south basically the camera asking you: "which management is up?"

Although nosotros are setting upward a 3D world, we still want it to retain the old second view, where ten represents left-to-right movement and y represents up-to-downward motion. So to set the UP vector on the y axis, we set the Up vector to "0, 1, 0" (again: x, y, z).

Project MATRIX

Our projection matrix will be fix using the office "matrix_build_projection_perspective_fov":

          var _projMat = matrix_build_projection_perspective_fov(lxx, xvi/9, 3, 30000);                  

For the projection matrix, these are the arguments, in order: FOV, Attribute Ratio, ZNear, ZFar

Then nosotros laissez passer in the field of view of the camera, and the aspect ratio that information technology needs to maintain. So we pass in the ZNear and ZFar values. Anything drawn outside of this z range, whether it's too shut to the photographic camera, or too far abroad, will not be rendered.

Annotation : When using a perspective camera, tiled groundwork layers do not work and so you demand to handle such tiling manually.

IMPLEMENTATION

Before starting the implementation, brand sure you accept these things prepare within your room:

1. Layers, with proper depth gild. Additionally, yous can use the padlock button next to the layer depth, to set up a custom depth value.
2. A photographic camera view following an object, which can easily exist set up in the Room Properties.
   

   a. If your camera view is prepare through lawmaking, make sure that it is fix before you lot run the code beneath.

This is what I'll be working with:

A unproblematic 2d game -- without anything "3D"

For managing the 3D camera, nosotros're gonna use a dissever "oCamera" object. Alternatively, you tin too do this in a game controller/manager object, if yous already have one.

Now allow's set upwardly some variables, in the Create event:

          // Camera camera  = view_camera[0];  // 3D camera properties camDist = -300; camFov  = 90; camAsp  = camera_get_view_width(camera) / camera_get_view_height(camera);                  

First, we go the camera ID, and store information technology in camera.

Then we gear up up some 3D camera properties:

• camDist: z value where the camera is positioned
• camFov: Field of view
• camAsp: Aspect ratio

Now the magic will happen in the Draw Begin event.

Why Depict Begin, y'all ask? Because it runs before the Describe events, and the 3D camera needs to be updated before anything else is drawn.

          // Update 3D photographic camera var _camW   = camera_get_view_width(camera); var _camH   = camera_get_view_height(camera); var _camX   = camera_get_view_x(photographic camera) + _camW / 2; var _camY   = camera_get_view_y(camera) + _camH / 2;  var _viewMat = matrix_build_lookat(_camX, _camY, camDist, _camX, _camY, 0, 0, i, 0); var _projMat = matrix_build_projection_perspective_fov(camFov, camAsp, 3, 30000);  camera_set_view_mat(camera, _viewMat); camera_set_proj_mat(camera, _projMat);  camera_apply(camera);                  

Commencement, we get the width and the height of our camera, in _camW and _camH. Then we set upward the position of the 3D camera, in _camX and _camY. You can encounter that information technology points to the center of the camera (by calculation half the size to the camera position).

Afterward that we set the view matrix. The 3D camera is at (_camX, _camY, camDist), and is looking at (_camX, _camY, 0). And then betwixt these vectors, but the z value is different.

For the projection matrix, we simply pass in the FOV and aspect ratio using the variables, and so the ZNear and ZFar values.

And so we employ both matrices to the camera, and at the end, use camera_apply. This applies all the changes to the camera immediately, instead of waiting for the adjacent pace to update it.

Boom! Our layers now have real depth: you tin tell by the neat parallax effect.

But we're not washed withal! At present we only need to have…

SOME FUN!

ROTATION

Permit's take a look at our view matrix:

          matrix_build_lookat(_camX, _camY, camDist, _camX, _camY, 0, 0, 1, 0)                  

The first three arguments represent the 3D position of the photographic camera. So if we offset those coordinates, we can effectively tilt our camera!

So, for instance, permit's do this:

          matrix_build_lookat(_camX + 100, _camY + 50, camDist, _camX, _camY, 0, 0, 1, 0)                  

With this start, and a lower FOV, we get this awesome view:

FOCUS

Permit'south say you want to focus on a grapheme, during a cutscene, or to assist in gameplay. You tin can do that past simply decreasing the camera altitude!

Hither is a bonus project, that includes code for existent-fourth dimension camera rotation, and unproblematic focusing: http://matharoo.net/projects/two-5D_Platformer_Matharoo_Bonus.yyz

CONCLUSION

3D cameras are fun! We can use this power (creatively) to spice up our games and brand them stand up out from the crowd.

If you need any further assistance with GML or desire to discuss this technique, feel complimentary to hop into our Discord community. You can also tweet at me for any questions: @itsmatharoo. DMs are open up too.

Happy GameMaking!

thomasharrinat.blogspot.com

Source: https://www.yoyogames.com/en/blog/utilizing-3d-cameras-in-2d-games

Share this post