Game
Dead Drift

2 years ago

MAKING YOUR CUSTOM BAR IN CONSTRUCT 3 - PART 2!

Time for Part 2 of our two-part tutorial on how to create your custom bar in Construct 3!

Click on [Read Article] below!

#gamedev #indiedev


Ok! Let's continue from the point where we stopped last time!

If you have any questions or comments, refrain from asking them during the tutorial and ask them at the end (in the Comment section!)


In our last tutorial, we created two different Construct objects: a Progress Bar (which functionally we'll use but that we think is ugly) and a Sprite (which has no bar functionally but looks pretty).

Now... all we need to do is tie these suckers together. So let's

Part 3: Tying These Suckers Together

Ok, fellas. Easy part's over.

Now the time has come for us to crack our knuckles and to program some events.

This is the event that tells our Custom Bar (a glorified Sprite) to "follow" the Progress Bar wherever it goes:

image.png

Confusing?

It can be! What does this crap do?

Let's break it down. Using MATHS (sorry... we can't avoid it).

Since the frames in our Sprite have been created to "pretend" to be the multiple states the bar can be, we want the sprite to "be in the frame" that corresponds to where the bar would be. For a 7-frame Sprite, it means this:

00% to 14% -> Frame 0

15% to 30% -> Frame 1

31% to 45% -> Frame 2

...

86% to 100% -> Frame 7

Technically speaking, this rule could be programmed to check 7 times and have a different event for each frame. However, this is not very practical... especially if you had 20, 40, or 100 frames!

Lucky for us, there's a formula that can save us from this trouble!

If we take the original Progress Bar parameters called Progress and Maximum (see? I told you using the native Progress Bar would help us) and divide the former by the latter, we'll have a number that ranges from 0 to 1 (because Progress can't be bigger than Maximum, and when Progress = Maximum, Progress/Maximum = 1).

So, when we multiply this fraction Progress/Maximum by the total number of frames T our Sprite has, this is what we get:

Progress/Maximum x Total Frames = Result

0.00 x 7 = 0.00

0.15 x 7 = 1.05

0.29 x 7 = 2.03

0.43 x 7 = 3.01

0.58 x 7 = 4.06

0.72 x 7 = 5.04

0.86 x 7 = 6.02

1.00 x 7 = 7.00

If we round the numbers we have in the Result column up, we'll have the frames we want, as the bar goes up!

That's why the formula works.

Now let's test this baby out.

Part 4: Testing The Baby

For testing purposes, here's what we'll do. We will create an event in our event sheet that, at every 0.8 seconds, will randomize the value in our Progress Bar, between 0 and 100. Here's how this event should look like:

image.png

Now let's see what happens when we press play!

tutorial_bar4.gif

See?! It works!!!

I'm also surprised! Usually, my code doesn't work on the first try!

Now, if we were making our own game, we, of course, would be randomizing the bar's value. We would be setting it to the value we want, decreasing it, and increasing it when it would make sense. But the principle would be the same: we would change the value in Progress Bar, and this change would reflect in our Sprite Bar.

image.png

Now, before we finish, the only thing we need to do is make the Progress Bar invisible. Forever. This is done with the mere de-checking of a check box:

image.png

Now, when we press play...

tutorial_bar5.gif

It's like the ugly, default Progress Bar didn't even exist in the first place!


Well, that's the end of our custom bar tutorial, folks! Hope you folks have enjoyed it and that you found it useful!

If you had any trouble during any part or if you wanna make other comments, or even request some different type of tutorial, let me know in the comments! :)

Bye!



11 comments

Loading...

Next up

Fixed some nasty bugs, changed the dynamic font to Eeve Somepx's great "Hungry" font, and few things more!

Now it's time to go to sleep! See ya tomorrow!

DEAD DRIFT UPDATE!

I'm still working on the missions, and it's been harder than I anticipated. However, I was able to make missions work (even if the UI is a little janky)!

Click on Read Article for more info!

It's coming, folks!!! Anyone else excited???

Our 2024 Advent Calendar has opened! Day 18: @Otis_Le_PoOtis is the Creator of Bondeeā€™s Barnyard and posts updates about their dev journey and their work on the sequel!) Accept the quest and give them a follow to get Coins and a seasonal sticker!

For this #DrawABirdDay I decided to make a simple animation as if Greedy Grackle was one of the Socks from Sock Town!

Here's Greedy Grackle Sock!

#pixelart #animation

Happy #WIPWednesday!

Are you working on a game?

Making some art?

Practicing a song?

Something else?

Tell us in the comments!

It's OK if I repost my Jack Black Bowser drawing for the #MarioMovie quest? Some people might have missed it!

Oh, and if you don't know what this drawing is referencing, click on Read Article for the link!

Everybody talking about the Super Mario movie and here I am thinking how cool it would be if they made a movie out of THIS game...

@Miles_Games is a Jolter to Watch! They post great game dev updates about the holiday-themed platformer TEAM SLAY-BELLS! Follow them before the quest ends on December 24 and you'll get Coins!

WORKING A BIT ON THE MISSIONS UI!

Last time I posted a kinda bare bones version of this screen, now we got some of its art!

Still not totally satisfied with all elements, but I guess it's already a nice improvement :)

#pixelart #gamedev #indiedev