［ティラノスクリプト］全画面ノベルへの道②Save＆Load.htmlを改造する編

　今回は「ウソからはじまる物語」の制作にあたり、全画面ノベル（ここでは画面全体にテキストが表示されるタイプのノベルゲームを指します）向けにセーブ・ロード画面の改造をした、というお話。前回はこちら。

ファイルはどこにあるか

　tyrano\htmlにsave.htmlとload.htmlがあります。
　なお今回960×640で作成するため、以下のパッチをあてています。そのために一部ファイルが旧バージョンに変わっている点にご注意を。

ティラノV5で960x640のシステムメニューを使用するためのファイルセット配布｜シケモクMK｜pixivFANBOX

ラベル画像、背景画像の変更

　これはファイル名の変更、データ差し替えで済みました。簡単。

<img class="img_label img_label_save" src="tyrano/images/system/label_save.png" style="left:0;top:0;position:absolute;">
<img class="img_bg_base" src="tyrano/images/system/bg_base.png" style="z-index:-1;left:0;top:0;width:100%;height:100%;position:absolute;">

スクリーンショットはいらない

　全画面ノベル（特に短編）は、セーブ・ロード画面にスクリーンショットがあってもテキストが邪魔で判別しにくい。というわけで今回はなし。
　まずはConfig.tjsでサムネ無効にしました。

// セーブ・ロード時にサムネを表示したくない場合はこちらをfalseに設定してください
// 一部古い機種でセーブ機能が動作しない場合などにサムネを表示しないことで解決しないことがあります。
;configThumbnail    = false;

　そしてsave.html、load.htmlから以下の部分を削除。

<span class="save_list_item_thumb">
    {{if img_data != ""}}
	<img src="{{:img_data}}">
	{{/if}}
</span>

Backボタンについて

　右上のBackボタンが画面ギリギリの位置にあったので、marginの上と右をそれぞれ30pxに変更しました。

	<div class="menu_item" style="float:right;margin: 30px 30px 0 0;">
	<img class="menu_close" src="tyrano/images/system/menu_button_close.png">
	</div>

セーブテキストの文字

　次は\tyrano\tyrano.cssで見た目の変更。
　まず文字サイズを大きく（font-size: 14px→18pt）。次にスクリーンショットがなくなった左空白を埋めるため文字の左揃え（text-align: left;）を追記。
　※通常のVer.5（ワイド画面）では最初から左揃えになっています。　

/* セーブデータリスト全体の設定 */
.save_list {
	display: table;
	table-layout: fixed;
	width: 70%;
	height:76px;
	font-size: 18px;
	font-weight: normal;
	text-align: left;
	border-top: 1px dotted #CCC;

余白の調整

　文字が区切り線に近すぎるので、padding で上下余白を増やしました。

/* セーブデータのテキスト部文の設定 */
.save_list_item_area {
	display: table-cell;
	vertical-align: top;
	padding: 8px 10px;
	border-bottom: 1px dotted #CCC;

セーブ日時を２ケタ表示にする

　これについては、以下のサイトで学びました。感謝。

ティラノスクリプト：セーブした時間をゼロ埋め表示にする

スマートフォン用矢印ボタン

　セーブスロット５個が画面内におさまるので、スクロールの必要はありません。以下の削除を検討中。詳しくは前回＆以下のサイト参照。

<img class="button_smart button_arrow_up"   src="tyrano/images/system/arrow_up.png" style="cursor:pointer;left:670px;top:20px;position:absolute;">
<img class="button_smart button_arrow_down" src="tyrano/images/system/arrow_down.png" style="cursor:pointer;left:800px;top:15px;position:absolute;">

【ティラノスクリプト】セーブ画面等のアローボタンの配置調整

　今回はここまで。
　最後までお読みいただきありがとうございました。

　どんな動きをするのか、よかったら遊んでみてください。
　ブラウザからも遊べます。