从图集中提取贴图的问题说起

[constly]

我在网上找了这种素材：

两个问题想请教下:

1. 我希望可以从这里面抠图来绘制imgui的ImageButton（想做一个简单的2d地图编辑器），不知道目前是否支持？

2. 我看RmlUI官方的invaders小游戏示例，里面的怪物对象是一个Sprite，重点是居然每帧都调用MakeGeometry来绘制，代码链接。在unity或者虚幻中，遇到这种需求，一般会在UI节点树上挂专门的npc节点，然后通过修改节点的transform等来控制对象。对于这两种方式的区别，我理解的是：invaders中，不管npc对象动或者不动，开销都是固定的：每帧都构建一个Rml::Mesh 来绘制；在双U中，由于使用的保留模式UI架构，当UI对象的数据没有变化时，会使用上一帧缓存的顶点数据来绘制，会省一些。

   看wiki的对Ant RmlUI的介绍，Ant的RmlUI与原版在底层实现上已经相去甚远。所以我的问题是，在用Ant RmlUI来做2D游戏时，假如屏幕上要渲染的对象很多，且地形之类的sprite不会动，其他sprite或者text移动比较频繁的情况下，应该怎么绘制比较好呢？
   （我最近沉迷于B站的三谋，我在想，假如用2D来做SLG，里面的行军线应该如何绘制呢？其特点是：数量很多，同屏可达上千条；线条的起点或终点每帧都在动）

[cloudwu]

1. 目前 Ant 的 2d 管线支持还不好。其实已经做了一些基础支持 https://github.com/ejoy/ant/blob/master/test/features/pkg/ant.test.features/test/viewrect2d_test.lua ，但是缺乏实际应用驱动它。
2. 图集 (atlas) 的支持在最近几个月做了 8f3aefa 。我们把 atlas 看成是很多小图物理上整合到一张大贴图中，希望上层使用时，可以把大图中的一部分看成一张普通的贴图使用。但是，这种用法不可能完全透明（因为需要额外的 uv 参数），这就要调用它的中间层做一些适配。目前，在实验性的 2d 管线 (dynamic2d) 和 rmlui 中做了适配。imgui 据我所知还没有。具体用法可以看看 https://github.com/ejoy/ant/tree/master/test/atlas 。或者 @pourtheworld 可以补充一下。
3. 当下要画线，可以考虑这个 https://github.com/ejoy/ant/blob/master/pkg/ant.widget/widget.lua#L122 不过我觉得画直线的行军线实在是太简陋了。应该专门写一个模块程序生成不同粗细的箭头，可以参考 P 社的钢铁雄心，维多利亚这些。

[cloudwu]

@pourtheworld test/atlas 跑不起来，是不是你少提交了代码？

[cloudwu]

我在网上随便找了张图，我觉得合格的兵线应该是这样的：

[constly]

这个图的效果倒确实可以。这个： https://github.com/ejoy/ant/blob/master/pkg/ant.widget/widget.lua#L122 我似乎不太好直接参考，这是3D的，我现在是想在2d rmlui上绘制~

[cloudwu]

我今天重新整理了一下 rmlui 对 atalas 的支持。原来是 @pourtheworld 实现的，但并没有在项目里实用。我今天想试试，发现一些问题，干脆就改了一下。

原来的 test.atlas 运行不起来，已经去掉。新的测试直接放在 test.rmlui 里了。

现在在 rmlui 中，可以引用 .atlas 的素材。这个文件可以引用一张大贴图的一部分。例如：
https://github.com/ejoy/ant/blob/master/pkg/ant.resources/textures/irbtn_sub.atlas

texture : $path irbtn_normal.texture
atlas:
  x : 128	# x of texture
  y : 128	# y of texture
  dw : 256	# fix width
  dh : 256	# fix height
  w : 512	# virtual width
  h : 512	# virtual height
  dx : 128	# offset x
  dy : 128	# offset y

它引用了同目录下 irbtn_normal.texture 这张贴图。atlas 描述了一个子图，这里是从 512x512 的大图中取正中间的 256x256 区域，并保持逻辑上依旧是 512x512 大小。

