Difference between revisions of "Tutorial:Hamster Ball"

m
 
(9 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{#set:LOVE version=0.6.0}}
+
[[Image:Tutorial-HamsterBall.jpg|thumb|Screenshot of the hamster ball.]][[Image:Resource-HamsterBall.png|thumb|Hamster Ball Image (Note: The tutorial assumes you name this hamster.png)]]
{{#set:Description=Image loading, key movement}}
 
 
 
[[Image:Tutorial-HamsterBall.jpg|thumb|Screenshot of the hamster ball.]][[Image:Resource-HamsterBall.png|thumb|Hamster Ball Image]]
 
 
This game is a very simple example of how to add a resource (in this case a simple image) to the engine and then move that around with the arrow keys. Here is the entire source, in case you haven't downloaded it:
 
This game is a very simple example of how to add a resource (in this case a simple image) to the engine and then move that around with the arrow keys. Here is the entire source, in case you haven't downloaded it:
 
<source lang="lua">
 
<source lang="lua">
Line 8: Line 5:
 
-- Add an image to the game and move it around using  
 
-- Add an image to the game and move it around using  
 
-- the arrow keys.
 
-- the arrow keys.
-- compatible with löve 0.6.0
+
-- compatible with löve 0.6.0 and up
  
 
function love.load()
 
function love.load()
Line 14: Line 11:
 
   x = 50
 
   x = 50
 
   y = 50
 
   y = 50
   speed = 100
+
   speed = 300
 
end
 
end
  
Line 20: Line 17:
 
   if love.keyboard.isDown("right") then
 
   if love.keyboard.isDown("right") then
 
       x = x + (speed * dt)
 
       x = x + (speed * dt)
   elseif love.keyboard.isDown("left") then
+
   end
 +
  if love.keyboard.isDown("left") then
 
       x = x - (speed * dt)
 
       x = x - (speed * dt)
 
   end
 
   end
Line 26: Line 24:
 
   if love.keyboard.isDown("down") then
 
   if love.keyboard.isDown("down") then
 
       y = y + (speed * dt)
 
       y = y + (speed * dt)
   elseif love.keyboard.isDown("up") then
+
   end
 +
  if love.keyboard.isDown("up") then
 
       y = y - (speed * dt)
 
       y = y - (speed * dt)
 
   end
 
   end
Line 65: Line 64:
 
   x = 50
 
   x = 50
 
   y = 50
 
   y = 50
   speed = 100
+
   speed = 300
 
end
 
end
 
</source>
 
</source>
Line 75: Line 74:
 
function love.update(dt)
 
function love.update(dt)
 
   if love.keyboard.isDown("right") then
 
   if love.keyboard.isDown("right") then
       x = x + (speed * dt);
+
       x = x + (speed * dt)
   elseif love.keyboard.isDown("left") then
+
   end
       x = x - (speed * dt);
+
  if love.keyboard.isDown("left") then
 +
       x = x - (speed * dt)
 
   end
 
   end
  
 
   if love.keyboard.isDown("down") then
 
   if love.keyboard.isDown("down") then
       y = y + (speed * dt);
+
       y = y + (speed * dt)
   elseif love.keyboard.isDown("up") then
+
   end
       y = y - (speed * dt);
+
  if love.keyboard.isDown("up") then
 +
       y = y - (speed * dt)
 
   end
 
   end
 
end
 
end
 
</source>
 
</source>
  
First of all you will see that this function accepts a parameter called <tt>dt</tt> (an abbreviation of "delta-time") which represents the amount of time which has passed since this function was last called. It is in seconds, but because of the speed of todays processors is usually smaller than 1 (values like 0.01 is common). We are using this value to move the hamster ball at the same speed, no matter how fast the player's computer is.
+
First of all you will see that this function accepts a parameter called <tt>[[dt]]</tt> (an abbreviation of "delta-time") which represents the amount of time which has passed since this function was last called. It is in seconds, but because of the speed of todays processors is usually smaller than 1 (values like 0.01 are common). We are using this value to move the hamster ball at the same speed, no matter how fast the player's computer is.
  
In the function we check whether the keys right, left, up or down are pressed by calling the <tt>[[love.keyboard.isDown|love.keyboard.isDown(key)]]</tt> function with the appropriate parameters (a full list of the keyboard keys can be found [[KeyConstant|here]]). If any of the right keys are pressed then the <tt>x</tt> or <tt>y</tt> values will be incremented by the appropriate amount (in this case <tt>speed</tt> times <tt>dt</tt> which means that the ball will move at a speed of 100 pixels per second; try changing the <tt>speed</tt> value in the load function to see what happens).
+
In the function we check whether the keys right, left, up or down are pressed by calling the <tt>[[love.keyboard.isDown|love.keyboard.isDown(key)]]</tt> function with the appropriate parameters (a full list of the keyboard keys can be found [[KeyConstant|here]]). If any of the right keys are pressed then the <tt>x</tt> or <tt>y</tt> values will be incremented by the appropriate amount (in this case <tt>speed</tt> times <tt>dt</tt> which means that the ball will move at a speed of 300 pixels per second; try changing the <tt>speed</tt> value in the load function to see what happens).
  
 
The draw function looks like this:
 
The draw function looks like this:
Line 105: Line 106:
 
Remember that .love files can be opened in standard archiving software, like WinZip or 7zip. They are actually just renamed .zip-files!
 
Remember that .love files can be opened in standard archiving software, like WinZip or 7zip. They are actually just renamed .zip-files!
  
 +
{{#set:LOVE Version=0.6.0}}
 +
{{#set:Description=Image loading, key movement}}
 
[[Category:Tutorials]]
 
[[Category:Tutorials]]
 +
== Other languages ==
 +
{{i18n|Tutorial:Hamster Ball}}

Latest revision as of 08:28, 28 August 2016

Screenshot of the hamster ball.
Hamster Ball Image (Note: The tutorial assumes you name this hamster.png)

This game is a very simple example of how to add a resource (in this case a simple image) to the engine and then move that around with the arrow keys. Here is the entire source, in case you haven't downloaded it:

-- Tutorial 1: Hamster Ball
-- Add an image to the game and move it around using 
-- the arrow keys.
-- compatible with löve 0.6.0 and up

function love.load()
   hamster = love.graphics.newImage("hamster.png")
   x = 50
   y = 50
   speed = 300
end

function love.update(dt)
   if love.keyboard.isDown("right") then
      x = x + (speed * dt)
   end
   if love.keyboard.isDown("left") then
      x = x - (speed * dt)
   end

   if love.keyboard.isDown("down") then
      y = y + (speed * dt)
   end
   if love.keyboard.isDown("up") then
      y = y - (speed * dt)
   end
end

function love.draw()
   love.graphics.draw(hamster, x, y)
end

It's not the most complicated program in the world, but we have to start somewhere. Keep in mind that everything after the -- characters in the code is a comment and will be ignored by the program.

-- You can write whatever you want here!

Alright, next you need to know that for things to work you need to have a function called load. This is where the game is initiated and where everything begins. Although they aren't strictly required, it's best to also include love.update() and love.draw() for now. The meaning of the various functions will be described shortly.

-- This is an empty program
function love.load()
end

function love.update(dt)
end

function love.draw()
end

Alright, let's get down to explaining what the specific code for this game does.

The load function looks like this:

function love.load()
   hamster = love.graphics.newImage("hamster.png")
   x = 50
   y = 50
   speed = 300
end

What we are doing here is adding the file hamster.png to our game assigning that image to a variable called hamster. We are also declaring three variables: x, y and speed. These will all play a part in the program later.

The update function looks like this:

function love.update(dt)
   if love.keyboard.isDown("right") then
      x = x + (speed * dt)
   end
   if love.keyboard.isDown("left") then
      x = x - (speed * dt)
   end

   if love.keyboard.isDown("down") then
      y = y + (speed * dt)
   end
   if love.keyboard.isDown("up") then
      y = y - (speed * dt)
   end
end

First of all you will see that this function accepts a parameter called dt (an abbreviation of "delta-time") which represents the amount of time which has passed since this function was last called. It is in seconds, but because of the speed of todays processors is usually smaller than 1 (values like 0.01 are common). We are using this value to move the hamster ball at the same speed, no matter how fast the player's computer is.

In the function we check whether the keys right, left, up or down are pressed by calling the love.keyboard.isDown(key) function with the appropriate parameters (a full list of the keyboard keys can be found here). If any of the right keys are pressed then the x or y values will be incremented by the appropriate amount (in this case speed times dt which means that the ball will move at a speed of 300 pixels per second; try changing the speed value in the load function to see what happens).

The draw function looks like this:

function love.draw()
   love.graphics.draw(hamster, x, y)
end

Not a lot happening, but this is where the magic is done. The image contained in the hamster variable is drawn at the x and y coordinate.

That is basically it for your first game. Try messing around with the variables in the love.load function to see what effects they have.

Remember that .love files can be opened in standard archiving software, like WinZip or 7zip. They are actually just renamed .zip-files!

Other languages