快速开始

1. 创建游戏

在创作台选择「沉浸创作」，填写基本信息：

标题 — 游戏名称
简介 — 一句话描述
封面 — 游戏封面图
游戏设定 — AI 系统提示词（角色设定、世界观、行为规则等）

2. 配置状态字段（可选）

沉浸创作同样支持深度创作的状态字段配置。配置后，你通过 SDK 写入的数据会自动注入到 AI 提示词中。

具体配置方法参考深度创作（世界状态、玩家属性、角色属性、关系系统、物品栏）。

状态字段配置不是必须的。如果你的游戏不需要 AI 自动感知状态数据，可以跳过这一步，直接使用 SDK 的 custom 模块存储扩展属性。你也可以在「自定义属性」区域定义字段并开启 AI 追踪，让 AI 自动维护这些变量。

3. 初始化项目

SDK 是纯 JavaScript 包，支持任何前端技术栈：

技术栈	创建项目
原生 JS	`npm create vite@latest my-game -- --template vanilla`
Vue	`npm create vite@latest my-game -- --template vue`
React	`npm create vite@latest my-game -- --template react`

安装 SDK：

cd my-game
npm install @storvia/sdk

推荐使用 Vite 作为构建工具。如果手动创建项目，还需要安装 Vite：npm install vite，并在 package.json 中添加构建脚本。

Vite 配置

在 vite.config.js（或 vite.config.ts）中必须设置 base: './'，确保打包后资源使用相对路径，否则上传到 Storvia 后 JS/CSS 等文件无法加载：

// 原生 JS
import { defineConfig } from 'vite'
export default defineConfig({ base: './' })

// Vue
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({ base: './', plugins: [vue()] })

// React
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({ base: './', plugins: [react()] })

4. 编写游戏代码

项目结构：

my-game/
├── package.json
├── vite.config.js
├── index.html            ← 入口页面
├── public/               ← 静态资源（图片等，构建时自动复制到 dist）
└── src/
    ├── main.js           ← 入口脚本
    └── style.css         ← 样式

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的游戏</title>
</head>
<body>
  <div id="app">
    <div id="chat-area"></div>
    <input id="user-input" placeholder="说点什么..." />
    <button id="send-btn">发送</button>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

src/main.js

import { createStorviaSDK } from '@storvia/sdk'
import './style.css'

let storvia

try {
  storvia = await createStorviaSDK()
} catch (err) {
  console.error('初始化失败:', err.message)
}

// 发送消息并获取 AI 回复
document.getElementById('send-btn').onclick = async () => {
  const input = document.getElementById('user-input')
  const text = input.value.trim()
  if (!text) return
  input.value = ''

  const chatArea = document.getElementById('chat-area')
  chatArea.innerHTML += `<div class="msg-user">${text}</div>`

  const reply = await storvia.chat.send({
    message: text,
    topic: 'main',
    sceneKey: 'main_scene',  // 引用创作台预设的场景设定
  })

  if (reply) {
    chatArea.innerHTML += `<div class="msg-ai">${reply.content}</div>`
  }
}

5. 本地开发

npm run dev

Vite 会启动开发服务器。本地开发时可通过 dev 模式调试，详见 SDK 初始化 - 本地调试。

6. 构建并上传

npm run build

构建完成后，将 dist/ 目录压缩为 ZIP 文件，在创作台的「上传游戏文件」区域上传。

ZIP 文件大小限制 20MB
ZIP 根目录下必须有 index.html（Vite 构建会自动生成）
public/ 目录的内容会自动复制到 dist/
不需要上传 node_modules、src 等源码目录

7. 预览

上传成功后，点击「预览」按钮即可在创作台内预览游戏效果。预览模式下 AI 对话正常工作（会消耗花园币），但游戏状态不会持久保存。

8. 发布

确认无误后点击「发布」，游戏上线。

每次重新上传 ZIP 并发布后，新版本生效。已在游戏中的玩家不会自动切换——当检测到有新版本时，游戏设置按钮上会出现红点提示，玩家点击「同步游戏设定」后才会加载新版本代码。存档数据（角色属性、关系、物品等）不受影响。

复制 SDK 文档

创作台沉浸创作下有一个「复制 SDK 文档」按钮，点击后会根据你当前配置的字段自动生成一份个性化的 SDK 接口文档（Markdown 格式），包含每个 API 的调用方式和返回值示例。

你可以将这份文档粘贴给 AI 编程助手（如 Claude、ChatGPT），让 AI 帮你快速编写游戏代码。

快速开始

On this page