Wall Creation - NoodleExtensionsCommunity/How-to-Noodle GitHub Wiki

Making walls

You probably want to make some epic wall maps using this, so let's start.

First let's look at the structure of it:

new Wall(4, 8, {
    _scale: [1.5, 50, 1.5],
    _color: [0.9, 0.1, 0.1, -69],
    _fake: true,
    _interactable: false,
    _animation: {
        _definitePosition: [0, -10, 10, 0](/NoodleExtensionsCommunity/How-to-Noodle/wiki/0,--10,-10,-0),
        _dissolve: [
            [0, 0],
            [1, 0.125, "easeOutCubic"],
            [1, 0.875],
            [0, 1, "easeInCubic"]
        ]
    }
});

Let's explain the parts:

  • new Wall(4, 8, { part makes the script create a new wall at beat 4 that exists for 8 beats.
  • _scale sets the size of the wall itself [x, y, z].
  • _color sets the color of the wall [r, g, b, a].
  • _fake sets the wall to be fake so that it doesn't affect the score.
  • _interactable when set to false makes the wall harmless and more optimized.
  • _animation everything under this is the animation of the wall itself.
  • _definitePosition sets the absolute position of the wall. Here it's set to 10 units in front of the player in the middle and moved 10 units down [x, y, z, time].
  • _dissolve sets the dissolving animation of the wall. Here we have it so that it dissolves in when it spawns and out right before despawning.

Making multiple walls at once

This example is roughly similar to the particle tunnel from conflict.

for (let i = 4; i <= 24; i += 0.25) {
    const rot = random(-360, 360);
    new Wall(i, 8, {
        _scale: [0.1, 0.1, 0.1],
        _color: [1, 1, 1, 2],
        _rotation: [0, 0, random(-180, 180)],
        _fake: true,
        _interactable: false,
        _animation: {
            _dissolve: [
                [0, 0],
                [1, 1/8, "easeOutQuad"],
                [1, 7/8],
                [0, 1, "easeInQuad"]
            ],
            _definitePosition: [0, random(7, 15), random(0, 35)],
            _rotation: [
                [0, 0, rot, 0],
                [0, 0, rot * 0.75, 0.25],
                [0, 0, rot / 2, 0.5],
                [0, 0, rot / 4, 0.75],
                [0, 0, 0, 1]
            ]
        }
    });
}

The script above uses a feature called a for loop.

A for loop is essentially a loop that runs a specific block of code as long as a set condition is true.

For example, if a condition of a for loop is set to 1 == 1 (pretty much means "is 1 equal to 1"), if this condition is true, the for loop will run. If the condition is false, for example: 1 == 0, the loop won't run anymore and the script just continues to run past it.

A for loop works like this:

  • for means that we are using a for loop.
  • let i = 4; means that we're declaring a new variable

Variables work like this:

  • let i declares a new variable called i. A let variable can be changed later in the script
  • i = 4 sets the variable i's value to 4.

All variable types in JavaScript are mentioned below.

  • let is a variable that CAN be changed after it's declared. (Use this if possible)
  • var is the same as let the only difference is that var is global. (Avoid using this)
  • const is a variable that CAN'T be changed after it's declared. (Use this to set a value that you DO NOT want to be changed anymore)
  • i <= 24; is the condition, in our case, we are checking if the value of i is smaller than or equals to 24. If the statement is true, the for loop will run. If it's false, the for loop will terminate.
  • i += 0.25 adds 0.25 to the value of i every time the loop runs. This is here so that our loop doesn't run infinitely and will actually do something.

This script also uses the random() function. A random function essentially picks a random integer between two given numbers.

An example of this would be:

let x = random(0, 20);
console.log(x);

And after running it a few times, the console will output a different number every time.

output: 12
output: 15
output: 2
output: 19
output: 0
output: 9
output: 20
output: 6

Variables and math

You can also use math with random(). This is useful when you don't want a whole number but maybe a decimal number instead.

let x = random(0, 100) / 100;
console.log(x);

This will pick a random number between 0 and 100 and then it divides it by 100. This will output a 2 decimal number between 0 and 1.

output: 0.69

Different math operators are

  • + addition
  • - subtraction
  • * multiplication
  • / division

These can be combined with the = operator for example with the following.

let x = 5;
x *= -1;
console.log(x);
output: -5

In the script above, we are setting the value of x to be initially 5. Then we multiply it by -1, which obviously just makes it a negative number. Therefore, the output will be -5 in this.


Next: Note Creation