Rewrite chapters to make them easier for beginners to follow through
commited
commit
973d43f6c038d7cdf29025dc963fa4d887399658
... | ... | @@ -4,52 +4,64 @@ Editor Scripting is an experimental feature that can be used to build levels by |
4 | 4 | Let's create a new level and enter the `EditorScript` command. You will be greeted by a simple code editor with some examples in place. The code might seem unfamiliar at first, because it is written in JavaScript. But don't be scared, because we will learn the basics in this tutorial! |
5 | 5 | |
6 | 6 | ## Functions |
7 | ### Set Block |
|
7 | 8 | So let's look at our first example. |
8 | 9 | ```js |
9 | 10 | // Set block at position (x, y, z) in level or open block |
10 | 11 | setBlock(x, y, z, prefabIndex); |
11 | 12 | ``` |
12 | 13 | We can ignore the first line, since it begins with `//`. This makes the editor ignore any code in the current line, but it can give us some hints on what the following line does.\\ |
13 | The second line starts with the function `setBlock`. You can imagine this as placing a script block with the aforementioned name. The following text represents the inputs given to this function, separated by `,` and enclosed by brackets. The line is then finished off with a `;`. So to put this in [[visual scripting]] therms, we are placing a block called `setBlock` and give it the inputs `x`, `y`, `z` and `prefabIndex`. |
|
14 | Those inputs were only placeholders, so let's put some values in it!\\ |
|
14 | The second line starts with the function `setBlock`. You can imagine this as placing a script block with the aforementioned name. A list of these functions can be found in the [examples](fancade-web#editor-scripting). The following text represents the inputs given to this function, separated by `,` and enclosed by brackets. So to put this in [[visual scripting]] therms, we are placing a block called `setBlock` and give it the inputs `x`, `y`, `z` and `prefabIndex`. |
|
15 | ||
16 | But those inputs were actually just placeholders, so let's replace them with some actual values! |
|
15 | 17 | ```js |
16 | 18 | setBlock(0, 0, 0, 3); |
19 | ``` |
|
20 | Copy this code and paste it in the editor, then hit `Run` and `Save and Close`. As you might have guessed, this puts a block on the coordinates `0, 0, 0`. The fourth value is the unique identifier for the Grass block to be placed. There is a list of unique ids for each built-in block, but what if we want to place a custom block instead? |
|
17 | 21 | |
18 | ### Variables |
|
19 | Unlike most programming languages JS uses a versatile variable declaration this means you can set a variable to any type value casually. JS uses 3 variable declaration key: |
|
20 | ||
21 | • `var` - commonly used variable, is global and can be called anywhere after declaration |
|
22 | ||
23 | • `const` - is a variable that represents a constant value, usually declared before everything |
|
24 | ||
25 | • `let` - is a variable that represents a local variable, its value only persist inside the codeblock `{}` where it is located |
|
26 | ||
27 | Each of this key can represent either `num` value types (`int`, `float`), `tru` types (`bool`), or `String` and can be changed anytime according to the value type it holds. Additionally it can also declare arrays, objects and functions. |
|
28 | ||
29 | ### Arrays and Objects |
|
30 | • An array basically acts as a list that is automatically indexed, you can declare an array like this |
|
22 | ### Find Block |
|
23 | [Create a custom block](/wiki/build/how-do-i-make-my-own-custom-blocks), for instance `My Block`. Then replace your previous code with this one: |
|
24 | ```js |
|
25 | // Find the block called "My Block" |
|
26 | findBlock("My Block"); |
|
31 | 27 | ``` |
32 | var listA = ["apple", "orange", true, 100]; |
|
28 | You can once again see a function, but this one is called `findBlock`. In contrast to the previous function, this one doesn't take numbers as input. Instead it takes a block of text, called a string, which is encapsulated by a pair of quotes. We can now run this code, but it will do nothing at first, because we haven't used the output of the function anywhere. We can change this by storing the output in a variable! |
|
33 | 29 | |
34 | var listB = []; |
|
35 | listB[0] = "mango"; |
|
36 | listB[2] = [0.1, 1]; |
|
37 | //outputs ["mango",, [0.1, 1]] |
|
30 | ## Variables |
|
31 | ```js |
|
32 | // Find block by name and store it in a variable |
|
33 | let myBlock = findBlock("My Block"); |
|
34 | setBlock(0, 0, 0, myBlock); |
|
38 | 35 | ``` |
36 | This line is different, because it doesn't start with the name of a function. Instead, we can see the `let` instruction, which tells JavaScript to create a new variable for us. The name of the variable is determined by the next word, `myBlock`. To store a value in the new variable, we follow the variable name with a `=` and the value to store, similar to a [[Set Variable]] block. In this case, this value is the output of the function we have used before.\\ |
|
37 | The next line looks familiar and it once again places a block at the coordinates `0, 0, 0`. But this time we don't directly input the id of our block, but instead we use the value stored in the variable which we have created before. This allows us to not only store the id of our block, but also use it in multiple other places.\\ |
|
38 | After we have created the variable, we can change its value by adding following code in order to add a Brick next to our previous block: |
|
39 | ```js |
|
40 | // Change the value of the variable |
|
41 | myBlock = findBlock("Brick"); |
|
42 | setBlock(1, 0, 0, myBlock); |
|
43 | ``` |
|
44 | But what if we want to store multiple blocks in our variable? |
|
39 | 45 | |
40 | • In the other hand object is an "list of properties" to represent an "object", it works similarly to array but the properties are defined by a name as if it's a variable, you can declare an object like this: |
|
46 | ## Arrays |
|
47 | ```js |
|
48 | let myBlocks = []; |
|
49 | myBlocks[0] = findBlock("Bricks"); |
|
50 | myBlocks[1] = findBlock("Dirt"); |
|
51 | ``` |
|
52 | Like previously, we are creating a new variable. But this time, we instead store an empty list `[]` in it. We then add values to the list by assigning them to the indexes in curly braces. This works similar to a [[ List Element ]] block and is also used to access the values afterwards. |
|
53 | ```js |
|
54 | setBlock(0, 0, 1, myBlocks[0]); |
|
55 | setBlock(1, 0, 1, myBlocks[0]); |
|
41 | 56 | ``` |
42 | var objA = { |
|
43 | name: "grass", |
|
44 | color: [0, 255, 0], |
|
45 | wilted: false, |
|
46 | leaf: { |
|
47 | type: "pointy", |
|
48 | count: 4 |
|
49 | } |
|
50 | } |
|
51 | 57 | |
52 | var objB = {}; |
|
53 | objB.something = "something"; |
|
54 | //outputs {something: "something"} |
|
58 | ## Objects |
|
59 | ```js |
|
60 | let blockIds = {} |
|
61 | myBlocks["Stone"] = findBlock("Stone"); |
|
62 | myBlocks["Slate"] = findBlock("Slate"); |
|
55 | 63 | ``` |
64 | Objects `{}` are similar to lists in that they can hold values for different indexes. However, they access their values using a string as index. For instance, this allows you to store blocks based on their name instead of their id. |
|
65 | ``` |
|
66 | ||
67 | <!-- ToDo: Loops, Conditions --> |