Game
Dead Drift

2 years ago

MAKING YOUR CUSTOM BAR IN CONSTRUCT 3 - PART 1!

This is a simple tutorial about creating a custom bar using the native Progress Bar from Construct 3!

If you're interested in this kind of stuff, hop on and click on Read Article below! :)

#indiedev #gamedev


First and foremost -- although this is a Construct 3 tutorial, similar procedures will likely work on any engine or framework. The principles are the same!

So! Let's get to it, none of us have all day!


Part 1: Creating a Standard Progress Bar

Construct 3 has many native types of objects you can use. One of them is the Progress Bar, which you can use for basic bars.

image.png

However, there are limits to what you can do with this bar, and for games, you usually wanna do some fancy, pretty stuff that this basic component won't allow you to do.

So HERE's where we come in! We will use this progress bar in our tutorial; however, we'll use it HIDDEN from the public's eye. Because we're sneaky like that.

For this tutorial, I'm creating a new, blank project and adding a basic Progress Bar, like this:

image.png

Right-click on any Layout, then click on Insert Object and select Progress Bar.

Now we have a Progress Bar in our Layout. This native Progress Bar has a bunch of built-in actions and properties we can use -- and that's why our custom one will use it "under the hood."

But enough of this boring ass bar. Let's make a custom one.

Part 2: Creating a Bar Sprite

Here's where the trickery starts. Our bar is actually going to be a Sprite. A regular sprite.

We'll start by creating one:

image.png

When drawing this sprite, each frame will represent one "state" of this bar. If we want, for instance, a bar that is segmented into 6 parts or slices, we'll draw the sprite with 7 frames, one for each value that this bar can be in and one additional "empty bar" value.

Here's the simple bar I did in ASEprite for this tutorial:

tutorial_bar.gif

Since these frames can be anything you want, you can even make fancy bars that have "fraction units", like Zelda's Heart Bar, which famously tracks hearts, half-hearts, and in some games, quarter-hearts.

(If you want to make bars like this, it won't matter to the Sprite, as it will work the same. However, bear in mind that if the sprite has frames representing less than a "unit", you'll have to consider this when updating the underlying native progress bar.)

The easiest way to import this bar sprite into Construct is like this:

First, you export this bar animation in "spritesheet format". ASEprite has a menu option for that:

image.png

Your beautiful bar animation should be spread out like this, with all its frames side by side:

image.png

Then, to import them, you only have to open the Sprite object you created on Construct, right click on the Animation Frames panel, then click on Import Frames > From Strip:

image.png

You select the spread out spritesheet, set the correct number of frames (in case Construct makes a mistake in counting the frame number, like in my case...):

tutorial_bar2.gif

And... voilá! You have a bar sprite, ready to go!

You can test it by using the Play button on Construct Sprite Editor, to see if everything is all right!

tutorial_bar3.gif

That's it, folks! That's Part 1 of this tutorial, it was getting too big so I had to break it into two parts!

Next time, we're gonna turn this sprite into a working bar, code, and all! See ya then!

Cheers :)



9 comments

Loading...

Next up

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...

A photo with Abacaxi, one of my dogs!

And, yes, we're both scraggly dudes.

Hey, folks! It's been a while since I talked about Dead Drift, I wanted to give you folks a (not exactly) brief update!

Click below on [Read Article]!

We're giving out War Thunder starter pack keys!

Comment on this post to request yours!

Learn more 🔽

QUICK UPDATE on the MISSIONS SYSTEM!

I have been working on this progression layer and things have been going well! Here's a video of me testing this system!

Click on Read Article for more info! :)

#gamedev #indiedev

The sixth winner of our EXTENDED INAYAH Joltbux giveaway is @Sow_My_Stitches !

Enter by completing this quest: https://gamejolt.com/quests/963

We'll pick one winner each day the quest is active! 🤯

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

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!

INAYAH - Life After Gods and The Knightling both have demos on Steam as Part of Next Fest!

Wishlist INAYAH: https://bit.ly/playinayah

Wishlist The Knightling: https://bit.ly/discovertheknightling

Tell us some of the demos you've been playing in the comments!

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