-
-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
3,457 additions
and
12,053 deletions.
There are no files selected for viewing
172 changes: 172 additions & 0 deletions
172
...mentation/docs/docs/04-concepts/03-Manifest/assets/a-village-blacksmith-hut.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 81 additions & 0 deletions
81
documentation/docs/docs/04-concepts/03-Manifest/assets/a-village-hut.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 104 additions & 0 deletions
104
documentation/docs/docs/04-concepts/03-Manifest/assets/a-village-hut_2.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 69 additions & 0 deletions
69
documentation/docs/docs/04-concepts/03-Manifest/assets/a-village-hut_3.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
145 changes: 145 additions & 0 deletions
145
documentation/docs/docs/04-concepts/03-Manifest/assets/a-village-hut_4.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,42 @@ | ||
# Manifest | ||
TODO: Add info about manifest entries | ||
:::info | ||
This page is currently being written! If you want to help us out with writing this page join the [Discord](https://discord.gg/HtbKyuDDBw) and create a question. | ||
::: | ||
import RiveBoard from "@site/src/components/RiveBoard"; | ||
|
||
# Manifest Entries | ||
|
||
In Typewriter, there are multiple types of entries, the main one `Sequence Entries`, these are `Dialogue Entries`, `Event Entries`, and `Action Entries`. The next major type of entry is the `Manifest Entry`. While `Sequence Entries` are imperative, `Manifest Entries` are declarative. Let's explore the difference between these two approaches and how they work. | ||
|
||
## Then vs When | ||
|
||
### Then (`Sequence entries`) | ||
The "Then" logic, represented by `Sequence Entries`, works like a set of instructions: "Do this, then do that, then do this other thing." It's like a sideways directed graph, where each step leads to the next in a linear fashion. | ||
|
||
Example: Let's consider a Minecraft boss bar that needs to be displayed and updated as a player moves through a village. | ||
|
||
With the "Then" logic, you would: | ||
1. Show the boss bar when the player enters the village | ||
2. Update the boss bar text to "Welcome to the village!" | ||
3. Update the boss bar text to "Check out the blacksmith!" when the player enters the blacksmith's building | ||
4. Update the boss bar text back to "Welcome to the village!" when the player exits the blacksmith's building | ||
5. Hide the boss bar when the player leaves the village | ||
|
||
### When (`Manifest Entries`) | ||
The "When" logic, represented by `Manifest Entries`, defines conditions and specifies what should happen when those conditions are met. It's like a tree structure, where different branches represent different conditions and their corresponding actions. | ||
|
||
Example: Using the same village scenario, with the "When" logic, you would: | ||
- When the player is in the village | ||
- Show the boss bar with the text "Welcome to the village!" | ||
- When the player is in the blacksmith's building | ||
- Update the boss bar text to "Check out the blacksmith!" | ||
|
||
In this approach, you define the conditions under which an action should occur, rather than specifying a linear sequence of steps. | ||
Suppose you wanted to add more buildings to the village and have different messages displayed when the player enters each building. | ||
Doing this with the "Then" logic would incur a lot of repetitive entries, while with the "When" logic, you can simply add more conditions and actions and Typewriter will figure out what to display based on the player's location. | ||
|
||
## Interactive Visualization | ||
|
||
To better understand the difference between "Then" and "When" logic, let's explore an interactive visualization. | ||
Try moving your cursor over the village and blacksmith's building to see how the boss bar changes based on the player's location. | ||
|
||
On the bottom you will see how the "Then" and "When" logic is represented in a directed graph and a tree structure respectively. | ||
|
||
<RiveBoard stateMachines="State Machine" src={require('./assets/manifest.riv').default} | ||
/> |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import Rive, { useRive } from '@rive-app/react-canvas'; | ||
import { useEffect, useRef, useState } from 'react'; | ||
|
||
interface RiveBoardProps { | ||
src: any; | ||
artboard?: string; | ||
stateMachines?: string | string[]; | ||
} | ||
|
||
export default function RiveBoard(props: RiveBoardProps) { | ||
const ref = useRef(); | ||
const { width } = useContainerDimensions(ref); | ||
const { rive, RiveComponent } = useRive({ | ||
src: props.src, | ||
artboard: props.artboard, | ||
stateMachines: props.stateMachines, | ||
autoplay: true, | ||
}); | ||
const usedWidth = width * 0.8; | ||
return ( | ||
<div ref={ref} style={{ width: "100%", height: "100%", display: "flex", justifyContent: "center" }} > | ||
<div style={{ | ||
width: usedWidth, | ||
height: usedWidth, | ||
}}> | ||
<RiveComponent /> | ||
</div > | ||
</div> | ||
); | ||
} | ||
|
||
export const useContainerDimensions = myRef => { | ||
const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) | ||
|
||
useEffect(() => { | ||
const getDimensions = () => ({ | ||
width: myRef.current.offsetWidth, | ||
height: myRef.current.offsetHeight | ||
}) | ||
|
||
const handleResize = () => { | ||
setDimensions(getDimensions()) | ||
} | ||
|
||
if (myRef.current) { | ||
setDimensions(getDimensions()) | ||
} | ||
|
||
window.addEventListener("resize", handleResize) | ||
|
||
return () => { | ||
window.removeEventListener("resize", handleResize) | ||
} | ||
}, [myRef]) | ||
|
||
return dimensions; | ||
}; |