【2016年度版】Cordovaでアプリ化する (ios編)

☆専用のアプリ化用ツール「ティラノプレイヤー」が公開されています。

この記事の方法は古いですので、ご注意ください。

最新のアプリ化手順は以下となります。

shikemokumk.hateblo.jp

 

=====================

ティラノスクリプトで作成したゲームをアプリ化する方法を解説します。
専門的な知識は不要です。だれでもiphoneipad 向けにアプリを作成することができます。

Androidアプリ化の手順は以下を参照してください

shikemokumk.hateblo.jp

 

まず、iphoneアプリ化するのに、必要なものとして

Mac PC

が必要です。

はい。Windowsではiphoneアプリは作れません。MacBook等を手に入れよう。もしくは借りよう!

これさえあれば、後は以下の手順で作っていくだけです。
それでは、アプリ化を進めていきましょう。

 Xcodeをインストール

まずは、Macに最新版のXcodeをインストールする必要があります。
Xcodeとは、Macでソフトウェア開発を行うためのソフトウェアです。
それでは、AppStoreを開いて、「xcode」と検索してください 。

 

f:id:shikemokumk:20160315105342p:plain

 

上記画面のようなツールが見つかると思います。

無料ですので、インストールを進めて下さい。

 

cordovaのインストール

次にcordovaというツールをインストールします。

以前はphonegapと呼ばれていました。

以下のURLが公式サイトとなります。

https://cordova.apache.org/

 

cordovaを使用するには nodejs が必要です。

以下のサイトから入手してインストールしてください。

 

https://nodejs.org/

 

 

f:id:shikemokumk:20160315110038p:plain

ダウンロードしてインストールを完了させて下さい。

 

続いて、アプリ化を実行していきます。
最初にデスクトップなどの適当な場所にフォルダをつくってください。
ここでは、iphoneという名前として説明していきます。

作成したフォルダをツールバーにある黒いアイコン(画像参考)にドラッグ&ドロップしてください。

 

f:id:shikemokumk:20160315110147p:plain

 

すると、真っ暗な文字だけの画面が現れると思います。

 

f:id:shikemokumk:20160315110233p:plain

画面が出てきたら、以下のコマンドを順番に実行してください。
コピペで貼り付けて、エンターキーを押します。

①cordovaのインストール

sudo npm install -g cordova

 

②アプリの作成(今回はmyappという名前で作ります)

以下を1行コピペするたびにエンターを押して下さい。

cordova create myapp com.myapp "myapp"

cd myapp

cordova platform add ios

 

次にティラノスクリプトのプロジェクトフォルダを用意してください。
以下の画像のように、先ほど作成してiphone/myapp以下のwwwというフォルダに
ティラノスクリプトのプロジェクト以下のファイルをすべて上書きしてください

f:id:shikemokumk:20160315111126p:plain

 

さて、ここまでくるとあと少しです。
もう一度コンソール画面(黒いウィンドウ)に戻ってください。

そこで

 

cordova build ios

 

と打ちます。

すると、myapp/platforms/ios/myqpp.xcodeproj

というファイルが作成されていると思いますので、実行してください。
Xcodeが起動します。

f:id:shikemokumk:20160315111331p:plain

f:id:shikemokumk:20160315111348p:plain

 

あとは、画面左上部分から、再生する機種 (iphone Retina(3.5inch)) 等 を確認して再生ボタンを押してください。

 

f:id:shikemokumk:20160315111418p:plain

さて、いかがでしょう。
以下のようにゲームが開始されましたね。

f:id:shikemokumk:20160315111439p:plain

f:id:shikemokumk:20160315111439p:plain

 

アプリ化の準備は以上です。

ここから、実機での確認やAppStoreでの販売などについては
他の解説サイトがたくさんありますので、そちらでご確認願います。
(次回、このサイトでも追記します)

その他、小ワザとして

ゲームを縦、横に固定したい場合は

 

f:id:shikemokumk:20160315111528p:plain

 

さらに、昨今のスマートフォンでは画面サイズが一定ではありません。
そのため、作成したゲームのサイズによっては画面に黒い空きスペースができるかと思います。
縦横比を無視して画面いっぱいに拡大したい場合はティラノスクリプトのプロジェクトフォルダ system/Config.tjs の中にある


;ScreenRatio = fix;

の部分を fit に変更することで画面いっぱいに拡大できます。

 

よくあるエラー対応

■音がならない場合

