How To Make A Game with GDevelop - UI Hacks (E08)
Summary
TLDRIn 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
🎮 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.
📊 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.
📏 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.
Mindmap
Keywords
💡GDevelop
💡UI Elements
💡Speedometer
💡Progress Tracker
💡Physics2
💡Variable
💡Scene Variable
💡Shape Painter
💡Draggable Slider
💡Event
💡Clamp Function
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
Weitere ähnliche Videos ansehen
How To Make A Game with GDevelop - Levels (E09)
How To Make A Game with GDevelop - Juice (E10)
How To Make A Game with GDevelop - Menus and Publishing (E11)
How To Make A Video Game - GDevelop Beginner Tutorial
How To Make a Topdown RPG in Godot 4: Adding Health Bars and Health UI! (Part 4)
Optimization: Do this to your UI in Unity & Thing to be careful about...
5.0 / 5 (0 votes)