スマホでプレイ可能なノベルゲーム作ろうぜ 導入編

ゲーム開発

ティラノスクリプトでノベルゲーム作ろうぜ!

ノベルゲームってやってるかい?日本には多くの小説サイトがあって、日々多くの小説が投稿されているけどノベルゲームって少ないよね。ということで、金豚がノベルゲームを作る為のツールと、初期設定を出来るだけ丁寧に紹介していくよ。

使用ツールは何を使うか

  1. ティラノスクリプト…無料。万能で高性能。
  2. ティラノビルダー…有料。楽だが凝ったノベルゲーム作りには向かない
  3. unity…unityのアセットストアから宴というアセットを購入するのが前提。8000円なり
  4. ラノゲツクールMV…有料。RPGツクールの会社がリリースしてるやつ

ここから選ぶとしたら、ティラノスクリプトが一番おすすめ。という訳でティラノスクリプトで作っていくぅ!

ティラノスタジオのダウンロード

↓からをダウンロード。これが管理ツール。勿論、macを使ってる人はmac版をダウンロードしてね。

ティラノスタジオ -本格的なADV・ノベルゲーム開発環境- - ティラノスクリプト|スマホ対応のノベルゲームエンジン、アプリ化にも対応。
完全無料のアドベンチャーゲーム作成ツール。商用利用可能。作成したゲームはPC(Windows、Mac、Linux)、スマートフォン(iPhone,アンドロイド)、各種タブレットなどあらゆる環境で遊べます。

ダウンロードが終わったら、デスクトップにでも解凍しよう。解凍するとTyranoStudio_win_std_v110bというフォルダが出てくる。

中身はこんな感じ。

TyranoStudio.exeが実行ファイルだ。よく使うものなのでデスクトップにでもショートカットを作っておくといいだろう。

ティラノスタジオの起動と初期設定

起動するとこんなん出てくる。まずは新規プロジェクト作成をクリック。

ゲームのタイプ、名前、画面サイズ、確認と移行していくよ。

  1. ゲームのタイプは、ノベルゲームでOK
  2. 名前はゲームの作品名だよ
  3. 画面サイズは弄らなくていいよ。1280×720のままね。
  4. ただの確認だよ

これで新しいプロジェクトが出来上がったよ。

初期設定はまだ続くんだぜ

ティラノスタジオからプロジェクトを作成したので、もう作り始められる状態だ。だが焦ってはいけない。貧弱な装備じゃ開発なんて無茶だ。

テキストエディタをダウンロードするぞ!

↓からMery Ver 2.6.7 (32 ビット版) インストーラ – 、またはMery Ver 2.6.7 (64ビット版) インストーラ –をダウンロード。自分のWindowsが32bitか64bitで、どちらをダウンロードするか変わる

メインページ
フリーのテキストエディタ「Mery」を公開しています。

え、自分のOSが32か64かわからない?キーボードのスペースキーあるじゃん?その3つ左側にWindowsボタンあるじゃん?WindowsボタンとRを同時押しする。

すると「ファイル名を指定して実行」というポップアップが出るから、そこに dxdiag って入力してOK押せばいいよ。そうするとDirectX診断ツールが起動するから、OSの部分確認してみて。

Meryをインストール出来たら、次はティラノスクリプト用の構文ファイルをインポートしよう。↓からダウンロードしてね。インポート方法なんかも載ってるので、参考にしてどうぞ。

Meryのティラノスクリプト用構文ファイル - memo
最終更新:2/12 最新版のタグに対応 MeryWiki(公式ページ) ティラノスクリプトでゲームをつくるときのテキストエディタはMeryを使っています。理由としては、シンプルなこと、現在も更新が続いていること、KAG仕様の色分けができるプラグインをつくってくださった方がいたからなのですが、こちらはいつの間にかダウンロ...

ここまで完了すれば、初期準備は完了だ!

試しにサンプルゲームをプレイしてみよう

参考にサンプルゲームを見てみよう。

プレビュー→ゲーム再生→ゲームを再生する

起動できたかな?

ちゃんとノベルゲームしてるよね。だけどこれじゃ駄目なんだ。

パソコンという大画面だから苦も無く文字を読むことが出来るけど、これがスマホでプレイするってなった場合はどうかな?小さすぎて読めないから話にならないよね。なのでまずは文字を大きくしてみよう。

文字(フォントサイズ)を大きくする

ティラノスタジオから移動するよ。データの下にあるフォルダという青いボタンを押してください。

すると、各プロジェクトのフォルダを開くことが出来る。dataを開いてみよう

dataフォルダの中からsystemフォルダを開くと、Config.tjsというファイルが見つかる。これを編集することで文字を始めとした多くの設定を変更することが出来る。Config.tjsは先ほどインストールしたテキストエディタのMeryで開きましょう!

