Build an isometric 3D game in 2D — #1 Project setup and basic calculation

I’ve released a game called Ladder Box, it’s a 3D puzzle game that is all programmed in a 2D environment.

First, let’s make those blocks

I’m gonna have a movable and an unmovable scene, and a scene for floor tile.

floor tile scene

Game Axis

game-axis

Start with y=0

Let’s start with something simple, set only one layer, y=0.

Write some code

Now let’s have a global script to handle all the 2d/3d(game/engine) conversion.

# Godot Global/Autoload : Grid
extends Node
const TEXTURE_SCALE = 3onready var block_texture = load("res://blocks/movable/movable.png")onready var texture_w = block_texture.get_width()
onready var texture_h = block_texture.get_height()
onready var SINGLE_X = Vector2(texture_w/2,texture_h/4) * TEXTURE_SCALE
onready var SINGLE_Z = Vector2(-texture_w/2,texture_h/4) * TEXTURE_SCALE
func _ready():
pass
func game_to_engine(x:int,y:int,z:int):
var _rtn = Vector2(0,0)
_rtn += x*SINGLE_X
_rtn += z*SINGLE_Z
return _rtn
func game_to_enginev3(game_position:Vector3):
game_to_engine(game_position.x,game_position.y,game_position.z)
pass
  • in floor_tile.tscn, set position.y to -1
  • “movable” and “unmovable” are both Node 2D and acts as containers for our blocks.
extends Node2Dconst movable = "res://blocks/movable/movable.tscn"
const unmovable = "res://blocks/unmovable/unmovable.tscn"
onready var grid_texture = load("res://floor_tile/grid.png")func _ready():
# or you can set tiles in 2D tab.
for x in range(6):
for z in range(6):
$floor_tile.set_cell(x,z,0)
pass

new_movable(0,0,0)
new_movable(0,0,1)
new_movable(1,0,0)
new_movable(1,0,1)
new_unmovable(3,0,3)
pass
func new_movable(x,y,z):
var _m = load(movable).instance()
$movable.add_child(_m)
var _engine_pos = Grid.game_to_engine(x,y,z)
_m.position = _engine_pos
pass
func new_unmovable(x,y,z):
var _u = load(unmovable).instance()
$unmovable.add_child(_u)
var _engine_pos = Grid.game_to_engine(x,y,z)
_u.position = _engine_pos
pass
we got it right.

Pile up

Now let’s take y into our calculation

onready var SINGLE_Y = Vector2(0,-texture_h/2) * TEXTURE_SCALE
_rtn += y*SINGLE_Y
func _ready():
for x in range(6):
for z in range(6):
$floor_tile.set_cell(x,z,0)
pass
# you can add blocks however you want ,but might got something weird.
new_movable(0,0,0)
new_movable(0,1,0)
new_unmovable(3,0,3)
pass
take y into our calculation
func _ready():
for x in range(6):
for z in range(6):
$floor_tile.set_cell(x,z,0)
pass
# you can add blocks however you want ,but might got something weird.

new_movable(0,1,0) # moved this up
new_movable(0,0,0)
new_unmovable(3,0,3)
pass
weird render

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store