3 years ago

Guide:
Custom basic Top-Down movement


Introduction:


Greetings,

You might have wanted a simple Topdown movement that gets the job done in your project, though you probably relized that the built in "Eight directions" movement sucks in terms of collisions, it can drag on walls or bounce, pretty inconsistant and buggy

That's why you mostly have heard of someone telling you "just make your own movement"

If you never done any custom movement before and want to get started hopefully this guide will help a bit :)


X and Y axis:


You probably already know about X and Y axis from elementry school, in Fusion they represent position of objects in the frame

X: horizontal
Y: Vertical

The more you increase the X axis the more you go to the right side and vice versa

you probably know that when you decrease Y you go down, but Y is actually flipped in most engines (Including Fusion2.5)

So if we simplfied it:

  • X+ goes right

  • X- goes left

  • Y- goes up

  • Y+ goes down

axis_demo.png

Basics of movement:


So first of all we add an Active object into the frame, this what we will be controlling:

step1_hitbox.jpg

So to get started we want to move this object to the right direction

To do this we already know that X+ means heading to the right so we would basically be

Setting X axis to it self + the amount of pixels to bypass

we can move it by something like 4 pixel so it would be
Set X Position to X Position + 4

we can make this only happen when we press and hold the "Right Arrow" key

step2_first_event.jpg
step2_first_event.gif

Now after repeating the same method with other direction you should end up with something like this:

step3_finish_rest.jpg

Run the project and you should end up with an object that can go to move to all 8 directions!

8_dir_demo.gif

Now after that is done you can find that when you want to the change the speed of the movement you are required to go through each event and change the number, which is highly unintutive and can only get you so far

That's why you should use Alterable Values for this!

Thes are basically containers that can hold numbers in memory, imagine them as labled boxes that you can retrieve or add stuff to at anytime

In our case we want to hold the player's speed, so create a new alterable value for "Player: hitbox" and name it "Spd" (speed in short) then set it's value to the speed you want

step4_speed_value.png

After creating this value we should alter the previous events to utilize them instead, here an example of how you can replace it:

step5_replace_with_value.gif

repeat the same process for the rest and then run the project again to make sure nothing broke from your last successful run

step5_replace_with_value.jpg

Now you can edit this value at anytime pretty easily


Collisions:


First add another Active object as the obstacle blocking you, and make a simple testing room with it:

step6_obstacles.jpg

The basic idea of collision is push away an object from obstacle in the opposite direction it collided with

In other terms it's basically Newton's second law

by now you might think an event like this will work without a problem

step7_wrong_detection.jpg

But sadly no. as It can leave a gap when colliding with an obstacle, the reason it happens is mix between player's speed, it's initial position and obstacles position

collide_gap.gif

We don't have to worry about this though, what you need to know that it is happens mostly because we are "teleporting" the player on collision instead of passing it through every collision check then moving it by 1px

To solve this let's say the object is moving 5 pixels per frame, then we basically do this:

step8_correct_detection.jpg

As you might have noticed the object moves only my 1px but the same event is duplicated 5 times

that means that each frame these will be all excuted at once and will check the collision for 5 times, which results in passing the positions before the next frame renders instead of teleporting a given amount of pixels

collide_no_gap.gif

Althorugh this fixes the problem, it isn't ideal to use at all, what if the object moves 24 pixels per frame!? that means the same event dupicated 24 times.. yikes!

That's luckly why Fastloops exist, they can repeat and event a given amount of time before the next frame renders (works exactly as duplicated events)

Loops need to be ran befoe checked, you can run a loop with a given name and given number of times

The name will be used to check for the loop and number of times will be used to repeat the event with, in our case we will run it number of "Spd" times

Here is an example of how to replace the previous events with the fastloop approch:

step9_collision_loops.gif

Now repeat the same method for the rest of directions and you should end up with something like this:

step10_collision_loops_completed.jpg

Note: the exact order of these events are really important , the whole procces works with multiple directions is because each push direction is tesed between each input check

If you still didn't fully understand it just know it magically works by the power of event order XD

Anways if all goes fine, you should end up with a complete basic Top-Down movement:

movement_complete.gif

Just know that these are the absolute basics, there are still more flexible ways to the same thing, and ofc there is still acceleration, deaceleration, DeltaTime and slopes all stuff that are optional and will gain knowlege of by practicing a lot

And finally Thanks for reading! hope this was a bit helpful and sorry if it was hard to understand in some aspects. I will try to take suggestions to improve the parts I might have explained poorly

Project mfa: https://drive.google.com/file/d/1uiQvwQW2LBBlbI3nTQZo7jtVV8n5m1Ee/view?usp=sharing



3 comments

Loading...

Next up

Example: Fractle Tree 🌳 https://youtu.be/DuQpeLoSjHs

Conway's Game of Life A cellurar automata algorithm made in Fusion 2.5! https://youtu.be/1mnIOPBiaow Download Example: https://drive.google.com/drive/folders/1vRgZFXZm5WGYFDdBsBYcaG2S…

((APRIL FOOLS 2022)) Fusion 3 news round-up! Clickteam shared new info about the long awaited Fusion 3 engine Check out there blog post, a lot of awesome features announced: https://is.gd/oZYAcc

Simple Localization for Clickteam Fusion 2.5+!

This .mfa includes only the necessary code and tips to implement your own localization system using .csv files to store the texts!

Open the article to get started.

Perfect as all things should be

New wisp. Whip, perform numerous cuts in front of the character.

New ability. Back Dash, perform a quick dash backwards when on the ground.

The entirety of CLICKteam Fusion 2.5 can be used by clicking.

Two Open-Source Minimap Examples! 🗺️ (Check Below)

Here's a screenshot from the latest version of my custom level editor (with vertex lighting).

(APRIL FOOLS 24) The Clickstore and Passport are finally back again! New look and features (some still in testing phase) +more:

- Wishlist - Discounts - Better author editing tools - New UI (mobile friendly)

https://clickstore.clickteam.com/ https://community.clickteam.com/passport/