Iso drawing help

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

Iso drawing help

Post 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!
User avatar
raidho36
Party member
Posts: 2063
Joined: Mon Jun 17, 2013 12:00 pm

Re: Iso drawing help

Post 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
Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

Re: Iso drawing help

Post 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
Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

Re: Iso drawing help

Post by Coder567 »

Should probably add that the grass image size is 32x32 but house is 64x64
User avatar
raidho36
Party member
Posts: 2063
Joined: Mon Jun 17, 2013 12:00 pm

Re: Iso drawing help

Post 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.
Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

Re: Iso drawing help

Post 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
User avatar
raidho36
Party member
Posts: 2063
Joined: Mon Jun 17, 2013 12:00 pm

Re: Iso drawing help

Post 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.
Coder567
Prole
Posts: 42
Joined: Sun Apr 07, 2019 12:32 pm

Re: Iso drawing help

Post by Coder567 »

Right, I have to start learning how to make isometric graphics
User avatar
NotARaptor
Citizen
Posts: 59
Joined: Thu Feb 22, 2018 3:15 pm

Re: Iso drawing help

Post by NotARaptor »

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

Who is online

Users browsing this forum: Ahrefs [Bot] and 52 guests