How to make isometric pixelart worldmap in Godot - Professor Bubbles Devlog #6

Greetings everybody! In this devlog I explain how I made level selection mechanism using isometrix pixelart.
Development live stream: / haruotsaa
Alpha demo: haruotsa.itch.io/professor-bu...
Discord: / discord
Music: RUclips audio library and DDRKirby (ddrkirbyisq.bandcamp.com/)
0:00 Introduction
0:09 Basics of isometrix pixelart
1:17 Trick for estimating shading with Godot
1:56 Pixeling a groundtile in Aseprite
2:35 Setting up isometric tilemap in Godot
5:03 Crafting level dioramas
5:51 Fixing depth sorting with YSort nodes
6:57 Finished product in Godot
7:19 Closing words

[@sleepycodecat]

Hi there! Fun fact: I used Godot 4.0 movie maker mode to create those "blueprint" animations in this devlog.

[@katiescape]

ooo

[@xxEbonyShardxx]

this seems so much easier than the game maker tutorial i was watching, I'll definitely be using Godot for my tactical RPG, thank you so much!!

[@bigturtleworks]

Your art style and color palette look great! Thanks for making this video.

[@sleepycodecat]

Thank you for the kind words! Glad you liked it!

[@nguyenhuyson255]

Can't wait for your next tut! Nice work!

[@sleepycodecat]

Thank you! Next one is already in planning, stay tuned!

[@juliomingui8713]

Love it bro, keep it coming! Thank you thank you!

[@sleepycodecat]

Glad you enjoyed the video! ☺

[@Afreshio]

thanks for this one tut my man

[@AIXVEST]

Great work keep it bro!!!! From South Korea.

[@sleepycodecat]

Thank you! ☺

[@juliocesar-po6hu]

Nice small devlog, it's a bit hard to find isometric tutorials or examples in godot and your is a great one!

[@sleepycodecat]

Thank you so much! I'm glad if the bits&pieces there do actually help Godoers to create isometric games :)

[@katiescape]

isometric godot gang!!

[@HonestGameDev]

Cool concept with using Godot 3D functionality to get the objects isometric views!

[@sleepycodecat]

Glad you like it! I guess with orthographic camera and basic 3d mesh shapes one can even construct a mock-up for an isometric scene.

[@ObviouslyProgrammer]

nice!!!!

[@Nermit693]

Nice tutorial! In Godot 4 you can have multiple layers in a tilemap, and ysort (and offset) each layer individually. If you think of each layer as a height level, you can quite easily build up the maps and avoid all of these sorting problems and not have to deal with edge cases. In Godot 3 you had to use multiple tilemaps to do this. The only drawback is that this makes drawing the tilemaps more tedious, as you cant save a pattern across multiple layers. You could solve this with a tool script though. In my case, I generate the maps programatically, so it doesn't matter.

[@sleepycodecat]

Thank you! I've heard layering in Godot 4.0 tilemaps gives even more flexibility for map designs, which is cool. Now that you mentioned the individual sorting/offsetting per layer, I need to go and play around with it a bit :)

[@MangaGeSy]

Your content is great to follow.
How did you learn to make games?

[@sleepycodecat]

Thank you! I have learned mostly by simply making games :) which in the beginning around 1997 was
a rocky road of trial&error as there were so few tutorials available. Luckily today thanks to yt/forums/reddit etc. learning to make stuff with Godot has been quite a bit smoother ;)

[@jj4l]

@ 3:31, Godot 4-RC creates tiles in the Atlas automagically on confirm prompt, I believe.

[@sleepycodecat]

Looking forward to try it out! Would be a life saver for large tilesets

[@jashum8554]

does anyone know how to adjust the y sortig for climbin on top of new levels? for example if the tower in this example was an actual jumping puzzle

[@3moliser486]

Goood

[@aliothspectranet5678]

I feel like it desperately needed a section of going up and down, both with maybe hills as well as the ladder
I'm not very fluent with Godot yet, so I can't tell if your method of having the player be able to go around the laddered mountain still allows for climbing said mountain either
Perfectly fine if this wasn't within the scope of your project, this still feels like a very good overview on how one would get started

[@sleepycodecat]

I'm slowly working on a follow up tutorial, which deals with isometric stuff in Godot 4 (setting up tileset, simple character controller and path finding). The mechanic you described would fit in quite well

[@Mt.COsygames]

by the way the latest version of Aseprite has a tilemap feature now

[@sleepycodecat]

That's right. It's a handy feature to have

[@ClumsyCars]

i dont have the mode and other options on my tilemap

[@raihanaryaduta3434]

can you make video, how to make running walking with code in godot? and transition change area maps like a video

[@sleepycodecat]

Yup, a short video on a simple character controller is surely doable. Then again I have at least two devlogs videos in the pipeline to be published :P Probably the fastest way is to publish a simplified Godot project in github and let you mess around with it 😉

[@mrArk_19]

hey man, what is the canvas size when you draw that isometric tilemap on aseprite? hoping to be answered, thanks

[@sleepycodecat]

It was 32x32 pixels

[@katiescape]

Hey, have you got a link to the 'helper grid'

[@sleepycodecat]

The one in the video is selfmade, but there are some templates online like this one: opengameart.org/content/isometric-grid-pack

[@KaletheQuick]

It has been FOUR months, and 'centered textures' is already gone. I just want the tiles to work! I started with Game Development Center's tutorial for godot 3.2, but I cannot find a way to import those tiles without doing them all one by one. Ugh!

[@sleepycodecat]

Tell me about it. I feel like some kind of helper plugin would be helpful here.

[@gumz4183]

Gone as in, they’re removed?

[@draft_fusion]

Tilemap is not working and too confusing, going to look else where

[@tristancarter4324]

I don't even have option for tile map mode

[@tristancarter4324]

For anyone else you have to click "tile set" again to get extra options

[@sleepycodecat]

In this tutorial I still used Godot 3.x. In Godot 4 tile shape property for isometric shape is indeed in the tileset.

[@Ari-lv8nc]

i subscribed

[@magenta_juice8166]

You presented it very well. Very clear, I will definitely take your help. 🦾

[@sleepycodecat]

Cheers! So glad to hear that :)