How To Make A Game with GDevelop - UI Hacks (E08)

Summary

In this eighth tutorial by Tristan from Victrus Games, viewers are guided through adding unique UI elements to a game using GDevelop. The video, dubbed 'UI Hacks,' teaches how to create a speedometer displaying the player's velocity and a progress tracker indicating the player's advancement through the level. Tristan demonstrates utilizing scene variables, the Shape Painter object for a dynamic speedometer, and repurposes a draggable slider for a visual progress indicator, enhancing the gaming experience with these creative hacks.

Takeaways

• 🎮 Tristan from Victrus Games is teaching how to make a game with GDevelop, a 2D open-source game engine.
• 🛠️ The video focuses on adding UI elements, specifically a speedometer and a progress tracker, using some unconventional methods.
• 🔢 The speedometer displays the player's current speed, calculated from the object's linear velocity in the Y direction.
• 📝 A scene variable 'player speed' is used to store the current speed, which is then displayed using a text object.
• 🔄 Negative speed values are corrected by multiplying by -1, and the speed is rounded and divided by 10 for readability.
• 🎨 A shape painter object is introduced to create a visual speedometer, using an arc instead of a full circle for a dynamic effect.
• ✨ The shape painter object is customized with an outline color, large outline size, and zero opacity fill for a speedometer look.
• 📊 A progress tracker is created using a repurposed draggable slider to show how far the player has traveled in the level.
• 🔄 The slider's position is dynamically updated based on the player's distance traveled, calculated as a percentage of the total track length.
• 📈 A number object is used to display the percentage of the level completed, with the value clamped between 0 and 1 for accuracy.
• 🔧 The tutorial includes tips on customizing the appearance of the UI elements, such as changing colors, shapes, and adding effects like glow.

Q & A

What is the main focus of the eighth video by Tristan from Victrus Games?

The main focus of the video is to add UI elements such as a speedometer and a progress tracker to a game using the GDevelop 2D open source game engine.

How does the video suggest to determine the player's current speed in the game?

The video suggests using a scene variable called 'player speed' and setting it to the value of the object's linear velocity in the Y direction using the Physics 2 behavior.

What object is used to display the player's speed in the game?

A text object is used to display the player's speed, which is modified to show the value of the 'player speed' variable.

Why does the speed value initially show as a negative number?

The speed value initially shows as negative because the Y-axis increases as you go down, and since the player is moving up, the speed is negative.

How is the negative speed value corrected in the video?

The negative speed value is corrected by multiplying the value by negative one to make it positive.

What is the purpose of using a Shape Painter object in the video?

The Shape Painter object is used to create a visual representation of a speedometer by drawing an arc that moves dynamically based on the player's speed.

How is the progress tracker UI element created in the video?

The progress tracker is created by repurposing a draggable slider and using a number object to display the percentage of the level completed.

What extension is mentioned for creating a slider in the game?

An extension created by the author is mentioned, which uses a Shape Painter and adds the draggable slider behavior.

How does the video suggest to calculate the percentage of the level that the player has completed?

The video suggests calculating the distance traveled by the player, dividing it by the total track length, and then using the result to set the slider value and update the text object displaying the percentage.

What function is used to ensure the percentage value does not exceed 100 or go below 0?

The 'clamp' function is used to enforce a minimum value of 0 and a maximum value of 1 on the percentage value.

What does the video suggest for the next steps after creating the UI elements?

The video suggests creating more levels by tweaking the procedural generation algorithm to add variety to the game in the next video.

Outlines

00:00

🎮 Game Development UI Hacks

This paragraph introduces the video's focus on UI elements in game development using GDevelop, an open-source 2D game engine. The video will demonstrate how to create a speedometer and a progress tracker for the player. The speedometer will display the player's current speed, while the progress tracker will show how far the player has traveled in the game level. The tutorial begins by explaining how to save the current speed as a variable and then how to use a text object to display this variable. The speed value is adjusted for readability and a shape painter object is introduced to create a visual speedometer using an arc drawing technique.

05:00

📊 Crafting a Dynamic Speedometer

