public function Button(upState:Texture, text:String="", downState:Texture=null)
默认情况下,Button对象中有一个内置的TextField对象来负责文本的显示,且该文本默认摆放在按钮的居中位置。
在下面的代码中,我们用一个嵌入资源作为皮肤来创建了一个简单的按钮:
package
{
import flash.display.Bitmap;
import starling.display.Button;
import starling.display.Sprite;
import starling.events.Event;
import starling.textures.Texture;
public class Game4 extends Sprite
{
[Embed(source = "../media/textures/button_normal.png")]
private static const ButtonTexture:Class;
public function Game4()
{
addEventListener(Event.ADDED_TO_STAGE, onAdded);
}
private function onAdded (e:Event):void
{
// create a Bitmap object out of the embedded image
var buttonSkin:Bitmap = new ButtonTexture();
// create a Texture object to feed the Button object
var texture:Texture = Texture.fromBitmap(buttonSkin);
// create a button using this skin as up state
var myButton:Button = new Button(texture, "Play");
// createa container for the menu (buttons)
var menuContainer:Sprite = new Sprite();
// add the button to our container
menuContainer.addChild(myButton);
// centers the menu
menuContainer.x = stage.stageWidth - menuContainer.width >> 1;
menuContainer.y = stage.stageHeight - menuContainer.height >> 1;
// show the button
addChild(menuContainer);
}
}
}
注意到我们这里再次使用了fromBitmap方法来完成从嵌入资源获取按钮皮肤的工作。
(注:)
var buttonSkin:Bitmap = new ButtonTexture();
var texture:Texture = Texture.fromBitmap(buttonSkin);
var myButton:Button = new Button(texture, "Play");
var menuContainer:Sprite = new Sprite();
menuContainer.addChild(myButton);
上面的代码写成这样是不是更简洁呢!
var button:Button = new Button(Texture.fromBitmap(new texture(),false));
addChild(button);
// create a Texture object to feed the Button object
var texture:Texture = Texture.fromBitmap(buttonSkin);
接下来让我们把包含在一个Vector对象中的文本做成一个菜单,只需要使用一个简单的循环即可完成:
package
{
import flash.display.Bitmap;
import starling.display.Button;
import starling.display.Sprite;
import starling.events.Event;
import starling.textures.Texture;
public class Game4 extends Sprite
{
[Embed(source = "../media/textures/button_normal.png")]
private static const ButtonTexture:Class;
// sections
private var _sections:Vector.<String> = Vector.<String>(["Play", "Options", "Rules", "Sign in"]);
public function Game4()
{
addEventListener(Event.ADDED_TO_STAGE, onAdded);
}
private function onAdded (e:Event):void
{
// create a Bitmap object out of the embedded image
var buttonSkin:Bitmap = new ButtonTexture();
// create a Texture object to feed the Button object
var texture:Texture = Texture.fromBitmap(buttonSkin);
// createa container for the menu (buttons)
var menuContainer:Sprite = new Sprite();
var numSections:uint = _sections.length
for (var i:uint = 0; i< 4; i++)
{
// create a button using this skin as up state
var myButton:Button = new Button(texture, _sections[i]);
// bold labels
myButton.fontBold = true;
// position the buttons
myButton.y = myButton.height * i;
// add the button to our container
menuContainer.addChild(myButton);
}
// centers the menu
menuContainer.x = stage.stageWidth - menuContainer.width >> 1;
menuContainer.y = stage.stageHeight - menuContainer.height >> 1;
// show the button
addChild(menuContainer);
}
}
}
测试以上代码你会得到一个简单的由多个按钮组成的菜单。
在这个例子中,我们没有用一个SpriteSheet来设置一个按钮的全部状态的皮肤(普通状态、按下状态及鼠标移入状态)。而是通过fromBitmap方法直接向GPU上传了一个Texture对象作为按钮的唯一皮肤。如果你准备为全部按钮都用同一个皮肤的话这么做当然没什么问题。不过一个更加好的习惯是将一个按钮的全部状态素材都放在SpriteSheet中,就像之前我们在创建男孩及屠夫的movieClip例子中做的那样。
现在,我们来看看Button对象提供的全部API:
∗ alphaWhenDisabled : 当按钮处于不可用状态时的透明度
∗ downState : 当按钮被按下时的皮肤纹理
∗ enabled : 此属性决定按钮是否可用、可交互
∗ fontBold : 按钮文本是否为粗体
∗ fontColor : 按钮文本的颜色
∗ fontName : 按钮文本所用字体。可以是一个系统字体也可以是一个已经注册了的位图字体
∗ fontSize : 按钮文本大小
∗ scaleWhenDown : 按钮按下时将被缩放到的值。如果你设置了downState,那么按钮在按下后将不会被缩放
∗ text : 按钮显示的文本
∗ textBounds : 按钮文本所在区域
∗ upState : 当按钮未产生交互时的皮肤纹理
与原生Flash相反的一点在于,Starling中的Button类是DisplayObjectContainer类的子类,这意味着你创建的Button按钮外观将不受限于其提供的几个皮肤属性。
你可以像在用其他容器类一样,往其中加任何你想加入的东西,把你的按钮布置成你想要的效果。
注意,一个Button对象将会在你点击它的时候派发一个特殊的事件:Event.TRIGGERED:
// listen to the Event.TRIGGERED event
myButton.addEventListener(Event.TRIGGERED, onTriggered);
private function onTriggered(e:Event):void
{
trace ("I got clicked!");
}
Event.TRIGGERED事件是一个冒泡事件,你可以在事件派发者的父容器中侦听到它:
package
{
import flash.display.Bitmap;
import starling.display.Button;
import starling.display.Sprite;
import starling.events.Event;
import starling.textures.Texture;
public class Game4 extends Sprite
{
[Embed(source = "../media/textures/button_normal.png")]
private static const ButtonTexture:Class;
// sections
private var _sections:Vector.<String> = Vector.<String>(["Play", "Options", "Rules", "Sign in"]);
public function Game4()
{
addEventListener(Event.ADDED_TO_STAGE, onAdded);
}
private function onAdded (e:Event):void
{
// create a Bitmap object out of the embedded image
var buttonSkin:Bitmap = new ButtonTexture();
// create a Texture object to feed the Button object
var texture:Texture = Texture.fromBitmap(buttonSkin);
// createa container for the menu (buttons)
var menuContainer:Sprite = new Sprite();
var numSections:uint = _sections.length
for (var i:uint = 0; i< 4; i++)
{
// create a button using this skin as up state
var myButton:Button = new Button(texture, _sections[i]);
// bold labels
myButton.fontBold = true;
// position the buttons
myButton.y = myButton.height * i;
// add the button to our container
menuContainer.addChild(myButton);
}
// catch the Event.TRIGGERED event
menuContainer.addEventListener(Event.TRIGGERED, onTriggered);
// centers the menu
menuContainer.x = stage.stageWidth - menuContainer.width >> 1;
menuContainer.y = stage.stageHeight - menuContainer.height >> 1;
// show the button
addChild(menuContainer);
}
private function onTriggered(e:Event):void
{
// outputs : [object Sprite] [object Button]
trace ( e.currentTarget, e.target );
// outputs : triggered!
trace ("triggered!");
}
}
}
上述代码创建了几个使用自定义皮肤的按钮,接下来让我们一起来创建一个滚动着的背景
package
{
import flash.display.Bitmap;
import starling.display.Button;
import starling.display.Image;
import starling.display.Sprite;
import starling.events.Event;
import starling.textures.Texture;
public class Game4 extends Sprite
{
[Embed(source = "../media/textures/button_normal.png")]
private static const ButtonTexture:Class;
[Embed(source = "../media/textures/background.jpg")]
private static const BackgroundImage:Class;
private var backgroundContainer:Sprite;
private var background1:Image;
private var background2:Image;
// sections
private var sections:Vector.<String> = Vector.<String>(["Play", "Options", "Rules", "Sign in"]);
public function Game4()
{
addEventListener(Event.ADDED_TO_STAGE, onAdded);
}
private function onAdded (e:Event):void
{
// create a Bitmap object out of the embedded image
var buttonSkin:Bitmap = new ButtonTexture();
// create a Texture object to feed the Button object
var texture:Texture = Texture.fromBitmap(buttonSkin);
// create a Bitmap object out of the embedded image
var background:Bitmap = new BackgroundImage();
// create a Texture object to feed the Image object
var textureBackground:Texture = Texture.fromBitmap(background);
// container for the background textures
backgroundContainer = new Sprite();
// create the images for the background
background1 = new Image(textureBackground);
background2 = new Image(textureBackground);
// positions the second part
background2.x = background1.width;
// nest them
backgroundContainer.addChild(background1);
backgroundContainer.addChild(background2);
// show the background
addChild(backgroundContainer);
// create container for the menu (buttons)
var menuContainer:Sprite = new Sprite();
var numSections:uint = sections.length
for (var i:uint = 0; i< 4; i++)
{
// create a button using this skin as up state
var myButton:Button = new Button(texture, sections[i]);
// bold labels
myButton.fontBold = true;
// position the buttons
myButton.y = myButton.height * i;
// add the button to our container
menuContainer.addChild(myButton);
}
// catch the Event.TRIGGERED event
// catch the Event.TRIGGERED event
menuContainer.addEventListener(Event.TRIGGERED, onTriggered);
// on each frame
stage.addEventListener(Event.ENTER_FRAME, onFrame);
// centers the menu
menuContainer.x = stage.stageWidth - menuContainer.width >> 1;
menuContainer.y = stage.stageHeight - menuContainer.height >> 1;
// show the button
addChild(menuContainer);
}
private function onTriggered(e:Event):void
{
// outputs : [object Sprite] [object Button]
trace ( e.currentTarget, e.target );
// outputs : triggered!
trace ("triggered!");
}
private function onFrame (e:Event):void
{
// scroll it
backgroundContainer.x -= 10;
// reset
if ( backgroundContainer.x <= -background1.width )
backgroundContainer.x = 0;
}
}
}
运行指挥可以看到,我们的背景在菜单之后不停地滚动。