iphoneアプリで使えるのはmp3 か m4a 形式となります。

スクリプトを編集して該当する形式が指定されているか確認してくだs台。

 

■コマンドの途中でエラーが出て進めない

以前、nodejs や cordovaをインストールした事があるマシンの場合、エラーが出ることがあるようです。

以下のファイルを消してから、もう一度nodejs や cordovaのインストールをやり直すとうまくいくことがあります。

 

【削除するファイル】

rm -rf /usr/local/lib/node_modules/

上でもうまくいかない場合は下も削除

rm -rf /Users/ユーザ名/.node-gyp/
rm -rf /Users/ユーザ名/.node_repl_history
rm -rf /Users/ユーザー名/.npm/

 

 

 

ティラノビルダーPro版(Steam)で過去のバージョンに戻す方法

Pro版(steam)では、ティラノビルダーのバージョンアップが行われた際に自動的に最新バージョンへアップデートされます。

そして、起動時にできるだけプロジェクトが最新バージョンに対応できるよう変換を試みます。

f:id:shikemokumk:20160206143948p:plain

 

ここで、OKを選択すると プロジェクト名_backup というプロジェクトのバックアップをとったうえで変換されます。

ただし、プロジェクトによってはどうしても最新バージョンで利用できないケースもあります。(ティラノスクリプトを直接編集しているなど)

その場合、ティラノビルダーでは過去のバージョンに戻せる機能が提供されています。

この機能を使えば、今までと同様の環境で作業を続けることが可能です。 

 

過去のバージョンへ戻す

steamのライブラリで

TyranoBuilder を右クリック→プロパティ から 「ベータ」タブを開いて下さい。ここから好きなバージョンへ戻すことができます。

f:id:shikemokumk:20160206144354p:plain

そして、うまく動いていたバージョンに戻し再起動したうえで、先ほどバックアップされていたプロジェクトを選択してみましょう。

問題なく編集を続けれるはずです。

 

Pro版(steam)版のトピック

Pro版ではsteamクラウド機能というのがデフォルトで有効になっています。

これはプロジェクトの内容を自動的にサーバーへバックアップして、どの環境においても編集内容を共有できる機能です。

ただし、手動で直接プロジェクトを編集すると上書きされてしまう場合もあるようです。

その時は、アップデートタブのsteamクラウド の箇所のチェックを外してください。

 

 

ティラノビルダー。メジャーアップデートV150

ティラノビルダーのメジャーアップデートを行いました。

今回も盛り沢山となってますのでチェックしてみてくださいね。

BGM・効果音の音量設定

再生時に音量を設定することが出来るようになりました。

0〜100%の間で指定してください。

f:id:shikemokumk:20160109233854p:plain

 

BGMと効果音のフェードイン・アウト効果を追加

徐々に再生したり、停止させることができるようになりました。

さらに、時間も設定できます。

たとえば、「5秒かけて音楽を徐々に停止させる」といったことが可能になりました。

f:id:shikemokumk:20160109234328p:plain

設定したい場合はチェックを入れます

既読管理機能

既に読んだ文章の色を変えたり、スキップできなくすることができるようになりました。これは、通過していないルートの把握などが便利で、日本のノベルゲームにはよく実装されていますね。

ティラノビルダーを使うとゲームにこの機能を簡単につけることができます。

設定はゲームコンフィグ画面で設定します。

 

f:id:shikemokumk:20160109234644p:plain

 

 注意点として、既読管理はラベルを通過することで読んだと記憶されます

オートモード機能。自動読み進み

オードボタンを開始するボタンを配置できるようになりました。

UIデザインツールから「オートボタン」を配置して下さい。

 

テキスト配置機能

ゲームの特定位置にテキストを配置出来るようになります。

コンポーネントからテキスト配置を追加して下さい。

 

 

テキスト配置アニメーション(Pro版限定)

 テキスト配置にアニメーション効果をつけることができます。

 

 

デバッグツール

開発を効率的に行なうためのデバッグツールが追加されました。

沢山の機能がありますので、順番に紹介していきます。

デバッグ実行

まずは、デバッグを行なうためのウィンドウを立ち上げてみましょう。

 使用方法は

■ゲームの最初からデバッグする場合

メニュー→プロジェクト→デバッグ実行

f:id:shikemokumk:20160109235617p:plain

■編集中のシナリオの先頭からデバッグする場合

右上の虫アイコンをポチ

