Difference between revisions of "Tutorial:Object Follows Another Object"

(Created page with "== Overview == In this tutorial, you'll be learning how to make an object follow another object. Part 1: Creating the Objects<br> #Part 2:...")
 
m (typos: witha → with a)
 
Line 19: Line 19:
 
     rect.y = 150 -- This will render the rectangle at 150px below along the y-axis.
 
     rect.y = 150 -- This will render the rectangle at 150px below along the y-axis.
 
     rect.w = 100 -- This will render the rectangle with a width of 100px.
 
     rect.w = 100 -- This will render the rectangle with a width of 100px.
     rect.h = 100 -- This will render the rectangle witha height of 100px.
+
     rect.h = 100 -- This will render the rectangle with a height of 100px.
 
end
 
end
  
Line 134: Line 134:
 
     rect.y = 150 -- This will render the rectangle at 150px below along the y-axis.
 
     rect.y = 150 -- This will render the rectangle at 150px below along the y-axis.
 
     rect.w = 100 -- This will render the rectangle with a width of 100px.
 
     rect.w = 100 -- This will render the rectangle with a width of 100px.
     rect.h = 100 -- This will render the rectangle witha height of 100px.
+
     rect.h = 100 -- This will render the rectangle with a height of 100px.
 
     rect.speed = 100 -- This will give the rectangle a movement speed of 100.
 
     rect.speed = 100 -- This will give the rectangle a movement speed of 100.
 
end
 
end

Latest revision as of 17:03, 30 March 2017

Overview

In this tutorial, you'll be learning how to make an object follow another object.

Part 1: Creating the Objects
Part 2: Giving Movement
Part 3: The Whole Code

Part 1: Creating the Objects

To start off, you need to prepare the main.lua. First, we will create and render two objects, a red circle, and a green rectangle. These will be the objects used for this tutorial.

function love.load()
    circle = {}
    circle.x = 150			-- This will render the circle at 150px to the right along the x-axis.
    circle.y = 150			-- This will render the circle at 150px below along the y-axis.

    rect = {}
    rect.x = 300			-- This will render the rectangle at 300px to the right along the x-axis.
    rect.y = 150			-- This will render the rectangle at 150px below along the y-axis.
    rect.w = 100			-- This will render the rectangle with a width of 100px.
    rect.h = 100			-- This will render the rectangle with a height of 100px.
end

function love.update(dt)

end

function love.draw()
    -- This will render the red circle.
    love.graphics.setColor(255, 0, 0)
    love.graphics.circle("fill", circle.x, circle.y, 50)

    -- This will render the green rectangle.
    love.graphics.setColor(0, 255, 0)
    love.graphics.rectangle("fill", rect.x, rect.y, rect.w, rect.h)
end

You will now have something like this:

Part 1. Creating the Objects.png

Part 2: Giving Movement

Next we will make the two objects move. One of them would be controlled by the player. The other one will follow the object controlled by the player. For the purpose of this tutorial, the player will be controlling the red circle. To do this, we will give the circle a speed value and add love.keyboard.isDown in the love.update(dt) function.

function love.load()
    ...
    -- Add below the circle axes.
    circle.speed = 500		-- This will give the circle a movement speed of 500.
end

function love.update(dt)
    -- These conditional statements add keyboard input.
    if love.keyboard.isDown("d") then 				-- If player is holding down 'D',
	circle.x = circle.x + (circle.speed * dt)		-- Move circle to the right.
    end

    if love.keyboard.isDown("a") then 				-- If player is holding down 'A',
	circle.x = circle.x - (circle.speed * dt)		-- Move circle to the left.
    end

    if love.keyboard.isDown("w") then 				-- If player is holding down 'W',
	circle.y = circle.y - (circle.speed * dt)		-- Move circle upwards.
    end

    if love.keyboard.isDown("s") then 				-- If player is holding down 'S',
	circle.y = circle.y + (circle.speed * dt)		-- Move circle downwards.
    end
end

function love.draw()
	...
end

