DEV Community ·

使用Next.js和AI构建叙事游戏

Q: 游戏的可玩时间是多少？

游戏的可玩时间为5-10分钟。

💡 原文英文，约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分钟，游戏以法语进行。

🔎

延伸解读

AI在游戏开发中的应用

本文展示了AI在游戏开发中的多种应用，包括对话生成和音乐创作。作者利用Perplexity、ChatGPT和Mistral AI等工具生成对话，显示了AI在创意过程中的潜力。然而，作者也提到了一些挑战，如代码混乱和无限循环问题，这提醒开发者在使用AI时需谨慎管理生成内容。

工具选择的重要性

作者在开发过程中使用了Next.js、Tailwind和Framer Motion等工具，这些工具的选择直接影响了开发效率和最终效果。特别是Cascade助手在生成逻辑代码方面的表现，虽然提高了效率，但也带来了代码管理的复杂性。开发者应根据项目需求仔细选择合适的工具，以平衡效率与可维护性。

叙事游戏的教育意义

通过设计围绕学生旅程的叙事游戏，作者不仅展示了蒙彼利埃的交通系统，还为玩家提供了探索城市的机会。这种游戏形式不仅有趣，还具有教育意义，能够帮助玩家更好地理解城市交通和文化背景。开发者在设计类似游戏时，可以考虑如何结合教育元素以增强游戏的价值。

❓

延伸问答

这款叙事游戏的主题是什么？

这款叙事游戏的主题是关于蒙彼利埃城市交通，玩家通过学生的旅程探索城市。

作者在游戏开发中使用了哪些工具？

作者使用了Next.js、Tailwind、Framer Motion、Twine和Soundraw等工具。

游戏中的对话是如何生成的？

游戏中的对话是通过AI生成的，使用了Perplexity、ChatGPT和Mistral AI等工具。

开发这款游戏的时间大约是多少？

创作阶段耗时约1-2周，开发阶段约1周，总共约3周。

游戏的可玩时间是多少？