Phaser 3.5 Isometric demo. How to continue?

[daan93]

For a while now I have been interested in isometrics world. Creating isometric art, playing games like Sim City and Roller Coaster Tycoon. 3 Years ago I also used the Phaser Isometric Plugin to create a isometric game demo.

https://dozenschuiven.daniel-dewit.nl/

Sadly this plugin is not supported anymore since Phaser 2 became Phaser CE. There was a port for Phaser 3, but that has also not been updated for at least 2 years now.

So I thought let’s give this a shot with Phaser 3 but without using any plugins. The result is this demo:
Phaser Isometric Demo (daan93.github.io)

I based the demo on the following tutorial for Phaser 2 and rewrote that for the newest version of Phaser. Scene management and depth sorting are now native to Phaser 3 and I used Webpack to support bundling and ES6.

An Updated Primer for Creating Isometric Worlds, Part 1

There are still some things to consider though. Using the plugin 3 years ago I was able to create physics for game objects so the character could push boxes around and jump on top of them. In my demo this is not possible at all, there is only basic character movement and basic collision detection. I want to improve on this but I am not yet sure how…

What I really need is some Isophysics which supports not just the x- and y-axis but also a z-axis (height in isometric space). The demo I have now uses a 2d top view to convert 2d coordinates into iso coordinates, maybe I can create an additional 2d side view for the height. And I know Phaser now also supports isometric tilemaps, but I need to check how this works with collision and physics before I can implement that.

Maybe you guys have some more ideas?

[Milton]

Use ammo.js.
Then use btBoxShape, btSphereShape, and btConvexHullShape to define your collision shape.

Some of my code as example:

addShape(shape: any, x: number, y: number, z: number, mass: number, rotation: number, rad?: number): Ammo.btRigidBody {
	this._transform.setIdentity();
	this._transform.setOrigin(new Ammo.btVector3(x, y, z));
	let inertia = new Ammo.btVector3(0, 0, 0);
	if (mass != 0) shape.calculateLocalInertia(mass, inertia);
	let motion = new Ammo.btDefaultMotionState(this._transform, this._identity);
	let info = new Ammo.btRigidBodyConstructionInfo(mass, motion, shape, inertia);
	let body = new Ammo.btRigidBody(info);
	body.setUserIndex(this._bodyIndex++);
	if (rad) { // sphere
		body.setRestitution(0.9);
		body.setFriction(0.9);
		body.setDamping(0.1, 0.1);
		body.setActivationState(4); //Ammo.btCollisionObject.DISABLE_DEACTIVATION);
	}
	else {
		body.setRestitution(0.1);
		body.setFriction(0.5);
	}

	if (rotation != 0) {
		this._quaternion.setEulerZYX(rotation * 0.0174533, 0, 0); // y, x, z / yaw, pitch, roll
		this._transform.setRotation(this._quaternion);
		body.setCenterOfMassTransform(this._transform);
	}

	this._world.addRigidBody(body);

	return body;
}

[daan93]

I like your approach using a 3d framework, but I am not sure how it will work for isometric view in phaser. Is this ammo shape rendered in the scene? Do we just use it to detect collisions invisibly? Is it overkill?

Do you have a demo where we can see how this works?

[Milton]

Demo.
H for Help, W for Wireframe which shows the collision shapes.
You use it the same way as a 2d physics engine. It’s just 3d, there’s no rendering.

[daan93]

Awesome demo! I think I get how it works. I just need to figure out where to update positions of the shapes and how to detect collisions.

Edit: Found this old thread over on html5gamedevs. HTML5 isometric engine? - General Talk - HTML5 Game Devs Forum Seems useful too, maybe I can find more on this.

[Milton]

These days I wouldn’t bother with 2D isometric, I think. Depth sorting is a real pain (basically impossible). In the olden days we had no choice…
Just use Three.js (like enable3d, with ammo integrated), use an orthographic projection, and then rotate the camera like so:

this._transform.rotate(new Quaternion(this.X_AXIS, 30 * Math.PI / 180));
this._transform.rotate(new Quaternion(this.Y_AXIS, 45 * Math.PI / 180));

[daan93]

Hm, I just implemented 2d depth sorting for my phaser 3 demo. But it might become real hard when a third axis is introduced. I like the simple 2d game art though.

I definitely need to look into enable3d, seems like a much more simple way to create isometric projections. Might even be easier than learning Unity if you already know Phaser like me.

[Milton]

Stuff like this is no fun

P.S. You can use 2d game art in 3d engines. As long as you don’t rotate the camera you can’t tell the difference.

[daan93]

I think that stuff is fun when there is some simple game logic

And yeah I think it should even be possible to use 2d animated spritesheets in enable3d. (There is also a demo with a 2d rectangle moving around in 3d space synced with a 3d cube so why not, right?)

[Milton]

The above picture is a fun game. Which object do you need to draw first?

[daan93]

What game is it? I don’t have any needs for this project, just trying to learn and maybe help some other folks.

[Milton]

It is not a game as such It’s just an example of an ‘impossible’ depth sort.

[daan93]

Haha, I only see it now. I also see how that is impossible now.

[yannick]

I just make a new enable3d example based on your image

[Ewanretor]

Hello I know this is a old post but I updated the phaser isometric plugin for the latest Phaser 3.50 release recently I will put it on GitHub soon

[fielding]

I know this is an older thread, but I would love to look over the source for the awesome spindizzy demo! =)

[Milton]

@fielding

… but I would love to look over the source

I wouldn’t advice it For masochists only.
It’s basically one big hack, just to make something work (lots of magic numbers). I created my own performance/debug version of Bullet/Ammo, and since I can’t find my Emscripten settings, you won’t be able to build the source.

I’m sure @yannick could whip something similar up quite quickly to get you started with enable3d (if that’s still a thing, I’ve been away from jsdev).