What is a Stage?
A "stage" is a data structure which defines an area you can walk around in, like in the embassy or the dull vessel.
Basics of use
Stages are defined in the `env.stages` dict, at the location `env.stages['STAGE_NAME']`. To load a stage, the function `changeStage` is called.
`changeStage` accepts 3 arguments, `(targetStage, spot, direction)`. `targetStage` is the string ID of the stage, `spot` says where the player should spawn (needs further investigation), and `direction` is an optional direction value to determine which way the player should face when they enter it.
The player's moves are done with `stageKeypress`, a function which reads a pressed key and updates the `stage` accordingly. If you want to define custom actions, you would do so by overriding here. In this function, once the player moves, the `step` function is called to cause other things in the world to react accordingly, followed by `enemyStep` so long as `enemyPause` on the stage isn't true.
Fields
plan
This field contains a layout of the tiles as a string, each character corresponding to a tile on the `stage`'s grid. The game knows which tile is which due to a catalog of "entities", which includes props, walls, room doors, and floor tiles.
To know which entity to place down from a given character, the game first consults `stage.entities[]`. If an entry for that character is missing, the game instead consults `env.stageEntities[]`, the global palette of entity mappings.
width
This is the only dimension you need to define of the map, telling the layout reader how many tiles go in a row of the `stage`.
locale
`locale` is an attribute defined on every displayed tile of this room, used for streamlining the application of particular CSS styles. You can see examples of this in the inline stylesheet of the golems segment of the RPG section.
exec
A javascript function to be run when switching to this `stage`.
entities
A dictionary of special entity definitions for this `stage`.
creature
The entity to use as the player's character in the `stage`. This is used to display the main character of the scene, and is also used to show the active party during the RPG segments.
onStep
A javascript function to call each time the `stage` updates by a step.
enterDirection
Which way to face the player entity when they enter the `stage`.
shouldFace
Can either have a direction to face when the player enters the `stage`, or a false value to leave the player's direction unchanged.
enemyPause
Whether enemies shouldn't move as the player does and instead hold still.
fogAlgorithm
Can have 1 of three values: "quadratic", "half", and "linear", affecting how sharply tiles fade away in the fog
fogRadius
How many tiles the player can see away from any given spot. Set to "0" to disable when the map is loaded - but if the map is loaded, you'll have to set the radius to a large value, call `darkStep` once, and then set it to 0 to get things working nicely
Example
env.stages['embassy_quarters'] = {
creature: env.stageEntities.embassyCreature,
exec: ()=> {
env.embassy.updateStageData()
toggleBgm(page.bgm)
},
entities: {
"q": {
class: "door left",
teleportSpot: 26,
teleportTarget: "embassy_personnel",
shouldFace: 'left',
lockFlag: "PAGE!!akiroomunlocked",
lockExec: ()=>chatter({actor: 'akizet', text: 'i should check the cyst first', readout: true})
},
d: {
class:"prop blocks",
contains: {
class: "desk",
html: `<figure>
<div class="doodad d1">
<div class="target" entity="face stand"></div>
</div>
<div class="doodad d2">
<div class="target" entity="kalstik stand"></div>
</div>
<div class="doodad d3">
<div class="target" entity="cyst cluster"></div>
</div>
<div class="doodad catalyst"><div class="target" entity="mystery cyst"></div></div>
</figure>`
}
},
b: {
class:"prop blocks",
contains: {
class: "bed",
examineEntity: "rejuvenation chamber",
html: `<figure></figure>`
}
},
c: {
class: "prop blocks",
contains: {
class: "container",
html: `<figure style="transform: rotateY(45deg)">
<div class="target" entity="container"></div>
</figure>`
}
},
o: {
class: "prop blocks",
contains: {
class: "container",
html: `<figure style="transform: rotateY(135deg)">
<div class="target" entity="container"></div>
</figure>`
}
},
C: {
class: "prop blocks",
contains: {
class: "container",
html: `<figure style="transform: rotateY(215deg) translateZ(calc(-0.2 * var(--gridTileSize)))">
<div class="target" entity="container"></div>
</figure>`
}
},
L: {
class: "prop blocks",
contains: {
class: "closet",
examineEntity: "clothing storage",
html: `<figure></figure>`
}
},
x: {
class:"prop blocks",
contains: {
class: "deskleg"
}
},
X: {
class:"prop blocks genericblocker",
},
},
width: 7,
enterDirection: 'left',
plan: [
'n','l','x','d','x','l','N',
'.','░','░','░','░','X','.',
'q','░','░','░','p','b','.',
'.','░','░','░','░','X','.',
's','l','o','L','C','l','S',
]
}