Creating a simple animation of 2d elements on the LÖVE engine

in #game8 years ago

Hey,
recently I came across a quite nice engine for creating 2D games called LÖVE. This engine allows you to create games using an interpretable language called LUA. LUA is a language similar to JavaScript and it is friendly to people who are just starting their programming adventure. You can write really advanced things in a quite pleasant way. You can also do 3D from the 2D engine through additional libraries that extend the functionality of the engine. The game can be run practically on any platform.

In this article I would like to show you how to read a texture and how to move objects using time. If I screw into this engine more, I will show you more possibilities.

As I've encouraged you (or not) to try this engine, you can install the engine on your system. I will install it on Windows 10, but you can install it on any system. To download the engine, go here. The page with the download looks like this
image.png

You can download the installer or the packed version. The decision is yours. You must also select the 32-bit or 64-bit version. Most systems are already 64-bit, but if you do not know, download the 32-bit version. The installer should allow you to recognize files with the extension ".love" that starts the game.

After installing the engine, running love.exe should see
image.png

When it is, you are ready to act.

If you are on a Windows system, create a folder where you will keep your written game. I created it on the desktop and called it loveGame. Next, let's create a shortcut to the love.exe program, which is in the folerze indicated during the installation of the engine or in a folder unpacked by us. Let's copy the shortcut to our folder with the game.

The next step is to create the main.lua file, which is the main file for our game. We still need to configure our shortcut to interpret our game via love.exe. To do this, right-click on the shortcut and select the Properties option. We should see something like that

IMG_6164.jpg
In the Destination field, we have the path to the engine interpreter. In order for the engine to interpret our game, after the sign "add the path to the folder with the main.lua file." This will allow you to interpret our game directly. There are many possibilities to run the game, but for now this method is simple and enough.
After adding the path, we should have something like that

image.png

When we did, click OK.

Let's go now to create the "game".

We will need the three basic functions provided by the LÖVE engine:

function love.load () - loading

end

function love.update (dt) - update every frame

end

function love.draw () - drawing every frame

end
the love.load function starts at the start of the game, love.update updates our data every frame and the love.draw function is used to draw every frame. As a standard, games can have 30 frames per second, 60 frames per second or as much as our computer will engulf.

Now some information about the syntax we will use here. The first is that the commentary is marked with - a comment. The creation of ifs looks like this

if (x <10) then

  • some instruction
    end
    The instructions do not end with a semicolon;
    Each variable is global, unless it has the prefix local.
    We create the function like this

function name ()

end
After this quick course, let's start with the implementation of our game.

Let's start with loading data.

We need to read some texture, initial position x for objects, the length of the rectangle, the width of the window, the speed of moving objects and some calculation of the boundary to "reflect" objects. We will do all this in the love.load function

function love.load ()
x = 0
speed = 150
crateWidth = 200;
crateImg = love.graphics.newImage ("crate.png")
windowWidth = love.graphics.getWidth ()
border = windowWidth - crateWidth
end
I will not break my steps here and do a few steps at a time.

The variable x stores the starting position of objects. speed stores the speed of moving objects, crateImg stores the object of the loaded image named crate.png. I used the love.graphics.newImage method for loading, with the path to the image as the parameter. The image was loaded on this page. Then I downloaded the width of the window to the variable windowWidth and at the end I calculated the boundary for our rectangle. This is necessary to avoid bouncing on the left border of the rectangle, only on the right side of the rectangle. You will see what I mean later in the article.

Then, we would draw our objects. We can do this in the love.draw function as follows

function love.draw ()

love.graphics.rectangle ("line", x, 50, 200, 150)
love.graphics.draw (crateImg, x, 200)
end
In the above code, we used the love.graphics.rectangle method, which draws a rectangle without a fill (parameterline or fill). The x position of the rectangle has the value in the variable x. This variable changes at each frame within the specified time. The value 50 is position y. In contrast, 200 is width - length and 150 is height - height. As for the love.graphics.draw method, it draws the texture at x dynamically positioned and the y coordinate with a constant value of 200.

Now we have to calculate the position of objects and move them

function love.update (dt)
change = false

if (x <0) then
    speed = -speed
end
if (x> border) then
    change = true
end
if (change) then
    speed = -speed
    change = false
end
x = x + speed * dt

end
This is not the most beautiful code, but it generally causes objects to be reflected if the x coordinate reaches the beginning or end of the window. The most important is the last line x = x + speed * dt, which determines the current position of the objects. The dt parameter is responsible for the time it takes for the computer to generate a frame. It is generally necessary for the game to work identically on fast and slow computers, where the number of frames can vary. If the speed variable has a negative value, the objects move in the opposite direction. As we can see, we use the variable border here, because if we took the length of the window instead, it would cut off our drawn rectangle while moving to the right.

As for the "crate.png" image. If you downloaded it from the page I provided, make sure that the image has the proper name as in the code and that its size is 32 pixels by 32 pixels. At least I set it up and you can do it. You can change the size of the picture even in paint.

It's time to start our game using the shortcut created at the very beginning. Our eyes should get something like that

image.png

Two objects should move simultaneously. This is because their x coordinate is identical. The only difference is the position of y.

If you want to run the game even easier, you can take the texture and main.lua, and compress it into the file filename.love. Thanks to this output, if you have installed the engine, you can start the game directly by double clicking on the file with the left mouse button.

You can also install the engine
on android and upload files of our game into the folder / sdcard / lovegame (main phone directory. If there is no lovegame folder, then you have to create it). Then start the application that should display our game.

This is a short version of the article, but as you can see, with a little work you can create something "reasonably" meaningful. If you like it, I will prepare something more useful. Remember about the documentation contained here, because you have everything you need. There are also various guides that will allow you to create something cool.

Coin Marketplace

STEEM 0.04
TRX 0.33
JST 0.104
BTC 64382.26
ETH 1883.01
USDT 1.00
SBD 0.37