Difference between revisions of "User:Kraftman"

m (typo fix)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
Getting started with love:
+
== Getting Started ==
 +
This is a basic guide to LOVE, focused on getting you stuck in as fast as possible.
 +
Everyone starts from a different background, so find where you belong and start from there:
  
1 New to coding
+
== New to Coding ==
 +
Coding can be quite daunting to start with, but once you get started, you'll find it pretty addictive. Lua is a relatively easy language to get started with, its quite flexible and is relatively forgiving when it comes to syntax (the structure of your code)
 +
== New to Lua ==
 +
Lua: everything is tables!
 +
dont need to define variables
 +
== New to LOVE ==
  
2 new to lua
+
== Coding in LOVE ==
 +
Lets dive straight in and get something on the screen:
 +
Create a folder (name it whatever you want)
 +
Create a text file inside the folder, and rename it "main.lua"
  
3 new to love!
+
insert the following into main.lua:
ok, so you know how to code, you know lua, but you don't know how love works.
+
<source lang= "Lua">
 +
function love.draw()
 +
  love.print("Hello World", 20, 40)
 +
end
 +
</source>
 +
Drag the entire folder onto the LOVE exe or shortcut, and your first program should run!
  
Love is very open, it provides the bare minimum so that you can build up from it to suit your own needs. this means it isn't bloated by random crap you don't need: you only have what you need, because you only have what you code.
+
love.draw() is a function that is called every frame, and so it is use to draw each object. In this first example, the love.print function prints the desired text to the page, with the coordinates specified. the x and y coordinates are from the top left corner of the screen.
  
Love provides a number of functions which once defined, are called by the love program as and when are needed. These specific functions are called callbacks. Arguably the most important function is love.draw
+
Printing text is great, but how about showing some cool graphics?
  
love.draw is called every frame update, and as a result, can be used to draw every object which you wish to show on the screen. As this function is called so often, it is important to limit the operations inside the function to only those which must be updated every frame.
+
Lets load an image into the game:
  
basic draw ----- example
+
Place any image you want into the folder. Use this one if you want.
 +
Rename the file something simple and appropriate, eg alien.
  
love.update is another callback. it is also called every frame, however it is run before love.draw, and it passes a variable which is the length of time between the drawing of the last frame and the current frame.
+
change the code in main.lua to
 +
<source lang= "Lua">
 +
Alien = love.graphics.newImage("Alien.jpg")
  
example of both update and draw
+
function love.draw()
 +
    love.draw(Alien, 50, 50)
 +
end
 +
</source>
  
if you want an object to shown on your canvas, you need to draw it every frame.
+
Ta da! your image should now be sitting happily in the middle of the screen. As exciting as this is, I'm sure you'll want to do a little more with love, for example, making the alien move.
  
ok, so i can draw an object, ace. how do i move it?
+
To do this, we need the x and y positions of the alien to vary with time.
 +
One way to do this would be to create x and y variables, and vary them every frame. Since love.draw() is called every frame, it seems logical to use this to add small increments to x and y, making the alien appear to move.
 +
However, the amount of time between can vary a lot depending on the amount of processing needed to be done, which would make the speed of the alien appear to vary.
 +
To account for this we need to use love.update(dt) you'll notice that unlike love.draw(), love.update(dt) passes a variable, dt, which is the amount of time that has passed since the last frame was drawn.
 +
By setting a constant speed and multiplying it by by the time since the last frame, the objects movement whiel appear constant despite any framerate lags or spikes.
  
there are similar callbacks, which are triggered based on moue and keyboard events.
+
So will that block of text over, lets see the code:
It is important at this time to differentiate wether you want to do something when the input is first initialized, or if the input is currently there.
 
  
for example, if you want to drag a frame, you need the event of the mouse button being pressed to start the dragging, and while the mouse is still down, updating the position of the object continuously to follow the mouse, and then once the mouse button is released, stopping the object from moving.
 
Of course, how you implement this is completely up to you, and is the joy of the flexibility of LOVE!
 
  
So now you can draw an object, handle mouse and keyboard events, what now?
+
<source lang= "Lua">
Now its up to you. build up from the basics until you have what you want. If there's something you'd like to do but cant, check the wiki, check the forums, ask on IRC.
+
Alien = love.graphics.newImage("Alien.jpg")
 +
X = 50
 +
Y = 50
 +
SPEED = 10
 +
 
 +
function love.update(dt)
 +
X = X + dt*SPEED
 +
end
 +
 
 +
function love.draw()
 +
    love.draw(Alien, X, Y)
 +
end
 +
</source>
 +
 
 +
The alien should shoot off the side off the screen, never to be seen again!
 +
 
 +
I guess you're growing pretty fond of your pet alien by now, and don't want it to escape, so lets trap it inside the window.
 +
 
 +
We can find out the height and width of the window by using
 +
love.graphics.getWidth() and love.graphics.getHeight() which return the size in pixels.
 +
As the alien moves, we need to check if its reached the edge of the window, and change its direction if it does, so it cant escape.
 +
 
 +
 
 +
<source lang= "Lua">
 +
Alien = love.graphics.newImage("Alien.jpg")
 +
X = 50
 +
Y = 50
 +
height = love.graphics.getHeight()
 +
width = love.graphics.getWidth()
 +
reversex = true
 +
SPEED = 10
 +
 
 +
function love.update(dt)
 +
    if X < 0 or X > width then
 +
        reversex = not reversex
 +
    end
 +
 
 +
    if reversex then
 +
        X = X - dt*SPEED
 +
    else
 +
        X = X + dt*SPEED
 +
    end
 +
end
 +
 
 +
function love.draw()
 +
    love.draw(Alien, X, Y)
 +
end
 +
</source>
 +
 
 +
So now the alien bounces left and right off the screen.
 +
 
 +
Understanding love.run
 +
to get our heads around how love works, we'll take a look at love.run
 +
love.run is a function that is called once, and loops indefinatly, incrementing a timer and handling the callbacks and draw operations.
 +
Callbacks are "ties" that you can use to run a set of functions when a certain event occurs, for example love.update and love.draw are called every time a new frame is drawn. love.run looks to see if you have defined these functions, and then runs them if you have.
 +
love.run can be redefined your needs, for example to change the framerate or to define a fixed timestep rather than varying.
 +
if vsync is disabled, the amount of time that all of the functions love.run takes to run will govern the framerate of the game.
 +
 
 +
love.update is called every frame, and is passed the amount of time (in seconds) since the last frame was drawn. the screen is cleared between love.update being called and love.draw being called, so any draws to the screen inside of love.update won't show up.

Latest revision as of 11:01, 17 October 2011

Getting Started

This is a basic guide to LOVE, focused on getting you stuck in as fast as possible. Everyone starts from a different background, so find where you belong and start from there:

New to Coding

Coding can be quite daunting to start with, but once you get started, you'll find it pretty addictive. Lua is a relatively easy language to get started with, its quite flexible and is relatively forgiving when it comes to syntax (the structure of your code)

New to Lua

Lua: everything is tables! dont need to define variables

New to LOVE

Coding in LOVE

Lets dive straight in and get something on the screen: Create a folder (name it whatever you want) Create a text file inside the folder, and rename it "main.lua"

insert the following into main.lua:

function love.draw()
  love.print("Hello World", 20, 40)
end

Drag the entire folder onto the LOVE exe or shortcut, and your first program should run!

love.draw() is a function that is called every frame, and so it is use to draw each object. In this first example, the love.print function prints the desired text to the page, with the coordinates specified. the x and y coordinates are from the top left corner of the screen.

Printing text is great, but how about showing some cool graphics?

Lets load an image into the game:

Place any image you want into the folder. Use this one if you want. Rename the file something simple and appropriate, eg alien.

change the code in main.lua to

Alien = love.graphics.newImage("Alien.jpg")

function love.draw()
    love.draw(Alien, 50, 50)
end

Ta da! your image should now be sitting happily in the middle of the screen. As exciting as this is, I'm sure you'll want to do a little more with love, for example, making the alien move.

To do this, we need the x and y positions of the alien to vary with time. One way to do this would be to create x and y variables, and vary them every frame. Since love.draw() is called every frame, it seems logical to use this to add small increments to x and y, making the alien appear to move. However, the amount of time between can vary a lot depending on the amount of processing needed to be done, which would make the speed of the alien appear to vary. To account for this we need to use love.update(dt) you'll notice that unlike love.draw(), love.update(dt) passes a variable, dt, which is the amount of time that has passed since the last frame was drawn. By setting a constant speed and multiplying it by by the time since the last frame, the objects movement whiel appear constant despite any framerate lags or spikes.

So will that block of text over, lets see the code:


Alien = love.graphics.newImage("Alien.jpg")
X = 50
Y = 50
SPEED = 10

function love.update(dt)
 X = X + dt*SPEED
end

function love.draw()
    love.draw(Alien, X, Y)
end

The alien should shoot off the side off the screen, never to be seen again!

I guess you're growing pretty fond of your pet alien by now, and don't want it to escape, so lets trap it inside the window.

We can find out the height and width of the window by using love.graphics.getWidth() and love.graphics.getHeight() which return the size in pixels. As the alien moves, we need to check if its reached the edge of the window, and change its direction if it does, so it cant escape.


Alien = love.graphics.newImage("Alien.jpg")
X = 50
Y = 50
height = love.graphics.getHeight()
width = love.graphics.getWidth()
reversex = true
SPEED = 10

function love.update(dt)
    if X < 0 or X > width then
        reversex = not reversex
    end

    if reversex then
        X = X - dt*SPEED
    else
        X = X + dt*SPEED
    end
end

function love.draw()
    love.draw(Alien, X, Y)
end

So now the alien bounces left and right off the screen.

Understanding love.run to get our heads around how love works, we'll take a look at love.run love.run is a function that is called once, and loops indefinatly, incrementing a timer and handling the callbacks and draw operations. Callbacks are "ties" that you can use to run a set of functions when a certain event occurs, for example love.update and love.draw are called every time a new frame is drawn. love.run looks to see if you have defined these functions, and then runs them if you have. love.run can be redefined your needs, for example to change the framerate or to define a fixed timestep rather than varying. if vsync is disabled, the amount of time that all of the functions love.run takes to run will govern the framerate of the game.

love.update is called every frame, and is passed the amount of time (in seconds) since the last frame was drawn. the screen is cleared between love.update being called and love.draw being called, so any draws to the screen inside of love.update won't show up.