f:id:shikemokumk:20160109235734p:plain

■自分の好きな場所からデバッグする場合

右クリックで「ここからデバッグ」を実行

f:id:shikemokumk:20160109235821p:plain

 

実行するとプレビュー時と同様にゲームが始まりますが、もう一つウィンドウが立ち上がります。

これが、デバッグウィンドウです。ここに便利な情報が表示されます。

f:id:shikemokumk:20160110000050p:plain

 

デバッグ機能】リアルタイムステップ実行

ゲームをプレイしながらステップごとに実行されたコンポーネントを確認することができます。

タグのコンソールを選んでいると、ゲームを進める度に実行したコンポーネントの命令と設定されたパラメータをリアルタイムに確認することができます。

 

f:id:shikemokumk:20160110002300p:plain

 

デバッグ機能】変数ウォッチ(Pro版限定)

f:id:shikemokumk:20160110002527p:plain

 

ゲームで設定したフラグの状態などを、ゲームをプレイしながら確認できます。さらに変数の値をデバッグツールで変更するとプレイ中のゲームにリアルタイムに上書きすることができます。

フラグが上手く動かない場合はここを確認しながら動作確認を行なうと効率よく開発ができるはずです。

 

ダブルクリックでコンポーネント追加

地味に便利です。

 

ジャンプ先を選択機能 

他のシナリオやラベルにジャンプするコンポーネントで右クリック→ジャンプ先へ移動を選択すると、即座にジャンプ先のコンポーネントを選択することができます。

 

f:id:shikemokumk:20160110003835p:plain

 

流れを追いながら、編集できるので便利です。

使えるコンポーネント

・ジャンプ

・画像ボタン

・分岐ボタン

クリッカブルマップ

です。

その他

・ムービーの音量設定追加

・フォントでイタリック体の設定を追加

・保存時のダイアログを簡略化

・PC版で出力した時に.savファイル形式で出力

・最新版のティラノスクリプトを適応

・ゲームの安定化と高速化 

・細かいバグを沢山修正

 

以上が主な修正内容となります。

お気づきの点ありましたら、お気軽にご連絡下さい。

宜しくお願いします!

 

 

ティラノスクリプトのプロジェクトを手動でWindowsやMac向けにパッケージングする方法

ゲームが完成した後、ティラノビルダーなどでWindowsMac向けに書き出しを行った時に途中で処理が停止して書き出せない場合があります。

プロジェクトのサイズが大きい場合(1ギガ程度)やメモリや処理速度不足が原因の場合があります。

この場合、2つの解決方法があります。

①手動でパッケージングを行う。

