Fancade Wiki

Bricked commited 2023-02-19 18:37:47 +0000 commit c73ec9a0c42708b5b9014e988cadbaaa84e9a73f

                EditorScript/Introduction to Editor Scripting.md
			
          @@ -4,14 +4,13 @@ Editor Scripting is an experimental feature that can be used to build levels by 

          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!

          ## Functions

          ### Set Block

          So let's look at our first example.

          ```js

          // Set block at position (x, y, z) in level or open block

          // Set block at position (x, y, z)

          setBlock(x, y, z, prefabIndex); 

          ```

          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.\\

          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](/wiki/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]] terms, we are placing a block called `setBlock` and give it the inputs `x`, `y`, `z` and `prefabIndex`.

          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. So to put this in [[visual scripting]] terms, we are placing a block called `setBlock` and give it the inputs `x`, `y`, `z` and `prefabIndex`.

          But those inputs were actually just placeholders, so let's replace them with some actual values!

          ```js

          @@ -20,7 +19,7 @@ setBlock(0, 0, 0, 3);

          ```

          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?

          ### Find Block

          ## Strings

          [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:

          ```js

          // Find the block called "My Block"

          @@ -35,93 +34,97 @@ let myBlock = findBlock("My Block");

          setBlock(0, 0, 0, myBlock);

          ```

          This line is different, because it doesn't start with the name of a function. Instead, we can see the `let` keyword, which creates a new local 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.\\

          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.\\

          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:

          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 any kind of value, but also use it in multiple other places.\\

          After we have created the variable, we can change its value by adding following code in order to set a new custom block next to our previous block:

          ```js

          // Change the value of the variable

          myBlock = findBlock("Brick");

          myBlock = findBlock("My New Block");

          setBlock(1, 0, 0, myBlock);

          ```

          But what if we want to store multiple blocks in our variable?

          ## Arrays

          ```js

          // Create an empty list

          // Create an empty array

          let myBlocks = [];

          // Store block ids in the list

          myBlocks[0] = findBlock("Bricks");

          myBlocks[1] = findBlock("Dirt");

          // Store block ids in the array

          myBlocks[0] = findBlock("My Block");

          myBlocks[1] = findBlock("My New Block");

          ```

          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.

          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 array 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:

          ```js

          // Set blocks from the list

          setBlock(0, 0, 1, myBlocks[0]);

          setBlock(1, 0, 1, myBlocks[0]);

          ```

          Additionally, we can create entire arrays in just one line, similary to how we pass our inputs:

          ```js

          // Create a filled array

          let myBlocks = [

              findBlock("My Block"),

              findBlock("My New Block")

          ];

          ```

          This way, we can store multiple values of any type, including arrays themselves! This can be used to create simple multidimensional lists.\\

          Now what if we wanted to place all our blocks at once?

          ## Loops

          Now if we want to place multiple blocks at once of course we will need a loop! JS uses 3 types of loop; "while" loop, "do while" loop and "for" loop. In this scenario we will use the "for" loop.

          ```js

          const myBlocks = [1, 2, 3]; // Stone, Brick, Grass

          let x = 0;

          for (let element of myBlocks) {

              setBlock(x++, 0, 0, element);

          // Set block for each block in the array

          for (let index in myBlocks) {

              setBlock(index, 0, 2, myBlocks[index])

          }

          ```

          This time, the line starts with a `for` loop expression. Inside this expression, we create a variable `index` and assign it to each index in the array. The code inside the curly braces will then be repeated for each new index. This is similar to using a [[Loop]] block with the array length as input.

          ## Objects

          Objects `{}` works almost similarly to arrays but unlike it is not considered a collection of value but instead a single value composed of other values called "properties" and functions called "methods". Lets take for example a ball, you will ask, how bouncy is this ball? what is its radius? just like this ball an object has its own properties to determine its characteristics. Using it lets try to make a simple structure.

          ### Properties

          ```js

          let justATree = {

          // Create an empty object

          let myBlocks = {};

          // Store block ids in the object

          myBlocks["My Block"] = findBlock("My Block");

          myBlocks["My New Block"] = findBlock("My New Block");

          ```

          Objects `{}` are quite 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.

          ```

          // Set blocks from the object

          setBlock(0, 0, 3, myBlocks["My Block"]);

          setBlock(1, 0, 3, myBlocks["My New Block"]);

          ```

          However, this also allows us to create objects with custom properties like this:

          ```

          // Create object with custom properties

          let myBlock = {

              x: 0,

              y: 0,

              z: 0,

              components: {

                  // component: material, size, position

                  trunk: [8 /*Wood Y*/, [1, 6, 1] [0, 0, 0]],

                  leaves: [495 /*Foliage*/, [3, 3, 3], [-1, 4, -1]]

              }

              z: 4,

              id: findBlock("My Block")

          };

          //If you want to you can also add or override properties later e.g.

          justATree.position = [0, 0, 0];

          ```

          properties are values that represent chracteristics of an object it can be any value type or a function. As you can see in our example we made the object `justATree`which contains properties named `x`, `y`, `z` and `component`. Using this properties lets try to make a method that will build the tree!

          ### Methods

          methods are special properties of an object that can be used as instruction for its behaviors. Now lets try to add a new method named `build` inside `justATree`.

          We can then access the properties by following the variable name by `.` and the name of the property:

          ```js

          // Set block by accessing custom properties

          setBlock(myBlock.x, myBlock.y, myBlock.z, myBlock.id);

          ```

          ## Creating Functions

          We have already seen some built-in functions, but what if we wanted to create our own ones?

          ```js

          let justATree = {

              x: 1,

              y: 0,

              z: 1,

              components: {

                  // component: material, size, position

                  trunk: [8 /*Wood Y*/, [1, 6, 1], [0, 0, 0]],

                  leaves: [495 /*Foliage*/, [3, 3, 3], [-1, 3, -1]]

              },

              build: function() {

                  for (let e in this.components) {

                      let c = this.components;

                      for (let i = 0; i < (c[e][1][0] * c[e][1][1] * c[e][1][2]); i++) {

                          let x = c[e][2][0] + (i % c[e][1][0]);

                          let y = c[e][2][1] + ((i/c[e][1][0]) % c[e][1][1]);

                          let z = c[e][2][2] + (((i/c[e][1][0])/c[e][1][1]) % c[e][1][2]);

                          // The "this" keyword refers to the object it is inside to,

                          // We use "this" when the object is not or not yet defined by a variable

                          setBlock(this.x + x, this.y + y, this.z + z, c[e][0]);

                      }

                  }

              }

          function moveBlock(fromX, fromY, fromZ, toX, toY, toZ) {

              // Get block at position (fromX, fromY, fromZ)

              let block = getBlock(fromX, fromY, fromZ, block);

              // Remove block at position (fromX, fromY, fromZ)

              setBlock(fromX, fromY, fromZ, 0);

              // Set block at position (toX, toY, toZ)

              setBlock(toX, toY, toZ, block);

          }

          justATree.build();

          ```

          This time, the line starts with a `function` expression, followed by the name of the function we want to create and the name of the inputs the function takes. The code inside the function is run when we run the function just like we would do for built-in ones:

          ```js

          moveBlock(0, 0, 4, 1, 0, 4);

          ```

          You will see that this function we have just created moves the block at `(0, 0, 4)` to `(1, 0, 4)`. This way, we can simplify our code by putting common tasks in a block of code that we can later call.

          <!-- ToDo: Conditions -->

Fancade Wiki

...	...	@@ -4,14 +4,13 @@ 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
8	7	So let's look at our first example.
9	8	```js
10		// Set block at position (x, y, z) in level or open block
	9	// Set block at position (x, y, z)
11	10	setBlock(x, y, z, prefabIndex);
12	11	```
13	12	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.\\
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](/wiki/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]] terms, we are placing a block called `setBlock` and give it the inputs `x`, `y`, `z` and `prefabIndex`.
	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. So to put this in [[visual scripting]] terms, we are placing a block called `setBlock` and give it the inputs `x`, `y`, `z` and `prefabIndex`.