The speaker discusses the process of creating a dynamic speedometer using a shape painter object in GDevelop. They explain how to draw an arc that represents the speedometer, starting with a half-circle arc from 180 to 360 degrees. The appearance of the shape painter is customized with an outline color and size, and the fill is made transparent. A glow effect is added to enhance the visual appeal. The dynamic movement of the speedometer is achieved by linking it to the player's speed variable, adjusting the angle to reflect the current speed. The tutorial also covers how to scale the speed value to fit the visual design and ensure it remains within the desired range.

10:00

📏 Progress Tracker Using UI Slider Hack

This section covers the creation of a progress tracker using a draggable slider, repurposed as a visual indicator of the player's progress through the game level. The tutorial starts with installing the necessary extension for the draggable slider behavior. The default appearance and functionality of the slider are explained, including its range and numerical representation. The speaker then describes how to modify the slider's appearance, including the thumb color and shape, and adding a glow effect. The key part of the tutorial is setting up events to update the slider's position based on the player's movement across the level and displaying the progress percentage using a text object. The tutorial concludes with a test of the progress tracker and a summary of the video's content, with a teaser for the next video on creating varied game levels.

Keywords

💡GDevelop

GDevelop is an open-source 2D game engine that allows users to create games without writing any code. It is the main tool discussed in the video, where the tutorial focuses on adding UI elements to a game. The script mentions using GDevelop to create a speedometer and progress tracker, demonstrating its versatility for game development.

💡UI Elements

UI Elements refer to the visual components used in a game's user interface, such as buttons, sliders, and text displays. In the context of the video, the creator is adding a speedometer and progress tracker as UI elements to enhance the player's experience and provide real-time feedback on the game's status.

💡Speedometer

A speedometer is a device that measures and displays the speed of a vehicle or, in the case of this video, a game character. The script describes creating a custom speedometer in GDevelop to show the player's current speed, using a combination of variables, text objects, and a shape painter object.

💡Progress Tracker

A progress tracker is a UI element that visually represents how far a player has advanced in a game level or task. The video script details the creation of a progress tracker using a draggable slider repurposed to automatically move based on the player's position in the game level.

💡Physics2

Physics2 is a behavior in GDevelop that allows for the simulation of realistic physics in a game. The script uses Physics2 to access the linear velocity of the game object, which is then utilized to calculate the player's speed for the speedometer.

💡Variable

In the context of game development and scripting, a variable is a storage location paired with an associated symbolic name, which contains some known or unknown quantity or information, a value. The video script mentions creating variables like 'player speed' to store and manipulate data within the game.

💡Scene Variable

A scene variable in GDevelop is used to store information that persists throughout a game scene. The script refers to creating scene variables such as 'track length' and 'distance traveled' to keep track of the level's length and the player's progress.

💡Shape Painter

The Shape Painter is an object in GDevelop that can draw various shapes on the game screen. The video uses a Shape Painter object to create a custom speedometer dial by drawing an arc and manipulating its properties to match the desired visual effect.

💡Draggable Slider

A draggable slider is a UI element that allows users to interact by dragging a thumb along a track to select a value. In the video, the creator repurposes this element to create a non-interactive progress tracker that automatically updates based on the player's position in the game.

💡Event

In GDevelop, an event is a set of actions triggered by a condition. The script describes using events to create behaviors, such as updating the speedometer and progress tracker based on the player's actions and the game's state.

💡Clamp Function

The clamp function is a mathematical operation used to restrict a value within a specified range. In the video, the clamp function is used to ensure that the progress tracker's value stays between 0 and 1, preventing it from displaying incorrect values.

Highlights

Introduction to the eighth tutorial video on creating a game with GDevelop, focusing on UI elements.

Adding a speedometer to display the player's current speed using unusual object manipulation.

Utilizing scene variables to store the player's speed and accessing Physics 2 properties.

Creating a text object to display the player's speed with modifications for readability.

Addressing the issue of negative speed values due to the Y-axis direction and resolving it.

Introducing the Shape Painter object for versatile and creative UI elements.

Using a Shape Painter object to create a dynamic speedometer with an arc.

Customizing the appearance of the speedometer with effects like glow for aesthetics.

Dynamically adjusting the speedometer's angle based on the player's speed.

Creating a progress tracker to visualize how far the player has traveled in the level.

Repurposing the draggable slider as a progress tracker in an innovative UI hack.

Setting up a variable to track the player's distance traveled and calculating the percentage of level completion.

Using the clamp function to ensure the progress percentage displays correctly without decimals.

