Starling:ビットマップフォントの表示

2012/09/19

category: Starling | tag: ActionScript, AIR, BitmapFont, FlashBuilder | no comments

Starling:ビットマップフォントの作成で作成したオリジナルのビットマップフォント(数字0～9)を使って、文字を表示してみます。

サンプルプログラム

3桁の数字を表示する。
ENTER_FRAMEイベントで999までカウントアップしたら000に戻す。

package
{
	import flash.display.Sprite;
	import starling.core.Starling;
	
	[SWF(frameRate="30", width="320", height="240", backgroundColor="#333333")]
	
	public class DispFont extends Sprite
	{
		private var myStarling:Starling;
		
		public function DispFont()
		{
			myStarling = new Starling(Main, stage);
			myStarling.antiAliasing = 1;
			myStarling.start();
		}
	}
}

package

{

import flash.display.Sprite;

import starling.core.Starling;

[SWF(frameRate="30", width="320", height="240", backgroundColor="#333333")]

public class DispFont extends Sprite

{

private var myStarling:Starling;

public function DispFont()

{

myStarling = new Starling(Main, stage);

myStarling.antiAliasing = 1;

myStarling.start();

}

package
{
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.text.TextField;
	import starling.utils.HAlign;
	import starling.utils.VAlign;
	
	public class Main extends Sprite
	{
		private var tf:TextField;
		private var count:Number = 0;
		
		public function Main()
		{
			this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
		
		private function onAddedToStage(e:Event):void
		{
			count = 0;
			
			tf = new TextField(200, 60, "000", Assets.getFont().name, 60, 0xffffff);
			tf.x = stage.stageWidth * 0.5 - tf.width * 0.5;
			tf.y = stage.stageHeight * 0.5 - tf.height * 0.5;
			tf.hAlign = HAlign.CENTER;
			tf.vAlign = VAlign.CENTER;
			tf.color = 0x333333;
			this.addChild(tf);
			
			this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		private function onEnterFrame(e:Event):void
		{
			count++;
			if (count > 999) count = 0;
			
			tf.text = String(1000 + count).substr(1, 3);
		}
	}
}

package

{

import starling.display.Sprite;

import starling.events.Event;

import starling.text.TextField;

import starling.utils.HAlign;

import starling.utils.VAlign;

public class Main extends Sprite

{

private var tf:TextField;

private var count:Number = 0;

public function Main()

{

this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

}

private function onAddedToStage(e:Event):void

{

count = 0;

tf = new TextField(200, 60, "000", Assets.getFont().name, 60, 0xffffff);

tf.x = stage.stageWidth * 0.5 - tf.width * 0.5;

tf.y = stage.stageHeight * 0.5 - tf.height * 0.5;

tf.hAlign = HAlign.CENTER;

tf.vAlign = VAlign.CENTER;

tf.color = 0x333333;

this.addChild(tf);

this.addEventListener(Event.ENTER_FRAME, onEnterFrame);

}

private function onEnterFrame(e:Event):void

{

count++;

if (count > 999) count = 0;

tf.text = String(1000 + count).substr(1, 3);

}

ビットマップフォントは白色で作成しましたが、TextFieldのcolorプロパティに色を指定すれば任意の色で表示することができます。

package
{
	import flash.text.Font;
	
	import starling.text.BitmapFont;
	import starling.text.TextField;
	import starling.textures.Texture;

	public class Assets
	{
		[Embed(source="../assets/graphic/fontNum09.png")]
		public static const FontTexture:Class;
		
		[Embed(source="../assets/graphic/fontNum09.xml", mimeType="application/octet-stream")]
		public static const FontXML:Class;
		
		public static function getFont():BitmapFont
		{
			var fontTexture:Texture = Texture.fromBitmap(new FontTexture());
			var fontXML:XML = XML(new FontXML());
			
			var font:BitmapFont = new BitmapFont(fontTexture, fontXML);
			TextField.registerBitmapFont(font);
			
			return font;
		}
	}
}

package

{

import flash.text.Font;

import starling.text.BitmapFont;

import starling.text.TextField;

import starling.textures.Texture;

public class Assets

{

[Embed(source="../assets/graphic/fontNum09.png")]

public static const FontTexture:Class;

[Embed(source="../assets/graphic/fontNum09.xml", mimeType="application/octet-stream")]

public static const FontXML:Class;

public static function getFont():BitmapFont

{

var fontTexture:Texture = Texture.fromBitmap(new FontTexture());

var fontXML:XML = XML(new FontXML());

var font:BitmapFont = new BitmapFont(fontTexture, fontXML);

TextField.registerBitmapFont(font);

return font;

}

実行結果

This movie requires Flash Player 11

Pocket

Check

コメントを残すコメントをキャンセル

コメントを投稿するにはログインしてください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

Trackback URL:

devlog [naru design]