Starling Button

最新推荐文章于 2021-04-25 15:15:06 发布

_Lunay

最新推荐文章于 2021-04-25 15:15:06 发布

阅读量1.2k

点赞数

分类专栏： Starling

本文链接：https://blog.csdn.net/z9061/article/details/17578049

版权

Starling 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

先看看它的签名：

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;
				}
			}
		}

运行指挥可以看到，我们的背景在菜单之后不停地滚动。

_Lunay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Starling Button

先看看它的签名：public function Button(upState:Texture, text:String="", downState:Texture=null)默认情况下，Button对象中有一个内置的TextField对象来负责文本的显示，且该文本默认摆放在按钮的居中位置。在下面的代码中，我们用一个嵌入资源作为皮肤来创建了一个简单的按钮： package
复制链接

扫一扫

专栏目录