今回は、ティラノスクリプトのゲーム画面サイズを横1280 x 縦720ピクセルに改造する手順を試してみました。
ティラノスクリプトの標準解像度は横960 x 縦640ピクセルになっています。
ブラウザゲームとしてパッケージ化してスマホで表示する場合を考えてみました。
最近のスマートフォンの画面の横縦比は多くが16対9なので、フルスクリーンモードでランドスケープ表示した場合、このように画面左右が余りますよね。
画像素材：iPhone 6 – Scalable Mockups 4.7′ – Dribbble
パソコンの画面についても、ノートパソコンで普及価格の画面解像度は WXGA (1366×768) が多く、画面の縦横比はほぼ16対9のため、フルスクリーン表示した場合はスマートフォンと同様に左右が余る形になります。
では、実際にゲーム画面の変更作業を行ってみます。
ダウンロードしたティラノスクリプトのファイルから、data > system > Config.tjs を開き、59、60行目の数値を変更します。
//-------------------------------------------- ウィンドウや動作の設定 ----- // ◆ 画面サイズ // scWidth に画面の幅、scHeight に画面の高さをピクセル単位で指定します。 ;scWidth = 1280; ;scHeight = 720;
画面サイズの数値を変更して Config.tjs を保存。デバッグツールのティラノライダーを使用してプロジェクトを実行してみます。サンプルファイルの選択肢の画面を見ると、右下方向に画面が広がっていることが分かります。
メッセージ表示エリアのサイズと位置を調整しますが、まずサンプルシナリオのメッセージ表示エリアの設定を確認しましょう。
data > scenario > scene1.ks を開いて16行目に書かれています。
;メッセージウィンドウの設定 [position layer="message0" left=20 top=400 width=920 height=200 page=fore visible=true]
コードからメッセージウィンドウの表示位置の記述を削除してどのように表示されるか確認してみます。
;メッセージウィンドウの設定 [position layer="message0" page=fore visible=true]
メッセージ表示エリアが広がりましたが、このように画面右下にスペースができています。
再び Config.tjs の設定を確認します。250～253行目に初期位置の数値が設定されています。
// ◆ 初期位置 // これらは、position タグのそれぞれ left top width height の属性に対応しま // す。 ;ml = 16; // 左端位置 ;mt = 16; // 上端位置 ;mw = 960-32; // 幅 ;mh = 640-32; // 高さ
シナリオファイルでメッセージ表示エリアのサイズと位置を指定しない場合、Config.tjs の設定値が反映されるようです。そこで数値を下記のように変更しました。
;ml =160; // 左端位置 ;mt = 30; // 上端位置 ;mw = 1280-320; // 幅 ;mh = 720-60; // 高さ
ゲームを再生するとメッセージ表示エリアはこのように表示されます。
これでメッセージ表示エリアの標準画面サイズと位置を中央に配置できました。
もう一度シナリオファイルの方でメッセージ表示エリアの指定をしてみます。
data > scenario > scene1.ks を開いて16行目の値を変更。
;メッセージウィンドウの設定 [position layer="message0" top=490 height=200 page=fore visible=true]
このようになりました。
キャラクター名が左端に表示されたままなので位置を調整します。
data > scenario > scene1.ks を開いて26行目の値を変更。
;キャラクターの名前が表示される文字領域 [ptext name="chara_name_area" layer="message0" color="white" size=24 x=190 y=500]
このようにメッセージ表示エリア内に収まりました。
最後に、選択肢の位置を調整しましょう。data > scenario > scene1.ks を開いて67～69行目の値を変更。x座標の指定を削除。
[glink color="blue" storage="scene1.ks" size="20" width="400" y="100" text="はい。興味あります" target="*selectinterest" ] [glink color="blue" storage="scene1.ks" size="20" width="400" y="170" text="興味あります！" target="*selectinterest" ] [glink color="blue" storage="scene1.ks" size="20" width="400" y="240" text="どちらかと言うと興味あり" target="*selectinterest" ]
このように中央に表示されました。
キャラクターと選択肢が重なるのが嫌な場合は、サンプルファイルの最終画面のように選択肢ボタンを端に寄せるのもありですね。
今回はとりあえず、画面サイズを1280×720ピクセルに変更しましたが、ノベルゲームの画面サイズについてどのような考え方があるのか？色々ネットで検索して、ヒントになりそうなブログ記事をメモしてみました。
上記で紹介した記事の中で、画面の縦横比の移り変わりについて「ノベルゲーム雑記」では次のように書かれています。
ビジュアルノベルの草分けはワイドサイズ。今との違いは画面比率が16：10だったこと。
そこから長く4：3になったのは国民機だったNECのPC-98機からWindows搭載機へ市場が移り変わった影響が大きい。
現在、一般的に使われている16：9モニタの印象は「横は長すぎ、縦は短くて窮屈」。
「横長の方が人にとって心地良い」などと言われるワイドだけど、実際に16：9を見て首を傾げる人がいる。
理由は明白。黄金比でないから。人にとって心地良いワイドとは黄金比により近い16：10。
16：9は人の目が２つあることから導かれた視野範囲でしかない。
ワイド画面を使用する場合、一行の文字数が多くならないようにメッセージ表示エリアの幅を調整した方が読みやすくなるというには重要ですね。
スマートフォン用のゲームとして画面レイアウトを考えると、縦画面のポートレイト表示で上半分をグラフィックで下半分をメッセージ表示エリアにするのも良さそうに思いました。