Description
<centered-dialog></centered-dialog>The centered-dialog component displays text in a floating box centered on the screen. It is used when dialogs begin with the centered keyword. While a centered dialog is visible, the regular text-box is hidden.
Source Code: https://github.com/Monogatari/Monogatari/tree/develop/src/components/centered-dialog
Usage
Centered dialogs are created automatically by the Dialog action when the centered keyword is used:
'centered This is a dramatic moment.'
'centered::dramatic An even more dramatic moment!'Structure
The centered-dialog component renders a simple structure with a type-writer for animated text:
<centered-dialog data-component="centered-dialog">
<type-writer data-content="wrapper"></type-writer>
</centered-dialog>Content Areas
| Name | Selector | Description |
|---|---|---|
wrapper |
[data-content="wrapper"] |
The type-writer element containing the centered text |
Lifecycle
- When
centereddialog is triggered, a new<centered-dialog>element is created - The regular
<text-box>is hidden - The centered dialog is appended to the game screen
- When the player proceeds, the centered dialog is removed and text-box is restored
Custom Classes
Custom CSS classes can be applied to the centered-dialog using the dialog syntax:
'centered::highlight Important announcement!'
'centered::dramatic|urgent Critical message!'Classes are specified after double colons and separated by | (pipe).
Styling
/* Main container */
centered-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Add your styling */
}
/* Animated entrance */
centered-dialog.animated {
animation: fadeIn 0.3s ease-out;
}
/* Custom class example */
centered-dialog.dramatic {
font-size: 2em;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
/* The text wrapper */
centered-dialog [data-content="wrapper"] {
/* Type-writer container styles */
}Animation Settings
The typing animation for centered dialogs can be controlled via the CenteredTypeAnimation setting:
// Enable/disable typing animation for centered dialogs
monogatari.setting('CenteredTypeAnimation', true); // default
monogatari.setting('CenteredTypeAnimation', false); // instant displayMethods
The centered-dialog component inherits from the base Component class. The type-writer inside provides all text animation functionality.
Accessing the Type Writer
const centeredDialog = document.querySelector('centered-dialog');
const typeWriter = centeredDialog.content('wrapper').get(0);
// Force finish animation
typeWriter.finish(true);Related
- Text Box - The regular dialog display component
- Type Writer - Handles text animation
- Dialog Action - Controls when centered dialogs appear