[引擎工具]流程图编辑器－实现方案小结

一、简介

       流程图编辑方式是关卡设计师与游戏引擎编辑器交互的发展趋势，可以明显提供效率，有利于协同工作，对于查错及修改都非常方便。以往的文本或简单windows界面编辑方式，如魔兽争霸的触发器编辑器，复杂点地图除了作者本身，谁也看不懂，但如果是以流程图方式，其他用户也能较快的理解作者思路。

       先看下面三张截图，有个直观印象，然后讲解如何实现Unreal3、Crysis SandBox可视化的流程图编辑器。

 

 

二、具体实现：

１. 名词定义：

视图(View）：指流程图编辑窗口

表达式(Exp)：视图里具体每个编辑元素，表达式可以有多个输入输出

句柄（Handle）：每个表达式的输入输出，也可表示为Pink，有InputPink，OutputPink

2. 坐标转换过程

 

 

约定：右手坐标系，Y轴朝上。重点是模型视点变化、投影、屏幕映射三个阶段的坐标转换。

2.1 模型与视点变化：

每个表达式代表一个面片，由两个三角形组成，输入输出及中间渲染结果预先渲染到RenderTexture。 表达式、连线及箭头都是一个几何体。这些几何体的Z坐标永远都是0，用户在移动表达式时，只会更改xy坐标。

在打相机及表达式位置的时候是有技巧的，当Zoom=1时：表达式经模型坐标->透视投影变化到视平面－>屏幕坐标->窗口坐标，其表达式最终渲染到窗口上的大小跟2D方式(或正交投影)渲染设置的大小一样。

相机将被放置在(0,0,1)位置上，并指向-Z轴。所有表达式的都放置在XY平面（Z坐标为0），拖拽表达式只改变其XY坐标，表达式的Z坐标永远为0。通过修改相机xyz，实现缩放及拖动屏幕区域。

2.2 投影：

视图支持Camera Zoom In/Out，所以不能采用正交投影，必须是透视投影。

视锥体： Left=-1, Right=1, Top=1,Bottom=-1, Near=0.01,Far=10。水平跟垂直方向的视野都是90度。

视平面的选择决定了后续处理的难易程度。视平面和视点之间的距离也被称为视距(d)。d值对投影变化及其与屏幕坐标之间的关系有重大影响。在这里我们的d值为1。

2.3 屏幕映射：

在水平垂直视野为90度且视距为1的情况下，视平面坐标到屏幕坐标的转换公式：

XPer：-1到1 -> XScreen：0 ->SCREEN_WIDTH -1

YPer：-1到1 -> YScreen：0 ->SCREEN_HEIGHT -1

XScreen  =  ( XPer + 1 ) * ( 0.5*SCREEN_WIDTH – 0.5 )

YScreen  =  (SCREEN_HEIGHT – 1) – (YPer + 1 )*( 0.5*SCREEN_HEIGHT – 0.5 )    (注意：屏幕坐标的Y轴要跟视平面坐标反转。)

我们测试下该公式：

P1(-1, 1) －> S1(0,0)，屏幕左上角。

P2(-1, -1) －> S1(0, SCREEN_HEIGHT – 1)，屏幕左下角。

P1(1, 1) －> S1(SCREEN_WIDTH-1,0)，屏幕右上角。

P1(1, -1) －> S1(SCREEN_WIDTH-1, SCREEN_HEIGHT – 1)，屏幕右下角。