文章目录
制作高度计
高度计是通过对大气压强的测量来确定高度的。
目的
最终效果图
配置工作环境
创建一个名为”_altimeter”的工程，将GL Studio安装目录教程内的_altimeter教程下的testures文件夹拷贝到当前文件夹。
Object的设计
Step 1: 在创建的工程目录下，找到”_altimeter.gls”，并打开。后在”Geometry”选项卡窗口中删除默认生成的group。
Step 2: 打开”Application” tab, 为window title改名为”altimeter”, 然后设置窗口的初始尺寸为390x395。
Step 3: 在工具栏找到
右侧的下拉箭头，在弹出的对话框中按下图内容进行设置：
创建背光板(Bezel)
背景遮光板由多边形object和其纹理组成。
Step 1: 选择工具栏中的
工具;
Step 2: 绘制一个390x395的矩形;
Step 3: 为其重命名为”altimeter_panel”;
Step 4: 在”Object Properties” tab中，将”altimeter_panel”的Draw Mode设置为Filled;
Step 5: 同样在”Object Properties” tab中，点击Texture ->Texture Chooser上的
按钮，进入纹理选择对话框，将纹理添加进来，并选中”sltimeter.png”纹理;
Step 6: 在Object Properties->Texture->Texture Adjustment内，设置宽和高为800x400，
使用
功能将纹理尽量移动到”altimeter_panel”的正中央, 然后退出该模式;
Step 7: 按下图中的两项进行设置;
创建电动/气动开关
Step 1: 使用
工具在下图位置处，创建一个35x75的矩形，并为其重命名为”elec_switch”;
Step 2: 将Object Properties->Appearance Settings->Draw Mode设置为Filled；
为该矩形选择纹理”altimeter.png”, 并将纹理的尺寸改为800x400；
进入 模式，放置纹理到合适位置(参照下图)，退出该模式；
Step 3: 选中”elec_switch”后”Ctrl+c”复制，后在” Graphical” tab中右键选择Paste Special->Keep Position进行粘贴。
为新复制而来的object命名为”pneu_switch”。
Step 4: 点击
进入旋转模式，后选中”pneu_switch”，这是可以在”Graphical” tab中看到矩形”pneu_switch”上出现了
图案，移动该图案到启动开关的旋转轴的正中央(如下图)，
然后拖动矩形”penu_switch”四个顶点中的一个，使得该气动开关旋转到下图位置所示处：
最后点击
返回select模式。
Step 5: 同时选中”elec_switch”和”pneu_switch”后，点击
将两个object合并成一个GlsSwitch，并为其重命名为”pneu_elec_switch”。
这时会发现”Graphical” tab内只有”elec_switch”是visible的。
Step 6: 在选中的”pneu_elec_switch”的情况下，点击
工具，会在”Graphical” tab中看到下面情形：
拖拽该绿红坐标系的端点使其旋转到下图位置处：
在程序运行时，当任何鼠标输入落到左下部分的黄框时，都会触发开关弹到ELECT处，同样的，当鼠标落入右上的时候，开关后弹到PNEU处。
可以通过Object Properties->Behavior->Detent Value的滑块进行开关的验证。
创建气压设定旋钮
Step 1: 选中工具 
，同时按着shift键，在高度计的左下角创建一个正方形。
Step 2: 为其重命名为”baro_knob_tex”。
Step 3: 为它添加纹理”altimeter.png”。
Step 4: 使用工具
将添加进来的旋钮的纹理在”baro_knob_tex”上能完全的显示出来
Step 5: 用
进行zoom查看，单击旋钮贴图的正中心放大(”Alt+单击”缩小)，如果纹理过大或过小则执行下面一步，否则跳过。
Step 6: 使用
进行适当的放大或缩小。
Step 7: 进入 
模式，后点击”baro_knob_tex”，然后拖拽绿色的点进行旋转测试，若出现不规则转动，这说明贴图的中心没有和该object的中心完全匹配。
Step 8: 使用
同时按下shift键，拖拽创建一个和贴图中旋钮同样大小的圆。
Step 9: 在选中”circle” object的情况下，按下line color 
右侧的下拉按钮，进入颜色模式选择一个喜欢的颜色，得到如下图效果：
Step 10: 在”Geometry” tab中同时选中”baro_knob_tex”和”circle”。
Step 11: 使用 
工具，在垂直方向上对齐它们的中心点。
Step 12: 使用
工具，在水平方向上对齐二者的中心点，到此二者拥有一个中心点。
Step 13: 若使用着
，请关闭，在关闭状态下移动纹理可以有更好的精度。
Step 14: 使用
将旋钮处放大的足够大，下一步将微调旋钮的纹理图至和”circle” object对齐，若已对齐可忽略。
Step 15: 保持”baro_knob_tex”的选中状态，进入
模式拖动纹理直至和”circle”对齐。
Step 16: 在
模式下可通过”Alt+单击”以缩小，或者使用鼠标滚轮。
Step 17: 再次进入
模式，并拖动蓝点旋转以查看纹理的旋钮部分是否和”circle” object对齐。若出现不规则转动，则重复步骤14-17。
Step 18: 在”Geometry” tab选中”circle” object, 然后删除它。
Step 19: 选中”baro_knob_tex”然后改变其Draw Mode为Filled。 按下
按钮，将矩形”baro_knob_tex”转换成一个”GlsKnob” button，并重命名为”baro_knob”。
Step 20: 这里设定旋钮可以旋转8圈，则其可取的最大值为8x360=2880.0度。所以可设置Object Properties->Behavior->Range为2880.0。
创建高度计指针
Step 1: 在刻度盘的上至0下至5的区域画一个40x295的矩形。
Step 2: 命名为”needle”。
Step 3: 为其添加纹理”altimeter.png”, 调整纹理的位置使其fit “needle” object.
Step 4: 该其Draw Mode属性为Filled。
Step 5: 再在指针的转轴处画一个20x20的矩形，并为其添加纹理，使转轴有一个帽盖。
Step 6: 为该20x20的object重命名为”needle_center”.
Step 7: 查看”altimeter_panel”的Location属性，记下该值并将”needle”和”needle_center”的Location修改至和”altimeter_panel”相同。
Step 8: 改其Draw Mode为Filled。
创建高度计的里程表
Step 1: 在下图位置创建一个能覆盖高度和气压读数的矩形，命名为”digits_back”, 改其Draw Mode为Filled。将矩形的填充色设为纯黑(0, 0, 0, 255)。
选中”digits_back”使用 
将其移动到object中的最后面，作为仪表上白色读数器的背景色。
Step 2: 在数字的百位上绘制一个略大于其外形的的矩形，参照下图
Step 3: 为刚绘制的矩形命名为”alt_digits_100”, 并为其添加上纹理”altimeter.png”. 改变Draw Mode为Filled，拖动纹理将数字带的”0”部分呈现在最前面，参照下图。
Step 4: 在”Geometry” tab中，选中”alt_digit_100”, 使用
将其移动到”altimeter_panel”的后面(“Geometry” tab中的层级结构上，”alt_digit_100”是在”altimeter_panel”的上方)。
Step 5: 选中”alt_digit_100”，按”Ctrl+d”再复制两个object，后先将其分别改名为”alt_digit_1000”和”alt_digit_10000”，并依次移动到”alt_digit_100”的层级结构上方：
而后分别将万位和千位按从左到右的方式进行排列，参照下图：
Remember that在本教程里面所有拥有纹理的object的”Texture Minification”属性应设置为”Linear Mipmap Linear”。
Step 6: 同时选中三个数字带，点击
工具，创建一个”GlsOdometer”(里程计) object，并命名为”alt_digits”。
Step 7: 对”alt_digits”进行如下更改，更改之后可以通过”Preview Value”处的滑块进行验证。
创建气压计表
Step 1: 在下图位置处，绘制一个矩形，命名为”baro_digits_hundredths”，更改其Draw Mode为Filled。
图3-26 ”baro_digits_hundredths”
Step 2: 为其应用纹理”altimeter.png”. 因为气压计表框内需能容纳四位数字，这就可能需要对”baro_digits_hundredths”的尺寸进行调整。同时按着shift键进行拖拽以保持恒定的长宽比。
Step 3: 在”Geometry” tab中，选中” baro_digits_hundredths”, 使用 
或 
将其移动到”altimeter_panel”的后面(“Geometry” tab中的层级结构上，” baro_digits_hundredths”是在”altimeter_panel”的上方)。
Step 4: 将” baro_digits_hundredths”再另外复制三份，并分别命名为”baro_digits_tenths”, “baro_digits_one”, 和”baro_digits_ten”, 然后在层级结构内按下图结构进行排列，
而后将”ten”, ”one”, ”tenths”, ”hundredths”按从左到右的顺序依次排开(容许各个部分略微重叠)，得下图结果：
Step 5: 同时选中这四个数字带，点击
将它们转换成一个”GlsOdometer”, 命名为”baro_digits”.
Step 6: 将”baro_digits”的属性按下图方式进行设置，另可使用”Preview Value”的滑块验证仪表的显示。
创建电动/气动显示标识
Step 1: 在下图位置处创建一个矩形，并命名为”elec_glag”。
Step 2: 为其应用纹理，调节纹理使其包含”ELEC”字样的纹理恰能填充矩形。该Draw Mode为Filled。
Step 3: 复制该矩形，并命名为”pneu_flag”, 后挪动纹理使其含有”PNEU”字样的纹理填充”pneu_flag” object。
Step 4: 同时选中”elec_flag”和”pneu_flag”，若两者不同中心点，先调整之，而后使用功能
使两者group起来，并命名为”pneu_elec_flag_group”, 且保持层级结构中，”pneu_flag”在”elec_falg”的上面，
创建仪表的阴影
在这个最后一步里面，将为里程计创建阴影效果，使得数字带显得有3-D的效果，这样会显得更加真实。
Step 1: 创建一个矩形将”alt_digits”一分为二，后命名为”alt_digit_top_shadow”。
该其Draw Mode为Filled，并开启Gouraud Shading属性效果。
Step 2: 更改Object Properties->Location->Vertices四个角的颜色，角1, 2的颜色设置为(0, 0, 0, 0), 角3, 4的颜色设置为(0, 0, 0, 255)。
图3-33 阴影四个角的颜色设定
使用高洛德着色将会混合四个角的颜色产生一定的梯度效果。
Step 3: 在”Geometry” tab中选中”alt_digit_top_shadow”，后改变其层级结构使其置于”altimeter_panel”的上方。
Step 4: 复制该object，命名为” alt_digit_bottom_shadow”, 后使用 
或
将其旋转180度，然后挪动新的阴影object使其上端与”alt_digit_top_shadow”的下端相连，允许些许的重叠。
Step 5: 同样的方法应用于”baro_digits” object，并分别命名为” baro_digits_top_shadow”和” baro_digits_bottom_shadow”. 然后同时选中这四个阴影，将它们使用 
group起来，并命名为”shadow_group”. 目前的层级结构为：
目前已完成所有的图形设计部分的工作，这个气压计的外观如下图所示：
编译测试
返回VS，运行可初步查看效果图。
代码开发
添加测试属性
Step 1: 在”Code” tab新建一个属性
Step 2: 定义该属性”bool Testing = true”, 该属性会在Calculate()函数中用到。
添加属性来处理Altitude和Barometer
Step 1: 新建一个属性”float Altitude = 0.0f”,
Step 2: 为该属性的Set函数(即void Altitude(const float& value))添加如下内容：
\1. // Clamp the value of the odometer from 0 to 99999.
\2. _altitude = CLAMP_VALUE(value, 0.0f, 99999.9f);
\3. // Set the odometer readout to the actual incoming clamped value
\4. alt_digits->Value(_altitude);
\5. // Calculate the digits less than 1000 to set the needle position
\6. float alt_100 = (float)fmod(_altitude, 1000.0f)/100.0f;
\7. // Set the needle rotation using DynamicRotate, converting 100’s of feet to degrees.
\8. needle->DynamicRotate(-(alt_100 * (360/10)), Z_AXIS);
这段代码实现仪表表针绕Z轴的动态旋转，同时该值也会在显示在高度里程表上。
Step 3: 新建属性”float Barometer = 0.0f”,
Step 4: 为该属性的Set函数添加实现函数如下：
\1. _barometer = value;
\2. baro_digits->Value(_barometer);
本段代码将实现气压计表盘的显示。
Initialize
在geometry创建之后，Initialize()函数就开始执行了。
Step 1: 在”Code” tab中找到Initialize()函数，在代码输入框添加如下代码：
\1. Barometer(28.6f);
Calculate
Calculate()函数的调用发生在每帧的渲染之后。由于每帧循环都会调用该函数，故而切勿在函数体执行过多的内容。
Step 1: 找到Calculate()函数，在代码输入框中追加上下述代码：
\1. if (Testing())
\2. {
\3. // Generate ramping values from 0.0f to 12000.0f
\4. Altitude( RampFloat( time * .07, 0.0f, 12000.0f ) );
\5. }
本段代码使用效用函数RampFloat()在一个正弦波上值测试高度计的显示。
添加效用函数的头文件.
效用函数不包含在run-time库中，隐使用到了效用函数RampFloat(), 故需要添加对应的头文件”glsutil.h”。
Step 1: 在”Code” tab内选中”file _altimeterApp.h”, 在其代码输入框中输入以下内容：
\1. #include <glsutil.h>
Object的回调
GL Studio允许回调，回调一般发生在用户输入(鼠标，键盘，或其他)，并且回调允许programmers定义与object相关的特定功能。
在该教程内需要定义两个回调函数，一个用于处理和气压读数相关的旋钮输入事件，另一个用于处理和ELEC/PNEU flag相关的开关。
Step 1: 首先先在”Geometry” tab中选中”baro_knob” object, 而后在”Code” tab中找到Object Callbacks->Selected Object Callbacks(#), 参考下图，
点击代码输入框为所选择的object(这里是刚选中的baro_kbob)创建回调功能。
回调函数要求返回0或1，而这取决于该回调函数的event是否需要向上遍历该object的父节点的回调，更多information参考User’s Manual。
Step 2: 旋钮需要完成气压的读数显示功能，所以在回调函数中完成的正是此事。将下述代码添加到代码输入框：(Warning: 直接插入的话，会清除掉插入位置之后的内容)
\1. int handled = 0;
\2.
\3. if (ObjectEventIs(ev,“PositionVal”))
\4. {
\5. // If the knob is turned, we change the value
[外链图片转存中…(img-tjNZjQJY-1615698474939)]
点击代码输入框为所选择的object(这里是刚选中的baro_kbob)创建回调功能。
回调函数要求返回0或1，而这取决于该回调函数的event是否需要向上遍历该object的父节点的回调，更多information参考User’s Manual。
Step 2: 旋钮需要完成气压的读数显示功能，所以在回调函数中完成的正是此事。将下述代码添加到代码输入框：(Warning: 直接插入的话，会清除掉插入位置之后的内容)
\1. int handled = 0;
\2.
\3. if (ObjectEventIs(ev,“PositionVal”))
\4. {
\5. // If the knob is turned, we change the value
// of the Baro
