DEV Community
·
使用Next.js和AI构建叙事游戏
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
本文讲述了作者利用生成图像和AI技术开发一款关于蒙彼利埃城市交通的叙事游戏。作者设计了学生的旅程，通过关键电车站点展示城市，并使用AI生成对话和音乐。开发过程中，作者使用了Next.js和Tailwind等工具，在AI助手的帮助下提高了编码效率，整个创作和开发历时约2-3周。
🎯
关键要点
- 作者利用生成图像和AI技术开发了一款关于蒙彼利埃城市交通的叙事游戏。
- 游戏设计围绕学生的旅程，通过关键电车站点展示城市。
- 使用Google街景截图和Dzine工具对图像进行重新风格化，生成了约50个场景。
- 音乐使用Soundraw生成，音效来自音效库。
- 对话通过AI生成，使用了Perplexity、ChatGPT和Mistral AI等工具。
- 使用Twine工具组织对话，最终导出为HTML文件供Next.js应用使用。
- 开发过程中使用了Next.js、Tailwind和Framer Motion等工具，IDE从VSCode/Copilot切换到Windsurf/Cascade。
- Cascade助手生成了约75%的逻辑代码，但也出现了一些代码混乱和无限循环的问题。
- 创作阶段耗时约1-2周，开发阶段约1周，整体体验愉快且富有教育意义。
- 游戏可玩时间为5-10分钟，游戏以法语进行。
❓
延伸问答
这款叙事游戏的主题是什么？
这款叙事游戏的主题是关于蒙彼利埃城市交通，玩家通过学生的旅程探索城市。
作者在游戏开发中使用了哪些工具？
作者使用了Next.js、Tailwind、Framer Motion、Twine和Soundraw等工具。
游戏中的对话是如何生成的？
游戏中的对话是通过AI生成的，使用了Perplexity、ChatGPT和Mistral AI等工具。
开发这款游戏的时间大约是多少？
创作阶段耗时约1-2周，开发阶段约1周，总共约3周。
游戏的可玩时间是多少？
游戏的可玩时间为5-10分钟。
在开发过程中遇到了哪些问题？
开发过程中出现了一些代码混乱和无限循环的问题，需要仔细创建规则以避免。
➡️