15	14
16	15	But those inputs were actually just placeholders, so let's replace them with some actual values!
17	16	```js
...	...	@@ -20,7 +19,7 @@ setBlock(0, 0, 0, 3);
20	19	```
21	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?
22	21
23		### Find Block
	22	## Strings
24	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:
25	24	```js
26	25	// Find the block called "My Block"
...	...	@@ -35,93 +34,97 @@ let myBlock = findBlock("My Block");
35	34	setBlock(0, 0, 0, myBlock);
36	35	```
37	36	This line is different, because it doesn't start with the name of a function. Instead, we can see the `let` keyword, which creates a new local 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.\\
38		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.\\
39		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:
	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 any kind of value, 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 set a new custom block next to our previous block:
40	39	```js
41	40	// Change the value of the variable
42		myBlock = findBlock("Brick");
	41	myBlock = findBlock("My New Block");
43	42	setBlock(1, 0, 0, myBlock);
44	43	```
45	44	But what if we want to store multiple blocks in our variable?
46	45
47	46	## Arrays
48	47	```js
49		// Create an empty list
	48	// Create an empty array
50	49	let myBlocks = [];
51		// Store block ids in the list
52		myBlocks[0] = findBlock("Bricks");
53		myBlocks[1] = findBlock("Dirt");
	50	// Store block ids in the array
	51	myBlocks[0] = findBlock("My Block");
	52	myBlocks[1] = findBlock("My New Block");
54	53	```
55		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.
	54	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 array 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:
56	55	```js
57	56	// Set blocks from the list
58	57	setBlock(0, 0, 1, myBlocks[0]);
59	58	setBlock(1, 0, 1, myBlocks[0]);
60	59	```
	60	Additionally, we can create entire arrays in just one line, similary to how we pass our inputs:
	61	```js
	62	// Create a filled array
	63	let myBlocks = [
	64	findBlock("My Block"),
	65	findBlock("My New Block")
	66	];
	67	```
	68	This way, we can store multiple values of any type, including arrays themselves! This can be used to create simple multidimensional lists.\\
	69	Now what if we wanted to place all our blocks at once?
61	70
62	71	## Loops
63		Now if we want to place multiple blocks at once of course we will need a loop! JS uses 3 types of loop; "while" loop, "do while" loop and "for" loop. In this scenario we will use the "for" loop.
64	72	```js
65		const myBlocks = [1, 2, 3]; // Stone, Brick, Grass
66
67		let x = 0;
68		for (let element of myBlocks) {
69		setBlock(x++, 0, 0, element);
	73	// Set block for each block in the array
	74	for (let index in myBlocks) {
	75	setBlock(index, 0, 2, myBlocks[index])
70	76	}
71	77	```
	78	This time, the line starts with a `for` loop expression. Inside this expression, we create a variable `index` and assign it to each index in the array. The code inside the curly braces will then be repeated for each new index. This is similar to using a [[Loop]] block with the array length as input.
72	79
73	80	## Objects
74
75		Objects `{}` works almost similarly to arrays but unlike it is not considered a collection of value but instead a single value composed of other values called "properties" and functions called "methods". Lets take for example a ball, you will ask, how bouncy is this ball? what is its radius? just like this ball an object has its own properties to determine its characteristics. Using it lets try to make a simple structure.
76
77		### Properties
78	81	```js
79		let justATree = {
	82	// Create an empty object
	83	let myBlocks = {};
	84	// Store block ids in the object
	85	myBlocks["My Block"] = findBlock("My Block");
	86	myBlocks["My New Block"] = findBlock("My New Block");
	87	```
	88	Objects `{}` are quite 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.
	89	```
	90	// Set blocks from the object
	91	setBlock(0, 0, 3, myBlocks["My Block"]);
	92	setBlock(1, 0, 3, myBlocks["My New Block"]);
	93	```
	94	However, this also allows us to create objects with custom properties like this:
	95	```
	96	// Create object with custom properties
	97	let myBlock = {
80	98	x: 0,
81	99	y: 0,
82		z: 0,
83		components: {
84		// component: material, size, position
85		trunk: [8 /Wood Y/, [1, 6, 1] [0, 0, 0]],
86		leaves: [495 /Foliage/, [3, 3, 3], [-1, 4, -1]]
87		}
	100	z: 4,
	101	id: findBlock("My Block")
88	102	};
89
90		//If you want to you can also add or override properties later e.g.
91		justATree.position = [0, 0, 0];
92	103	```
93		properties are values that represent chracteristics of an object it can be any value type or a function. As you can see in our example we made the object `justATree`which contains properties named `x`, `y`, `z` and `component`. Using this properties lets try to make a method that will build the tree!
94
95		### Methods
96		methods are special properties of an object that can be used as instruction for its behaviors. Now lets try to add a new method named `build` inside `justATree`.
	104	We can then access the properties by following the variable name by `.` and the name of the property:
	105	```js
	106	// Set block by accessing custom properties
	107	setBlock(myBlock.x, myBlock.y, myBlock.z, myBlock.id);
	108	```
97	109
	110	## Creating Functions
	111	We have already seen some built-in functions, but what if we wanted to create our own ones?
98	112	```js
99		let justATree = {
100		x: 1,
101		y: 0,
102		z: 1,
103		components: {
104		// component: material, size, position
105		trunk: [8 /Wood Y/, [1, 6, 1], [0, 0, 0]],
106		leaves: [495 /Foliage/, [3, 3, 3], [-1, 3, -1]]
107		},
108		build: function() {
109		for (let e in this.components) {
110		let c = this.components;
111		for (let i = 0; i < (c[e][1][0] * c[e][1][1] * c[e][1][2]); i++) {
112		let x = c[e][2][0] + (i % c[e][1][0]);
113		let y = c[e][2][1] + ((i/c[e][1][0]) % c[e][1][1]);
114		let z = c[e][2][2] + (((i/c[e][1][0])/c[e][1][1]) % c[e][1][2]);
115		// The "this" keyword refers to the object it is inside to,
116		// We use "this" when the object is not or not yet defined by a variable
117		setBlock(this.x + x, this.y + y, this.z + z, c[e][0]);
118		}
119		}
120		}
	113	function moveBlock(fromX, fromY, fromZ, toX, toY, toZ) {
	114	// Get block at position (fromX, fromY, fromZ)
	115	let block = getBlock(fromX, fromY, fromZ, block);
	116
	117	// Remove block at position (fromX, fromY, fromZ)
	118	setBlock(fromX, fromY, fromZ, 0);
	119	// Set block at position (toX, toY, toZ)
	120	setBlock(toX, toY, toZ, block);
121	121	}
122
123		justATree.build();
124	122	```
	123	This time, the line starts with a `function` expression, followed by the name of the function we want to create and the name of the inputs the function takes. The code inside the function is run when we run the function just like we would do for built-in ones:
	124	```js
	125	moveBlock(0, 0, 4, 1, 0, 4);
	126	```
	127	You will see that this function we have just created moves the block at `(0, 0, 4)` to `(1, 0, 4)`. This way, we can simplify our code by putting common tasks in a block of code that we can later call.
125	128
126	129
127	130	<!-- ToDo: Conditions -->

Fancade Wiki

Updated Introduction to Editor Scripting.md (markdown)