Tip of the Week | 𝓐𝔀𝓮𝓼𝓸𝓶𝓮_𝓔

Open Source Code & How Tos
, , , , ,
95

Collisions Using Conditionals

So yeah, there still hasn’t been a proper tutorial on this, has there? This is one of the most useful techniques in Hopscotch right now, and here I am, with a few words to close the gap.

Difficulty: 2/5
Best Use Case: Games, or really any time you use collisions with more than 3 objects on the stage. Seriously, your projects are going to feel so much smoother if you use this.

Demo Project – Fast Collisions

The Idea

It’s pretty simple. We will use basic shapes and test for collisions using math to define the hit box. It’s simpler than it sounds. Take a look.

image
image1288×775 334 KB

There’s 3 types of collisions I show the shapes for, but I’ll only go over 2 of them today. Just refer to this image and realize that those are the exact equations we are putting into Hopscotch.

The Equations

Rectangular Collsion:

  • There are two components: difference in X and difference in Y.
  • When using an “and” conditional, it will bound those to a rectangle like the one seen in the graph.
  • The center (object’s position) is (512,384), the width is 140, and the height is 160. (We use half of those – 70 and 80 in this graph – when dealing with the math to make things easier)
  • Equation in Hopscotch (directly copied from graph): if ( | selfX-targetX | < 1/2 width ) and ( | selfY-targetY | < 1/2 height ) then do collision action. (Note that absolute value is shown with a separator: “|”. Example: |-5| = absolute value [-5] )
  • What it states: if the x difference is less than <amount> and y difference is less than <amount> do the collision action.

Circular Collision:

  • There are also the same 2 components
  • In this collision type, we use the Pythagorean Theorem (a2 + b2 = c2). What it does for us is it calculates the direct distance from the center of your object to the target, thus creating a circle.
  • The center of our circle is (256, 650), and the radius is 150.
  • Equation (directly copied): if ( (selfX-targetX)2 + (selfY-targetY)2 < collisionRadius2 ) do collision action.
  • What it states: if the direct distance between the two points is less than <amount> do the collision

Elliptical Collision:

  • Like I said, I am not going to go into depth with this one. Just know that like the other collisions, it’s directly copying the equation.
  • Equation (directly copied): if ( ((selfX-targetX)÷(radius along x axis))2 + ((selfY-targetY)÷(radius along y axis))2 < 1 ) then do collision action (where the expression is always set to less than 1). Talk more on the math topic if you need help with ellipses.
Coding it in Hopscotch


Collision Diagram:

image
image1154×866 249 KB

Square Collision Code (this should loook familiar, if not please review the graphs and equations again):
image
image1420×703 259 KB

Circle Collision Code (once again, please review graphs and equations if needed):
image
image1325×754 238 KB

Honestly, I think these are pretty self-explanatory images. Just copy them over and there you go.

Changes you might make – depends on your project
  • Object offset: If you want to change the center of your collision box, just add or subtract an amount from the self x/y position.
  • To reduce file size, just calculate the values to reduce the number of math blocks displayed. This also makes your code look cleaner. For example, if you understand what is going on, you can replace 612 with 3721. Or, you could take the square root of the left side and leave the right side as “61”.
  • If you want to make it “bumps” instead of “is touching” or want to use other conditionals to limit when the collision action can occur, use a tracker variable and put the collision conditionals in another “and” conditional. This is useful for invisible objects, as you’ll probably want to use “if (collision conditional) & (invis < 100)” rather than just “if (collision conditional)”.


The Final Result of the Code:
Image

General Tips & Procedure
  1. Have your objects that you want to test collisions for. Know an approximate width and height (or radius) for your collision.
  2. If your objects are shapes and short text strings, use their width/height traits (orange variables). If they are characters or more complicated text, play guess and check until you think the collision box is fair. It’s not actually that tedious. Use one action while testing this so that you can isolate only one thing to change at a time.
  3. Test your project to make sure that tthe hit boxes are reliable, then add actions or other conditionals. You don’t want to any actions (besides one that will let you know when the collision hit) before you know that the hit box works.
  • Be sure to experiment with this. Playing projects and actively seeking improvement on this technique will help you get used to it much faster.
  • Make sure your hit box is far. It’s better to hit a favorable hitbox more often and to hit an unfavorable one less, but don’t make it too lenient either. It should be fair in the player’s eyes, even if it seems “good enough” to you.
  • Check out the demo project – it’s also open sourced, which means that you can remix it without the watermark :wink:

I’ve been using this technique for longer than some of you have been using Hopscotch! a while now; here are some projects that use it:

  • Flight of the Turkey
  • Snowman Stacker
  • Zombie Run
  • EHSHQHHC19
  • Minigames 2
  • Some 2 or 3 projects in 2015-17 that I forgot about.

Last tag for real this time?

@Good-Es @Eddie @PeriltheSkywing @pomtl

Also, try these trivia questions on the YCTAYHCH:
https://forum.gethopscotch.com/t/you-can-talk-about-your-hopscotch-coding-here-11-official/53937/4957
And see the latest project I made:

21 Likes
The ULTIMATE guide to smooth collisions