背景などで、同じ画像を敷き詰めたいときに使う。 [Starling+Feathersでタイルイメージを使う]

印刷

背景などで、同じ画像を敷き詰めたいときに使う。モバイルなどでは画像を少しでも削った方が良いので積極的に使うべき。

使い方は簡単。FeathersのTiledImage^[1]を使ってテクスチャを引数に与えるだけで良い。

var backGround:TiledImage = new TiledImage(assets.getTexture(BACK_TILE));
backGround.width=960;
backGround.height=600;
addChild(backGround);

タイルイメージは拡大縮小などすると時にタイルの間に隙間が出ることがある。これはもとのtexture atlasのpng圧縮に起因するようなので、ふせぐにはtextureを作成するときに画像を少し拡張するように設定する。たとえば、ShoeBox^[2]なら「Advanced」設定の「Tex Extrude Size」を調整する。たいていは「1」にしておけばよい。これで1ピクセル中の画像と同じ色で外回りが埋められる。その時、他のTextureの線が見えるときにはTex Paddingを１～２ぐらいにしておくと良い。

多解像度対応などをして元画像のスケールをいろいろと変更していると、それでも線が出てしまうときがある。その時はSubTexture^[3]を使って自分でTextureの中心部分を切り出せばよい。

var texture:Texture = assets.getTexture(GameConstants.IMG_TILE);
var r:Rectangle = texture.frame.clone();
r.x +=2;
r.y +=2;
r.width -= 4;
r.height -= 4;
var subTexture:SubTexture = new SubTexture(texture, r);
var tileImage:TiledImage = new TiledImage(subTexture);

上の例では上下左右2ピクセルを取り除いている。

Last-modified: 2015-09-23 (水) 17:31:03 (JST) (3136d) by njf

Links list

(This host) = https://njf.jp

^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=TiledImage&refer=Starling%2BFeathers%E3%81%A7%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%BF%E3%81%86
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=ShoeBox&refer=Starling%2BFeathers%E3%81%A7%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%BF%E3%81%86
^{(This host)}/cms/modules/xpwiki/?cmd=edit&page=SubTexture&refer=Starling%2BFeathers%E3%81%A7%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%BF%E3%81%86

Starling+Feathersでタイルイメージを使う :: NJF Wiki

Links list