Adjusting the slider's properties for a customized look that matches the game's theme.

Linking the progress tracker to the player's movement to update dynamically as the player advances.

Preview of upcoming video content focusing on creating varied levels through procedural generation tweaks.

Invitation for viewers to like, subscribe, and follow on social media for more game development content.

Transcripts

this is tristan with victrus games

hello and welcome back this is our

eighth video on how to make a game with

g develop the 2d open source game engine

in this video we'll add a couple more ui

elements

i'm calling this video ui hacks because

we're going to be using some objects in

slightly unusual ways

we will add a speedometer that shows the

player's current speed and also a

progress tracker that shows how far the

player has traveled in the level

our ui ready to get started

if we're gonna make a speedometer the

first thing we need to do is find out

how fast we're going let's see if we can

save our current speed as a variable

we'll pick a scene variable

call it

[Music]

player speed and we will set it to

the value of our speed to find out what

our speed is let's start by typing our

object name

at the top here where it says physics 2

this will give us access to the

properties that are specific to the

physics 2 behavior there are a ton of

things you can learn about the object

the one that we are most interested in

is this linear velocity in the y

direction okay that saves it as a

variable however there's nothing for us

to look at let's create a text object to

display that variable

i like the way this race timer text

object looks so let's just duplicate it

and that'll keep all of the existing

sizes colors and effects

[Music]

and we'll drag it down here make sure

this object is on the ui layer let's

change the text to display the value of

this variable so the action will apply

to the player speed text object modify

the text

we'll need to use our tostring function

because the text object wants a string

and the speed is a number the variable

player

speed

okay let's see what it looks like

let's move forward and see what happens

oh

so we have a negative number and we've

got all these decimal points the reason

we have negative numbers is because the

y-axis increases as you go down and

since we're moving up that's why the

speed is negative okay to fix the

negative number let's just multiply this

value by negative one

and then to get rid of the decimal

points let's round the text that's being

displayed let's see what it looks like

now

there we go we have no negative numbers

no decimal points i still think it's

kind of hard to read with all these

numbers changing so quickly i think i'm

just going to divide everything by 10 to

keep us under 100 units of speed

[Music]

i'm just going to divide the number

that's displayed by 10.

okay now our speed seems to be easy to

read and looks good now having a number

is great but wouldn't it be cool if it

actually was similar to what a

speedometer does i figured out a simple

way for us to do this using a shape

painter object we haven't talked about

shape painter objects before but they're

very useful and versatile let's add one

let's start with it with the default

values you'll have a black outline color

and the fill color the inside will be

white

now when we drag this shape painter

object onto the screen

it'll show a placeholder icon here

however it doesn't actually show up in

the game to make it do anything you're

gonna have to create an event that draws

something

you click on the speedometer

and down towards the bottom you'll see a

group of actions called drawing for

instance you could draw a circle

position in this circle will make zero

zero and the radius will be one hundred

that zero zero location

is based off the position of the where

we place this shape painter object you

can verify that by looking at the shape

painter and this top option draw the

shapes relative to the object position

in the scene if you take this off

then it is absolute positions so zero

zero is the top left of the screen and

sometimes that's useful but in this case

we're going to leave this checked and

it'll draw it right where we place this

icon all right do you want to see what a

circle looks like

that's the default look of the shape

painter with the default values drawing

a circle not too exciting but like i

said it's highly versatile and it could

do so many things i use this for quite a

few interesting extensions that i've

made and so in this case we're going to

do something kind of a hack because

we're going to use only part of a

drawing let me explain what i mean by

that instead of drawing a circle

let's try drawing a arc let's start this

angle at 180 and end it at 360. if you

imagine like a half circle 180 is the

left side and it'll go up

to 270 at the top

and then 360 is over here at the right

so this should draw a half circle

[Music]

let's change the way it looks a little

bit

i'm going to change the outline color

the outline size and make it pretty big

and for the fill i'm going to actually

set the opacity to zero so that instead

of having a white fill there's going to

be no fill at all

and let's see what this looks like

there we go that kind of looks a little

bit like a speedometer let's add another

effect so it looks nicer let's add the

glow effect to the shape painter

[Music]

choose the black color

and see what it looks like

i think i needed to be a little bit

bigger

so on our draw event we'll change it

from the radius of 100 pixels to 150

pixels on the radius

and it wasn't quite centered so let's