x y dw dh 指的是引用的大图中的哪个矩形部分。

由于我们把很多小图装箱到一张大图时，往往会裁掉四周空白的区域，所以逻辑上的小图会比这个矩形大。w h dx dy 描述了裁剪框：

w h 是裁剪前的原始尺寸，dx dy 是裁剪后的小图在原图中的位置。

---

目前只可以在 rmlui 中使用它，imgui 不支持。

[constly]

好！ imgui的支持暂时不用管，需求不是很大~

[cloudwu]

如果想自己把若干小图片合成一张大图。需要做如下工作：

1. 把小图装箱为一张大图。
2. 为原来的每张小图重新编写一个 .atlas 文件，描述它在大图中的区域。

ant.atlas 这个包里面的 api 实现了装箱的功能。可以参考 https://github.com/ejoy/vaststars/tree/master/tools/make-atlas 怎么调用。也有很多第三方工具可以做这个。

可能还需要给 rmlui 添加一个接口，做文件名映射：开发期用独立的小图，发布后用一张大图。接口传递一个映射表即可，rmlui 加载图片时把文件名映射到 .atlas 上。

[cloudwu]

另外，我昨天研究了一下怎么在 rmlui 里使用动态大小的 sprite 。即，怎么使用 texture 自身的 size 作为一个 ui 空间的大小。结论是无法直接做到。

如果是标准的 css ，我们可以使用 <img src="filename"/> 这样，这个控件就会根据 filename 文件的内在尺寸调整大小。但我们在重构简化 rmlui 时，把 ElementImage 去掉了。而光靠 css 的语法是无法完成这个功能的。即，我们只能通过 background-image 属性渲染图片，而 background-image 固有尺寸是无法影响容器的。

变通的方法是：

1. 在 script 里读出 texture 的 size ，然后设置到 style 的 width height 属性上。
2. 使用固定大小的控件，然后通过 atlas 的设置裁剪掉四周的空白，让图片比控件小。

[cloudwu]

另外，我昨天研究了一下怎么在 rmlui 里使用动态大小的 sprite 。即，怎么使用 texture 自身的 size 作为一个 ui 空间的大小。结论是无法直接做到。

如果是标准的 css ，我们可以使用 <img src="filename"/> 这样，这个控件就会根据 filename 文件的内在尺寸调整大小。但我们在重构简化 rmlui 时，把 ElementImage 去掉了。而光靠 css 的语法是无法完成这个功能的。即，我们只能通过 background-image 属性渲染图片，而 background-image 固有尺寸是无法影响容器的。

变通的方法是：

1. 在 script 里读出 texture 的 size ，然后设置到 style 的 width height 属性上。
2. 使用固定大小的控件，然后通过 atlas 的设置裁剪掉四周的空白，让图片比控件小。

[cloudwu]

今天给 ant.framework.demo 加上了 2D 面片支持（影子渲染还有点 bug），考虑了 atlas 的支持。

[cloudwu]

还有一个远一点的计划，就是把之前写过的光照图烘培加回来，用引擎已有的实时光设置运行时烘培环境图。这样就不依赖第三方工具生成。目前这种必须从外部提供一个环境天空盒的方式，不太适合手搓 demo 。

[constly]

我是想往Low Poly方向做，也对复杂动画这块需求不大。
“用引擎已有的实时光设置运行时烘培环境图” 这个实用。

[constly]

我刚运行了下demo，看到这个2D面片想起在3D场景中显示文字也是一个比较常见的需求，不知道ant现在是否有支持

[cloudwu]

看这个 #179 。光显示文字是不够的，所以不需要单独开发，只需要专门用一个 RmlUI 文档，把文字图片等输出上去就可以了。然后就可以把它用于贴图随便贴在你想贴的位置。

如果加到 ant.framwork.demo 里，我还没有想好 api 如何提供。

另外，如果只是想调试用文字，在 Demo 里按 F8 ，可以看到如何在屏幕输出文字 log 。

[constly]

有道理，我周末用试试看