You will now have something like this:

Part 2.1 Giving Movement.gif

We aren't done yet though. We have only gave the red circle some movement. Next, we need to give the green rectangle movement and make it follow the red circle. To do that, we will give the green rectangle a speed value. Next we will check the location of the green rectangle in comparison to the red circle. If the right conditions are met, the green rectangle will move towards the red circle.

function love.load()
    ...
    -- Add below the rectangle values.
    rect.speed = 100		-- This will give the rectangle a movement speed of 100.
end

function love.update(dt)
    ...
    -- Add below the circle movement code.

    -- These will check the locations of the green rectangle in comparison to the red square.

    if rect.x < circle.x then 						-- If the rectangle is to the left of the circle:
	rect.x = rect.x + (rect.speed * 2.5 * dt)			-- Rectangle moves towards the right.
    end
 
    if rect.x > circle.x then 						-- If the rectangle is to the right of the circle:
	rect.x = rect.x - (rect.speed * 2.5 * dt) 			-- Rectangle moves towards the left.
    end
 
    if rect.y < circle.y then 						-- If the rectangle is above the circle:
	rect.y = rect.y + (rect.speed * 2.5 * dt)			-- Rectangle moves downward.
    end
 
    if rect.y > circle.y then 						-- If the rectangle is below the circle:
	rect.y = rect.y - (rect.speed * 2.5 * dt)			-- Rectangle moves upward.
    end
end

function love.draw()
    ...
end

You will now have something like this:

Part 2.2 Object Follows.gif

Congratulations! You've finished the tutorial!

Part 3: The Whole Code

function love.load()
    circle = {}
    circle.x = 150			-- This will render the circle at 150px to the right along the x-axis.
    circle.y = 150			-- This will render the circle at 150px below along the y-axis.
    circle.speed = 500		-- This will give the circle a movement speed of 500.

    rect = {}
    rect.x = 300			-- This will render the rectangle at 300px to the right along the x-axis.
    rect.y = 150			-- This will render the rectangle at 150px below along the y-axis.
    rect.w = 100			-- This will render the rectangle with a width of 100px.
    rect.h = 100			-- This will render the rectangle with a height of 100px.
    rect.speed = 100		-- This will give the rectangle a movement speed of 100.
end

function love.update(dt)
    if love.keyboard.isDown("d") then 				-- If player is holding down 'D',
	circle.x = circle.x + (circle.speed * dt)		-- Move circle to the right.
    end

    if love.keyboard.isDown("a") then 				-- If player is holding down 'A',
	circle.x = circle.x - (circle.speed * dt)		-- Move circle to the left.
    end

    if love.keyboard.isDown("w") then 				-- If player is holding down 'W',
	circle.y = circle.y - (circle.speed * dt)		-- Move circle upwards.
    end

    if love.keyboard.isDown("s") then 				-- If player is holding down 'S',
	circle.y = circle.y + (circle.speed * dt)		-- Move circle downwards.
    end
	
    if rect.x < circle.x then 					-- If the rect is to the left of the circle:
	rect.x = rect.x + (rect.speed * 2.5 * dt)		-- Rectangle moves towards the right.
    end
 
    if rect.x > circle.x then 					-- If the rect is to the right of the circle:
	rect.x = rect.x - (rect.speed * 2.5 * dt) 		-- Rectangle moves towards the left.
    end
 
    if rect.y < circle.y then 					-- If the rect is above the circle:
	rect.y = rect.y + (rect.speed * 2.5 * dt)		-- Rectangle moves downward.
    end
 
    if rect.y > circle.y then 					-- If the rect is below the circle:
	rect.y = rect.y - (rect.speed * 2.5 * dt)		-- Rectangle moves upward.
    end
end

function love.draw()
    love.graphics.setColor(255, 0, 0)
    love.graphics.circle("fill", circle.x, circle.y, 50)

    love.graphics.setColor(0, 255, 0)
    love.graphics.rectangle("fill", rect.x, rect.y, rect.w, rect.h)
end