H2D Concepts - R32/heaps GitHub Wiki

在深入讨论 H2D 之前，我们将介绍一些概念

In-Memory Bitmap

位图数据(hxd.BitmapData) 存储于内存，你可以修改以及访问其中的某个像素，在 heaps 中显示这张图片先转换成 Texture(纹理)。

你可以使用资源管理器，直接将某一个图片转换为 bitmapData, 然后按照自已的想法修改某些像素的值, 不过大多数时候使用某些编辑器来做这个或许更合适。

var bd: hxd.BitmapData = hxd.Res.MYPNG.toBitmap();
// draw or setPixel
var tile = h2d.Tile.fromBitmap(bd);

Texture

纹理(h3d.mat.Texture) 像素数据已经分配到显存，因此你不能访问或修改其中的某个像素，但是可以用于显示 2D 图片或 3D 模型

这是一个比较底层的类, 大多数时候你并不需要用到它, 直接使用 Tile 就可以了。

Tile

图贴(h2d.Tile)，属于 texture 的一部分。例如一个 256x256 大小的 texture 可能包含有多个图贴，如帧动画。图贴以像素为单位包含有坐标(x, y), 大小(width, height)以及支点位置(pivot position)(dx, dy)等属性

tile 的方法 flipX/Y 将会沿着 dx/dy 轴做翻转，因此只有当 dx/dy 的值为 -(width/height >> 1)(调用 .center()) 时, 才会表现为 原位置 的翻转。

假设有一个 bitmap, 当其 tile 的 dx 或 dy 值发生变化时, 其相关的父元素例如 bitmap 的 x/y 值虽然没有变, 但其显示的位置明显已经变了，这是一个非常麻烦的地方（你需要手动调整父元素的位置）
tile 的 x/y 属性和 sprite 并不一样, 当你使用 tile.setPos 调整时，调整的是相对于 texture 的位置，而并非显示列表的位置。
tile.setScaleTo 是一个非常不错的缩放方法.

Sprite

h2d.Sprite 是所有 2D 显示对象的基类。它包含有坐标(x, y), 缩放(scaleX, scaleY), 旋转角度(rotation)等等这些属性。它可以包含(addChild)其它的 sprite。

Scene

场景(h2d.Scene)，一个特殊的 sprite 位于显示树的根部，在 hxd.App 类中可以通过属性 s2d 访问它。你应该把需要显示的 sprite 添加到场景。场景同样可以处理交互事件，如 click, touch 以及键盘按键

Bitmap Sprite

位图（h2d.Bitmap）是一个 sprite ，它允许在 sprite 的所在位置显示一个单独的 Tile 。如下边的示例

SpriteBatch & TileGroup

SpriteBatch 适合用来做不停动用的元素, 例如: 粒子(Particles)效果，或者一些飞来飞去的小鸟什么的,

TileGroup 则适合做一些静止的元素, 例如用 tile 铺地图，或对话框边框(TileGroup做这些非常简单)

简单示例

通过上边的介绍，让我们参考如下示例:

    class Main extends hxd.App {
        var bmp : h2d.Bitmap;
        override function init() {
            // 使用颜色值分配一个 Texture 并返回一个 100x100 大小的 Tile
            var tile = h2d.Tile.fromColor(0xFF0000, 100, 100);
            // 创建 Bitmap sprite, 将会显示这个 Tile
	    // 第二个参数表示创建后将添加到 2D 场景(s2d)
            bmp = new h2d.Bitmap(tile, s2d);
            // 修改 Bitmap sprite 的显示位置
            bmp.x = s2d.width * 0.5;
            bmp.y = s2d.height * 0.5;
        }

        // 这个方法在每一帧将会被调用
        override function update(dt:Float) {
            // 增加 Bitmap sprite 的旋转值, 每次　0.1　弧度
            bmp.rotation += 0.1;
        }

        static function main() {
            new Main();
        }
    }

通过更改 Tile 的支点我们可以很容易地创建一个绕着中心点旋转的图片: 将下边代码加入到 init 方法的最后

    bmp.tile.dx = -50;
    bmp.tile.dy = -50;

但是需要注意的是, 更改了 tile 的 dx/dy 属性后你需要重新调整 bmp 的位置。

杂项

一些值的区别:

width: 总的来说, 使用 s2d.width 或 s2d.width 的值就可以了。

hxd.System.width: 系统屏幕的宽度, 例如: 1440x900 的显示器则这个值为 1440.
hxd.Stage.getInstance().width: App 窗口宽度.
hxd.App::s2d.width: 哪果没调用 s2d.setFixedSize() 时没有结 s2d 进行缩放时, 那么它将等于 state.width.