Flutter&Flame游戏实践#17 | 二维无限标尺

theme: cyanosis

本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！

Flutter\&Flame 游戏开发系列前言:

该系列是 [张风捷特烈] 的 Flame 游戏开发教程。Flutter 作为 全平台 的 原生级 渲染框架，兼具 全端 跨平台和高性能的特点。目前官方对休闲游戏的宣传越来越多，以 Flame 游戏引擎为基础，Flutter 有游戏方向发展的前景。本系列教程旨在让更多的开发者了解 Flutter 游戏开发。

第一季：30 篇短文章，快速了解 Flame 基础。[已完结]\ 第二季：从休闲游戏实践，进阶 Flutter\&Flame 游戏开发。

两季知识是独立存在的，第二季 不需要 第一季作为基础。本系列教程源码地址在 【toly1994328/toly_game】，系列文章列表可在《文章总集》 或 【github 项目首页】 查看。

在空无一物的黑色空间之中，没有标志，没有参考，没有依靠，充满着未知的恐惧。

他说：固定一个标点吧 ，于是世界就诞生了。
世界因此有了位置，有了区域，有了形状，有了万物。在生命游戏的世界之中，需要一把尺子，度量世界的样貌。

一、以有限模拟无限

在二维空间中，有横纵两个纬度。视口区域是世界的展示范围。这个范围对应着横坐标范围和纵坐标范围。 在世界的无限空间之内，视口仅是微不足道的一部分。但视口可以进行拖拽和缩放,来展示其他空间的内容。

这就让 有限的视口区域 ,有了展示 无限空间 的可行性。

本篇源码详见: 【tolygame/modules/lifegame/lib/03】

1. 什么是二维无限标尺

如下所示，当原点固定，我们就可以在世界中建立坐标系来描述世界的位置信息。其中缩放和移动可以调节视口中展示区域的内容。你可以向上下左右无限地拖拽，展示世界的内容。

比如你向右移动，最右侧达到了 100 亿，并不会让网格或说世界从 0 一直绘制到 100亿 。而是:

100亿 - 屏幕容量 ~ 100 亿

也就是说，无论你移动到哪里，都 只会渲染屏幕区域，这就是保证无限空间下，内存和性能的关键。这也是 生命游戏 无限空间可行性的保证。本篇我们将着重探索这个 二维无限标尺 的实现方式。

2.实现思路

这个功能最难的地方在于：如何计算区域范围随手势交互的变换。
比如红色区域是 x 轴，实际刻度范围在 [0,size.width] 。这里设单位格长为 40，根据变换矩阵计算出刻度横坐标区间 -10,10。

如果向左移动 40，则横坐标区间变为 -9,11 ，以此类推。同理，缩放也是如此，至于缩放时，如何根据缩放中心对尺寸区域进行变换，在 《编程与数学 | 一维空间的中心缩放》 一文中已经详细地介绍过了。