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