通过脚本自由设计游戏UI风格

近来突然觉得，将按钮这类简单控件预先由引擎定义好根本没有必要，反而严重限制了创意发挥。因为引擎固化它们的实现，便会固定于某种特定的模式上。比如按钮，标准的实现最多就是为按下、悬停等状态提供不同的表现，通常就是图片和文字的差别。而游戏作为一种创意作品，可能要更活泼的模式，比如悬停时放大、抖动动画、在按钮上放其它修饰等等。可能的创意非常之多，无法用固定的模式来全部支持。

 

那么如何用脚本来定制呢？当前 Web 网页就提供了一个很好的例子，网页开发者用 HTML 和 JavaScript 可以做出各式各样的按钮、菜单等控件。其原理只是简单的标签元件组合以及显示属性的修改。如：

<div class=”buttonNormal” onMouseHover=”...” onMouseOut=”...” onClick=”...”>

  Button Face

</div>

 

借鉴同样的方法，游戏脚本也可以定义自己的控件样式。当然，重用时必须要简单，幸运的是 JavaScript 有对对象的支持，那么只要写一个按钮对象就行了，而使用该按钮类型时就完全不用关心它是如何实现的了，和使用引擎内置控件一样。于是，做了下尝试，用脚本实现了一种简单的按钮对象：

 

function Button ( parent , x , y , width , height , text , onClickFunc )

{

       var elem = Gui . CreateElement ( "Element" , parent , x , y , width , height );

       writeln ( x , y , width , height );

       this . Element = elem ;

       elem . SetImage ( "Gui/ui2.png" , 144 , 48 , 16 , 16 );

       elem . ImageStretchMode = "NineGrid" ;

       elem . ImageColor = Color . Black ;

       elem . Text = text ;

       elem . add_Click ( onClickFunc );

       elem . add_MouseEnter ( function () {

              elem . ImageColor = Color . White ;

              elem . TextColor = Color . Black ;

       });

       elem . add_MouseLeave ( function () {

              elem . ImageColor = Color . Black ;

              elem . TextColor = Color . White ;

       });

}

 

创建三个按钮的效果如下