管理偏好
用 usePreference 读取与修改自动前进、跳过、文字速度与音量等播放偏好
偏好设置控制自动播放、跳过行为、文字速度和音量。在 GameProviders 内渲染的 UI 中使用 usePreference()
import { usePreference } from "narraleaf-react";
export function AutoForwardButton() {
const [autoForward, setAutoForward] = usePreference("autoForward");
return (
<button onClick={() => setAutoForward(!autoForward)}>
自动播放：{autoForward ? "开" : "关"}
</button>
);
}setter 直接接收新值，不支持 React 的函数式更新写法
文字速度和音量
function PreferencesPanel() {
const [cps, setCps] = usePreference("cps");
const [voiceVolume, setVoiceVolume] = usePreference("voiceVolume");
return (
<div>
<label>
文字速度
<input
type="range"
min={1}
max={60}
value={cps}
onChange={(event) => setCps(Number(event.target.value))}
/>
</label>
<label>
语音音量
<input
type="range"
min={0}
max={1}
step={0.05}
value={voiceVolume}
onChange={(event) => setVoiceVolume(Number(event.target.value))}
/>
</label>
</div>
);
}可用字段包括 autoForward、skip、showDialog、gameSpeed、cps、voiceVolume、voiceFadeDuration、voiceEndMode、bgmVolume、soundVolume、globalVolume、skipDelay 和 skipInterval。类型与默认值见 GamePreference
持久化偏好设置
偏好设置不属于 SavedGame，需要单独导出和保存
import { useEffect } from "react";
import { useGame } from "narraleaf-react";
function PreferenceStorage() {
const game = useGame();
useEffect(() => {
const raw = localStorage.getItem("game-preferences");
if (raw) game.preference.importPreferences(JSON.parse(raw));
const token = game.preference.onPreferenceChange(() => {
localStorage.setItem(
"game-preferences",
JSON.stringify(game.preference.exportPreferences()),
);
});
return token.cancel;
}, [game]);
return null;
}