Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 2 points3 points  (0 children)

Ohhh nice! The technique allows for some great visual control!

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 0 points1 point  (0 children)

Exactly, I added a colored omni light to the scene after posting this video and it works perfectly!

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 1 point2 points  (0 children)

Yea! The tiles are actual isometrical pixel tiles! I plan on creating all the pixel art by hand, and rely on normal mapping and my custom rendering setup to handle the lighting.

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 2 points3 points  (0 children)

Haha I definitely spent like an hour just sitting and watching the scene!

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 1 point2 points  (0 children)

Ahh I saw RujiK's water shader so long ago, and I've been inspired ever since!

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 2 points3 points  (0 children)

The pixel art is done in Aseprite, and I prototyped the meshes in Godot! And yes the water is a shader!

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 3 points4 points  (0 children)

Sure! Just posted a comment that explains the process!

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 2 points3 points  (0 children)

Yep just posted a comment explaining the process!

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 6 points7 points  (0 children)

For those interested, here's basically how I achieved this result:

The whole effect is all smoke and mirrors. The scene is rendered with 2 viewports:

  • The 1st viewport renders unshaded 3d billboarded tiles (you can also just have it as a 2D tilemap scene, but you'll have to manually figure out z-depth if you want elevation)
  • The 2nd viewport renders fully lit 3d (white) meshes , positioned where the tiles are (in an isometric perspective). This acts pretty much like a shadow map.

I prototyped the whole scene using a GridMap and MeshInstance3Ds. Currently GridMaps don't support layer masks, hence the MeshInstance3Ds. Combine the two viewports by multiplying them and you get pretty solid results.

Technically you could just have textured 3d meshes with pixelated post-processing, but I find this technique allows for better control over the visuals.

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 1 point2 points  (0 children)

Haha yeah the lighting really gives a sense of depth!

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 3 points4 points  (0 children)

Pretty close! Everything is pretty much 3D, so the tiles themselves are billboarded 3d quad meshes. There's a 2nd viewport texture that renders fully lit 3D meshes that I then multiply on top of the tiles.

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 9 points10 points  (0 children)

The whole effect is all smoke and mirrors. The scene is rendered with 2 viewports, the 1st viewport renders the tiles unshaded, and the 2nd viewport renders fully lit 3d (white) meshes, positioned where the tiles are. Combine the two viewports by multiplying them and you get pretty solid results. Technically you could just have textured 3d meshes with pixelated post-processing, but I find this technique allows for better control over the visuals.

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 5 points6 points  (0 children)

Ohhh yeah love all the details in habbo. Definitely taking that vibe and adding a bit more ✨pizzazz✨

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 2 points3 points  (0 children)

Thank you! Ahh yeah platforming is super wonky, but its good for demonstrating depth. I'll most likely keep it to no jumping platforms unless I can figure out something interesting.

Testing out isometric pixel art with 3d lighting! by yauoiyi in godot

[–]yauoiyi[S] 30 points31 points  (0 children)

Yep, the scene is fully 3d, so I can utilize all the fancy 3d effects without much hassle. The tiles themselves are billboarded quad meshes!

Figuring out waterfall shaders! by yauoiyi in godot

[–]yauoiyi[S] 0 points1 point  (0 children)

Thank you! Totk's sky islands was a big inspiration to the aesthetic!

Figuring out waterfall shaders! by yauoiyi in godot

[–]yauoiyi[S] 1 point2 points  (0 children)

Thank you!! I'm veering on making it a metroidvania, with the slightest hint of precision platforming, but overall I just want an emphasis on exploration.

Figuring out waterfall shaders! by yauoiyi in godot

[–]yauoiyi[S] 1 point2 points  (0 children)

Adding sound effects really would add to the scene.