GameConfig
⚠️
This page is under construction.
type GameConfig = {
/**
* Config for the player
*/
player: {
/**
* The id of the container element for the game
* @default "__narraleaf_content"
*/
contentContainerId: string;
/**
* The aspect ratio of the game
* Ex: 16/9, 4/3, 1/1
* @default 16/9
*/
aspectRatio: number;
/**
* The minimum width and height of the player in pixels
* @default 800
*/
minWidth: number;
/**
* The minimum width and height of the player in pixels
* @default 450
*/
minHeight: number;
/**
* Base width of the player in pixels, Image scale will be calculated based on this value
*
* For 16/9, the recommended value is 1920
* @default 1920
*/
width: number;
/**
* Base height of the player in pixels, Image scale will be calculated based on this value
*
* For 16/9, the recommended value is 1080
* @default 1080
*/
height: number;
/**
* When the player presses one of these keys, the game will skip the current action
*
* See [Key_Values](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
* @default ["Control"]
*/
skipKey: React.KeyboardEvent["key"][];
/**
* The interval in milliseconds between each skip action.
* ex: 100 ms means the player can skip 10 actions per second.
* higher value means faster skipping.
* @default 100
*/
skipInterval: number;
/**
* The debounced interval in milliseconds for updating the aspect ratio
*
* Set to 0 to update the ratio immediately on every resize event.
* @default 50
*/
ratioUpdateInterval: number;
/**
* The game will preload the image with this delay between each preload task
*
* A single preload task may contain {@link GameConfig.player.preloadConcurrency} images
* @default 100
*/
preloadDelay: number;
/**
* Maximum number of images to preload at the same time
* @default 5
*/
preloadConcurrency: number;
/**
* Wait for the images to load before showing the game
* @default true
*/
waitForPreload: boolean;
/**
* Preload all possible images in the scene
*
* Enabling this may have a performance impact but is better for the user experience
* @default true
*/
preloadAllImages: boolean;
/**
* Force the game to clear the cache when the scene changes
* @default false
*/
forceClearCache: boolean;
/**
* The number of actions will be predicted and preloaded
* @default 10
*/
maxPreloadActions: number;
/**
* Src of the cursor image, if null, the game will show the default cursor
* @default null
*/
cursor: string | null;
/**
* Cursor width in pixels
* @default 30
*/
cursorWidth: number;
/**
* Cursor height in pixels
* @default 30
*/
cursorHeight: number;
/**
* Show overflowed content on player components
* @default false
*/
showOverflow: boolean;
/**
* Max history size for the page router
* @default 10
*/
maxRouterHistory: number;
};
/**
* Config for the game elements
*/
elements: {
/**
* For all `Character` elements
*/
say: {
/**
* When the player presses one of these keys, the game will show the next sentence
*
* See [Key_Values](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
* @default [" "]
*/
nextKey: React.KeyboardEvent["key"][];
/**
* The speed of the text effects in milliseconds.
* higher value means slower text effect.
* @default 50
*/
textInterval: number;
use: SayComponent;
/**
* If true, the game will scale the dialog to fit the screen
*
* Text will look smaller when this is enabled
* @default true
*/
useAspectScale: boolean;
/**
* The delay in milliseconds before the game automatically shows the next sentence
*
* Only works when the player preference "autoForward" is enabled
* @default 3000
*/
autoForwardDelay: number;
},
/**
* For all `Image` elements
*/
img: {
/**
* If true, when you press [GameConfig.player.skipKey], the game will skip the image transform
* @default true
*/
allowSkipTransform: boolean;
/**
* If true, when you press [GameConfig.player.skipKey], the game will skip the image transition
* @default true
*/
allowSkipTransition: boolean;
},
/**
* For all `Menu` elements
*/
menu: {
use: MenuComponent;
},
/**
* For all `Scene.background` elements
*/
background: {
/**
* If true, when you press [GameConfig.player.skipKey], the game will skip the background transform
* @default true
*/
allowSkipTransform: boolean;
/**
* If true, when you press [GameConfig.player.skipKey], the game will skip the background transition
* @default false
*/
allowSkipTransition: boolean;
},
text: {
/**
* If true, when you press [GameConfig.player.skipKey], the game will skip the text transform
* @default true
*/
allowSkipTransform: boolean;
/**
* If true, when you press [GameConfig.player.skipKey], the game will skip the text transition
* @default true
*/
allowSkipTransition: boolean;
/**
* Base width of the dialog in pixels
*
* For 16/9, the recommended value is 1920
* @default 1920
*/
width: number;
/**
* Base height of the dialog in pixels
*
* For 16/9, the recommended value is 1080 * 0.2 (20% of the screen height)
* @default 1080 * 0.2
*/
height: number;
},
layers: {
/**
* If true, when you press [GameConfig.player.skipKey], the game will skip the text transform
* @default true
*/
allowSkipTransform: boolean;
},
},
elementStyles: {
say: {
/**
* Custom class for the say container
* Ex: "rounded-md shadow-md" for rounded and shadowed container
*/
contentContainerClassName: string;
containerClassName: string;
nameTextClassName: string;
textContainerClassName: string;
textSpanClassName: string;
/**
* The default font family for the text
* Ex: "Arial, sans-serif"
*
* See [Font family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
*/
fontFamily?: React.CSSProperties["fontFamily"];
/**
* Font size for the text
*
* See [Font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
*/
fontSize?: React.CSSProperties["fontSize"];
rubyClassName: string;
},
menu: {
containerClassName: string;
choiceButtonClassName: string;
choiceButtonTextClassName: string;
}
};
app: {
debug: boolean;
/**
* Log level for the logger
* Set to true to enable all logs
*/
logger: {
log: boolean;
info: boolean;
warn: boolean;
error: boolean;
debug: boolean;
trace: boolean;
verbose: boolean;
} | boolean;
/**
* If true, the game will show the inspector when you hover over the element
*/
inspector: boolean;
/**
* The config of {@link GameStateGuard}
*/
guard: GuardConfig;
/**
* Quality of the screenshot, between 0 and 1
* @default 1
*/
screenshotQuality: number;
};
};