[Video Tutorial] Love Tutorial ~45min

[josefnpat]

Over the past week, I came up with the idea to make a tutorial that would be able to encompass most of the basics of love for people who are new to Love, but not necessarily new to Lua.

You can download/watch the tutorial here: http://50.116.63.25/public/lovetutorial/

Yes, I totally jacked the colors from the love2d.org homepage.

The tutorial goes through 8 sections where in each section the game comes closer and closer to being complete. The idea is that a new lover would be able to follow along, learn love, and get a game as a result.

I highly suggest either:

1. Downloading the OGV for good picture quality
2. Running the Love2dTutorial.pdf while watching the vimeo video.

I would like to mention that the OGV is going to have better quality and it's much smaller than mp4.

The "Assets & code" contains:

• assets.zip - the game assets
• code.zip - the game code with assets for each section
• Love2dTutorial.pdf - The slides in pdf form
• screenshots.zip - The screenshots from the slides in png form.

I hope that whenever anyone asks, "is there a good love tutorial?" that perhaps you might give them a link to this resource.

Anyway, this was a long and complicated process, but nevertheless, I am open to critique, if I ever re-write this into a version two.

edit: corrections and more

[coffee]

Very nice intermediate level tutorial. Liked the screencast approach. I will try it for sure when I ready for do my first action game. Thank you.

EDITED: About your hud info. It's annoying the way you print it. Since the lenght of Score and Bullet info is always changing (and so the print position) is hard to read that info. Would be more wise (for our eyes) separate the print of two vars.

[thelinx]

...but it's called "LÖVE", not "Love2D"

[josefnpat]

...but it's called "LÖVE", not "Love2D"

I'm using a reference that people will be able to recognize. This is after all, love2d.org. Where would you suggest changing it?

Very nice intermediate level tutorial. Liked the screencast approach. I will try it for sure when I ready for do my first action game. Thank you.

EDITED: About your hud info. It's annoying the way you print it. Since the lenght of Score and Bullet info is always changing (and so the print position) is hard to read that info. Would be more wise (for our eyes) separate the print of two vars.

I'll keep that in mind for 2.0, thank you. I was more worried about having the enemies not being as visible in the game.

[tentus]

I'm about 20 minutes in and thought I'd post my thoughts so far. In love.load:

Code: Select all

  for _,v in ipairs(img_fn) do
    imgs[v]=love.graphics.newImage("assets/"..v..".gif")
  end
  
  -- Set filter to nearest
  for _,v in pairs(imgs) do
    v:setFilter("nearest","nearest")
  end

why not just do:

Code: Select all

  for _,v in ipairs(img_fn) do
    imgs[v]=love.graphics.newImage("assets/"..v..".gif")
    imgs[v]:setFilter("nearest","nearest")
  end

In love.draw:

Code: Select all

  -- Set color
  love.graphics.setColor(bgcolor.r,bgcolor.g,bgcolor.b)
  -- Draw rectangle for background
  love.graphics.rectangle("fill",
    0,0 ,love.graphics.getWidth(),love.graphics.getHeight())
  -- Return the color back to normal.
  love.graphics.setColor(255,255,255)

why not just do this in love.load?

Code: Select all

love.graphics.setBackgroundColor(bgcolor.r,bgcolor.g,bgcolor.b)

And, last but not least:
You always put draw and then update. I feel like this is misleading, update always gets called before draw (source). It may not sound like an important distinction, but it'd be better to introduce people to the right way first, rather than having them come across very subtle anomalies down the road.

[josefnpat]

I'm about 20 minutes in and thought I'd post my thoughts so far. In love.load:

Code: Select all

  for _,v in ipairs(img_fn) do
    imgs[v]=love.graphics.newImage("assets/"..v..".gif")
  end
  
  -- Set filter to nearest
  for _,v in pairs(imgs) do
    v:setFilter("nearest","nearest")
  end

why not just do:

Code: Select all

  for _,v in ipairs(img_fn) do
    imgs[v]=love.graphics.newImage("assets/"..v..".gif")
    imgs[v]:setFilter("nearest","nearest")
  end

In love.draw:

Code: Select all

  -- Set color
  love.graphics.setColor(bgcolor.r,bgcolor.g,bgcolor.b)
  -- Draw rectangle for background
  love.graphics.rectangle("fill",
    0,0 ,love.graphics.getWidth(),love.graphics.getHeight())
  -- Return the color back to normal.
  love.graphics.setColor(255,255,255)

why not just do this in love.load?

Code: Select all

love.graphics.setBackgroundColor(bgcolor.r,bgcolor.g,bgcolor.b)

And, last but not least:
You always put draw and then update. I feel like this is misleading, update always gets called before draw (source). It may not sound like an important distinction, but it'd be better to introduce people to the right way first, rather than having them come across very subtle anomalies down the road.

Every point you make is perfectly valid. At all of these points in the screen cast, I noticed exactly all of these issues, but I'd like to take them head on anyway:

For the v:setFilter:
I was doing that for a sense of clarity, if only to keep things a little clearer, but looking back, it makes more sense to just put them in the same loop. A Lua programmer is going to be asking the exact same thing, and it needs to be changed.

For the setBackgroundColor:
One of the things that was on my "list" of things to explain, was the love.graphics.rectangle, and I thought it might be nice to just draw a rectangle for that and skip the background color. In the next revision, I think I will use the setBackgroundColor, and then maybe the love.graphics.rectangle for a backdrop for the interface text.

As for the love.draw before the love.update, I noticed myself stumbling at multiple times on just this fact, and when i redo this, I plan on reversing the order in every instance.

One issue I had with the code, in retrospect, was the fact that I keep switching between 160*scale, 144*scale and love.graphics.getWidth(), love.graphics.getHeight() respectively. In the next version, I plan on using the love.graphics.get[Width|Height]() once, and then the [160|144]*scale for the rest. Do you feel as a viewer the switching confusing? Should I stick to the getWidth(), or keep using the scale variable?

Thanks tentus!

[thelinx]

...but it's called "LÖVE", not "Love2D"

I'm using a reference that people will be able to recognize. This is after all, love2d.org.

And Steam's website is called steampowered.com, but that doesn't mean it's called "Steampowered".

[josefnpat]

...but it's called "LÖVE", not "Love2D"

I'm using a reference that people will be able to recognize. This is after all, love2d.org.

And Steam's website is called steampowered.com, but that doesn't mean it's called "Steampowered".

Fair enough. I will change it in every instance I can.

Should I be pronouncing it as loeve, considering there's an umlaut? (German enunciation)

[thelinx]

Personally, I say loeve. But that part doesn't matter as much.

[kikito]

I pronounce it L-orc-wearing-a-helmet-made-of-testicles-ve.

No, seriously, I just pronounce it like the un-umlauted word.