中身にはずらーっと項目と設定が書いてある。303-305行目に渡って、文字の大きさに関する記述が掛かれている。24という数字があるが、これがフォントサイズになる。つまりは、この数字を大きい数値にすればいい訳だ。

// ◆ 文字の大きさ
// デフォルトの文字の大きさ ( 高さ ) を pixel 単位で指定します。
;defaultFontSize = 24; // deffont タグの size 属性に相当

スマホでプレイすることを考えると、数値は50くらいかな?

// ◆ 文字の大きさ
// デフォルトの文字の大きさ ( 高さ ) を pixel 単位で指定します。
;defaultFontSize = 50; // deffont タグの size 属性に相当

数値を変更したらconfig.tjsを保存して、文字の大きさが変更されているかを確認する為にサンプルゲームをつけてみよう。

文字が大きくなってるね。このくらいフォントサイズであれば、iOSやAndroidのスマホでプレイをする時でも読めるね!

文字まわりを色々と変更しよう!

ノベルゲームは文字通り、ずっと文字を追いかえることになる。文字を読むことが負担になってはいけない。という訳でだ、文字をボールド(太文字)にして、縁の設定して読みやすくしよう

太文字にする

文字サイズを変更する時に開いたconfig.tjs、あれをもう一度開こう。334-336行に書かれているところを変更しよう。

// ◆ 文字をボールドにするか
// する場合は true, しない場合は false を指定します。
;defaultBold = false; // deffont タグの bold 属性に相当

falseをtrueに書き換えるだけ。書き換えたら保存して、もう一度サンプルゲームを起動してみよう。

太すぎるっぴ!これくらい太ければ読みやすい(確信)

文字を縁取りする

同じくconfig.tjsを開こう。364-370行に縁取りの設定がある。

// ◆ 縁取りをするか
// する場合は true, しない場合は false を指定します。
;defaultEdge = false; // deffont タグの edge 属性に相当

// ◆ 縁取りの色
// 縁取りの色を 0xRRGGBB 形式で指定します。
;defaultEdgeColor = 0x000000; // deffont タグの edgecolor に属性に相当

縁取りをするかのfalseをtrueに変更。縁取りの色は、0x000000が色を表している。RGB(赤・緑・青)の並び。0x000000は真っ黒を指す。ちなみに0xFFFFFFで真っ白ね。今回は黒色のままにしてみよう。

縁取り小さすぎるなぁ。縁取りのサイズを変更してみよう。ここからは違うファイルをいじる必要があるから注意だよ!

縁取りのサイズを変更

先ほどはdataフォルダだったが、tyranoフォルダを開こう。pluginsフォルダを開き、kagフォルダを開こう。

yranoStudio_win_std_v110b / myprojects / 作品名 / tyrano / plugins / kag

無事開けたかな?開けたらキーボードのctrlとFを同時押しして検索をしよう。検索ウィンドウで調べる文字列は↓ね。

{var l=s.kag.stat.font.edge;n.css("text-shadow","1px 1px 0 "+l+", -1px 1px 0 "+l+",1px -1px 0 "+l+",-1px -1px 0 "+l)}

検索で、該当箇所がハイライトされる。こんな感じ。

1pxと-1pxと書いてある箇所を変更する。とりあえず3pxと-3pxに変更してみようか。これで縁取りのサイズが3pxに変更されるはずだ。

さてはてどうなるか。サンプルゲームを起動して確認してみよう。

隙間が出きてるね。この縁取りのサイズは3px以上にすると隙間が出来てします。これを回避する方法としては、影を付け足すようにする必要がある。自分としては味があっていいとは思うのだが、嫌という人もいるだろう。後述にて解決方法があるので、そちらで教えよう。

メッセージウィンドウの背景グレーを消してみよう

data / system / config.tjs を開こう。280-286行を変更しよう。変更するのは286行目の数値128だけ。これを0に変更しよう。これでメッセージウィンドウは透明になったということだ。

// ◆ メッセージレイヤの色と不透明度
// frameColor には 0xRRGGBB 形式で ( RR GG BB はそれぞれ 2 桁の 16 進数)
// メッセージレイヤの色を指定します。frameOpacity には 0 ~ 255 の数値で、
// 不透明度を指定します。メッセージ枠用の画像が指定されている場合は無効で
// す。
;frameColor = 0x000000; // position タグの color 属性に相当
;frameOpacity = 128; // position タグの opacity 属性に相当

ここまでの変更で、どんな見た目になるのか

うーん、まぁまぁかな?スマホでプレイすることを考えるとこれくらいシンプルな方が良いんじゃないかと金豚は思う訳よ。皆さんはどう思う?縁取りの色を真っ黒から変えるだけでもっと背景と馴染みつつ、見やすくもなると思うのでお試しあれ。

メッセージウィンドウの大きさと位置の調整

