Event
In the Yin.Story section, we added events to scenes and used different events to point to different scenes, thus connecting multiple storylines. In this process, we added scripts to events to introduce process control for the entire story.
Other Objects
In the Yin.Story section, not only events can have scripts bound to them, but all other objects' scripts are adapted from events.
Code Hints
Script files generated by the editor come with JSDoc comments, which can display code hints in supported IDEs.
The added control functions are as follows:
Display Check
Runs at the beginning of a scene. This function determines whether the event should be displayed in the current scene. If this function is not registered, it is automatically considered true.
export default {
...otherParameters(ignore),
/**
* Whether to show the event - Determines if the current save data shows this event
*
* @param {object} save Save - The story save data
* @param {object} story Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
* @param {object} loader Loader - The Vue node of the event loader
* @return {Promise<Boolean>}
*/
async show(save, story, loader) {
console.log('Save data:\n', save)
console.log('Story object:\n', story)
// You can determine whether to show this event during this process
// or modify the save data, etc.
// Return true or false here
return true
}
}Activation Check
Runs at the beginning of a scene. If the event passed the Display Check (returned true), this function determines whether the event is clickable in the current scene. If not clickable, its opacity will be reduced. If this function is not registered, it is automatically considered true.
export default {
...otherParameters(ignore),
/**
* Whether the event is selectable - Determines if the current save data allows this event to be selected
*
* @param {object} save Save - The story save data
* @param {object} story Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
* @param {object} loader Loader - The Vue node of the event loader
* @return {Promise<Boolean>}
*/
async active(save, story, loader) {
console.log('Save data:\n', save)
console.log('Story object:\n', story)
// You can determine whether this event is selectable during this process
// or modify the save data, etc.
// Return true or false here
return true
}
}Event Run
Runs when the event is activated. This only runs if the event passed the Activation Check (returned true). This function can return a scene address or scene object to specify the next scene. Alternatively, it can return undefined to continue using the event.targetScene as the next scene. You can also throw an error to abort the execution of this event, preventing the user from entering any scene through this click/event.
Node Fix
Note: If this script might return a scene different from the targetScene, you can add that scene to the Additional Scenes of the scene to which this event belongs, to display that node in the node panel.
Different events are triggered in different ways:
| Event Type | Trigger Method |
|---|---|
| Text Button | Click |
| Media Button | Click |
| Auto Event | At scene end |
export default {
...otherParameters(ignore),
/**
* Run the event
*
* @param {object} save Save - The story save data
* @param {object} story Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
* @param {object} loader Loader - The Vue node of the event loader
* @return {Promise<Place|yinObject|undefined>}
*/
run(save, story, loader) {
console.log('Save data:\n', save)
console.log('Story object:\n', story)
// You can specify the next scene during this process
// or modify the save data, etc.
// Return a scene address
return 'Element.67866bb35671d2905199a51d'
}
}export default {
async run(save, story) {
// Return a scene object
const target = await this._yin.get('Element.67866bb35671d2905199a51d')
return target
}
}export default {
run(save, story) {
// If nothing is returned, continue using the target scene - this.target
}
}export default {
async run(save, story) {
// Abort the event
throw new Error('Event execution aborted')
}
}Auto Save
After the Event Run Function runs successfully, the story automatically proceeds to the next scene. During this process, the save data is automatically saved.
Dynamic Adjustment
When a function runs, this refers to the event itself. You can adjust any parameters of the event by direct assignment.
export default {
async run(save, story) {
// Create a 'runTime' property in the event's temporary data storage '_'
this._.runTime ??= 0
// Increment run count each time
this._.runTime++
// Change the button name to "Don't click me + run count" on click
this._title = `Don't click me +${this._.runTime}`
// Default font size is set to 21. The system will automatically add the px unit.
this.fontSize ??= 21
// Increase font size by 1 each run
this.fontSize++
// Abort the event and log an error to the console
throw new Error(`Stop clicking +${this._.runTime}`)
}
}You can also access the current event's Event Loader in Vue via this._.$EventLoader, and the Event Instance via this._.VNode.
Event Loader determines the event's external behavior, such as style, visibility, etc.
Event Instance determines the event's internal behavior, such as control logic.
export default {
/**
* Whether to show the event - Determines if the current save data shows this event
*
* @param {object} save Save - The story save data
* @param {object} story Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
* @param {object} loader Loader - The Vue node of the event loader
* @return {Promise<Boolean>}
*/
async show(save, story, loader) {
const eventLoader = this._.$EventLoader,
event = this._.VNode
console.log(this._.$EventLoader === loader)
// true
}
}