scoot it over a little bit

[Music]

okay that's good enough

oh i've got to get on the right layer i

always make that mistake

[Music]

there we go

i might scoot the text over a little bit

but other than that it's looking really

well this speedometer currently starts

at the angle of 180 and goes to 360. to

make the speedometer move dynamically

what if we set this amount equal to our

speed let me show you what that looks

like

so i'm going to leave our starting angle

at 180 but instead of doing a static 360

let's take the starting angle which is

180 and let's add our variable

[Music]

player speed

so whatever our player speed is will be

added to 100 180 degrees

so that's working pretty good however

it's going way past what i wanted to go

past so the number is too big to shrink

the number we can just divide it let's

divide this number by six

okay i like the way this looks

i think the speedometer is finished next

i want to create a visual indicator that

players can see how far along the level

they have gone for this i'm going to use

another ui hack by repurposing the

draggable slider let me show you what a

slider normally looks like first we need

to install the extension

[Music]

this is an extension that i made to use

it you create a shape painter

and then you add the draggable slider

behavior there's a lot of options here

that will let you choose how it looks

like but let's just show you what the

default look of the slider is

we'll put on our ui layer all right

let's test this

okay so this is what the default slider

looks like it's a ui element that lets

users select a numerical number by

dragging this thumb by default it's a

range of numbers between zero here on

the left and when it's full that's a

value of one so you can almost think of

any number in here is a number between

zero and one

and the middle of course will be 0.5

we're going to use this in a way that

doesn't let the users interact with it

instead our events are going to change

the position of the slider based on how

far the player has moved across the

level let's also create a number that

will display the progress i'll copy the

player speed object

[Music]

and i'll use this to display the percent

complete

i'll change the placeholder text to show

that it's a percent

[Music]

let's see if we can make this slider

look a little nicer

to change the way a slider looks you

will change the properties under the

behavior feel free to set these however

you like i'm going to choose what i

think looks nice

i'm going to make the thumb color match

the color of the player let's change the

thumb shape from a circle to a rectangle

[Music]

let's also add the glow effect to this

shape painter

and let's see how it looks now

nice

what we want is for this progress

tracker just to move along the track the

same percentage that the actual player

is traveling

okay let's see if we can set that using

events

[Music]

in order for us to calculate the

percentage of the level that the player

has completed we first need to know how

long the actual level is

let's set a variable to keep track of

this

[Music]

we'll set it to the distance between the

starting and finish line

and we want to know about their y values

and the track length is not going to

change so let's just do it one time at

the beginning of the scene this will

save us some cpu cycles next we need to

know how far the player has traveled so

let's do another scene variable

distance traveled and instead of

measuring between the starting and

finish line let's measure between the

starting line and the player

now that we've calculated the distance

traveled and we know the length of the

track we can easily divide those to find

the percentage that has been traveled so

far

[Music]

so let's use this number we just

calculated and put it inside the text

object for percent traveled

[Music]

[Applause]

modify the text

and we'll set it to that variable we'll

have to use the tostring function to

convert the number into a string

let's do a quick test

okay it's showing a negative number with

a lot of decimals

the reason it's the negative number is

because we're below the starting line

and it gets to about zero at the start

line and becomes positive so we can fix

that by using the clamp function the

clamp function is very useful it

basically enforces a minimum and a

maximum value

so there's a clamp function

and the first parameter is your starting

number and then the minimum number and

the maximum number so this clamp is

going to make sure that whatever this

calculates out to be it will set a

minimum value of zero and a maximum of

one to get rid of those extra decimal

points let's multiply this number by 100

[Music]

and we will round it

and let's also add that percent symbol

at the end

[Music]

okay our number is incrementing but our

slider is not moving

so for action

we will choose the slider progress

tracker

[Music]

and we're going to set the slider value

we'll set it to the variable

let's see if that worked

[Music]

there it goes it's sliding across

because we have that clam function it

should stop at the 100

complete i'll do my best to make it

through this level

[Music]

100

that's all for this video in our next

video we will create a few more levels

by tweaking our procedural generation

algorithm to give some variety to the

game if you're finding these videos

valuable please give a like and

subscribe and if you want to see what

else i'm working on follow me at

victorusgames on twitter and lastly you

are welcome to join us on our discord

server thanks for watching and i'll see

you on the next video