画像を見ればわかるように、このままでは文字の3行目が見切れてしまう。更にメッセージウィンドウも狭いままだ。本来、パソコン向けのノベルゲームであれば左から右に流れていく文字を長時間読むのは負担だ。ユーザーの負担を少なくするように、横幅は広すぎないように調整するのが主流だ

しかしスマホでのプレイに限ると、元々ディスプレイが小さいので頭を動かす必要も、視線を動かす負担もないのでメッセージウィンドウの幅を広げてしまってもいいだろう。

data>scenario>scene1.ks を開こう。16行目の数値を変更してメッセージを表示する位置を調整してみる。

 サンプルゲーム内にあるscene1.ksとはティラノスクリプトは起動をすると一番初めにscenarioフォルダの中にあるfirst.ksを読み込む。first.ksの命令によりtitle.ksが読み込まれてタイトル画面が表示される。タイトル画面で「はじめから」を押すと、scene1.ksが読み込まれてノベルゲーム形式のやり取りが始まる。

;メッセージウィンドウの設定
[position layer="message0" left=100 top=450 width=1100 height=250 page=fore visible=true]

さて、どうなるだろうか。

成功したね。だけどキャラの名前が隠れてしまっている。キャラ名も変更しよう

キャラ名表示のカスタマイズ

引き続きdata>scenario>scene1.ksを編集しよう。25行目-26行目にかけて名前が定義されている。color=”white”となっているので白ってことだね。sizeは名前のフォントサイズ。boldは太文字にするかどうか。xは横の表示位置、yは縦の表示位置だよ。適当に変えてみよう

;キャラクターの名前が表示される文字領域
[ptext name="chara_name_area" layer="message0" color="white" size=28 bold=bold x=180 y=510]

名前の位置は変更できたけど……キャラクター名に縁取りがついていない。どうせならキャラクター名にも縁取りをつけよう!ちなみに今からする作業は、文章に表示される文字の縁取りが綺麗になる。とある方が公開しているプラグインをお借りしました

メッセージ縁取りプラグイン
メッセージに、縁取り・影を付けるプラグインです。

キャラ名の縁取りと、文章メッセージの最適化

data>scenario>tyrano.ksを開こう!開いたら↓を貼り付けてこ!

[iscript]
//初期値設定
mp.edge = mp.edge || TG.config.defaultEdge;
mp.shadow = mp.shadow || TG.config.defaultShadow;
mp.edge_color = mp.edge_color || TG.config.defaultEdgeColor;
mp.shadow_color = mp.shadow_color || TG.config.defaultShadowColor;
mp.edge_blur = mp.edge_blur || "3";
mp.edge_offset = mp.edge_offset || "2";
mp.shadow_blur = mp.shadow_blur || "3";
mp.shadow_offset = mp.shadow_offset || "2";
//カラー値変換
var edge_color = mp.edge_color.replace("0x","#");
var shadow_color = mp.shadow_color.replace("0x","#");
if (mp.edge == "true"){
var edge = [];
edge[0] = edge_color + ' ' + mp.edge_offset + 'px ' + mp.edge_offset + 'px ' + mp.edge_blur + 'px'; //上右
edge[1] = edge_color + ' ' + mp.edge_offset + 'px -' + mp.edge_offset + 'px ' + mp.edge_blur + 'px'; //上左
edge[2] = edge_color + ' -' + mp.edge_offset + 'px -' + mp.edge_offset + 'px ' + mp.edge_blur + 'px'; //下右
edge[3] = edge_color + ' -' + mp.edge_offset + 'px ' + mp.edge_offset + 'px ' + mp.edge_blur + 'px'; //下左
edge[4] = edge_color + ' ' + mp.edge_offset + 'px 0 ' + mp.edge_blur + 'px'; //上
edge[5] = edge_color + ' -' + mp.edge_offset + 'px 0 ' + mp.edge_blur + 'px'; //下
edge[6] = edge_color + ' 0 ' + mp.edge_offset + 'px ' + mp.edge_blur + 'px'; //右
edge[7] = edge_color + ' 0 -' + mp.edge_offset + 'px ' + mp.edge_blur + 'px'; //左
if (mp.shadow == "true") {
var shadow_offset = parseInt(mp.shadow_offset) + parseInt(mp.edge_offset); //edge併用の場合edge_offset値分ずらす
var shadow = edge + ',' + shadow_color + ' ' + shadow_offset + 'px ' + shadow_offset + 'px ' + mp.shadow_blur + 'px';
var shadow_v = edge + ',' + shadow_color + ' -' + shadow_offset + 'px ' + shadow_offset + 'px ' + mp.shadow_blur + 'px';
} else {
var shadow = edge;
var shadow_v = edge;
}
}
else if(mp.shadow == "true"){
var shadow = shadow_color + ' ' + mp.shadow_offset + 'px ' + mp.shadow_offset + 'px ' + mp.shadow_blur + 'px';
var shadow_v = shadow_color + ' -' + mp.shadow_offset + 'px ' + mp.shadow_offset + 'px ' + mp.shadow_blur + 'px';
};
var style = '<style>.shadow p {text-shadow:' + shadow + '}.shadow p.vertical_text {text-shadow:' + shadow_v + '}.shadow p span{text-shadow:' + shadow + ' !important}.shadow p.vertical_text span{text-shadow:' + shadow_v + ' !important}</style>';
$('head link:last').after(style);
//すべてのメッセージレイヤーにclassを追加
var num = parseInt(TG.config.numMessageLayers);
for (var i=0; i< num ; i++) {
$(".message"+ i +"_fore").addClass("shadow");
}
[endscript]

