やめアプ

会社をやめてアプリ開発者となった筆者の日常を書き連ねていきます。

【Titanium】文字の縁取りを実現する方法

【はじめに余談】
ふと「自分の独自性ってなんだろう?」と考えたら、【Titanium Mobileでゲームを作ってること】くらいしか思いつきませんでしたw

ゲーム作りに向いているとはとても言えないTitaniumなのですが、今の自分にとっては最速でアプリを作れるフレームワークなので、ゲームだろうがツールだろうがとりあえずこれで作ってしまっています。。

また、「制限の中で工夫してやりたいことを実現する」感じが、昔ハマっていたRPGツクールに似ている点も気に入っている要因かもしれません。

Titaniumでゲームを作るときのノウハウってネット上にあまりないのですが(というかTitaniumでゲームを作っている人口がかなり少ないと思うのですが)、ならば逆にそこが自分の独自性になるかもなと思い立ちまして、これから時々Titaniumでのゲーム制作ノウハウをポストしていこうと思います。


【本題】
今回ご紹介するのは、表題の「文字の縁取りを実現する方法」です。
『ダイス&モンスターズ』では下記のような場面で使っています。
f:id:moshimobox:20150220183010p:plain
ダメージ数字の「4」に黒い縁がついています。
縁取り文字を使うと視認性を高めやすいのですが、Titanium標準のlabelでは実現できません。

私の場合、こんなソースコードで実現しました。

function OutlineLabel(params){	//text, font, textColor, outlineColor
	var baseView = Ti.UI.createView({
		width: Ti.UI.SIZE,
		height: Ti.UI.SIZE,
	});
	var labels = [];
	for(var i=0; i<8; i++){
		var left = null;
		var top = null;
		if(i == 0 || i == 3 || i == 5) left = -1;
		if(i == 0 || i == 1 || i == 2) top = -1;
		if(i == 2 || i == 4 || i == 7) left = 1;
		if(i == 5 || i == 6 || i == 7) top = 1;
		var label = Ti.UI.createLabel({
			text: params.text,
			font: params.font,
			color: params.outlineColor,
			left: left,
			top: top,
		});
		baseView.add(label);
		labels.push(label);
	}
	var label = Ti.UI.createLabel({
		text: params.text,
		font: params.font,
		color: params.textColor,
	});
	baseView.add(label);
	labels.push(label);
	
	baseView.setText = function(text){
		for(var i=0; i<labels.length; i++){
			labels[i].text = text;
		}
	};
	baseView.setTextColor = function(color){
		labels[labels.length - 1].color = color;
	};
	baseView.setOutlineColor = function(color){
		for(var i=0; i<labels.length-1; i++){
			labels[i].color = color;
		}
	};
	baseView.close = function(){
		for(var key in this){
			if(typeof this[key] == 'function') this[key] = null;
		}
	};
	
	return baseView;
}
module.exports = OutlineLabel;

これをこんな感じで使います。

var OutlineLabel = require('OutlineLabel');
var label = new OutlineLabel({
	text: 'hoge',
	font: {fontSize:10},
	textColor: '#FFFFFF',
	outlineColor: '#000000',
});

つまるところ、
・outlineColorでlabelを8個作成し、タテ・ヨコ・ナナメにちょっとずつずらす
・その上にtextColorでlabelを作成して乗っける
という原始的な手法ですw

setText()やsetTextColor()、setOutlineColor()を使うことで、後からテキスト内容やテキスト色、縁の色を変更することもできます。

また、使用後にclose()を呼ぶことでガベージコレクションの対象にもなるはずです(たぶん)。