You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: smart-items.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -22,11 +22,11 @@ Smart Items
22
22
23
23
# Definition
24
24
25
-
Smart Items are Builder items that can be configured by the user. They may expose parameters and actions, and these action can be connected between items to create interactivity (ie. a lever that opens a door).
25
+
Smart Items are Builder items that can be configured by the user. They may expose parameters and actions, and these actions can be connected between items to create interactivity (ie. a lever that opens a door).
Each smart items contains a manifest (aka `asset.json`) that defines its configuration parameters (it's useful to generate UIs), and a script (aka `item.ts`) that executes its behavior on runtime.
29
+
Each smart item contains a manifest (aka `asset.json`) that defines its configuration parameters (it's useful to generate UIs), and a script (aka `item.ts`) that executes its behavior on runtime.
30
30
31
31
## Manifest
32
32
@@ -323,10 +323,10 @@ The `init` method of a script is called only once, no matter how many instances
constinventory = createInventory(UICanvas, UIContainerStack, UIImage) // UICanvas, UIContainerStack and UIImage are globally accesible classes from the SDK
326
+
constinventory = createInventory(UICanvas, UIContainerStack, UIImage) // UICanvas, UIContainerStack and UIImage are globally accessible classes from the SDK
327
327
```
328
328
329
-
For an smart item developer, the `init` lifecycle is the time to start systems if needed, and also to make use of the `inventory` if necessary (we will dig into how to use the `inventory` in a later section). For example this is a
329
+
For a smart item developer, the `init` lifecycle is the time to start systems if needed, and also to make use of the `inventory` if necessary (we will dig into how to use the `inventory` in a later section). For example this is a
330
330
331
331
### spawn
332
332
@@ -362,7 +362,7 @@ In order to instantiate a `channel` to be able to `spawn` a smart item, we can u
362
362
// init the smart items' scripts. If we had other smart items in the scene we would init them all here
363
363
Door.init({ inventory })
364
364
365
-
// now we can spawn the instances for all the smart items in the scene, here we will spawn two door:
365
+
// now we can spawn the instances for all the smart items in the scene, here we will spawn two doors:
366
366
367
367
// spawn the front door
368
368
constfrontDoor = newEntity('frontDoor') // create the host entity
@@ -410,7 +410,7 @@ type Props = {
410
410
411
411
exportdefaultclassButtonextendsIScript<Props> {
412
412
init({ inventory }) {
413
-
// this item doesn't have systems and doesn't use the invetory so nothing to do here
413
+
// this item doesn't have systems and doesn't use the inventory so nothing to do here
The `channel` is also the abstraction used to handle an action when it's triggered by another smart item. For example lets go back to the `Door` smart item, it has two actions: `open` and `close`. Those actions can be trigger by any smart item (could be the `Door` instance itself or another smart item, like a Lever that when pulled opens a Door).
437
+
The `channel` is also the abstraction used to handle an action when it's triggered by another smart item. For example lets go back to the `Door` smart item, it has two actions: `open` and `close`. Those actions can be triggered by any smart item (could be the `Door` instance itself or another smart item, like a Lever that when pulled opens a Door).
438
438
439
439
We use the `channel.handleAction` helper for this:
440
440
@@ -456,7 +456,7 @@ export default class Door extends IScript<{ /* ... */ }> {
456
456
}
457
457
```
458
458
459
-
This will handle an action when it's broadcasted through a channel using `channel.sendActions(...)` (see [section above](#send-actions)). Since actions that are broadcasted that way will not only reach other smart items in the scene for the current user, but also other users in the scene, the callback that we pass to `channel.handleActions` receives a `sender` that can be used to know if that actions is coming from the same user or a different one. When we open a door we don't care about who opened it, because we want everybody else on the scene to see that the door just opened. But there are other actions that we want to keep just for the player who triggered it, for example, let's say we create an smart item that can be equipped, we want to make sure only the user who triggered that action actually gets the item equipped, so we can do so like this:
459
+
This will handle an action when it's broadcasted through a channel using `channel.sendActions(...)` (see [section above](#send-actions)). Since actions that are broadcasted that way will not only reach other smart items in the scene for the current user, but also other users in the scene, the callback that we pass to `channel.handleActions` receives a `sender` that can be used to know if that actions is coming from the same user or a different one. When we open a door we don't care about who opened it, because we want everybody else on the scene to see that the door just opened. But there are other actions that we want to keep just for the player who triggered it, for example, let's say we create a smart item that can be equipped, we want to make sure only the user who triggered that action actually gets the item equipped, so we can do so like this:
We can also use the `channel` to sync the initial state of our smart item instances. For example, let's say a user visit a scene with a Door smart item, and it opens it. Then another users teleports to the scene. The second user will see the Door closed and the first one will see it open. We can use the `channel` to synchronize the state of the second user with fist one by using `channel.request` and `channel.reply` helpers:
471
+
We can also use the `channel` to sync the initial state of our smart item instances. For example, let's say a user visits a scene with a Door smart item, and it opens it. Then another user teleports to the scene. The second user will see the Door closed and the first one will see it open. We can use the `channel` to synchronize the state of the second user with first one by using `channel.request` and `channel.reply` helpers:
472
472
473
473
```ts
474
474
// item.ts
@@ -501,7 +501,7 @@ export default class Door extends IScript<{ /* ... */ }> {
501
501
502
502
## inventory
503
503
504
-
The inventory is an abstraction used to orchestrate the UI space and prevent some smart items to overlap with other when adding stuff to the user's screen. It is specially useful for example for items that can be equipped, and when doing so, they display some image on the screen indicating that the user is carrying it.
504
+
The inventory is an abstraction used to orchestrate the UI space and prevent some smart items to overlap with other when adding stuff to the user's screen. It is especially useful for example for items that can be equipped, and when doing so, they display some image on the screen indicating that the user is carrying it.
505
505
506
506
It is passed to each smart item via the [init](#init) lifecycle, and it has the following methods:
507
507
@@ -537,7 +537,7 @@ If you create a scene with the CLI using `dcl init` and then create a `src/item.
537
537
## Importing
538
538
539
539
In order to import the smart item script in runtime we need to fetch it from the content server and the load it using an AMD loader.
540
-
We inject this [tiny AMD loader](https://github.com/decentraland/builder/blob/master/src/ecsScene/amd-loader.js.raw) at the begining of the scene file when we deploy it, and then this [remote loader](https://github.com/decentraland/builder/blob/master/src/ecsScene/remote-loader.js.raw) to do the fetching + loading of the module (on next section there's a full example that shows how to use this helper).
540
+
We inject this [tiny AMD loader](https://github.com/decentraland/builder/blob/master/src/ecsScene/amd-loader.js.raw) at the beginning of the scene file when we deploy it, and then this [remote loader](https://github.com/decentraland/builder/blob/master/src/ecsScene/remote-loader.js.raw) to do the fetching + loading of the module (on next section there's a full example that shows how to use this helper).
541
541
542
542
## Running
543
543
@@ -547,7 +547,7 @@ This is an example the one in the [channel](#channel) section where we spawn two
547
547
```js
548
548
/* bin/game.js */
549
549
550
-
/* At the beggining of the scene we inject: the SDK, the AMD loader, and the remote loader helper described in the previous section, and the createChannel and createInvetory helpers from the `decentraland-builder-scripts` package */
550
+
/* At the beginning of the scene we inject: the SDK, the AMD loader, and the remote loader helper described in the previous section, and the createChannel and createInvetory helpers from the `decentraland-builder-scripts` package */
0 commit comments