成功するとこんな感じになる。

とてもいい感じだ。微調整したい時はスクリプト内の7-10行目にある数値を変更してみてね。このスクリプトを作ってくださったのはめも帳さんなので、感謝して使おう。

めも調
ティラノスクリプトで作ったもの置き場

deffontで一括で文字の設定を変更する

ここまでは、わざわざフォルダからファイルを開いてもらって逐一変更していった。大変な作業だけど、どこにどういった設定があるのかを知ってもらう為にあえて、こういう手段を取った。

実は文字周りの設定を一度で変更出来るタグが存在する。それこそが[deffont]だ。綴りのとおりデフォルトフォントのことだね。これをfirst.ksだとかtyrano.ksの中に書き込むだけでデフォルトのフォントを変更することが出来る。早速使ってみよう。注意点としては、キャラクター名はここでは変更出来ないってところかな。

[deffont size=80 color="red" bold=true]
[resetfont]

そうするとフォントサイズが80pxに。色文字が赤に。太文字になったはずだ。deffontタグを使うことで一気に設定したってことだね。確認出来たら元に戻すのを忘れないようにね

deffont現在操作対象のメッセージレイヤに対する、デフォルトの文字属性を指定します。
ここで指定した属性は、resetfont タグで実際に反映されます。
つまり、このタグを実行しただけではすぐにはフォントの属性は反映されません。resetfont タグ を実行する必要があります。解説チュートリアル

パラメータ必須解説
size×文字サイズを指定します
color×文字色を文字色を 0xRRGGBB 形式で指定します。(吉里吉里対応) HTML5に限るならその他指定でも大丈夫です
bold×太字指定。true 又は false で指定
italic×trueを指定するとイタリック体で表示されます。デフォルトはface
edge×文字の縁取りを有効にできます。縁取りする文字色を 0xRRGGBB 形式で指定します。縁取りを解除する場合は「none」と指定してください
shadow×文字に影をつけます。影の色を 0xRRGGBB 形式で指定します。影を解除する場合は「none」と指定してくださいeffect
effect_speed×effectパラメータがnone以外の場合に、表示されるまでの時間を指定します。デフォルトは0.2s です。 sは秒を表します。

タグに関しては、公式ページにタグリファレンスがあるのでそちらで確認してみてね。

タグリファレンスV5 - ティラノスクリプト|スマホ対応のノベルゲームエンジン、アプリ化にも対応。
完全無料のアドベンチャーゲーム作成ツール。商用利用可能。作成したゲームはPC(Windows、Mac、Linux)、スマートフォン(iPhone,アンドロイド)、各種タブレットなどあらゆる環境で遊べます。

 

まとめ

紹介した通り、ティラノスクリプトの設定はdata>system>config.tjsから色々と変更できる。画面サイズから、縦画面にするのか横画面にするのか。使用するフォントなど様々な設定はconfig.tjsで変更できると思っていいので、まずはどんな設定項目があるのか自分で眺めてみよう。

また注意としては、deffontタグを使う時はfirst.ksかtyrano.ksに書き加えるようにしよう。どんな場所でも記述は可能ではあるが、システム関連の変更タグに関しては色々な場所に書くととっちらかって後からどこに書いたかわからなくなるからね。気を付けよう。

ここまで完了出来れば、スマホ向けノベルゲーム制作の第一歩を踏み出せたと思っていい。だがノベルゲームはシナリオ、絵を用意するのが一番大変だ。だからこそ、システム周りは初期の段階で済ませて、シナリオ作成・絵の作成に集中できるようにしよう。

どうだったかな。意外と簡単だと感じた人も多いのではないだろうか。ひと昔前のノベル作成ツールである吉里吉里と比べると大分、難易度は下がっているように思うよ。大事なのは実際に形にすることだから、いちいち全てを理解する必要はない。使っていく内に自然と覚えていくのが一番効率がいいからね。それはmacroやjavascriptもそう。少しずつ上達していこう。

 

コメント

タイトルとURLをコピーしました