[split] How to display isometric maps with pygame?

[mattwins]

I'm not using pytmx - but this has been helpful for me to be able to see calculations in creating an isometric map.

I'm having trouble making my tiles blit properly with offsets like you did above. Without the offsets, they look just like OP's problem.

With the offsets added (I'm sure I'm messing up xD - do they get set to rect.x and rect.y?) - I don't see any tiles at all.

Here is my non-working implementation of your code:

class Tile(pygame.sprite.Sprite):
    def __init__(self, image, x, y, spritesheet):
        pygame.sprite.Sprite.__init__(self)
        self.image = spritesheet.parse_sprite(image)
        self.rect = self.image.get_rect()

        # Get offsets
        x_offset = (2976 / 2) + (62 / 2 * (x + 1)) - (62 / 2 * (y + 1))
        y_offset = ((y + 1) * 32) + (32 * x)

        # Set offsets for rect
        self.rect.x, self.rect.y = x_offset, y_offset
        
        # Rotate image
        self.rotated_image = pygame.transform.rotate(self.image.convert_alpha(), 45)

    def draw(self, surface):
        surface.blit(self.rotated_image, (self.rect.x, self.rect.y))

As of now, I've manually entered all of the values for ease of testing:
Tile Width = 62
Wile Height = 32
Display Width = 2976 (for this map)

I appreciate any thoughts or feedback you may have!

[nilamo]

Original Thread: https://python-forum.io/Thread-How-to-di...with-pytmx

If you could share a running example (even if it doesn't work), along with the spritesheet you're testing with, that would help a ton.

[mattwins]

Of course! Thanks for getting back to me.

Here is my repo:
https://github.com/mattz89/DargonSphires

It works with the only requirement being pygame2. The files in question for loading the map are mainly tiles.py and spritesheet.py - though main.py kicks it off.

Here is a screenshot of how it is supposed to look:


Here is a screenshot of how it currently looks with code as here(Tile class: https://github.com/mattz89/DargonSphires...n/tiles.py)


Thanks for taking a look, I've been spinning my wheels for a bit on this one :P.

[mattwins]

It is now working! I tweaked some code I found on another post here:

class Tile(pygame.sprite.Sprite):
    def __init__(self, image, x, y, spritesheet):
        pygame.sprite.Sprite.__init__(self)
        self.image = spritesheet.parse_sprite(image)
        self.rect = self.image.get_rect()

        # Get offsets
        cart_x = x/2
        cart_y = y
        iso_x = (cart_x - cart_y)
        iso_y = (cart_x + cart_y)/2
        centered_x = x/(2**13) + iso_x + 2976/2 # The 2*13 is weird.. but there were odd spaces, so I kept adding more on to fix. Perhaps it's because my tiles are not a perfect 2:1 ratio on w/h (they are 62x32).
        centered_y = y/(2**13) + iso_y

        # Set offsets for rect
        self.rect.x, self.rect.y = centered_x, centered_y
        

    def draw(self, surface):
        surface.blit(self.image, (self.rect.x, self.rect.y))

For clarity the x and y variables come in as (row * tile width) and (column * tile height).

I'm open (and super appreciative!) to feedback if you see any obvious mistakes or a way that I should better implement.



Hopefully this helps someone else messing these isometric tiles :D.

[nilamo]

Thanks for sharing what worked :)
I'm not a big fan of magic numbers, but I also don't see what else to do there haha.

[luke83]

Love isometric games, i have spent many years modding for OpenXcom so i always get excited to see more Iso tiles :) Hoping to see more updates as your progress

[mattwins]

Thanks for sharing what worked :)
I'm not a big fan of magic numbers, but I also don't see what else to do there haha.

xD - agreed! I'll likely look more into this after I make a little more progress.

Love isometric games, i have spent many years modding for OpenXcom so i always get excited to see more Iso tiles :) Hoping to see more updates as your progress

OpenXcom looks great! These isometric games bring back all the nostalgia :P.

Happy to keep this thread open as a progress thread if that's a thing here!