Difference between revisions of "User:Kraftman"

Line 16: Line 16:
 
insert the following into main.lua:
 
insert the following into main.lua:
 
<source lang= "Lua">
 
<source lang= "Lua">
love.draw()
+
function love.draw()
 
   love.print("Hello World", 20, 40)
 
   love.print("Hello World", 20, 40)
 
end
 
end
Line 28: Line 28:
 
Lets load an image into the game:
 
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
 
<source lang= "Lua">
 
<source lang= "Lua">
 +
Alien = love.graphics.newImage("Alien.jpg")
  
 +
function love.draw()
 +
    love.draw(Alien, 50, 50)
 +
end
 
</source>
 
</source>
  
<source lang= "Lua">
+
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.
  
</source>
+
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.
  
<source lang= "Lua">
+
So will that block of text over, lets see the code:
  
</source>
 
  
ok, so you know how to code, you know lua, but you don't know how love works.
+
<source lang= "Lua">
 +
Alien = love.graphics.newImage("Alien.jpg")
 +
X = 50
 +
Y = 50
 +
SPEED = 10
  
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.
+
function love.update(dt)
 +
X = X + dt*SPEED
 +
end
  
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
+
function love.draw()
 +
    love.draw(Alien, X, Y)
 +
end
 +
</source>
  
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.
+
The alien should shoot off the side off the screen, never to be seen again!
  
basic draw ----- example
+
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.
  
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.
+
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.
  
example of both update and draw
 
  
if you want an object to shown on your canvas, you need to draw it every frame.
+
<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
  
ok, so i can draw an object, ace. how do i move it?
+
function love.update(dt)
 +
    if X < 0 or X > width then
 +
        reversex = not reversex
 +
    end
  
there are similar callbacks, which are triggered based on moue and keyboard events.
+
    if reversex then
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.
+
        X = X - dt*SPEED
 +
    else
 +
        X = X + dt*SPEED
 +
    end
 +
end
  
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.
+
function love.draw()
Of course, how you implement this is completely up to you, and is the joy of the flexibility of LOVE!
+
    love.draw(Alien, X, Y)
 
+
end
So now you can draw an object, handle mouse and keyboard events, what now?
+
</source>
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.
 

Revision as of 21:46, 21 May 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

- to do

New to Lua

- to do

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