I had the idea to make this tutorial once I was coding my Mission Screen on Dead Drift and realized that making the "springy" movement it does is actually quite easy in Construct 3.
So let's go! Let's see how it's done!
Part 1: The Sine Behavior
We begin by creating a simple sprite. We will be using it as an example for the bounce/swing movement, so you can draw or use whatever image you want!
I'll use one of my Sock Pupper stickers, the Flowey one! Hello, Flowey Sock! :)
Alright!
One of the cool things about using Construct is that you get a bunch of useful, pre-coded behaviors out of the box! This time, we're going to be using the Sine
behavior. We'll use it whenever we want to make wave-ish-like movements.
To add this behavior to our sprite, select it on the layout where you're making this and, on the Properties
tab (usually on the left-hand side of the screen), click on Add/Edit Behaviors
:
Part 2: Configuring the Sine behavior
Once you've added this behavior to your Sprite, its parameters section should appear in the Properties
tab.
See that Preview
checkbox there? Click on it! Give this boy a spin!
It's swinging already! That's because it's using the default Sine behavior parameters. Play around with these properties a bit! You'll see that there's a lot of crazy stuff you can do with the Sine
behavior.
Part 3: Back To Our Movement
If you've played with the parameters (as I told you to do... just sayin'...) you might have realized that the Magnitude
parameter controls how "wide" our wavey movement will be.
And what is the relation of this width to the movement we are trying to create? It diminishes with time.
So now we're going to... that's right, you already know it... we'll create an event in our Event Sheet to produce this "braking" behavior.
Before that, however, I'm going to make my Flowey do a vertical swing, but a faster one (this speed is controlled by the Period
parameter: the smaller the period of a wave, the faster it "vibrates").
That's it for now, folks! Next time, we're gonna create some events and finally make this looks more like a spring or something!
See ya! :)
10 comments