映像制作 eラーニングのことならビズバレー
文字サイズの変更 標準 
大きい
ホーム > スタッフブログ
スタッフブログ
k.takahashi
k.taguchi
j.hashimoto
j.katou
y.hotate
m.kawai
s_inomata
m_muraoka
ビズバレーは、東京都 千代田区で活動する、映像制作、DVD、eラーニングを扱う会社です。

今回は、Starlingを使い単純な画像を表示させてみようと思います。用意したのは、角まるの四角形の画像(01.png)です。シンプルですね。

01
01.png

これをプログラムに埋め込むには、Embedでファイルを指定して名前を付けます。
[Embed(source = "01.png")]
private static const MyBitmap01:Class;

そして、次のように書くことでImageオブジェクトとして扱うことができます。
var image1:Image = new Image(Texture.fromBitmap(new MyBitmap01()));

あとは、addChildしてステージに表示すれば完成です。

MainState.as

package
{
	import starling.display.Image;
	import starling.display.Sprite;
	import starling.textures.Texture;

	public class MainState extends Sprite
	{
		[Embed(source = "01.png")]
		private static const MyBitmap01:Class;
		
		public function MainState()
		{
			// Imageオブジェクトを生成
			var image1:Image = new Image(Texture.fromBitmap(new MyBitmap01()));
			image1.width = 300;
			image1.height = 100;
			addChild(image1);
		}
	}
}
※Main.as と共に使用します。
https://bizvalley.co.jp/blog/7506.html
実行すると画像が表示されます。

20141021-1

原寸のサイズ(300x100)で表示する分では、角まるの画像は特に問題なさそうですが、スケールを変えたい場合、不都合がでてきます。サイズが300x200になる場合、画像が縦に間延びして崩れてしまします。これを、なんとか角まるを綺麗に維持したまま表示するには、9-patchという手法を使います。

20141021-2

次回は、Starlingで9-patchを試してみましょう。