Page 1 of 1

Iso drawing help

Posted: Sun Apr 07, 2019 12:40 pm
by 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!

Re: Iso drawing help

Posted: Sun Apr 07, 2019 2:23 pm
by 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

Re: Iso drawing help

Posted: Sun Apr 07, 2019 2:51 pm
by Coder567
Ok thanks a lot! I updated the file with your code but now it looks like this: https://love2d.org/imgmirrur/9p6wwBd.png

Re: Iso drawing help

Posted: Sun Apr 07, 2019 3:03 pm
by Coder567
Should probably add that the grass image size is 32x32 but house is 64x64

Re: Iso drawing help

Posted: Sun Apr 07, 2019 3:54 pm
by 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.

Re: Iso drawing help

Posted: Sun Apr 07, 2019 5:34 pm
by 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

Re: Iso drawing help

Posted: Sun Apr 07, 2019 6:35 pm
by 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.

Re: Iso drawing help

Posted: Sun Apr 07, 2019 7:08 pm
by Coder567
Right, I have to start learning how to make isometric graphics

Re: Iso drawing help

Posted: Mon Apr 08, 2019 8:07 am
by NotARaptor
You can find a veritable hoard of relevant information here : http://www-cs-students.stanford.edu/~am ... html#tiles