[Video Tutorial] Love Tutorial ~45min

Showcase your libraries, tools and other projects that help your fellow love users.
User avatar
josefnpat
Inner party member
Posts: 955
Joined: Wed Oct 05, 2011 1:36 am
Location: your basement
Contact:

[Video Tutorial] Love Tutorial ~45min

Post by josefnpat »

Image

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
Last edited by josefnpat on Wed Sep 28, 2016 4:17 am, edited 2 times in total.
Missing Sentinel Software | Twitter

FORCIBLY IGNORED.
<leafo> when in doubt delete all of your code
<bartbes> git rm -r *
<bartbes> git commit -m "Fixed all bugs"
<bartbes> git push
coffee
Party member
Posts: 1206
Joined: Wed Nov 02, 2011 9:07 pm

Re: [Video Tutorial] Love2d Tutorial ~45min

Post by 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.
User avatar
thelinx
The Strongest
Posts: 857
Joined: Fri Sep 26, 2008 3:56 pm
Location: Sweden

Re: [Video Tutorial] Love2d Tutorial ~45min

Post by thelinx »

...but it's called "LÖVE", not "Love2D"
User avatar
josefnpat
Inner party member
Posts: 955
Joined: Wed Oct 05, 2011 1:36 am
Location: your basement
Contact:

Re: [Video Tutorial] Love2d Tutorial ~45min

Post by josefnpat »

thelinx wrote:...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?
coffee wrote: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.
Missing Sentinel Software | Twitter

FORCIBLY IGNORED.
<leafo> when in doubt delete all of your code
<bartbes> git rm -r *
<bartbes> git commit -m "Fixed all bugs"
<bartbes> git push
User avatar
tentus
Inner party member
Posts: 1060
Joined: Sun Oct 31, 2010 7:56 pm
Location: Appalachia
Contact:

Re: [Video Tutorial] Love Tutorial ~45min

Post by 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.
Kurosuke needs beta testers
User avatar
josefnpat
Inner party member
Posts: 955
Joined: Wed Oct 05, 2011 1:36 am
Location: your basement
Contact:

Re: [Video Tutorial] Love Tutorial ~45min

Post by josefnpat »

tentus wrote: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!
Missing Sentinel Software | Twitter

FORCIBLY IGNORED.
<leafo> when in doubt delete all of your code
<bartbes> git rm -r *
<bartbes> git commit -m "Fixed all bugs"
<bartbes> git push
User avatar
thelinx
The Strongest
Posts: 857
Joined: Fri Sep 26, 2008 3:56 pm
Location: Sweden

Re: [Video Tutorial] Love2d Tutorial ~45min

Post by thelinx »

josefnpat wrote:
thelinx wrote:...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".
User avatar
josefnpat
Inner party member
Posts: 955
Joined: Wed Oct 05, 2011 1:36 am
Location: your basement
Contact:

Re: [Video Tutorial] Love2d Tutorial ~45min

Post by josefnpat »

thelinx wrote:
josefnpat wrote:
thelinx wrote:...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)
Missing Sentinel Software | Twitter

FORCIBLY IGNORED.
<leafo> when in doubt delete all of your code
<bartbes> git rm -r *
<bartbes> git commit -m "Fixed all bugs"
<bartbes> git push
User avatar
thelinx
The Strongest
Posts: 857
Joined: Fri Sep 26, 2008 3:56 pm
Location: Sweden

Re: [Video Tutorial] Love Tutorial ~45min

Post by thelinx »

Personally, I say loeve. But that part doesn't matter as much.
User avatar
kikito
Inner party member
Posts: 3153
Joined: Sat Oct 03, 2009 5:22 pm
Location: Madrid, Spain
Contact:

Re: [Video Tutorial] Love Tutorial ~45min

Post by kikito »

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

No, seriously, I just pronounce it like the un-umlauted word.
When I write def I mean function.
Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests