Iso drawing help

[Coder567]

Hi
I'm new to Love coding and read a isometric tutorial. (Link here https://love2d.org/wiki/Tutorial:Isometric_Graphics) I got the code working (I think) and now want to change the dirt image to house image. But when I modify the code it doesn't look right anymore, the houses are way off from where they should be. Here's screenshot: https://love2d.org/imgmirrur/VSFyUWh.png

And here's my code ( Most of my changes are in draw() )

Code: Select all

function love.load()
grass = love.graphics.newImage("grass.png")
dirt = love.graphics.newImage("dirt.png")
house = love.graphics.newImage("house.png")



block_width = grass:getWidth()
block_height = grass:getHeight()
block_depth = block_height / 2

grid_size = 20
grid = {}
for x = 1,grid_size do
   grid[x] = {}
   for y = 1,grid_size do
      grid[x][y] = 1
   end
end

grid[2][4] = 2
grid[6][5] = 2

grid_x = 350
grid_y = 250

end



function love.draw()
  
  
for x = 1,grid_size do
   for y = 1,grid_size do
      if grid[x][y] == 1 then
         love.graphics.draw(grass,
            grid_x + ((y-x) * (block_width / 2)),
            grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)) - block_depth)
      else -- grid[x][y] == 2
        bd = house:getHeight() / 2
        bw = house:getWidth()
         love.graphics.draw(house,
            grid_x + ((y-x) * (bw / 2)),
            grid_y + ((x+y) * (bd / 2)) - (bd * (grid_size / 2)) - bd)
      end
   end
end


end

can some one help to get it working?

thx!

[raidho36]

You should use the block_width and block_depth for all coordinate calculations, because they belong to the base grid rather than particular objects.

Also, since it's the same calculations for all types of objects, you can leave a single instance of that code and just change what type of object you will render.

Code: Select all

for x = 1,grid_size do
   for y = 1,grid_size do
      local sprite
      if grid[x][y] == 1 then sprite = grass
      elseif grid[x][y] == 2 then sprite = house end
      love.graphics.draw(sprite,
            grid_x + ((y-x) * (block_width / 2)),
            grid_y + ((x+y) * (block_depth / 2)) - (block_depth * (grid_size / 2)) - block_depth)
   end
end

[Coder567]

Ok thanks a lot! I updated the file with your code but now it looks like this: https://love2d.org/imgmirrur/9p6wwBd.png

[Coder567]

Should probably add that the grass image size is 32x32 but house is 64x64

[raidho36]

I guess that's because your grass tile is straight square, not oblique isometric tile, so it renders on top of your house tile. But you might actually want to draw your terrain and objects in two passes - first terrain, then objects - so that overwrites like that don't happen.

Also, try adjusting image origin, so that it renders at the base, not at top right corner.

[Coder567]

Ok makes sense, thanks! But there's still something odd going on with the ground rendering. the dirt sprite shows it's drawn on length of two tiles?
https://love2d.org/imgmirrur/ID5NYq6.png

[raidho36]

I think that's actually one tile in size, but bottom half is overwritten by square grass tiles. Give the sprites diagonal edges in a graphics editor. Start with creating the graphics and then tweak the code to produce proper picture.

[Coder567]

Right, I have to start learning how to make isometric graphics

[NotARaptor]

You can find a veritable hoard of relevant information here : http://www-cs-students.stanford.edu/~am ... html#tiles