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 tofalse
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 afor
loop.let i = 4;
means that we're declaring a new variableVariables work like this:
let i
declares a new variable calledi
. Alet
variable can be changed later in the scripti = 4
sets the variablei
'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 aslet
the only difference is thatvar
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 ofi
is smaller than or equals to 24. If the statement is true, thefor
loop will run. If it's false, thefor
loop will terminate.i += 0.25
adds 0.25 to the value ofi
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