memo

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

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

小ネタといえば小ネタなんですが……[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
動かないんだけど?とか、もっといい方法あるよ!などなどありましたらぜひお知らせください。これからもせっせとセンタリングライフです!

コンカのサンプルセットを注文してみた

conca.cc

PCゲームを同人誌即売会で頒布する手段のひとつとして、シリアルコードが書いてあるダウンロードカードを用意してそれを購入してもらう、という方法があります。

ダウンロードカード製作は以前から興味があったので、コンカというサービスについて色々調べていました。サンプルセットが無料で注文できたのでさっそくゲット。

サンプルセットの内容をざっくり紹介していきます。

※2017年5月現在の情報なので、今後変更される可能性があります。

f:id:onigirimgmg:20170514205158j:plain

普通の長3封筒で送られてきます。同居人に見られても恥ずかしくないシンプルなデザインでいいですね(大事)。

f:id:onigirimgmg:20170514205654j:plain

同封物はこんな感じ。カードサンプル、目隠しシールサンプル、台紙サンプルです。

f:id:onigirimgmg:20170514205951j:plain

カードは3種類の厚みのサンプルが入っています。右下のはシリアルコードの目隠しシールです。コインで削るタイプっぽいですね。5/16修正:目隠しシールは削るタイプではなく「単純なシールの貼付け、取り外しのタイプ」だそうです。勘違いして申し訳ございませんでしたm(__)m

f:id:onigirimgmg:20170514210306j:plain

カードの裏面です。シリアルコードとダウンロードURLが書いてあります。

f:id:onigirimgmg:20170514211009p:plain

f:id:onigirimgmg:20170514211035p:plain

サンプルセットのシリアルコードを入力すると、コンカの説明PDFファイルがダウンロードできます。ダウンロードまでの流れも試せるのは嬉しいですね。手順はとてもシンプルでわかりやすいです。

以下サンプルセットを見ていいな~と思った点です。

  • カードがしっかりしている

プラスチック製は紙製とはひと味違う感じになりますね。一番薄い0.3mmでも結構しっかりした厚みなので個人的にはこれで十分かなあ(テレカよりちょっと厚いくらい?)。コレクション的な価値を求めるなら0.5mmでもいいと思います。0.7mmは曲げるのが困難なくらい厚い。

印刷は普通にきれいです。カード自体は光沢があるのですが、印刷がある箇所はざらっとした質感になるのが面白いですね。

  • ダウンロードまでの手順がわかりやすい

上にも書きましたが、とてもシンプルでわかりやすいです。自分で一からシステムを構築する手間を考えたら断然こちらを利用したいです。ダウンロード期間の指定ができるのもいいですね。

価格はちょっとお高めだなあと思うのですが、ダウンロード解析機能やコメントフォームの設置等便利そうな機能があったり、ファイルの差し替えがいつでも何度でも可能(すごい!)なところとか、惹かれる要素もたくさんあります。

あとは実際に使ってみてどうかな~というところなので、ぜひ今年中には利用させていただきたいです!楽しみ~。

【ティラノスクリプト】着せ替えテーマプラグイン

こんな感じのシステムデザインに着せ替えできます。

f:id:onigirimgmg:20170512232418p:plain

f:id:onigirimgmg:20170512232442p:plain

f:id:onigirimgmg:20170512232514p:plain

ダウンロード:nanayen_theme_01.zip(※Dropbox

続きを読む

【ティラノスクリプト】レイヤーモード改造

f:id:onigirimgmg:20170507223942p:plain

レイヤーモードで合成した画像って標準のままだとずらっとリピート表示されちゃうので、それを防ぐ&縦横位置を指定するパラメータを追加する改造をしました。自分用です。本体の改造は自己責任でお願いしますー。

続きを読む

【ティラノスクリプト】画像のプリロードをする(&ファイル名一括取得の方法)

ティラノスクリプトには画像を事前に読み込ませて表示をスムーズにするためのタグがあります。詳細はリンク先(公式タグリファレンス)でご確認ください。

[preload] 画像ファイルの事前読み込み

f:id:onigirimgmg:20170411213250p:plain

例えばこのフォルダ内の画像をすべてまとめてプリロードしたい場合、以下のようなコードをfirst.ks等に書いておきます。

[iscript]
f.preload_images = [

"data/fgimage/chara/akane/angry.png",
"data/fgimage/chara/akane/doki.png",
"data/fgimage/chara/akane/happy.png",
"data/fgimage/chara/akane/normal.png",
"data/fgimage/chara/akane/sad.png",

];
[endscript]

[preload storage="&f.preload_images"]

普通はファイル名をコピペ等して入力していくと思うのですが、5個程度ならともかくこれが50個とか100個になるとコピペも大変ですよね。

そこで今回はコマンドプロンプトを使用して、フォルダ内のファイル名を一括取得してみたいと思います。コマンドプロンプトの基本的な使い方については各自でぐぐってください。

続きを読む