memo

ゲーム制作やデザインについての個人的メモ

【ティラノスクリプト】[ptext]で表示した文字を中央寄せにしたい

========================================

[ptext] - http://tyrano.jp/tag/#ptext

公式で[ptext]にalignパラメータが追加されました。
簡単に中央寄せや右寄せができます。便利!

========================================

ティラノスクリプト:ptext-align プラグイン v100 公開 - 空想曲線

空想曲線さんで細かくテキストの位置を指定できるプラグインが公開されています。便利!

========================================

小ネタといえば小ネタなんですが……[ptext]で表示した文字を中央寄せにしたいことってありませんか?私はセンタリング大好き人間なので、寄せたい!とよく思います。そんなとき、xで位置を見ながら何度も調整する……というのは面倒だなあ、なんとかしたいなあ、と思って色々試してみました。

①簡単に中央寄せにする

tyrano.cssCSSファイルならなんでも大丈夫だと思いますが、ここではわかりやすくこれを使います)の最後に以下のコードを追加するだけです。

.ptext_center {
	text-align:center;
}

使うときは[ptext]のxパラメータに0を、nameパラメータにptext_centerを指定してください。yはお好みの数値で。

[ptext layer=0 text="[ptext]で表示した文字を中央寄せにしたい!" x=0 y=300 size=30 color=black bold=bold name="ptext_center"]

実行結果
f:id:onigirimgmg:20170519001232p:plain:w250
使い方としては、nameパラメータは複数指定できるので、固有のnameの他にptext_centerを付け足すのがいい感じかなあ、と思います。以下[ptext]に固有のnameを指定しつつ中央寄せにした例です。

[ptext layer=0 text="ゲームタイトル!" x=0 y=300 size=60 color=blue bold=bold name="game_title,ptext_center" time=0]
[anim name="game_title" opacity=0 time=0]
[anim name="game_title" opacity=255 top=250 time=1000]

実行結果
f:id:onigirimgmg:20170519002336g:plain:w250
ちなみに上下左右中央寄せにしたいときはこんな感じのコードで。640pxはゲーム画面の縦のサイズです。

.ptext_center {
	height:640px;
	display:flex;
	align-items:center;
	justify-content:center;
}

参考:【CSS】要素やテキストを上下左右に中央寄せする簡単な方法 | KuzLog
使うときはyパラメータも0にしてください。

[ptext layer=0 text="ど真ん中!" x=0 y=0 size=30 color=black bold=bold name="ptext_center"]

実行結果
f:id:onigirimgmg:20170519002948p:plain:w250

②[ptext]タグを改造する

困ったことがあるとすぐタグ改造に走っちゃうせっかちな君のためのコードも書いておくよ。もちろん改造は自己責任だよ。アップデートで仕様が変わる可能性もあるので気をつけてね。
kag.tag.js

tyrano.plugin.kag.tag.ptext = {
// 変更ここから
//vital: ["layer", "x", "y"],

vital: ["layer"],
// 変更ここまで
pm: {
"layer": "0",
"page": "fore",
"x": 0,
"y": 0,
"vertical": "false",
"text": "",
"size": "",
"face": "",
"color": "",
"italic": "",
"bold": "",
"name": "",
"time": "",
"zindex": "9999",
"overwrite": "false", // カンマ忘れない
// 追加ここから
"center":"false"
// 追加ここまで
},
start: function(pm) {
var that = this;
if (pm.face == "") pm.face = that.kag.stat.font.face;
if (pm.color == "") pm.color = $.convertColor(that.kag.stat.font.color);
else pm.color = $.convertColor(pm.color);
var font_new_style = {
"color": pm.color,
"font-weight": pm.bold,
"font-style": pm.fontstyle,
"font-size": pm.size + "px",
"font-family": pm.face,
"z-index": "999",
"text": ""
};
var target_layer = this.kag.layer.getLayer(pm.layer, pm.page);
if (pm.overwrite == "true" && pm.name != "")
if ($("." + pm.name).size() > 0) {
$("." + pm.name).html(pm.text);
this.kag.ftag.nextOrder();
return false
}
var tobj = $("

");
/* 削除ここから
tobj.css("position", "absolute");
tobj.css("top", pm.y + "px");
tobj.css("left", pm.x + "px");
tobj.css("width", "100%");
削除ここまで */
// 追加ここから

if (pm.center == "true") {
tobj.css("position", "absolute");
tobj.css("top", pm.y + "px");
tobj.css("width", "100%");
tobj.css("text-align", "center");
} else {
tobj.css("position", "absolute");
tobj.css("top", pm.y + "px");
tobj.css("left", pm.x + "px");
tobj.css("width", "100%");
}
// 追加ここまで
if (pm.vertical == "true") tobj.addClass("vertical_text");
$.setName(tobj, pm.name);
tobj.html(pm.text);
this.kag.setStyles(tobj,
font_new_style);
if (pm.layer == "fix") tobj.addClass("fixlayer");
if (pm.time != "") {
tobj.css("opacity", 0);
target_layer.append(tobj);
tobj.animate({
"opacity": 1
}, parseInt(pm.time), function() {
that.kag.ftag.nextOrder()
})
} else {
this.kag.ftag.nextOrder();
target_layer.append(tobj)
}
}
};

centerというパラメータを追加して、trueを指定したときのみ中央寄せにしています。使うときはこんな感じ。

[ptext layer=0 text="[ptext]で表示した文字を中央寄せにしたい!<br>複数行にも対応してるよ!" y=300 size=30 color=green bold=bold center=true]

実行結果
f:id:onigirimgmg:20170519005240p:plain:w250
動かないんだけど?とか、もっといい方法あるよ!などなどありましたらぜひお知らせください。これからもせっせとセンタリングライフです!