wangjunxiao/tianshu-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: sync latest changes

Browse Source
This commit is contained in:
cocos02
2026-06-09 17:21:54 +08:00
parent bca137535b
commit 451c6ea025
12 changed files with 503 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
ROADMAP.md
View File

@@ -739,9 +739,18 @@ engine.on('choiceRequest', (choiceList) => {
- [x] `public/scenes/demo.json` — left_door + trust_ending 各一个 prompt 示例
- [x] 验证：TypeScript + Vite build 通过
### P14 成就系统 — 事件触发 + 条件检测 + Toast 弹窗（待实现）
### P14 成就系统 — 纯变量检测 + 单一检查点 + Toast 队列 ✅ 已完成 2026-06-09
目标：Steam 式成就系统，驱动重玩探索。事件触发或变量条件检测，解锁时底部 toast 滑入。
目标：Steam 式成就系统，驱动重玩探索。所有成就通过变量检测，在 `StateManager.apply` 末尾单一检查点触发。
**设计决策（对标 Detroit / Dark Pictures）：**
| 决策 | 做法 |
|------|------|
| **检测方式** | **纯变量 + 单一检查点** — `condition: { variable, op, value }`，`StateManager.apply` 末尾 `achievementSystem.check(variables)` |
| **Toast 弹出** | **逐个队列** — 同时解锁多个成就时一个消失后下一个才弹出 |
| **图标** | **可选 URL** — 有 `icon` 路径则显示缩略图，为空则不显示图标栏 |
| **入口** | **仅主菜单** — 不在游戏内 Esc 菜单，属于元游戏层 |
**数据结构：**
@@ -754,35 +763,26 @@ engine.on('choiceRequest', (choiceList) => {
"description": "成功完成一次 QTE",
"icon": "",
"hidden": false,
"trigger": { "event": "qteResult", "success": true }
},
{
"id": "explorer",
"title": "探索者",
"description": "搜索过房间的每一个角落",
"icon": "",
"hidden": false,
"trigger": { "variable": "investigation", "op": ">=", "value": 2 }
"condition": { "variable": "qte_succeeded", "op": ">=", "value": 1 }
}
]
}
```
触发条件支持：`{ event }`（qteResult / choiceMade / gameEnd / sceneReached）或 `{ variable, op, value }`。
解锁持久化到 IndexedDB，toast 滑入 3 秒消失。
QTE 成功 / 到达隐藏结局 / 通关等"事件型"成就，通过在对应 effects 或 onEnter 中变量来驱动检测。
**实现清单：**
- [ ] `engine/types.ts` — `GameData.achievements`、`AchievementDef` 接口
- [ ] `engine/systems/AchievementSystem.ts` — 触发检测 + 解锁 + 回调 onUnlock
- [ ] `engine/systems/SaveSystem.ts` — DB v5 新增 `achievements` 表
- [ ] `engine/core/Engine.ts` — 事件点调用 `achievementSystem.check(event, data)`
- [ ] `src/components/AchievementToast.vue` — 底部弹窗滑入/滑出动画
- [ ] `src/components/AchievementPanel.vue` — 成就列表（全部/已解锁/未解锁）
- [ ] `src/stores/gameStore.ts` — 成就解锁状态
- [ ] `src/App.vue` — 整合 AchievementToast + 主菜单"成就"入口
- [ ] `public/scenes/demo.json` — 2~3 个成就示例
- [ ] 验证：QTE 成功触发 toast、变量成就自动检测、面板显示正确
- [x] `engine/types.ts` — `GameData.achievements`、`AchievementDef { id, title, description, icon?, hidden, condition }`
- [x] `engine/systems/AchievementSystem.ts` — `check(variables)` 遍历未解锁成就；`onUnlock` 回调；toast 队列管理
- [x] `engine/systems/SaveSystem.ts` — DB v5 新增 `achievements` 表
- [x] `engine/core/StateManager.ts` — `apply` 末尾 `onAfterApply` 回调
- [x] `engine/core/Engine.ts` — `stateManager.onAfterApply → achievementSystem.check`
- [x] `src/components/AchievementToast.vue` — 底部弹窗滑入/滑出动画
- [x] `src/components/AchievementPanel.vue` — 成就列表（全部/已解锁/未解锁/隐藏）
- [x] `src/stores/gameStore.ts` — 成就定义/解锁/toast 状态
- [x] `src/App.vue` — 整合 AchievementToast + 主菜单"成就"入口
- [x] `public/scenes/demo.json` — 3 个成就 + QTE success 变量 set + alone_ending onEnter
### P15 结局画廊 + 章节回顾 — 分支图可视化（待实现）

7
engine/core/Engine.ts
View File

@@ -5,6 +5,7 @@ import { StateManager } from './StateManager'
import { ChoiceSystem } from '../systems/ChoiceSystem'
import { QTESystem } from '../systems/QTESystem'
import { AudioSystem } from '../systems/AudioSystem'
import { AchievementSystem } from '../systems/AchievementSystem'
type EventHandler = (...args: any[]) => void
@@ -15,6 +16,7 @@ export class Engine {
choiceSystem: ChoiceSystem
qteSystem: QTESystem
audioSystem: AudioSystem
achievementSystem: AchievementSystem
private currentScene: SceneNode | null = null
private events: Map<EngineEvent, Set<EventHandler>> = new Map()
@@ -42,6 +44,11 @@ export class Engine {
this.choiceSystem = new ChoiceSystem()
this.qteSystem = new QTESystem()
this.audioSystem = new AudioSystem()
this.achievementSystem = new AchievementSystem()
this.stateManager.onAfterApply = (vars) => {
this.achievementSystem.check(vars)
}
this.videoManager.onTimeUpdate(this.onTimeUpdate)
}

2
engine/core/StateManager.ts
View File

@@ -4,6 +4,7 @@ export class StateManager {
variables: Record<string, number> = {}
flags: Set<string> = new Set()
history: ChoiceRecord[] = []
onAfterApply: ((variables: Record<string, number>) => void) | null = null
init(initialVars: Record<string, number>) {
this.variables = { ...initialVars }
@@ -72,6 +73,7 @@ export class StateManager {
break
}
}
this.onAfterApply?.(this.variables)
}
recordChoice(choice: ChoiceRecord) {

81
engine/systems/AchievementSystem.ts Normal file
View File

@@ -0,0 +1,81 @@
import type { AchievementDef } from '../types'
type UnlockCallback = (achievement: AchievementDef) => void
export class AchievementSystem {
private definitions: AchievementDef[] = []
private unlockedIds: Set<string> = new Set()
private onUnlock: UnlockCallback | null = null
private toastQueue: string[] = []
private toastActive = false
init(defs: AchievementDef[], alreadyUnlocked: string[]) {
this.definitions = defs
this.unlockedIds = new Set(alreadyUnlocked)
this.toastQueue = []
this.toastActive = false
}
setUnlockCallback(cb: UnlockCallback) {
this.onUnlock = cb
}
check(variables: Record<string, number>) {
for (const def of this.definitions) {
if (this.unlockedIds.has(def.id)) continue
const cond = def.condition
const val = variables[cond.variable] ?? 0
let matched = false
switch (cond.op) {
case '==': matched = val === cond.value; break
case '!=': matched = val !== cond.value; break
case '>': matched = val > (cond.value as number); break
case '<': matched = val < (cond.value as number); break
case '>=': matched = val >= (cond.value as number); break
case '<=': matched = val <= (cond.value as number); break
}
if (matched) {
this.unlockedIds.add(def.id)
this.onUnlock?.(def)
this.enqueueToast(def.id)
}
}
}
private enqueueToast(id: string) {
this.toastQueue.push(id)
if (!this.toastActive) {
this.showNextToast()
}
}
private showNextToast() {
if (this.toastQueue.length === 0) {
this.toastActive = false
return
}
this.toastActive = true
// toast is shown by the UI layer watching toastQueue
// UI calls toastDismissed() when the toast animation finishes
}
getToastQueue(): string[] {
return [...this.toastQueue]
}
toastDismissed(id: string) {
this.toastQueue = this.toastQueue.filter((i) => i !== id)
this.showNextToast()
}
getUnlockedIds(): string[] {
return [...this.unlockedIds]
}
getDefinitions(): AchievementDef[] {
return this.definitions
}
}

20
engine/systems/SaveSystem.ts
View File

@@ -21,17 +21,23 @@ interface WatchedRecord {
timestamp: number
}
interface AchievementRecord {
achievementId: string
}
class SaveDB extends Dexie {
saves!: Table<SaveRecord, number>
unlocks!: Table<UnlockRecord, string>
watched!: Table<WatchedRecord, string>
achievements!: Table<AchievementRecord, string>
constructor() {
super('MovieGameSaves')
this.version(4).stores({
this.version(5).stores({
saves: '++id, slot',
unlocks: 'chapterId',
watched: 'sceneId',
achievements: 'achievementId',
})
}
}
@@ -120,4 +126,16 @@ export class SaveSystem {
const records = await db.watched.toArray()
return records.map((r) => r.sceneId)
}
async unlockAchievement(id: string) {
const exists = await db.achievements.get(id)
if (!exists) {
await db.achievements.put({ achievementId: id })
}
}
async getUnlockedAchievements(): Promise<string[]> {
const records = await db.achievements.toArray()
return records.map((r) => r.achievementId)
}
}

11
engine/types.ts
View File

@@ -79,11 +79,21 @@ export interface ChapterInfo {
defaultVariables?: Record<string, number>
}
export interface AchievementDef {
id: string
title: string
description: string
icon?: string
hidden?: boolean
condition: Condition
}
export interface GameData {
scenes: Record<string, SceneNode>
startScene: string
variables: Record<string, number>
chapters?: ChapterInfo[]
achievements?: AchievementDef[]
}
export interface ChoiceRecord {
@@ -115,3 +125,4 @@ export type EngineEvent =
| 'hotspotRequest'
| 'hotspotUpdate'
| 'chapterUnlock'
| 'achievementUnlock'

36
public/scenes/demo.json
View File

@@ -5,6 +5,32 @@
"courage": 0,
"investigation": 0
},
"achievements": [
{
"id": "qte_master",
"title": "反应达人",
"description": "成功完成一次 QTE",
"icon": "",
"hidden": false,
"condition": { "variable": "qte_succeeded", "op": ">=", "value": 1 }
},
{
"id": "explorer",
"title": "探索者",
"description": "搜索过房间的所有角落",
"icon": "",
"hidden": false,
"condition": { "variable": "investigation", "op": ">=", "value": 2 }
},
{
"id": "game_finished",
"title": "通关达成",
"description": "完成一次游戏",
"icon": "",
"hidden": false,
"condition": { "variable": "completed_game", "op": ">=", "value": 1 }
}
],
"chapters": [
{
"id": "ch1",
@@ -175,7 +201,10 @@
"successScene": "qte_success",
"failScene": "qte_fail",
"effects": {
"success": [{ "type": "add", "target": "courage", "value": 15 }],
"success": [
{ "type": "add", "target": "courage", "value": 15 },
{ "type": "set", "target": "qte_succeeded", "value": 1 }
],
"fail": [{ "type": "add", "target": "trust", "value": -20 }]
}
}
@@ -261,7 +290,10 @@
"alone_ending": {
"id": "alone_ending",
"videoUrl": "/videos/alone_ending.mp4",
"choices": []
"choices": [],
"onEnter": [
{ "type": "set", "target": "completed_game", "value": 1 }
]
},
"continue_ending": {
"id": "continue_ending",

20
src/App.vue
View File

@@ -9,6 +9,8 @@ import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
import ChapterSelect from '@/components/ChapterSelect.vue'
import PlaybackBar from '@/components/PlaybackBar.vue'
import LangSwitch from '@/components/LangSwitch.vue'
import AchievementToast from '@/components/AchievementToast.vue'
import AchievementPanel from '@/components/AchievementPanel.vue'
import { useGameEngine } from '@/composables/useGameEngine'
import { useGameStore } from '@/stores/gameStore'
import { useFullscreen } from '@/composables/useFullscreen'
@@ -23,6 +25,7 @@ const loading = ref(true)
const started = ref(false)
const showMenu = ref(false)
const showChapterSelect = ref(false)
const showAchievements = ref(false)
const hasAutoSave = ref(false)
const currentSpeed = ref(1)
const canSkip = ref(false)
@@ -199,6 +202,7 @@ init()
<button class="start-btn" @click="handleStart">{{ t('ui.start') }}</button>
<button v-if="hasAutoSave" class="start-btn resume-btn" @click="handleResume">{{ t('ui.resume') }}</button>
<button v-if="store.chapters.length > 0" class="start-btn chapters-btn" @click="openChapterSelect">{{ t('ui.chapters') }}</button>
<button v-if="store.achievementDefs.length > 0" class="start-btn achievement-btn" @click="showAchievements = true">成就</button>
</div>
<div v-if="store.gameEnded" class="game-end-overlay">
<div class="game-end-text">{{ t('ui.gameEnd') }}</div>
@@ -220,6 +224,17 @@ init()
@select="onStartChapter"
@back="showChapterSelect = false"
/>
<AchievementPanel
v-if="showAchievements"
:definitions="store.achievementDefs"
:unlocked-ids="store.unlockedAchievementIds"
@close="showAchievements = false"
/>
<AchievementToast
:achievement-id="store.toastAchievementId"
:definitions="store.achievementDefs"
@done="store.clearToastAchievement()"
/>
</template>
</div>
</template>
@@ -346,6 +361,11 @@ html, body {
color: #fc8;
}
.achievement-btn {
border-color: rgba(255, 193, 7, 0.3);
color: #ffc107;
}
.game-end-actions {
margin-top: 24px;
display: flex;

156
src/components/AchievementPanel.vue Normal file
View File

@@ -0,0 +1,156 @@
<script setup lang="ts">
import type { AchievementDef } from '@engine/types'
defineProps<{
definitions: AchievementDef[]
unlockedIds: Set<string>
}>()
const emit = defineEmits<{
close: []
}>()
</script>
<template>
<div class="ach-overlay" @click.self="emit('close')" @keydown.escape="emit('close')">
<div class="ach-panel">
<h2 class="ach-title">成就</h2>
<div class="ach-list">
<div
v-for="ach in definitions"
:key="ach.id"
class="ach-card"
:class="{ locked: !unlockedIds.has(ach.id), hidden: ach.hidden && !unlockedIds.has(ach.id) }"
>
<div class="ach-icon">
<img v-if="ach.icon" :src="ach.icon" class="ach-img" />
<span v-else class="ach-star">{{ unlockedIds.has(ach.id) ? '⭐' : '🔒' }}</span>
</div>
<div class="ach-body">
<div class="ach-title-text">
{{ !unlockedIds.has(ach.id) && ach.hidden ? '???' : ach.title }}
</div>
<div class="ach-desc-text">
{{ !unlockedIds.has(ach.id) && ach.hidden ? '' : ach.description }}
</div>
</div>
</div>
</div>
<button class="ach-close" @click="emit('close')">关闭</button>
</div>
</div>
</template>
<style scoped>
.ach-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
}
.ach-panel {
background: #1a1a2e;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 36px 40px;
min-width: 420px;
max-width: 520px;
max-height: 80vh;
display: flex;
flex-direction: column;
}
.ach-title {
text-align: center;
font-size: 22px;
font-weight: 400;
color: #ddd;
letter-spacing: 3px;
margin-bottom: 24px;
}
.ach-list {
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
padding-right: 8px;
}
.ach-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
}
.ach-card.locked {
opacity: 0.4;
}
.ach-card.hidden {
opacity: 0.2;
}
.ach-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ach-star {
font-size: 20px;
}
.ach-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ach-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.ach-title-text {
font-size: 14px;
color: #eee;
}
.ach-desc-text {
font-size: 12px;
color: #888;
}
.ach-close {
margin-top: 20px;
padding: 10px 36px;
font-size: 14px;
color: #888;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
align-self: center;
}
.ach-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #ccc;
}
</style>

108
src/components/AchievementToast.vue Normal file
View File

@@ -0,0 +1,108 @@
<script setup lang="ts">
import { computed, watch, ref } from 'vue'
import type { AchievementDef } from '@engine/types'
const props = defineProps<{
achievementId: string
definitions: AchievementDef[]
}>()
const emit = defineEmits<{
done: []
}>()
const visible = ref(false)
const def = computed(() => props.definitions.find((d) => d.id === props.achievementId))
watch(() => props.achievementId, (id) => {
if (!id) return
visible.value = true
setTimeout(() => {
visible.value = false
setTimeout(() => emit('done'), 400)
}, 3000)
}, { immediate: true })
</script>
<template>
<div class="achievement-toast" v-if="visible && def" :class="{ show: visible }">
<div class="toast-icon">
<img v-if="def.icon" :src="def.icon" class="toast-img" />
<span v-else class="toast-star">⭐</span>
</div>
<div class="toast-body">
<div class="toast-label">成就解锁</div>
<div class="toast-title">{{ def.title }}</div>
<div class="toast-desc">{{ def.description }}</div>
</div>
</div>
</template>
<style scoped>
.achievement-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: rgba(20, 20, 40, 0.95);
border: 1px solid rgba(255, 193, 7, 0.4);
border-radius: 8px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 14px;
z-index: 300;
min-width: 320px;
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.achievement-toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.toast-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.toast-star {
font-size: 24px;
}
.toast-img {
width: 100%;
height: 100%;
object-fit: contain;
}
.toast-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.toast-label {
font-size: 11px;
color: #ffc107;
text-transform: uppercase;
letter-spacing: 1px;
}
.toast-title {
font-size: 15px;
color: #fff;
font-weight: 600;
}
.toast-desc {
font-size: 12px;
color: #aaa;
}
</style>

11
src/composables/useGameEngine.ts
View File

@@ -26,6 +26,11 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
await saveSystem.markWatched(sceneId)
})
engine.achievementSystem.setUnlockCallback(async (ach) => {
await saveSystem.unlockAchievement(ach.id)
store.addUnlockedAchievement(ach.id)
})
engine.on('sceneChange', (scene) => {
store.setScene(scene)
store.clearChoices()
@@ -106,8 +111,14 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
engine.sceneManager.load(data)
engine.stateManager.init(data.variables)
store.setChapters(data.chapters || [])
store.setAchievementDefs(data.achievements || [])
const unlocked = await saveSystem.getUnlockedChapters()
store.setUnlockedChapters(unlocked)
const achieved = await saveSystem.getUnlockedAchievements()
store.setUnlockedAchievementIds(achieved)
engine.achievementSystem.init(data.achievements || [], achieved)
}
function ensureVideo() {

33
src/stores/gameStore.ts
View File

@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { ref, shallowRef } from 'vue'
import type { SceneNode, Choice, QTEDefinition, Hotspot, ChapterInfo } from '@engine/types'
import type { SceneNode, Choice, QTEDefinition, Hotspot, ChapterInfo, AchievementDef } from '@engine/types'
export interface SlotInfo {
slot: number
@@ -29,6 +29,10 @@ export const useGameStore = defineStore('game', () => {
const showChapterSelect = ref(false)
const chapters = ref<ChapterInfo[]>([])
const unlockedChapterIds = ref<Set<string>>(new Set())
const showAchievements = ref(false)
const achievementDefs = ref<AchievementDef[]>([])
const unlockedAchievementIds = ref<Set<string>>(new Set())
const toastAchievementId = ref('')
function setScene(scene: SceneNode) {
currentScene.value = scene
@@ -126,6 +130,28 @@ export const useGameStore = defineStore('game', () => {
showChapterSelect.value = val
}
function setShowAchievements(val: boolean) {
showAchievements.value = val
}
function setAchievementDefs(list: AchievementDef[]) {
achievementDefs.value = list
}
function setUnlockedAchievementIds(ids: string[]) {
unlockedAchievementIds.value = new Set(ids)
}
function addUnlockedAchievement(id: string) {
unlockedAchievementIds.value.add(id)
unlockedAchievementIds.value = new Set(unlockedAchievementIds.value)
toastAchievementId.value = id
}
function clearToastAchievement() {
toastAchievementId.value = ''
}
function dump() {
console.group('GameStore')
console.log('currentScene:', currentScene.value?.id)
@@ -142,13 +168,16 @@ export const useGameStore = defineStore('game', () => {
currentScene, choices, gameEnded, timerTotal, timerRemaining, saves,
qteActive, qteDef, qteTotal, qteRemaining, qteResult, videoTime,
hotspots, isImageScene, showChapterSelect, chapters, unlockedChapterIds,
inputMode,
inputMode, showAchievements, achievementDefs, unlockedAchievementIds,
toastAchievementId,
setScene, setChoices, clearChoices, setGameEnded,
setTimer, clearTimer, setSaves,
showQTE, updateQTE, resolveQTE, clearQTE, setVideoTime,
setHotspots, clearHotspots, setIsImageScene,
setInputMode,
setChapters, setUnlockedChapters, addUnlockedChapter, setShowChapterSelect,
setShowAchievements, setAchievementDefs, setUnlockedAchievementIds,
addUnlockedAchievement, clearToastAchievement,
dump,
}
})