Difference between revisions of "User:Kraftman"

 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
 
== Getting Started ==  
 
== Getting Started ==  
 
This is a basic guide to LOVE, focused on getting you stuck in as fast as possible.
 
This is a basic guide to LOVE, focused on getting you stuck in as fast as possible.
Line 5: Line 4:
  
 
== New to Coding ==
 
== New to Coding ==
- to do
+
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 ==
 
== New to Lua ==
- to do
+
Lua: everything is tables!
 +
dont need to define variables
 
== New to LOVE ==
 
== New to LOVE ==
  
Line 16: Line 16:
  
 
insert the following into main.lua:
 
insert the following into main.lua:
<source = "Lua">
+
<source lang= "Lua">
love.draw()
+
function love.draw()
 
   love.print("Hello World", 20, 40)
 
   love.print("Hello World", 20, 40)
 
end
 
end
Line 29: Line 29:
 
Lets load an image into the game:
 
Lets load an image into the game:
  
<source = "Lua">
+
Place any image you want into the folder. Use this one if you want.
 +
Rename the file something simple and appropriate, eg alien.
  
</source>
+
change the code in main.lua to
 
+
<source lang= "Lua">
<source = "Lua">
+
Alien = love.graphics.newImage("Alien.jpg")
  
 +
function love.draw()
 +
    love.draw(Alien, 50, 50)
 +
end
 
</source>
 
</source>
  
<source = "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 = "Lua">
+
So will that block of text over, lets see the code:
  
</source>
 
  
 +
<source lang= "Lua">
 +
Alien = love.graphics.newImage("Alien.jpg")
 +
X = 50
 +
Y = 50
 +
SPEED = 10
  
 +
function love.update(dt)
 +
X = X + dt*SPEED
 +
end
  
ok, so you know how to code, you know lua, but you don't know how love works.
+
function love.draw()
 +
    love.draw(Alien, X, Y)
 +
end
 +
</source>
  
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.
+
The alien should shoot off the side off the screen, never to be seen again!
  
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
+
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.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.
+
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.
  
basic draw ----- example
 
  
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.
+
<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
  
example of both update and draw
+
function love.update(dt)
 +
    if X < 0 or X > width then
 +
        reversex = not reversex
 +
    end
  
if you want an object to shown on your canvas, you need to draw it every frame.
+
    if reversex then
 +
        X = X - dt*SPEED
 +
    else
 +
        X = X + dt*SPEED
 +
    end
 +
end
  
ok, so i can draw an object, ace. how do i move it?
+
function love.draw()
 +
    love.draw(Alien, X, Y)
 +
end
 +
</source>
  
there are similar callbacks, which are triggered based on moue and keyboard events.
+
So now the alien bounces left and right off the screen.
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.
+
Understanding love.run
Of course, how you implement this is completely up to you, and is the joy of the flexibility of LOVE!
+
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.
  
So now you can draw an object, handle mouse and keyboard events, what now?
+
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.
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.
 

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.