［ティラノスクリプト］全画面ノベルへの道①全画面表示とバックログ問題を解決する編
文字をいかに読みやすくレイアウトするか。
とても大切な問いです。
だって、読んでもらわないことにははじまらないんですから。
これは、ティラノスクリプト製ノベル「ウソからはじまる物語」の開発にあたり、テキストの表示とバックログ問題をどう解決したかという覚え書です。誰かのお役に立てば幸い。
とりあえずうまくいったという話なので、保証はありません。間違ってるかもしれないし、もっといい方法があるかもしれません。念のため。
開発環境
ティラノスクリプトVer5.06e＆ティラノスタジオを使用。
ウィンドウサイズ960×640に全画面で文字を表示することを想定し、以下のファイルセットを使用しました。
文字数と行数、文字の大きさと行間の問題
かつてはディスプレイサイズの問題から、ノベルゲームといえば640×480か800×600ピクセルが普通でした。しかし今や主流はワイド。こっちのほうが広がりがあるし立ち絵もいっぱい出せて、なにしろカッコいい。基本的には大賛成ですが、ひとつ大きな問題が。
調整しないと、一行の文字数が多すぎ＆行間が狭すぎ問題が発生します。これでは物語に集中できません。
今回は960×640での作成ですが、油断はできません。ツールがNScripterからティラノスクリプトになっても、やることは同じ。まずはテキストウィンドウの設定を開始しました。
フォント変更
これは完成形。お気づきの方もいると思いますが、ねこのさんの記事を参考にしてフォントを変更しました。ハイパーティラノ使いねこのさんの記事は、どれも貴重な情報ばかりなので、ぜひ隅から隅までご一読を。
テキストウィンドウの設定
上部に現在日時と場所を表示するので、ベースとなるテキストウィンドウはやや上部が欠けた形、その他の余白は均等。
;メッセージウィンドウの設定
[position layer="message0" left="20" top="60" width="920" height="560" page="fore" visible="true" opacity="140"]
;文字表示領域を調整
[position layer="message0" page="fore" margint="50" marginl="80" marginr="80" marginb="100"] 960×640に対して左余白20、ウィンドウサイズ920なので右余白20。上余白60+高さ560で下余白も20。画面すべてをウィンドウにするのもありですが、画面の印象が暗くなるのでやめました。
文字表示領域は、左右とも多めに余白をとりました。ウィンドウ内余白が多い方が文字は抜群に読みやすくなりますし、息苦しさも感じません。（これは僕だけ？）
問題は文字の大きさ。これで文字数が変わってきます。文字の大きさを決めてから余白を決めたほうが効率はいいかも。
data\system\Config.tjsを開いて調整。
この作品は、文字の大きさ28、行間16、字間0。文字は縁どりで黒。写真背景＋全画面の場合、影より縁どりの方が見やすいと思います。
行間は文字の大きさ×0.5を目安にしていますが、ルビが入ることを考えてやや多めに。ルビはねこのさんのカスタムルピプラグインを使っています。
段落行頭１字下げ問題
ティラノスクリプトでは、文頭の全角スペースが無視されてしまいます。細長いウィンドウに３行程度の表示なら問題ありませんが、画面全体に７～９行程度を表示させたい場合は大問題。
解決方法。全角スペースの左に半角アンダーハイフンをいれる。以上。これはテキストエディタの置換を使えば一瞬で終わります。ただし、文中の全角スペースには必要ありません。
段落一行目？ もちろん一字下げでしょ。
_ 段落一行目？ もちろん一字下げでしょ。
バックログ問題
ここが難関でした。もしこれが解決していなければ、完成は来年になっていました。バックログ機能なんて脇役だろと言われそうですが、許せないものはゆ（略）。
ここでいうバックログ問題とはなにかというと、
主に改行がバックログに反映されない問題のことを指します。
今回はウィンドウ内で改行を多用するため、なんとしても本文レイアウトをバックログにも反映させたかった。もはや執念。
解決方法はこちらから学びました。ご存知の方も多いと思うが記しておきます。感謝、ほんと感謝。つけくわえるなら感謝。
バックログ対策のマクロを組む
あとは以下のふたつを使って、数パターンのマクロを組むだけです。僕がこの作品用に作ったマクロを以下にあげていきます。
①バックログを改行させる tf.system.backlog.push("");
②バックログを改行させない tf.system.backlog.join("");
（１）クリック待ち[l]＋改行[r]（バックログも改行）
[r]はバックログで改行されません。そこでセットで使う[l][r]と①をまとめてマクロに。名前は[lr]。
;◆クリック待ち（改行あり）／バックログ反映
[macro name="lr"]
[l][r]
[iscript]
tf.system.backlog.push("");
[endscript]
[endmacro]（２）クリック待ち＋改行しない（バックログも改行しない）
数行にわたる大きな段落中で使います。通常クリック待ちを使うとバックログでは改行されるので、これを改行させない。名前は[l2]。ちなみに②のjoinはリンク先に載っていなかったのですが、試しにやってみたら一発で成功。うまく動いたときの感動といったら、もう。
;◆クリック待ち（改行なし）／バックログ反映
[macro name="l2"]
[l]
[iscript]
tf.system.backlog.join("");
[endscript]
[endmacro]（３）[r]のみで改行した場合、バックログに空白行を入れる
これは段落と段落の間に空白行を入れたい場合。クリック待ちはしないので[lr]の次行で使います。
;◆空白１行／バックログ反映
[macro name="r2"]
[r]
[iscript]
tf.system.backlog.push("");
[endscript]
[endmacro]（４）ページ切替[p]時に、バックログにのみ１行挿入する
これは（３）と似たような処理。[pr]とした。
;◆ページ切替／バックログに空白行を挿入
[macro name="pr"]
[p]
[iscript]
tf.system.backlog.push("");
[endscript]
[endmacro]
さ（５）バックログにのみ空白行を２つ入れる
本作では日時場所の表示（[mtext]）をバックログにも表示（[pushlog]と変数）させるので、その下に１行入れる必要がありました。だから改行を２回しています。隠れてやるので[hr]と命名。
;◆バックログだけに空白行を挿入
[macro name="hr"]
[iscript]
tf.system.backlog.push("");
tf.system.backlog.push("");
[endscript]
[endmacro]以上のマクロをすべてfirst.ksに置いて完成です。
使用例
実際に使うとこんな感じ。
;---------------------------------------------------
[eval exp="f.tp='■ ４月１日 ６：００ 自宅'"]
[pushlog text=&f.tp]
[hr]
[timeplace]
;---------------------------------------------------
_ 早起きが得意。[lr]
[r2]
_ これが私の数少ないアピールポイントだ。[lr]
_ おかげで学生時代から遅刻や寝坊とは縁がない。[lr]
_ もちろん社会人になった今でも。[pr]
_ 中学生の頃、兄が早朝ランニングを日課にしていた。[lr]
_ 毎朝決まった時間に物音がするから、どうしても目を覚ましてしまう。[l2]それが１年以上も続いたせいで、妹の私まで早起き体質になってしまった。[lr]
_ 一度身に着いた習慣というのは、大人になっても消えないものだ。[pr]※[timeplace]は日時表示用に作ったマクロ
backlog.htmlのレイアウト変更
backlog.htmlで、デザインも変更しました。
通常バージョンだと、このログ本体部分が
<div class="log_body"></div>になっていますが、960×640用ファイルセットには以下の記述があります。これを修正しました。
<div class="log_body" style="width:70%;height:55%;overflow-y:scroll;margin-top:50px;padding:8px;color:#000;border:1px solid #555;font-weight:normal" align="left"></div>
css初心者ですが、widthとheightはわかります。本文よりフォントサイズが小さいので幅を狭くして高さを増やしました。あとはmargin-topとpaddingで枠内の余白を調整。
Backボタンが変化しない問題
SAVEやLOAD画面ではBackボタンが変化（hover）します。ところがバックログ画面だけしない。save.htmlを確認すると以下の部分が抜けていました。同じ場所にコピペして解決。内容はよくわからないが動くのでよし。
<script class="menu_close">
var tmp_src = "";
$(".menu_item").hover(function(){
tmp_src = $(this).find("img").attr("src");
var img_src = tmp_src.replace(".png","2.png");
$(this).find("img").attr("src",img_src);
},
function(){
//もとにもどす
$(this).find("img").attr("src",tmp_src);
});
</script>
スマートフォン用の矢印ボタン配置
矢印ボタン（タッチ操作時のスクロール用）は、ボタン画像を作って差し替えましたが時間が足りず、表示確認までしませんでした。
確認するべきでした。top座標がズレていたんです。
<img class="button_arrow_up button_smart" src="tyrano/images/system/arrow_up.png" style="cursor:pointer;left:670px;top:20px;position:absolute;">
<img class="button_arrow_down button_smart" src="tyrano/images/system/arrow_down.png" style="cursor:pointer;left:800px;top:15px;position:absolute;">
button_smartの記述を削除するとテストプレイで表示されるとのことなので、leftとtopを調整して好きな場所に配置。
詳しくはリンク先を参照。貴重な情報に感謝。
今回はここまで。
最後までお読みいただきありがとうございました。
よかったらゲームもプレイしてみてください。ブラウザからも遊べます。
この記事が気に入ったらサポートをしてみませんか？