尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
30 分钟画出一张能跑的小镇地图:AI Town 地图编辑器零基础上手
30 分钟画出一张能跑的小镇地图AI Town 地图编辑器零基础上手【免费下载链接】ai-townA MIT-licensed, deployable starter kit for building and customizing your own version of AI town - a virtual town where AI characters live, chat and socialize.项目地址: https://gitcode.com/gh_mirrors/ai/ai-townAI 角色在小镇里醒来、散步、凑在一起聊天还会记住昨天发生的事——这就是 AI Town 的日常。而角色住哪儿、往哪儿走取决于你给小镇的地图。这篇教程带你打开 AI Town 地图编辑器从零画出一张 30 分钟内就能跑进游戏的小镇地图。01 跑起来 3 条命令启动本地小镇和编辑器这节能拿到什么本地同时跑起游戏和地图编辑器后面所有操作都有地方验证。克隆仓库并安装依赖git clone https://gitcode.com/gh_mirrors/ai/ai-town cd ai-town npm install做完后你会看到终端无报错项目根目录多出 node_modules。然后启动游戏标准方式需要一个免费 Convex 账号npm run dev做完后你会看到浏览器打开 http://localhost:5173AI 角色已经在小镇里走动。再开一个终端启动地图编辑器npm run le做完后你会看到localhost:5174 出现编辑器页面顶部有 edit / map / config 三个标签页。02 认识画布 ️7 套内置图块与取用方式这节能拿到什么搞清楚右侧面板里的图块来自哪个文件以及怎么取一块图开始画。编辑器的默认图块集由 leconfig.js 里的DEFAULTTILESETPATH指定默认是 gentle.png。src/editor/tilesets/目录里共 7 套可选文件风格定位适用场景gentle.png柔和手绘田园默认第一张地图的地面与背景gentle-obj.png同风格物块层碰撞层上的树、房屋、围栏Serene.png宁静冷调安静的居民区Modern.png现代都市建筑、街道、设施forest.png像素森林野外、公园、林地magecity.png法师之城奇幻主题小镇phantasy2.png复古幻想实验性风格地图取图按动手顺序来打开 edit 页右侧面板就是图块集点一下等于选中一支画笔左上画板是背景层无碰撞点画板即可落笔第二行左侧画板是物块层有碰撞树和建筑都放这里右下 composite 面板是两层叠加后的实时预览。想换图块集直接改 leconfig.js 里那行路径即可也可以在 config 页用 Load Tileset 加载本地文件。03 第一张地图 ️从空白画布到保存这节能拿到什么按 5 步画出第一张图并存成游戏可加载的 .js 文件。想知道 AI Town 地图编辑器怎么新建地图就是下面这条链路。定尺寸。默认画布 2048×1536 像素、每格 32 像素约 64×48 格由 leconfig.js 的levelwidth/levelheight控制按p键可在 16px 与 32px 格子间切换。铺地形。在右侧图块集选中地面图块在背景层点击绘制大面积统一地面选中图块后按f整层一次填充完成。放建筑。换到第二行的物块层画树、房子。这一层有碰撞AI 角色和玩家都会被挡住画错了按住d点击图块删除。点缀植被。继续用物块层补花草和装饰拿不准对齐就按g叠加 32×32 网格误操作用 Ctrlz 撤销。保存并接进游戏。AI Town 地图保存这一步很简单按s键生成地图 .js 文件含 tilesetpath、bgtiles、objmap 等字段可对照 src/editor/maps/ 里的 gentle.js 等示例config 页的 Save Composite 还能导出 PNG 预览图。想让它真正跑起来把 .js 放进项目把convex/init.ts里的地图导入从data/gentle改为你的新文件然后依次执行npx convex run testing:wipeAllTables和npx convex run init清掉旧世界、重建世界刷新页面就能看到自己的地图。04 进阶玩法 ✨自定义图块与动态元素这节能拿到什么换上自己的图块再给地图加上会动的元素。换自己的图块AI Town 自定义图块。把你按 32×32 对齐切好的图片放进src/editor/tilesets/把 leconfig.js 的DEFAULTTILESETPATH指过去重启编辑器即可不想改代码用 config 页的 Load Tileset 加载本地 png 也可以。加动态元素。仓库自带data/animations/下 5 组动画定义windmill、campfire、gentlesparkle、gentlewaterfall、gentlesplash及对应帧图在 config 页用 Load Sprite 加载动画再摆上画布——默认地图里的风车和篝火就是这么来的。导入外部地图。如果你熟悉 Tiled 编辑器可导出两层bgtiles、objmap的 JSON用 convertMap.js 脚本转成引擎能用的地图文件。换一批居民。角色定义集中在 data/characters.ts改完角色数据后同样要清库重建世界。05 避坑速查 ⚠️现象原因解法选中的图块消失、位置画偏图块完全透明或没对齐网格按m叠红色遮罩找隐形图块按g叠网格辅助对齐图块错位、被切断16px 与 32px 格长选错p键或 config 页的 16/32 选项切换保存了地图游戏里还是旧小镇只生成了 .js没接进后端改 convex/init.ts 的导入路径再清库重建世界启动时提示 node 版本错误Node 版本不兼容换到 Node 18README 推荐的最稳定版本画完之后3 件值得做的事用 Modern.png 图块集重画一张同样大小的地图直观感受图块风格的差别。把自己切的 32×32 png 换成默认图块集完整走一遍 AI Town 自定义图块流程。加载 windmill 或 campfire 动画摆进地图看看世界启动后的动态效果。【免费下载链接】ai-townA MIT-licensed, deployable starter kit for building and customizing your own version of AI town - a virtual town where AI characters live, chat and socialize.项目地址: https://gitcode.com/gh_mirrors/ai/ai-town创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

