【2016年度版】Cordovaでアプリ化する (ios編)
☆専用のアプリ化用ツール「ティラノプレイヤー」が公開されています。
この記事の方法は古いですので、ご注意ください。
最新のアプリ化手順は以下となります。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ティラノスクリプトで作成したゲームをアプリ化する方法を解説します。
専門的な知識は不要です。だれでもiphoneやipad 向けにアプリを作成することができます。
Androidアプリ化の手順は以下を参照してください
まず、iphoneアプリ化するのに、必要なものとして
・Mac PC
が必要です。
はい。Windowsではiphoneアプリは作れません。MacBook等を手に入れよう。もしくは借りよう！
これさえあれば、後は以下の手順で作っていくだけです。
それでは、アプリ化を進めていきましょう。
Xcodeをインストール
まずは、Macに最新版のXcodeをインストールする必要があります。
Xcodeとは、Macでソフトウェア開発を行うためのソフトウェアです。
それでは、AppStoreを開いて、「xcode」と検索してください 。
上記画面のようなツールが見つかると思います。
無料ですので、インストールを進めて下さい。
cordovaのインストール
次にcordovaというツールをインストールします。
以前はphonegapと呼ばれていました。
以下のURLが公式サイトとなります。
cordovaを使用するには nodejs が必要です。
以下のサイトから入手してインストールしてください。
ダウンロードしてインストールを完了させて下さい。
続いて、アプリ化を実行していきます。
最初にデスクトップなどの適当な場所にフォルダをつくってください。
ここでは、iphoneという名前として説明していきます。
作成したフォルダをツールバーにある黒いアイコン（画像参考）にドラッグ＆ドロップしてください。
すると、真っ暗な文字だけの画面が現れると思います。
画面が出てきたら、以下のコマンドを順番に実行してください。
コピペで貼り付けて、エンターキーを押します。
①cordovaのインストール
sudo npm install -g cordova
②アプリの作成（今回はmyappという名前で作ります）
以下を１行コピペするたびにエンターを押して下さい。
cordova create myapp com.myapp "myapp"
cd myapp
cordova platform add ios
次にティラノスクリプトのプロジェクトフォルダを用意してください。
以下の画像のように、先ほど作成してiphone/myapp以下のwwwというフォルダに
ティラノスクリプトのプロジェクト以下のファイルをすべて上書きしてください
さて、ここまでくるとあと少しです。
もう一度コンソール画面（黒いウィンドウ）に戻ってください。
そこで
cordova build ios
と打ちます。
すると、myapp/platforms/ios/myqpp.xcodeproj
というファイルが作成されていると思いますので、実行してください。
Xcodeが起動します。
あとは、画面左上部分から、再生する機種 (iphone Retina(3.5inch)) 等 を確認して再生ボタンを押してください。
さて、いかがでしょう。
以下のようにゲームが開始されましたね。
アプリ化の準備は以上です。
ここから、実機での確認やAppStoreでの販売などについては
他の解説サイトがたくさんありますので、そちらでご確認願います。
（次回、このサイトでも追記します）
その他、小ワザとして
ゲームを縦、横に固定したい場合は
さらに、昨今のスマートフォンでは画面サイズが一定ではありません。
そのため、作成したゲームのサイズによっては画面に黒い空きスペースができるかと思います。
縦横比を無視して画面いっぱいに拡大したい場合はティラノスクリプトのプロジェクトフォルダ 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/
ティラノスクリプトのプロジェクトを手動でWindowsやMac向けにパッケージングする方法
ゲームが完成した後、ティラノビルダーなどでWindowsやMac向けに書き出しを行った時に途中で処理が停止して書き出せない場合があります。
プロジェクトのサイズが大きい場合（１ギガ程度）やメモリや処理速度不足が原因の場合があります。
この場合、２つの解決方法があります。
①手動でパッケージングを行う。
②パッケージングせずに配布する（おすすめ。高速起動）
まずは、ティラノビルダーのエクスポート機能を使用せずに手動でパッケージングする方法を試してみます。
それでは、早速試していきましょう。
自分のプロジェクトを用意する
自分のゲームに必要なファイルを用意しましょう。
ティラノビルダーのプロジェクトの場合
「ゲームを書き出す」→「ブラウザゲーム形式」で出力するものを使います。
それ以外の場合は
myproject/[プロジェクト名]/
の下に必要なファイルが全て入っています。
tyrano フォルダや data フォルダが格納されている状態であればOKです。
このファイルたちを含むフォルダをコピーしてgame という名前のフォルダ変えておきましょう。
ここから、出力する方式によって手順が変わります。
Mac用アプリとして出力する場合
対応するバージョンのティラノスクリプトforMacアプリケーションを入手してください。
よくわからなければ、最新版で大丈夫です。
適当なフォルダに解凍して下さい。
まず、このフォルダの中にある
node_modules
というフォルダを自分のプロジェクトフォルダにコピーしてください。
（用意しておいたgameフォルダ。index.html というファイルやtyranoフォルダがあるところ）
それでは、このフォルダは一旦置いておいて
先ほど準備したgameフォルダを確認します。
中身をすべて選択した状態で右クリックして項目全てを圧縮を選択してください。
するとアーカイブ.zip という名前のzipファイルが生成されているかと思います。
このファイル名を「app.nw」に変更して下さい。
さて、ここまで来たらあと少しです。
続いてダウンロードしておいたティラノスクリプトforMacアプリケーションを確認します。その中の「tyranoscript.app」というファイル以外すべて削除してください。
残ったtyranoscript.appファイルを右クリック→「パッケージの内容を表示」を選択して中身を表示します。
そして前の手順で作成しておいた app.nwファイルを Contents - Resouces フォルダの中にコピーして下さい。
これで準備は完了です。
もう一度 tyranoscript.app ファイルの階層まで戻ってダブルクリックで実行してみましょう。ゲームが起動すれば成功です。Mac用のパッケージが完成しました。
アイコンの変更などは解説ページがたくさんありますので、そちらをご参考ください。
Windows向けにパッケージングする
以下の手順はWindows１０を想定しています。
それ以外のバージョンでは若干画面が異なるかもしれませんが、同じことが可能です。
対応するバージョンのティラノスクリプトforWindowsアプリケーションを入手してください。
よくわからなければ、最新版で大丈夫です。
まず、このフォルダの中にある
node_modules
というフォルダを自分のプロジェクトフォルダにコピーしてください。
（最初に用意したgameフォルダ。index.html というファイルやtyranoフォルダがあるところ）
最初に用意しておいたgameフォルダを開いてください。
中のファイルをすべて選択した状態で 右クリック - 圧縮 - zip を実行してください。
すると、デスクトップなどに新しいzipファイルができています。
このzipファイル名を app.nw に変更してください。
変更したら、このファイルを先ほどダウンロードして解凍しておいたTyranoScriptForWindowsのフォルダの中にコピーします。
続いて、コマンドプロンプトを起動してください。
検索するとすぐ出てくると思います。
↑こんなアイコン。
起動すると真っ黒の文字だけの画面が出てきます。
ここで
cd
と打ってください。うしろに半角スペースを開けておいてください。
そして、先ほどapp.nwを配置したフォルダ（TyranoScriptForWindowsのフォルダ）をドラッグ＆ドロップで黒い画面に放り込んでください。
すると、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などに固めて配布しましょう。
キャラクターや画像をメッセージボックスの前に表示する方法
メッセージボックスよりも前にキャラクターや画像を配置したい場合
以下のように記述することで可能です。
例えば、２人のキャラクターを表示させるとして
@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 位を指定すると良いかと思います。
以下、実行結果
あと、退出時にもlayerを指定するのを忘れないようにして下さい。
よろしく。
ティラノスクリプトV4.00 をリリースしました。
久しぶりのメジャーアップデートとなるVersion 4.00 RC をリリースしました。
最終的なテストを経て、正式版とさせていただく予定です。
この記事では、新機能についてザックリとご紹介させていただきます。
音量調整機能
本バージョンから、音量周りの機能が強化されました。
[playbgm] [playse] [fadeinbgm] に
volume というパラメータが追加されました。
ここに 0〜100 の間の数字を指定することで再生時の音量を調整することができます。
(デフォルトは100。0を指定するとミュートになります)
■例
[playbgm storage="music.ogg" volume=50 ]
さらに、ゲーム全体のデフォルト音量を指定する場合は [bgmopt] [seopt] タグが追加されました。こちらでボリュームを指定するとゲーム全体の音量に反映されます。
コンフィグ画面などではこのタグを使ってゲーム全体の効果音やボリューム等を調整できます。
ちょっと、改造すればキャラクター別の音量を調整したり、ONとOFFの切り替えも簡単に実装できるかと思います。
さらに、本バージョンより [fadeinbgm] [fadeoutbgm] [fadeinse] [fadeoutse]タグを正式にサポートします。
ただし、スマホブラウザから閲覧した場合やスマホアプリの場合、有効にならないケースがあるのでご注意下さい。
CGモード 回想モード
これまでも、自作することで用意できましたが、本バージョンより標準機能としてバンドルしてメンテナンスしていくことにしました。
さらにゲームにあわせて改造しやすいように、ティラノスクリプトを変更するだけでカスタマイズできるようになっています。
簡単な使い方
シナリオフォルダの中に cg.ks と replay.ks があります。
これが、CGモードと回想モードの画面になっています。
タイトル画面からボタン で cg.ks と replay.ks に飛ばすだけで良いですね。
詳しい使い方は、ティラノスクリプト公式サイトの解説を確認してください。
コンフィグ画面
ゲーム全体の設定を調整する機能も標準で用意します。
今後も機能追加を行いますが、現在標準で用意されている機能としては
・BGM音量調整
・SE音量調整
・文字速度調整
・オート速度調整
・未読スキップのONとOFF
となります。
こちらは、config.ks ファイルとして用意されていますので
簡単に設定項目を追加したりカスタマイズできます。
既読管理
本バージョンより、既読管理が標準機能として使えるようになりました。
前提として system/Config.tjs の
autoRecordPageShowing を trueにしておく必要があります。
未読の部分はスキップできないようにする機能です。
また、スキップ中に未読の所にくると、スキップを停止させることができます。
[config_record_label skip=false]
これで、未読の所はスキップできなくなります。
コンフィグ画面ではON、OFFを切り替えるボタンが標準で搭載されています。
■未読部分の文字
既読、未読をわかりやすくするために
既読文章の色を変更することができます。
[config_record_label color="0x4444FF" ]
このようにしておくと
未読
既読
いかがでしょう。
タグをちょっと追加しておくだけで、未読管理が簡単にゲームに実装できます
記憶領域は吉里吉里と同様にラベルを１つの固まりとして記憶します。
現状、１行毎に記憶しているわけではありませんのでご注意ください。
*既読管理用のラベルは他の制御ラベルとは別に用意するのが良い。ジャンプ先のラベルなどは既読として扱われない→修正検討中
オート機能
本バージョンよりオート機能をサポートします。
オート機能とはクリックして進めなくても一定間隔で自動的にゲームを読み進めてくれる機能です。
使い方
タグから制御することもできます
[autostart] オートモード開始
[autostop] オートモード停止
さらに
[autoconfig] を使うとオートモードの細かい調整ができます。
[autoconfig speed=200 ]
speed で次に進むまでの時間をミリ秒で指定することができます。
読むのが早い人はこの数字を小さくしておくと良いですね。
[autoconfig clickstop=true ]
画面クリックでオートが停止するかどうかを指定します。
false を指定すると画面クリックでもオートが止まりません。
あと button タグのrole に auto を指定できるようになりました。
メッセージボックスなどに常にオート切り替えを表示したい場合に利用できます。
セーブ方法の多様化
今までは、ローカルストレージへの保存のみでしたが、３種類の方法を選択できるようになりました。
Config.tjs の configSave を指定します。
webstorage：従来のとおり、webstorage領域に保存します。
webstorage_compress : 圧縮、暗号化したうえでwebstorage領域に保存します。
file ：PC限定。ゲームフォルダに外部ファイルとしてセーブファイルを出力します。
状況にあわせて使ってくださいね。
ティラノライダー
本バージョンよりデバッグツールの「ティラノライダー」が利用できるようになりました。
ゲーム開発をより効率的に行なうことができるツールです。
主な機能を紹介させていただきます。
タグ進行のリアルタイム監視
ゲーム進行をリアルタイムに確認しながら、実行されていくタグを眺める事ができます。 タグを見ながらデバッグができるので、問題点の修正などが効率的に行えるようになるでしょう。
ジャンプ機能
デバッグ中に自由にシナリオやラベルへジャンプすることができます。
リアルタイムタグ実行機能
プレイ中のゲーム画面に、自分の好きなタグを割り込ませて実行することが出来る機能です。例えば、ある場面で、このタグを実行するとどうなるか？といったことがシナリオを書き換えなくても簡単に確認できます。
変数ウォッチ機能
ゲームをプレイしながら変数の状態を確認することができます。
さらに、ティラノライダーから編集してリアルタイムにゲームに反映することもできます。
素材プレビュー機能
プロジェクトに配置した素材を用途ごとにグラフィカルに確認できます。
実行途中のゲーム画面に好きな素材を割り込ませて表示することができます。
実行中のゲーム画面に素材を配置して、ドラッグ＆ドロップで位置を調整することができます。素材の配置位置やタイミングなどを効率的に決定することができます。
キャラクターの表情確認機能
ゲームで登録されているキャラクターの表情名や画像をグラフィカルに確認できます。
パッケージング機能
ティラノスクリプトのプロジェクトを
・ブラウザ形式
・Macアプリ
・Windowsアプリ
・スマホアプリ
へワンボタンで出力することができます。
その他
・全体的な実行速度や安定度の向上。
・[clearstack ]タグの追加。スタック領域を開放します。タイトル画面などに入れておくとセーブデータを節約できます。
以上がバージョン4.0 の主な新機能になります。
現在 2015/12/4 現在はRC版となります。
しばらくは、機能変更や修正などがあるかもしれませんが、ぜひ、使っていただいてフィードバック頂けると嬉しく思います。
それでは、よろしくお願い致します。
【2015年冬版】phonegapでアプリ化する（Android版）
☆専用のアプリ化用ツール「ティラノプレイヤー」が公開されています。
この記事の方法は古いですので、ご注意ください。
最新のアプリ化手順は以下となります。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ティラノスクリプトで作成したゲームをアンドロイドアプリ化する手順を説明します。
解説で確認した環境は windows10 です。
Macでも各自で対応するものをインストールして実施いただければ支障はないかと思います。
なにかありましたら、ご連絡いただけると幸いです。
JDKのインストール
最初にJDKをインストールします。
以下のURLにアクセスしてください。
Java SE Development Kit 8 - Downloads
Accept License Agreement にチェックを入れて
ご利用の環境に応じて、ファイル名のリンクを選択してください。
ダウンロードが完了したら、インストールを実施してください。
続いて、JDKにパスを通します。
コントロールパネル → システム → システムの詳細設定
から環境変数を開きます
システムの環境変数に新規追加します。
変数名：JAVA_HOME
変数値： C:\Program Files\Java\jdk1.8.0_65
この変数値は、ダウンロードしたバージョンや環境によって異なる場合がありますのでそれぞれの値に置き換えてください。上のまま書いてもうまく動きません。
AndroidStudioのインストール
つづいて、以下のURLにアクセスします。
Download Android Studio and SDK Tools | Android Developers
DOWNLOAD ANDROID STUDIO をクリックして
ダウンロードを開始します。
ダウンロードが終わったらインストールを開始してください。
インストール中の設定は特に変更せずデフォルトのまま進めてください。
設定が完了したら、AndroidStudioを起動してください。
注：ここでエラーがでて起動できない場合はJDKの環境変数の設定が間違っている可能性がありますので、再度確認してください。
起動したら、エミュレーターでの動作を確認してみます。
まず、[File]-[New]-[NewProject] から適当なAndroidプロジェクトを作成してください。
その後、
[Tools]-[Android]-[SDK Manager] を選択します。
SDK Tools のタブを選択して
「Intel x86 Emulator Accelerator(HAXM installer) 」にチェックを入れて Applyを押してください。
これだけでは、インストールは終わりません。
AndroidSDKがインストールされているフォルダを開いて intelxaxm-android.exe を実行してインストールしてください。
それぞれの環境により場所は変わりますが
<各自のパス>\AndroidSdk\extras\intel\Hardware_Accelerated_Execution_Manager
フォルダの中にダウンロードされているかと思います。
この後、AndroidStudioを一回閉じてください。
NodeJSのインストール
つづいて、NodeJSをインストールします。
にアクセスして v5.0.0 Stable をダウンロードしてインストールしてください。
PhoneGapのインストール
コマンドプロンプトを起動してください。
黒い画面が表示されるかと思いますのでそこで
npm install -g phonegap
と打ち込んで最後にエンターを押してください。
成功したら、そのままコマンド画面で
phonegap create mygame
と打ちます。次に
cd mygame
phonegap plugin add cordova-plugin-media
phonegap build android
と続けて実行します。
これで、アンドロイドプロジェクトが作成され、アプリ化する準備が整いました。
ティラノスクリプトをアプリ化する
さて、いよいよティラノスクリプトのゲームをアンドロイドアプリ化します。
先ほどのコマンド画面で
explorer .
と打ってください。するとWindowsのエクスプローラーが開くかと思います。
以下のような mygame フォルダの中身が表示されるのを確認してください。
つづいて、アプリ化したいティラノスクリプトのプロジェクトフォルダを用意します。
ティラノスクリプトのプロジェクトは以下のような構成になっているかと思います。
この index.htmlをエディタで開いて、</ body> の直前に以下のコードを追加してください。
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
保存します。
その後、プロジェクトフォルダの中身のファイルをすべて選択してmygameのフォルダの中の
\mygame\platforms\android\assets\www
フォルダの中へすべて上書き保存してください。
これで、アプリ化の準備は完了です。
エミュレーターで動作確認
それでは、アプリ化をテストしてみましょう。
再度、AndroidStudioを起動してください。
[File]-[New]-[Import Project]を選択して
先ほど作成しておいた、「mygame」フォルダを選択します。
その後の確認事項については、デフォルトのまま進めてください。
プロジェクトが開けたら、
[Run]-[EditConfigurations]を選択します。
その後開いた画面において
①左上の＋ボタンを押してください。(AndroidApplicationを選択)
②NameはTest
③Moduleはandroidを選択
④Emulator は 適当に表示されるものを選択。
（なにも表示されない場合はAVDManagerでインストールしてください）
OKを押します。
最後に今回作成したものを選択されていることを確認して再生を押してください
起動には時間がかかります。
しばらく待ってください。
こんな感じでエミュレーターが起動して、ティラノスクリプトのゲームが始まりましたね。
上部の電池バーや横向き、縦向きの設定なども簡単にできますので作成したゲームに合わせて設定してください。
実機で確認する
実機で確認する方法も簡単です。
まず、お手持ちのAndroid端末で開発者モードを有効にしてください。
以下の、ブログが詳しく書かれています。
Android Studioでアプリを実機で動作確認する - Android Studioでアプリ開発！
USBデバックを有効にします。
つづいて、先ほどと同様に
[Run]-[EditConfigurations]を選択します。
その後開いた画面において
①左上の＋ボタンを押してください。(AndroidApplicationを選択)
②NameはJikkiTest
③Moduleはandroidを選択
④TargetDevice のところを USB deviceに指定
OKを押したあと、実行してください。
実機で表示されましたね。
注：実機がPCで認識されない場合はWindowsマシンにドライバが入っていないことが多いです。テストで使用した実機のドライバをWindowsにインストールして認識させてください。デバイスドライバで！みたいなものが出ている場合、ドライバが必要です。
以上でティラノスクリプトのAndroidアプリ化は完了です。
GooglePlayなどで販売したい場合は apk を生成してアップロードするだけです。他のブログで解説などが山程ありますので、割愛します。
（要望があれば、apkとGooglePlay への提出も書くかも）
お疲れ様でした。