②パッケージングせずに配布する(おすすめ。高速起動

 

まずは、ティラノビルダーのエクスポート機能を使用せずに手動でパッケージングする方法を試してみます。

それでは、早速試していきましょう。

 

自分のプロジェクトを用意する

自分のゲームに必要なファイルを用意しましょう。

ティラノビルダーのプロジェクトの場合

「ゲームを書き出す」→「ブラウザゲーム形式」で出力するものを使います。

 

それ以外の場合は

myproject/[プロジェクト名]/

の下に必要なファイルが全て入っています。

tyrano フォルダや data フォルダが格納されている状態であればOKです。

 

f:id:shikemokumk:20160122032200p:plain

このファイルたちを含むフォルダをコピーしてgame という名前のフォルダ変えておきましょう。

 

ここから、出力する方式によって手順が変わります。

Mac用アプリとして出力する場合

対応するバージョンのティラノスクリプトforMacアプリケーションを入手してください。

ダウンロードページ

よくわからなければ、最新版で大丈夫です。

適当なフォルダに解凍して下さい。

 

まず、このフォルダの中にある

node_modules

というフォルダを自分のプロジェクトフォルダにコピーしてください。

(用意しておいたgameフォルダ。index.html というファイルやtyranoフォルダがあるところ)

 

それでは、このフォルダは一旦置いておいて

先ほど準備したgameフォルダを確認します。

 

中身をすべて選択した状態で右クリックして項目全てを圧縮を選択してください。

 

f:id:shikemokumk:20160122042731p:plain

 

するとアーカイブ.zip という名前のzipファイルが生成されているかと思います。

このファイル名を「app.nw」に変更して下さい。

さて、ここまで来たらあと少しです。

続いてダウンロードしておいたティラノスクリプトforMacアプリケーションを確認します。その中の「tyranoscript.app」というファイル以外すべて削除してください。

f:id:shikemokumk:20160122043025p:plain

 

残ったtyranoscript.appファイルを右クリック→「パッケージの内容を表示」を選択して中身を表示します。

そして前の手順で作成しておいた app.nwファイルを Contents - Resouces フォルダの中にコピーして下さい。

f:id:shikemokumk:20160122043846p:plain

 

これで準備は完了です。

もう一度 tyranoscript.app ファイルの階層まで戻ってダブルクリックで実行してみましょう。ゲームが起動すれば成功です。Mac用のパッケージが完成しました。

アイコンの変更などは解説ページがたくさんありますので、そちらをご参考ください。

 

Windows向けにパッケージングする

以下の手順はWindows10を想定しています。

それ以外のバージョンでは若干画面が異なるかもしれませんが、同じことが可能です。

 

対応するバージョンのティラノスクリプトforWindowsアプリケーションを入手してください。

ダウンロードページ

よくわからなければ、最新版で大丈夫です。

 

まず、このフォルダの中にある

node_modules

というフォルダを自分のプロジェクトフォルダにコピーしてください。

(最初に用意したgameフォルダ。index.html というファイルやtyranoフォルダがあるところ)

 

最初に用意しておいたgameフォルダを開いてください。

中のファイルをすべて選択した状態で 右クリック - 圧縮 - zip を実行してください。

すると、デスクトップなどに新しいzipファイルができています。

このzipファイル名を app.nw に変更してください。

 変更したら、このファイルを先ほどダウンロードして解凍しておいたTyranoScriptForWindowsのフォルダの中にコピーします。

続いて、コマンドプロンプトを起動してください。

検索するとすぐ出てくると思います。

 

f:id:shikemokumk:20160122140208p:plain

↑こんなアイコン。

起動すると真っ黒の文字だけの画面が出てきます。

ここで

cd  

と打ってください。うしろに半角スペースを開けておいてください。

そして、先ほどapp.nwを配置したフォルダ(TyranoScriptForWindowsのフォルダ)をドラッグ&ドロップで黒い画面に放り込んでください。

 

f:id:shikemokumk:20160122140351p:plain

すると、cd に続いてフォルダのパスが入ります。

その状態でエンターキーをおしてください。

cd C:\User\Shikemoku\tyranoscript_for_windows_v400rc

みたいなコマンドになってるはず。

 

うまく行ったら最後の仕上げです。

以下のコマンドを続けて打って、最後にエンターキーを押してください。

コピペするのが安全かと思います。

copy /b tyranoscript.exe+app.nw game.exe

成功すると、同一フォルダの中にgame.exeファイルができています。

これが、ゲームの実行ファイルとなっています。

それでは、このフォルダから不要なファイルを削除しましょう。

最終的にtyranoscript.exeなどのファイルは不要です。

 

game.exeを実行してゲームが起動することを確認してください。

このフォルダにその他、readmeなどを追加してzipするなどして配布すると良いでしょう。

 

game.exeファイルの名前は好きに変更してください。

アイコンの変更はリソースハッカーを使うと簡単にできます。

 

Resource Hackerで実行ファイルのアイコンリソースを変更する - Symfoware

 

画面サイズの変更はpackage.jsonをエディタで開いて

"width": 640, 

"height": 480,

 

この部分を編集してからパッケージングしてください。

 

【注意】

Mac Windowsともにパッケージ化する際はcredits.htmlファイルを同梱することを忘れないで下さい。含めない場合はライセンス違反となってしまいます。

 

パッケージングせずに配布する方法

大容量のゲームをパッケージングすると、起動などに時間がかかる場合がありますので、パッケージングせずに配布することをおすすめしています。

ただ、この場合ゲームのデータが比較的見やすい状態に置かれますので、その点ご注意ください。 

 

最初にブラウザ形式で出力しておいたものを

・ティラノスクリプトforMac

・ティラノスクリプトforWindows

のフォルダにそのまま配置する。その後、tyranoscript.exe(win) か start.cmmand(Mac)をクリックして、起動すれば成功です。

この方式だと起動が非常に高速なので、大容量のゲームの場合オススメです。

 

あとは、zipなどに固めて配布しましょう。

 

 

キャラクターや画像をメッセージボックスの前に表示する方法

メッセージボックスよりも前にキャラクターや画像を配置したい場合

以下のように記述することで可能です。

 

例えば、2人のキャラクターを表示させるとして

@chara_show name="yuko" layer="message0" zindex=1005
@chara_show name="haruko" layer="message0" zindex=1005

@chara_hide name="haruko" layer="message0"
@chara_hide name="yuko" layer="message0"

 です。

layerにメッセージレイヤを指定してあげるということですね。

あわせて、zindexも指定します。

z-indexの値が

メッセージ枠が100 文字の部分が1001なので

何よりも前に出したい場合は1005 

枠より前、文字より後ろの場合は 900 位を指定すると良いかと思います。

以下、実行結果

f:id:shikemokumk:20160117193131p:plain

 

あと、退出時にもlayerを指定するのを忘れないようにして下さい。

よろしく。

 

2015年振り返り

なんだかんだで色々あったのでシケモク名義で公開できるものだけ記録しておく。

 

2015年

 独立して2年目。1年目は受諾開発と自社開発が50:50くらいだったけど、今年は80%くらいは自社開発に充てることができた。

作りたいものをつくって生活していくというのは、独立した時の目標だったので今のところ、なんとか生きながらえてる模様。

まぁ、不安定なことには変わりないですけどね 、、 (`・ω・´)

 

1ー3月

年初は元気がある

ティラノスクリプトLive2D対応リリース

f:id:shikemokumk:20151207014944p:plain

 

ティラノスクリプト×Live2Dを使った作品

f:id:shikemokumk:20151207015454p:plain

LKproject 様 

 

Live2Dはノベルゲームにとって新しい風を吹き込みそうなので今後も積極的にサポートしていきたい技術です。

 

ティラノビルダー2のリリース

デザインと機能を全面的に作りなおした。

Before

f:id:shikemokumk:20151207015930p:plain

After

f:id:shikemokumk:20151207020003p:plain

 

デザイナ&コーダーさんに素晴らしいお仕事をしていただけた。

大規模な改修になるのでやろうかどうか迷ったけどコレはやってよかった。

 

ジョーカスクリプト Live2D対応

 

 

結構大変だった記憶が、、、、

Live2Dのプログラマーさんともコミュニケーションをとって、実装などを細かく見ることができたので勉強になった。

 

海外版TyranoBuilderのリリース

3月下旬に海外版のティラノビルダーをリリースすることができた。

 

f:id:shikemokumk:20151207021120p:plain

これ、リリース直後のキャプチャで、その時はあんまり気にしてなかったけど個人開発のソフトウェアがSTEAMのトップページに掲載されるって、今考えると結構すごいことだったんじゃないだろうか。。。

 

海外販売の手続きや海外ユーザへの最適化など、非常に学べたことが多かった。おかげさまで、ポジティブな評価を頂けてるので、海外でもノベルゲームが広まるように活動していきたい。

4ー6月

ガス欠

ティラノビルダーV1.3 メジャーアップデート 

クリックでゲーム開始

クラウドセーブ

・Live2Dをティラノビルダーで使えるようになる。

・キャラクター配置ツール など

 

 

専門学校の先生

をやった。4ヶ月くらい。週1〜2

PHPHTML5といったWeb系の技術を中心に教えてくれということで、中途半端なものでは学生さんに申し訳ないので、かなりの時間を使って準備して、できるかぎり仕事で役に立つことに絞って授業を組み立てた。

学生さんはみんな優秀で良い人ばかりでした。

ただ、先生のお仕事はかなり体力を使う(1日しゃべりっぱなし)準備にも相当時間をとられるので、結構ヘトヘトになった。

今は人を育てるよりも、自身のアウトプットを増やしていく時間を確保すべきと思ったので一旦離れさせてもらった。

 

7ー9月

仕込みの期間

あと、GTMFとかイベントやらに出展させていただく機会も多かった気がする。

PanicROOM 突然の急上昇

忘れかけた頃にやってくる

 

謎の上昇。 最終的に30位くらいまでいった。

臨時の広告収入もあって助かったぁー。

 

10ー12月

収穫の秋

TyranoGameJAM 2015

海外でゲーム制作ジャムを開催した。

海外ではアドベンチャーゲームは、まだまだ発展途上だし、作品あつまるのかなぁと不安もあったけど、最終的に多くの作品を投稿していただくことができた。

 

日本では、恋愛ADV主体だけど海外では全く違う方向で進化していきそうなので、今後の海外製ノベルの拡大を確信しました。

 

3D脱出ゲーム tetora -きつねこどもと遺跡探検- リリース

Unityを使った3Dゲームをリリースした。

3D脱出ゲーム tetora -きつねこどもと遺跡探検-

f:id:shikemokumk:20151207115027j:plainf:id:shikemokumk:20151207115036p:plain

f:id:shikemokumk:20151207115145p:plainf:id:shikemokumk:20151207115242p:plain

 

4月くらいに作り始めて基本的な部分は1ヶ月くらいで作り終えてたんだけど、いろいろあってなかなかリリースできずにいた。

最終的には私の稚拙な説明にも関わらず、すごく可愛いイラストを書いていただけたので想定していたよりもクオリティが高い作品になった。

技術的には3Dゲームの作り方が一通り習得できたのが大きい。

 

ジョーカースクリプト Unity5.2.2対応とOSS

Unityさんバージョンアップの度に動かなくなるの、勘弁して下さい〜。

 

ティラノビルダー V140 リリース

 

2回目のバージョンアップ。

夏のうちにこつこつ仕込んでいたもの。 

 

ティラノスクリプト V400 リリース

ずっとやりたかったけど、後回しにしてたものとか結構つめこんだ。

音量調整とかリリース当初から言われてたけど、作ってみるとそんなにむずかしくなかった。。。

 

ティラノライダー リリース

http://tyrano.jp/adv/next/rider

 ティラノスクリプトデバッグツールをリリースした。

変数ウォッチやらリアルタイムにタグを監視できるなど、開発が効率化できる。

f:id:shikemokumk:20151207120801p:plain

結構、技術的にも面白いことをしてるのでブログとかで書き残しておきたい。

 

VR時代のノベルゲーム開発

VRノベルについては1年以上前から着想はあって、DK2も購入していたんだけど中々モチベーションが上がらず、ほこりを被ったままだった。

年末、アドベントカレンダーの力を借りることで、最後の力を振り絞ってアウトプットを出すことができた。

shikemokumk.hateblo.jp

早速、嬉しいご連絡もあったので、来年は本格的に作りこんで生きたい。

 

技術のお話

今年使ったプログラミング言語の比率

JS:50% 

C#:45%

PHP:5% 

 

会社員の時は、90%くらいサーバーサイドのお仕事だったのに、、、

逆に来年はサーバーサイドの割合が増えそう。 

あと、VR・3Dグラフィックス周りの学習に時間をかけたい。

 

まとめ

堕落した生活を送ってると思ってたんだけど、書き出してみると結構色々あったなと。

落ち込んでいる時でも、ユーザさんから「ゲーム完成しました」みたいな報告を頂く度に元気になってたと思う。本当に背中を押してもらえました。

ティラノスクリプト 製作テクニックwiki

wikiといった技術的なバックアップなども、大変心強く思っています。

本当に感謝です。

 

あとは、大手企業のプロモーションに使っていただいたり、商業的に大きな成功を収めた作品なども生まれ始めた年だったので、すごいのは作者さんなんだけどツールも認めていただけたみたいで嬉しかった。。

 

 

 

来年は

「技術によって創作活動を支援し、クリエイターが輝く未来を作る」

ここから軸足をぶらさずに、楽しく開発していきたい。

VRも本格的に登場するし、ゲーム周りも地殻変動がおこっていておもしろくなってきた。

本腰をいれて目標を前進させる1年にしたい。

あとは個人でやれる規模ではなくなってきたので、色々考えないとというところです。

 

本年も大変お世話になりました!

来年も何卒宜しくお願いします

 

 

VR時代のノベルゲーム開発

この記事は Oculus Rift Advent Calendar 2015 - Qiita の19日目の記事です。

qiita.com

 

ノベルゲームって?

ストーリーを読ませることに特化したゲームジャンルの1つです。

日本では人気のあるジャンルで現在でも沢山のゲームが発表され続けています。

 

ノベルゲーム例 (クリックで進みます)

 

VR時代のノベルゲーム

 VR技術を知った時、一番相性が良いのはノベルゲームじゃないかなと感じてました。

「ディスプレイが邪魔だぁ!」という悲痛な驚嘆に対して、ディスプレイの向こう側へ誘う事ができる。それがVRノベルゲームです。

 

例えば、喫茶店のシーンなどでは、本当に目の前にキャラクターが座ってシナリオが進むような状態を作ることができるということですね!

 

とまぁ、かなり可能性を感じるのですが、現実に実装する際の技術的な問題や実用化してゲームを作っていく際にどのようなスキームで進めていけば良いのかなど、見えてこない部分が多かったので、動くものを作って検証してみました。

 

ストーリーの進行

従来のノベルゲームだと以下のような感じ

f:id:shikemokumk:20151215183925p:plain

画面下に固定のメッセージ枠があって、そこにシナリオが表示されていく。

 

で、VRでもテキストは綺麗に視認できるので普通にテキストを配置すれば良い感じになるんじゃないかと思って作ったのが以下。

 

 

カメラの前にTextMeshを貼り付けて、クリックでテキストを読ませています。

結論からいうと、この方法はダメでした。

テキストだけを読み続けると問題ないのです。

ただVR空間においてはシナリオをよむテキスト枠とゲーム舞台(3Dモデル)の間を交互に見る必要があり、これが手前(文字)→奥(舞台)→手前(文字)→(奥)という感じで、目の奥行きをその度に調整する必要があるのでゲームに没入しにくいという印象でした。

 というわけで、ストーリーはナレーションの声やキャラクターのボイスで進行していくことにします。

 

VRゲームのシナリオファイルの作り方

テキストを使用しないVRノベルといっても、基本はタイムラインがあって、キャラクターの表情変更や声、演出のタイミングなどを指定していく必要があります。

これは旧来のノベルゲームの製作方法と変わらないと気付きました。

演出のタイミングや表情の変更などを全てプログラミングで書いていくというのは現実的ではないでしょう。

非エンジニアがボイスのタイミングや表情、モーションなどを確認しながら簡単につくっていく仕組みが必要じゃないかと思います。

 

ということで、非エンジニアでもVRノベルゲームを作れる。なおかつ

既存のノベルゲーム作者さんが、VR対応のノベルゲームを作る

という方針で設計と実装しました。

 

吉里吉里/KAG タグを使ってVRゲームを作る

現在ノベルゲームを作っている人は吉里吉里/KAGに代表されるような記述方式でゲームを作成しています。

これは、シナリオ部分とゲームに動きを与えるタグを組み合わせることで、動きのあるゲームが作れるというものです。

例えば

[キャラクター登場]

こんにちは

[BGM変更 ]

[背景変更]

 のように、タグに到達すると、音楽を変えたり場面を変えるような言語で、エンジニア以外の人でも簡単につかえます。

 

 

VRノベルゲーム用のタグ設計

タグ解析や進行などの仕組みは、自分が公開しているジョーカースクリプトというUnityのノベルゲーム開発ツールがあるので、そこからゴソッと移植してきました。

マクロや変数管理、シナリオ制御などは既存のノウハウをそのまま流用できる。

従来のノベルゲーム製作手法を拡張してVR用のタグを追加していきます。

 

キャラクター登場

キャラクターをゲームに登場させるためには以下のようなタグを打ちます。

3D空間なので、x y z の3座標をしていしているところが今までのノベルゲームと異なります。名前にunitychan という一意の値を付与しています

;キャラクターを定義

[chara_new name=unitychan storage=unitychan x=0 y=0 z=-2.5]

;キャラクターを表示
[chara_show name=unitychan]
[wait time=3 ]
[p]

 

さらに、キャラクターをクリック毎に立ち位置を変えるタグは

[chara_pos name="unitychan" x=2.5 y=0 z=-2 time=5 ]
[p]
 

 のように記述するようにしました。

これでゲーム開始してみます。
 
 

 

 

簡単なタグ表記だけでVR空間にキャラクターが登場して歩きました。

 

ボイス再生

ボイスの再生も、従来のノベルゲームと異なる概念が必要になります。それは誰が喋ったかという指定が必要 ということです。

VR空間ではキャラクターの立ち位置によって、音の聞こえてくる方向が変わってきます。自分自身の首の方向によっても聞こえ方が異なります。

以下のように、タグを書くことで自動的にどのオブジェクトから音が出ているのかを再生できるようにしました。

[chara_voice name="unitychan" storage="voice1" ]

 

こんな感じで、簡単にVR空間でも適切な音を再生できます。

 

視線待ち命令タグ

VRノベルゲームで起こり得ることが、プレイヤーの視線がドコに向いているかわからないという事があります。

重要なシーンが展開されているのに、プレイヤーが逆方向を向いていて見逃してしまう。なんてことが起こりかねません。

そこで、プレイヤーの視線がある方向に向くまでストーリーを進めないタグを用意しました。以下の様に記述することで、視線がキャラクターに向いた時だけ、シナリオが進みます。

*waiteye
[wait_eye name="unitychan"]
[chara_voice name="unitychan" storage="voice1" ]
[chara_anim name="unitychan" state="anim1"]
 
[wait time=3]
[chara_anim name="unitychan" state="anim1" condition="false"]
 
@jump target="waiteye"

 

この wait_eye タグに到達すると、unitychan に視線が向くまでストーリーを進めません。

これにより、プレイヤーの視線誘導が簡単になり重要な部分の見逃しなどを防ぐことができます。

このシナリオタグを実行すると以下の様な動きになります。

 

 

 

wait_eye タグの部分で視線を待ち、Unityちゃんに視線が向いた時にシナリオが進みます。その先のchara_animタグ(好きなタイミングでモーションを指定できる)が発火してモーションが再生されます。

つまり、視線が向いた時だけ、アニメーションを行なうという動きになります。

jumpタグでラベルloopに戻るので、なんども繰り返されます。

 

この仕組をつかうと、ノベルゲームなどでは重要な物語分岐でも新しい表現ができそうです。例えば、敵に拳銃で恋人が撃たれそうになっている時

「恋人をかばう」

「敵を撃つ」

のような選択肢が表示されるとします。

従来のノベルゲームだとマウスでクリックで選択しますが、

VRノベルだと、その瞬間

「恋人に視線を向けている」

「敵に視線を向けている」

のような状況を判定して、物語が分岐していくようなゲームも作れそうです。

 

プレイヤーの周りを歩かせる

最後にまとめとして、プレイヤーの周りを歩かせる動きを書きます。

以下の短いタグで実現できます。

*loop
[chara_pos name="unitychan" x=1.5 y=0 z=-1.5 time=5 ]
[wait time=6]
[wait_eye name="unitychan"]
 
[chara_pos name="unitychan" x=1.5 y=0 z=1.5 time=5 ]
[wait time=6]
[wait_eye name="unitychan"]
 
[chara_pos name="unitychan" x=-1.5 y=0 z=1.5 time=5 ]
[wait time=6]
[wait_eye name="unitychan"]
 
[chara_pos name="unitychan" x=-1.5 y=0 z=-1.5 time=5 ]
[wait time=6]
[wait_eye name="unitychan"]
 
@jump target="loop"

 

再生すると以下のような動きをします。

目線が向くと自分の周りを歩いてくれます。

 

VR空間上の複雑なシナリオも、簡単なタグを組み合わせて定義できるので修正や調整なども容易にできるかと思います。

 

まとめ

今回は、従来のノベルゲームの開発手法をVRのノベルゲームで使用できないか。というところから実装してみました。

結果として、今回紹介したタグだけでも組み合わせれば、かなり多彩なゲームが作れそうだという感触を得ることができました。

もちろん、今の状態ではVRゲーム向けに必要なタグは全然足りませんが、

吉里吉里やティラノスクリプトを使っている、2Dノベルゲーム開発者の方でも、違和感なく作れそうですよね?)

 

簡単なスクリプトでVR空間を定義できるというのはメリット多いと感じました。

 

というわけで

自分自身もVRアプリを作りたいと思っていたのですが、このタグによるVRアプリは実用に耐えれると感じました。

なので、着々と拡張を進めていく予定です。

今回はUnityで作りましたが、UE4でも試してみてうまく行けそうな方で実装してみたいと思います。

 

目標はVRコンテンツ製作の敷居をぐっと下げるツール です。

ただ、一番の壁はやはり、3Dモデリングだと思っているのですが、以下の様なプロダクトも準備されているようなので、VRノベルの敷居が下がる日は確実に到来しそうです。

 

gigazine.net

 

製品版のRift 発売日あたりに公開したいな〜。

来年の目標の1つとしてみます。

 

せっかくなのでちょっと募集も。。。

このプロダクトを作るにあったって3Dモデリング、アニメーションなどをお手伝いしてくれる方を募集します。

完全に個人的なプロジェクトなので、報酬的には厳しい(学生さんのアルバイトくらい)しかお支払い出来ないのですが、3Dを勉強中の方など、興味がある方がいらっしゃいましたら、お気軽にお声がけください。

 

 

明日は udasan_koubou さんの 女の子にケーキを作ってもらう方法 です