This extension is intended to transform classic top-down 2D games created in GDevelop into 3D games, using Babylon.js to achieve this. However, it is not compatible with side-view platform games.

Thinking in 2D is typically easier than thinking in 3D, but 3D games are often considered cooler (although this is debatable!). This extension is designed to enable the creation of cool games with ease.

It's worth noting that this extension is highly opinionated and aims to minimise the use of events or actions unless absolutely necessary. It seeks to achieve everything using behaviours wherever possible. As it is still in its early stages, I cannot recommend using it for anything other than fun or game jams. Furthermore, I cannot guarantee backward compatibility, and anything may break in the next version, so use it at your own risk.

Please note that I do not own any of the assets used in the demo project. As I distribute the project, I always use CC0 assets. However, if you notice any mistakes, please let me know so that I can take action as soon as possible. If you plan to use these assets in your own projects, please check their licences from the provided links.

As this is not my main project, I cannot guarantee frequent updates. I have another project that uses a different engine, which takes up most of my time. However, since I enjoy working with Babylon.js and GDevelop, I am planning to add new features and release new versions as and when I can.

EXPERIMENTAL PREVIEW BUILD

This is the initial release of the extension. Very premature release for GDevelop 3D Jam. I'll probably make big changes including removing behaviors and adding new ones.  So, please keep this in mind while using this extension.

DOCUMENTATION

Getting Started

To download the extension, go to https://aliustaoglu.itch.io/babylongd-gdevelop-in-3d

Please note that this extension is neither an official nor a community one, and therefore, it needs to be installed manually. To install the extension, follow these steps:

• Click on “Create or search for new extensions”.

• Click on “Import extension”.

• Select the extension that you have downloaded.

To activate the extension, you need to add a camera and use below event.

Then your scene should have one camera object for the changes to take place.

Behaviours

Camera Behaviour

This is the required behaviour. All scenes should have one (and only one) object that has this behaviour.

Properties

hide: Whether it should be hidden in 3D scene. You usually want to hide. Enable only if you want to debug.

checkCollisions: Whether camera should have a collider around it. If enabled camera won’t be able to move when collided with other objects, such as structures.

applyGravity: Whether gravity should be applied to camera. If applied, built-in Babylon.js physics will be applied. CANNON or Havok is not supported yet.

cameraType: Choose a camera type. Currently only FPS camera is supported. Other camera types will be added in the future.

keysUp: By default, W in WASD movement. Override if you want to change.

keysDown: By default, S in WASD movement. Override if you want to change.

keysLeft: By default, A in WASD movement. Override if you want to change.

keysRight: By default, D in WASD movement. Override if you want to change.

Actions

setZOrder: Change the z-order of the camera. This is typically the third dimension what makes it a 3D game. In Babylon.js it’s the Y axis but since (X, Y) is what GDevelop uses, the extension will do the translation in the background.

applyGravity: You can change initial behaviour property.

Structure Behaviour

This will create a box consisting of 6 planes. For each plane you can assign a texture. So other than behaviour properties, you will need to create sprite animations with below names:

FRONT, LEFT, RIGHT, BOTTOM, TOP, BOTTOM

All self-explanatory but FRONT and LEFT animations are compulsory. If you don’t provide RIGHT, Then LEFT will be used. For all the rest if you don’t provide a texture FRONT texture will be used.

You can provide multiple textures for each animation. Then it will be an “animation” like GDevelop in 2D.

If the object is bigger than the texture, then the extension needs to know how it will handle it. It can repeat (tile) the texture or extend it. You can use below behaviour properties to achieve this.

IMPORTANT: Make sure all the sprite origins are mid-centred. Otherwise, the 3D box won’t be properly aligned. 

And since GDevelop canvas is 2D-only, we need to let Babylon.js know about the depth of the building. Need to add a variable named “depth” for this.

SkyBox Behaviour

You can create a sky box using 6 pre-rendered images. It doesn’t matter where you place this on the 2D editor, but it just needs to be on the scene to take effect. And you need to add 6 animations with names these names.

px, py, pz, nx, ny, nz

px means positive-x and nx means negative x. And the others are similar.

You can use below image as reference:

SkyMaterial Behaviour

You can also create realistic and procedural sky without using pre-rendered images. You can dynamically specify things like sun position, turbidity, inclination, etc.

This behaviour could be attached to any sprite or any object. It doesn’t matter where it’s located, and it doesn't matter what image you use. But you can add a dummy image so you can locate in on the scene editor.

Simple Sprite Behaviour

You can use 2D sprites on 3D space. The sprite will always be looking at the camera. This is a very useful for technique for non-realistic games where you don’t need to create lots of 3D models with time consuming animations.

The most important thing is that your sprite should have an animation called DEFAULT. It’s only needed for some initial settings. You can switch to other animations using the usual GDevelop events. Babylon.js will render the active GDevelop animation.

IMPORTANT: Make sure all the sprite origins are bottom-centred. Otherwise, the 3D sprite won’t be properly aligned. 

Light Behaviour

Light is needed for camera to show 3D objects. Otherwise, everything will be dark. Currently only Hemispheric Light is supported. Other light sources will be added for future releases.

Terrain Behaviour

You can create a terrain from a height map and include mix maps. To use a terrain, you need to create a sprite with 8 animations (only first images of the animations will be used).

HEIGHTMAP: The actual heightmap for the terrain. Black parts are the ground, and the white parts are the mountains.

MIXMAP: This will define how the textures will be mapped to RGB values.

GROUND: Ground texture in the mixmap.

MIDDLE: Middle texture in the mixmap

HIGH: High texture in the mixmap.

GROUND_N: Ground normal texture in the mixmap.

MIDDLE_N: Middle normal texture in the mixmap

HIGH_N: High normal texture in the mixmap.

You also need to specify behaviour properties.

Max Height: Defines how high the tallest point of the terrain will be. 100px=1unit in Babylon

Min Height: Defines how shallow the deepest point of the terrain will be. 100px=1unit in Babylon

Subdivisions: This defines the quality of the terrain. If you or your audience have low graphics, try setting this to a lower value. Around 150 is a good number for average machines but try 50 or lower for low-spec machines.

If you stretch or rotate the terrain sprite, 3D object will also be rotated and stretched making it “what you see is what you get” in 2D editor.