如何用Horizon打造你的专属AI新闻雷达:5步配置终极指南

如何用Horizon打造你的专属AI新闻雷达:5步配置终极指南

如何用Horizon打造你的专属AI新闻雷达:5步配置终极指南 【免费下载链接】Horizon 📡 Your own AI-powered news radar. Generates daily briefings in English & Chinese. | 用 AI 构建你专属的新闻雷达 项目地址: https://gitcode.com/GitHub_Tre…

📅 2026/11/5 1:35:58
3步配置Horizon AI新闻雷达:打造你的专属信息流

3步配置Horizon AI新闻雷达:打造你的专属信息流

3步配置Horizon AI新闻雷达:打造你的专属信息流 【免费下载链接】Horizon 📡 Your own AI-powered news radar. Generates daily briefings in English & Chinese. | 用 AI 构建你专属的新闻雷达 项目地址: https://gitcode.com/GitHub_Trending/h…

📅 2026/11/5 1:35:58
2026年6月AI领域重磅事件盘点_ai 融资 收购 ipo 2026年6月-CSDN博客

2026年6月AI领域重磅事件盘点_ai 融资 收购 ipo 2026年6月-CSDN博客

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/11/5 1:35:58
MORE NEWS

更多资讯

📰

2025年Data Agent技术演进与行业应用解析

1. 榜单背景与行业价值2025年中国大数据产业正经历从规模扩张向价值深挖的关键转型期。Data Agent(数据智能体)作为融合大模型与垂直场景的新范式,正在重构企业数据应用的基础架构。金猿奖作为国内大数据领域最具公信力的行业奖项之一&#x…

📰

有感FOC三环实现:时序分层、PI整定与轨迹规划

简介:面向电机控制与嵌入式开发学习者的有感FOC位置、速度与电流三环算法实现资料,围绕坐标变换、PID调节、SVPWM调制、编码器反馈与电流采样等关键环节展开,代码在STM32F4平台上运行,适合希望理解有感控制链路、搭建实验样机或对…

📰

STM32 FATFS SD卡读写:diskio、扇区寻址与写同步避坑

简介:面向嵌入式学习者与需在STM32上实现存储读写的开发者,这份资料展示KEIL环境下通过SPI或SDIO驱动SD卡并挂载FATFS的完整思路,涉及引脚配置、扇区读写、FATFS裁剪及f_open、f_read等文件操作,也包含未检测到卡、文件不存在、读…

📰

AI时代工程师转型:从编码到架构设计的技能升级

1. 从代码编写到架构设计:AI如何重塑工程师角色十年前我刚入行时,工程师的核心竞争力是能写出高效可靠的代码。现在打开GitHub Copilot,它能在几秒内生成比我当年更规范的函数实现。上周团队新来的应届生用GPT-4重构了我们的日志模块&#xf…

📰

基于DWVD与MCNN的机械故障诊断方法研究

1. 项目概述这个项目提出了一种创新的机械故障诊断方法,将时频分析领域的离散韦格纳分布(DWVD)与深度学习中的多尺度卷积神经网络(MCNN)相结合。作为一名长期从事机械状态监测的工程师,我深知传统故障诊断方…

📰

GEC2410 WinCE底层实验包:手册与源码对照实战指南

简介:这份资源面向嵌入式系统初学者与进阶开发者,围绕三星S3C2410(ARM920T内核)硬件平台与Windows CE系统的集成开发展开,提供实验手册与配套源码,帮助读者理解从系统架构、硬件接口到驱动与应用程序开发的…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