[help] Trying to learn Lua + LOVE doing tutorials

[Strelok]

So I'm trying to learn Lua and LOVE at the same time, doing some tutorials to understand it. Right now I was trying to do this tutorial, but I hit a problem, and I don't know what is it. I made some tiles in paint just to use in this tutorial and as said I named them tile0.png, tile1.png, 2 and 3.

http://love2d.org/wiki/Tutorial:Tile-based_Scrolling

Code: Select all

tile = {}
for i=0,3 do
	tile[i] = love.graphics.newImage( "tile"..i..".png" )
end

love.graphics.setFont(12)

map_w = 20
map_h = 20
map_x = 0
map_y = 0
map_offset_x = 30
map_offset_y = 30
map_display_w = 14
map_display_h = 10
tile_w = 48
tile_h = 48

map={
   { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0}, 
   { 0, 1, 0, 0, 2, 2, 2, 0, 3, 0, 3, 0, 1, 1, 1, 0, 0, 0, 0, 0},
   { 0, 1, 0, 0, 2, 0, 2, 0, 3, 0, 3, 0, 1, 0, 0, 0, 0, 0, 0, 0},
   { 0, 1, 1, 0, 2, 2, 2, 0, 0, 3, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0},
   { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0},
   { 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0},
   { 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 2, 2, 2, 0, 3, 3, 3, 0, 1, 1, 1, 0, 2, 0, 0, 0, 0, 0, 0},
   { 0, 2, 0, 0, 0, 3, 0, 3, 0, 1, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0},
   { 0, 2, 0, 0, 0, 3, 0, 3, 0, 1, 0, 1, 0, 2, 0, 0, 0, 0, 0, 0},
   { 0, 2, 2, 2, 0, 3, 3, 3, 0, 1, 1, 1, 0, 2, 2, 2, 0, 0, 0, 0},
   { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
   { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
}

function draw_map()
   for y=1, map_display_h do
      for x=1, map_display_w do                                                         
         love.graphics.draw( 
            tile[map[y+map_y][x+map_x]], 
            (x*tile_w)+map_offset_x, 
            (y*tile_h)+map_offset_y )
      end
   end
end

draw_map()

function love.keypressed(key, unicode)
   if key == 'up' then
      map_y = map_y-1
      if map_y < 0 then map_y = 0; end
   end
   if key == 'down' then
      map_y = map_y+1
      if map_y > map_h-map_display_h then map_y = map_h-map_display_h; end
   end
   
   if key == 'left' then
      map_x = math.max(map_x-1, 0)
   end
   if key == 'right' then
      map_x = math.min(map_x+1, map_w-map_display_w)
   end
end

That's the code. When I try to run it. I get a black screen. What is wrong with it? Also, can you explain me a bit more about it?

[TechnoCat]

http://love2d.org/wiki/Tutorial:Fine_Ti ... _Scrolling

[Rad3k]

All your drawing operations must be done inside love.draw() callback. Just like love.keypressed is called when Löve detects a key press, love.draw is called when Löve feels like drawing a frame. Fortunately, this usually happens many times a second

[Strelok]

I changed the draw.map() to love.draw() and it worked. But why it's draw.map in the tutorials?

[Taehl]

Because of this:

Code: Select all

function love.draw()
    draw_map()
end

Quite simply, draw_map is being called from WITHIN love.draw(). That sort of thing is allowed, and can help you organize your code once your games start getting a little larger.

[Strelok]

So I don't need to write down draw.map()? Just love.draw whenever I want things to get draw to the screen?

[Taehl]

Yeah. So long as your drawing functions (love.graphics.draw and whatnot) are somewhere under love.draw(), you're good. Personally, I like keep all my drawing stuff under love.draw() directly unless it starts getting over a hundred lines long (at which point, I start splitting stuff into more functions, since it's easier to work on that way).

Two examples from stuff I've made would be:

Code: Select all

function love.draw()
	local lg = love.graphics
	
	for k,v in ipairs(plats) do
		local x,y, w,h = v.x, v.y, v.w, v.h
		lg.setColor(127,255,127, 255) lg.rectangle("fill", x-w/2,y-h/2, w,h)
		lg.setColor(0,0,0, 127) lg.rectangle("line", x-w/2,y-h/2, w,h)
	end
	
	for k,v in pairs(objs) do
		local x,y, w,h = v.x, v.y, v.w, v.h
		lg.setColor(191,191,255, 255) lg.rectangle("fill", x-w/2,y-h/2, w,h)
		lg.setColor(0,0,0, 127) lg.rectangle("line", x-w/2,y-h/2, w,h)
	end
	
	local x,y, w,h = player.x, player.y, player.w, player.h
	lg.setColor(255,255,255, 255) lg.rectangle("fill", x-w/2,y-h/2, w,h)
	lg.setColor(0,0,0, 127) lg.rectangle("line", x-w/2,y-h/2, w,h)
end

This just draws rectangles for stuff, and isn't too fancy, so I didn't need to split anything up.

As opposed to a larger game which has a lot more drawing-related code:

Code: Select all

function love.draw()
	if not (gamemode and gamemode.draw and not gamemode.draw()) then
		lgsetColor(255,255,255,255)
		drawBackground()
		drawPlants()
		for k,v in pairs(particleSystems) do love.graphics.draw(v[1], 0,0) end
	end
	
	if not (gamemode and gamemode.postdraw and not gamemode.postdraw()) then
		drawBugs()
		drawCursor(cursor.p, cursor.px,cursor.py, cursor.p and (cursor.p.grown-.75)*4 or 0)
	end
end

Where gamemode.draw(), drawBackground(), drawPlants(), drawBugs(), gamemode.postdraw() and drawCursor() are all functions which together must be a thousand lines of code (and aren't always the same).

[Strelok]

Wow! That's a lot of information. I hope to understand it better soon. As I'm still learning how to program. It's a little dificult for me to differ things. It's a bit complicated.

I don't even understand what this does line by line:

Code: Select all

function draw_map()
   for y=1, map_display_h do
      for x=1, map_display_w do                                                         
         love.graphics.draw( 
            tile[map[y+map_y][x+map_x]], 
            (x*tile_w)+map_offset_x, 
            (y*tile_h)+map_offset_y )
      end
   end
end

I don't know if I look up at programming logic or Lua or LÖVE.

[Taehl]

I'll cover it line by line...

Code: Select all

function draw_map()

This makes a new function, called draw_map. A function is a collection of code which you can call at any time.

Code: Select all

   for y=1, map_display_h do

This is a loop. You loop from the number 1 to whatever number the variable map_display_h is. In this case, the variable y equals the number of the loop.

Code: Select all

      for x=1, map_display_w do

Another loop, which loops from 1 to map_display_w, and puts the counter into the variable x. The gist is that you're looping, or "iterating", over every tile in the map.

Code: Select all

         love.graphics.draw( 
            tile[map[y+map_y][x+map_x]], 
            (x*tile_w)+map_offset_x, 
            (y*tile_h)+map_offset_y )

This draws one tile. Since you iterate it over every tile, you draw every tile.

Code: Select all

      end
   end
end

This ends your two loops and the function. Does that clarify things for you?

[Jasoco]

Wow! That's a lot of information. I hope to understand it better soon. As I'm still learning how to program. It's a little dificult for me to differ things. It's a bit complicated.

I don't even understand what this does line by line:

Code: Select all

function draw_map()
   for y=1, map_display_h do
      for x=1, map_display_w do                                                         
         love.graphics.draw( 
            tile[map[y+map_y][x+map_x]], 
            (x*tile_w)+map_offset_x, 
            (y*tile_h)+map_offset_y )
      end
   end
end

I don't know if I look up at programming logic or Lua or LÖVE.

It enters the function.

The first loop is the Y loop which goes over the tiles in the grid from top to bottom.

The second is the X loop which goes over each row of tiles. Since it's inside the Y loop, it does each ROW one after another starting with 1 and going to however many tiles high the map grid is.

Inside the nested loops it draws, using the love.graphics.draw() function the image applying to the current tile at the correct offset.

x, y is the current tile to draw.
tile_w, tile_h is the width and height of each tile.
map_offset_x, map_offset_x is the X and Y offset of the map.

tile[] is an array containing each image tile. (I prefer to use Quads though. This method assumes each tile is a separate image.)
map[x][y] is the array used to contain each tile's value. i.e. is it solid or pass-through, is it dirt, stone, sand or air? Is it a road or a house or a part of the forest? Whatever your grid needs to be.

The example above is just a simplified example. Your game will want to be a lot more complex than this eventually with each map[][] tile containing more than just one piece of information. Like its collision type, tile to use and whether or not it can hurt you, etc.

Try this code for an example:

Code: Select all

function love.load()
   map_display_h = 15
   map_display_w = 15
   tile_w = 16
   tile_h = 16

   --NOTE: X comes before Y in the creation part so the array becomes map[X][Y] and not map[Y][X]
   map = {}
   for x=1, map_display_w do
      map[x] = {}
      for y=1, map_display_h do                                                         
         map[x][y] = {
            hit = math.random(0,1)
         }
      end
   end
end

function love.draw()
   for y=1, map_display_h do
      for x=1, map_display_w do
         if map[x][y] == 1 then
            love.graphics.setColor(0,0,0)
         else
            love.graphics.setColor(255,255,255)
         end
         love.graphics.rectangle("fill", x + map_offset_x, y + map_offset_y)
      end
   end
end

It should draw a 15x15 grid of random black and white squares if I typed it correctly.