示例工程【免费下载链接】godot-demo-projectsDemonstration and Template Projects项目地址https://gitcode.com/GitHub_Trending/go/godot-demo-projects点击查看免费下载本篇文章基于 godot-demo-projects 仓库中的2d/hexagonal_map演示项目完整解析如何在 Godot 4 中搭建一套六边形地图从 TileSet 资源的形状、偏移轴与瓦片尺寸配置到 TileMapLayer 的地图布局再到角色在六边形网格上的移动修正。读完本文你将掌握六边形瓦片集的标准配置方法、替代瓦片alternative tiles的翻转/转置组合用法以及一套可直接复用的六边形地图角色移动脚本。项目概览最小的六边形地图演示2d/hexagonal_map是 godot-demo-projects 仓库 2d 分类下的一个极简演示项目官方 README 对其定位非常明确一个用于展示六边形TileMap与TileSet的简单演示Very simple demo showing a hexagonal TileMap and TileSet。整个项目的技术栈与运行前提可以归纳为三点语言GDScript角色移动脚本为纯 GDScript 实现渲染器CompatibilityOpenGL 兼容渲染适用于对渲染特性要求不高、追求最大兼容性的 2D 项目入口场景主场景为res://map.tscn运行后即加载由六边形瓦片铺成的地图与一个可操控角色。该演示同样发布在 Godot 官方资产库中可通过Hexagonal Game Demo检索到。仓库内的 project.godot 记录了项目名称 Hexagonal Game、描述与config/tagsPackedStringArray(2d, demo, official, tilemap)等元信息并以config/featuresPackedStringArray(4.7)声明了目标 Godot 版本。目录结构与资源组织在深入配置细节前先梳理2d/hexagonal_map目录下与本文主题直接相关的文件路径作用tiles/26 张 128x128 六边形瓦片素材WWT-01.png ~ WWT-26.pngtileset.tres六边形 TileSet 资源定义瓦片形状、偏移轴、尺寸与 26 个图集源map.tscn主场景包含 TileMapLayer 地图层与 Troll 角色实例troll.gd角色移动脚本包含六边形斜向移动修正逻辑troll.tscn角色场景精灵、阴影、碰撞体、相机tileset_edit.tscn瓦片素材平铺预览场景便于在编辑器中检查全部瓦片project.godot项目配置主场景、渲染器、物理、输入映射从结构上看该演示将瓦片素材、TileSet 定义、地图场景、角色四部分彼此分离正是学习 Godot 瓦片系统时最清晰的参考样板。六边形 TileSet 核心配置解析六边形地图的一切都建立在 tileset.tres 这个 TileSet 资源上。资源头部声明的三个全局属性决定了地图的几何形态[resource] tile_shape 3 tile_offset_axis 1 tile_size Vector2i(110, 94)tile_shape 3对应 GodotTileSet.TileShape枚举中的六边形Hexagon形状。正是这一行让整个 TileMap 采用蜂窝状网格布局而不是常规的正方形网格。tile_offset_axis 1指定六边形相邻行的偏移方向为Y 轴即每列上下相邻的瓦片横向错开半格形成蜂窝排列配合下方tile_size的宽高比可以确认这是平顶flat-top六边形布局——瓦片的包围矩形为 110 像素宽、94 像素高宽大于高正是平顶六边形的典型特征。tile_size Vector2i(110, 94)每个瓦片在网格坐标系中的逻辑尺寸。注意这与瓦片素材的像素尺寸128x128并不相等素材实际包含了六边形周围的透明留白网格间距由tile_size决定。26 个 TileSetAtlasSource 与替代瓦片tileset.tres中声明了 26 个TileSetAtlasSourcesources/0~sources/25每个源对应tiles/目录下的一张瓦片素材。每个源的关键配置完全一致[sub_resource typeTileSetAtlasSource idTileSetAtlasSource_oh287] texture ExtResource(1) ; 对应 tiles/WWT-01.png texture_region_size Vector2i(128, 128) ; 图集中每个瓦片切片的像素尺寸 0:0/next_alternative_id 8 0:0/0 0 0:0/1 1 0:0/1/flip_h true 0:0/2 2 0:0/2/flip_v true ... 0:0/7 7 0:0/7/flip_h true 0:0/7/flip_v true 0:0/7/transpose true这里texture_region_size Vector2i(128, 128)告诉 TileSet 如何从素材图中切出瓦片而0:0/N N则定义了该源的8 个替代瓦片alternative tilesid 从 0 到 7id 0原始瓦片id 1水平翻转flip_hid 2垂直翻转flip_vid 3水平 垂直翻转id 4转置transpose即对角线镜像id 5水平翻转 转置id 6垂直翻转 转置id 7水平翻转 垂直翻转 转置。这是六边形地图视觉多样化的关键技巧一套素材即可通过翻转与转置衍生出 8 种变体。从截图可以看到同样的草地纹理以不同朝向铺满地图方向差异正是由这些替代瓦片实现的而无需额外制作更多素材。next_alternative_id 8表明编辑器下一次新建替代瓦片时从 id 8 开始编号。用 TileMapLayer 拼出六边形地图主场景 map.tscn 是 4.x 格式的场景结构非常精简[gd_scene format4 uiduid://4ug0kqe00j8g] [ext_resource typeTileSet uiduid://bgao55br0duys pathres://tileset.tres id1] [ext_resource typePackedScene uiduid://bhgyilxufjioq pathres://troll.tscn id2] [node nameMap typeNode2D] [node nameTileMapLayer typeTileMapLayer parent.] tile_map_data PackedByteArray(AAAFAPn/AAAA...) tile_set ExtResource(1) [node nameTroll parent. instanceExtResource(2)] modulate Color(1.5, 1.5, 1.5, 1) position Vector2(602.819, -39.2876)几个值得注意的实现细节场景根节点是Node2D其下挂一个TileMapLayer节点承载瓦片数据tile_set属性直接引用 tileset.tres瓦片的具体摆放信息存储在tile_map_data字段中——这是一个PackedByteArray二进制数据由 TileMapLayer 序列化而来记录了每个网格坐标上放置的瓦片源 id 与替代 id比如数据段中的.../BgAAAA...、.../AQAAAA...片段就编码了不同替代瓦片的选用。日常编辑时并不需要手工解读这段字节直接在编辑器的 TileMapLayer 上绘制即可地图上同时实例化了角色场景Troll其modulate Color(1.5, 1.5, 1.5, 1)让角色整体提亮position位于地图中部偏上。从tile_map_data的规模数百字节可以推断该演示的地图面积不大属于展示六边形网格排布规律的样板地图草地打底并点缀了水洼、灌木、凹陷等特征地块对应WWT-06、WWT-13、WWT-14、WWT-15等特殊地形瓦片可从截图中的场景元素对应看出。角色在六边形网格上的移动修正演示的地图并非静态展示玩家可以通过 WASD/方向键或手柄控制一个哥布林风格角色在地图上移动移动逻辑全部写在 troll.gd 中extends CharacterBody2D const MOTION_SPEED 30 const FRICTION_FACTOR 0.89 const TAN30DEG tan(deg_to_rad(30)) func _physics_process(_delta: float) - void: var motion : Vector2() motion.x Input.get_axis(move_left, move_right) motion.y Input.get_axis(move_up, move_down) # Make diagonal movement fit for hexagonal tiles. motion.y * TAN30DEG velocity motion.normalized() * MOTION_SPEED # Apply friction. velocity * FRICTION_FACTOR move_and_slide()这段脚本短小精悍却包含了一个六边形地图角色移动的核心知识点输入采样通过Input.get_axis(negative_action, positive_action)读取左右、上下两组动作返回 -1~1 的轴向值六边形斜向修正关键行motion.y * TAN30DEG其中TAN30DEG tan(deg_to_rad(30)) ≈ 0.577。由于六边形瓦片在垂直方向上的有效跨度只有水平跨度的一半多一点平顶六边形的几何特征如果不做修正角色以相同速率沿 x/y 轴移动时视觉上会感觉纵向移动过快、斜向轨迹与六边形边不贴合。将 y 分量按 tan(30°) 缩放后对角移动的轨迹才与六边形网格的几何比例一致这正是代码注释 Make diagonal movement fit for hexagonal tiles 的含义速度与摩擦velocity motion.normalized() * MOTION_SPEED以恒定速率30 像素/秒加速随后velocity * FRICTION_FACTOR0.89在每一物理帧衰减速度实现无按键时的平滑减速停止而非瞬间停顿物理移动最后调用move_and_slide()完成实际位移。角色的场景结构 troll.tscn 同样值得一看它由四部分组成Sprite2D角色贴图 troll.pngShadow一个show_behind_parent true的黑色半透明影子精灵alpha 0.5带skew 0.523599约 30°的斜切模拟地面投影CollisionShape2DCircleShape2D半径为 16 的圆形碰撞体与六边形地图的实体交互预留了物理边界Camera2Dprocess_callback 0按物理帧处理让相机跟随角色平滑滚动。项目运行配置要点project.godot 中与六边形地图体验直接相关的配置项包括配置值作用run/main_sceneres://map.tscn启动即加载六边形地图主场景renderer/rendering_methodgl_compatibility使用 Compatibility 渲染器兼容性优先physics/common/physics_ticks_per_second120物理帧率 120Hz角色移动更平滑physics/common/physics_interpolationtrue开启物理插值进一步平滑高速物理帧下的运动表现window/stretch/modecanvas_items2D 画布随窗口缩放适配window/stretch/aspectexpand画面等比扩展不强制裁切environment/defaults/default_clear_color深绿色与草地主题一致的窗口背景色输入映射在[input]段定义了move_up/move_down/move_left/move_right四组动作每组同时绑定键盘WASD 与方向键physical_keycode分别为 87/83/65/68 与 4194320/4194322/4194319/4194321、手柄摇杆axis_value±1.0与手柄按键button_index 12~15死区统一为 0.2。这意味着角色支持键鼠与手柄双端操控。运行该演示的方式与其他 Godot 项目一致使用 Godot 4.x 编辑器打开2d/hexagonal_map目录以 project.godot 为项目根按 F5或命令行执行godot --path 2d/hexagonal_map即可进入地图并控制角色移动。瓦片素材与编辑预览场景tiles/目录下的 26 张瓦片WWT-01.png~WWT-26.png均为 128x128 像素覆盖了草地基底、水洼、灌木、凹陷地形等自然主题素材。为了便于在编辑器里批量检查这些素材项目额外提供了一个 tileset_edit.tscn 场景它只是一个Node2D按 128 像素间距横向排列 26 个Sprite2Dcentered false把全部瓦片平铺成一幅 5 行 x 6 列的图鉴视图。这个用场景当素材检查器的做法对美术资源的快速目检非常实用也侧面印证了texture_region_size 128x128的切片依据。小结从本演示可以学到什么2d/hexagonal_map虽然定位为非常简单的演示却覆盖了六边形地图开发的完整闭环可以作为以下能力的参考样板TileSet 几何配置通过tile_shape 3、tile_offset_axis 1与tile_size Vector2i(110, 94)三行配置即定义一套平顶六边形网格素材复用技巧借助替代瓦片的flip_h/flip_v/transpose组合单张素材可衍生 8 个朝向变体显著提升地图视觉丰富度六边形移动修正角色移动脚本中motion.y * TAN30DEG一行即解决六边形网格下的斜向移动比例问题配合摩擦系数实现平滑启停项目工程配置Compatibility 渲染器、120Hz 物理帧率与物理插值的组合是 2D 瓦片游戏兼顾性能与流畅度的典型设置。如需深入可在仓库内继续对照阅读 tileset.tres、map.tscn、troll.gd 与 project.godot 四个核心文件它们在无脚本依赖的前提下构成了一个自洽可运行的六边形地图最小示例。赞分享示例工程【免费下载链接】godot-demo-projectsDemonstration and Template Projects项目地址https://gitcode.com/GitHub_Trending/go/godot-demo-projects点击查看免费下载相关推荐Phaser 3.60 Tilemap 新特性与修复全景解析getTileCorners、tileOffset、createFromObjects 重构与六边形地图深度指南Phaser 3.60 Tilemap 新特性与修复全景解析getTileCorners、tileOffset、createFromObjects 重构与六边游戏开发图形学前端deck.gl 3D 热力图HexagonLayer实战用六边形聚合构建三维柱状事故地图deck.gl 3D 热力图HexagonLayer实战用六边形聚合构建三维柱状事故地图 本文以 deck.gl 仓库中的 3d heatmap 示例 h前端数据可视化3D渲染图形学Godot 2D 运动学角色控制器实战基于 CharacterBody2D 的 Kinematic Character 2D 演示剖析Godot 2D 运动学角色控制器实战基于 CharacterBody2D 的 Kinematic Character 2D 演示剖析 本指南以 godot示例工程上一篇Remix 高级指南createMixin、Fetch 代理、SSE 流与 SafeHtml 模板等底层 API 的组合实战下一篇HyperFrames v0.7.90有界视频提取、HDR Scratch 预算与 outputDynamicRange API 迁移创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考