ゲームをPWA対応する
Qiitaにあげたものの転載です。
できるようになること
アプリっぽい見た目にする（あくまで「ぽい」）
オフラインでもゲームをプレイできる（初回のダウンロードは必須）
必要なもの
ティラノライダー v200以上
やっておくこと
ティラノライダーで「スーパーブラウザゲーム」形式でパッケージング
https://gyazo.com/88851fef7bef2f1bd87fb8bbd0108c3b
↑赤で囲ったうちのどちらか
ティラノビルダーを使用している場合は一度ビルダー側で「ブラウザゲーム」形式で出力、出力したフォルダをティラノライダーで読み込んでスーパーブラウザゲーム形式でパッケージングすればOK
ホーム画面に追加
１．manifest.jsonの作成
code: manifest.json
{
"name": "GAME_TITLE",
"short_name": "SHORTNAME",
"icons": [
{
"src": "link.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "link_02.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"display": "fullscreen",
"background_color": "#000",
"theme_color": "#fff",
"orientation": "landscape"
}
manifest.jsonの書き方はこのへん
２．manifest.jsonをアップロード
pwa対応したいフォルダに置く
たとえばgameというフォルダにティラノライダーから出力したファイルがあるとすると
code:フォルダ
game
├ data
│ └scenarioとか
├ tyrano
│ └libとか
├ index.html
└ manifest.json <=ここ！
ゲームを公開しているサイト全体ではなくゲームを個別にpwa化したいということならゲームのindex.htmlと同じ階層にmanifest.jsonを置いておけばいいと思う
３．manifest.jsonをhtmlのヘッダーで読み込む
code:index.html
<link rel="manifest" href="/manifest.json">
デスクトップから確認するやりかたはこのへん
というかこのページにやり方全部書いてある
注意事項
スマホから確認はlocalhostではできない？
確認のときはhttpsでアクセスする必要があるので注意（自戒）
オフラインキャッシュ
スーパーブラウザゲーム形式でパッケージングした時点で、一応リソースは全てキャッシュしてくれるにはしてくれるのですが、実際にゲームをプレイしている際にはキャッシュではなくサーバー上のファイルを読みにいってしまうファイルというものがあります。
キャッシュから読み込むもの
画像
音声ファイル
動画（たぶん）
キャッシュではなくサーバーから読込むもの
シナリオファイル
[loadcss]で読み込むcss
[loadjs]で読み込むjs
実際にDevToolのNetworkタブを見てみればわかるのですが、サーバーから読み込むファイルはゲーム中に該当ファイルへの通信が発生した際にファイル名?+ランダムな数値へアクセスしています。
しかしServiceWorkerでのキャッシュはファイル名のみで行っているため、サーバーへの通信が発生しているようです。
これではオフラインプレイができません。いやブラウザゲームなんだからいいだろと言われてしまえばそれまでですが、せっかくできるのだからやってみたい。やる。
全部オフラインキャッシュするには
こちらのブログを参考にしました。
code:tyrano/lib.js
$.loadText = function(file_path, callback) {
（中略）
$.ajax({
url: file_path + "?" + Math.floor(Math.random() * 1000000),
cache: false,
success: function(text){
order_str = text;
callback(order_str);
},
error:function(){
alert("file not found:"+file_path);
callback("");
}
});
これを
code:tyrano/lib.js
$.loadText = function(file_path, callback) {
（中略）
$.ajax({
url: file_path + "?" + 1, //ここを変更
cache: false,
success: function(text){
order_str = text;
callback(order_str);
},
error:function(){
alert("file not found:"+file_path);
callback("");
}
});
こう
同じ要領でcssとjsも対応します
code:tyrano/plugin/kag/kag.tag_system.js
tyrano.plugin.kag.tag.loadcss = {
vital: "file",
pm: {
file: ""
},
start: function (pm) {
var file = pm.file;
//ここからコメントアウト
// var style = '<link rel="stylesheet" href="' + file + "?" + Math.floor(Math.random() * 1E7) + '">';
//ここまでコメントアウト
var style = '<link rel="stylesheet" href="' + file + "?" + 1; //ここを追加
$("head link:last").after(style);
this.kag.stat.cssloadfile = true;
this.kag.ftag.nextOrder()
}
};
code: tyrano/plugin/kag/kag.tag_ext.js
tyrano.plugin.kag.tag.loadjs = {
vital: "storage",
pm: {
storage: ""
},
start: function (pm) {
var that = this;
//ここから追加
$.ajaxSetup({
cache: true
});
//ここまで追加
$.getScript("./data/others/" + pm.storage, function () {
that.kag.ftag.nextOrder()
})
}
};
[loadjs]は、スクリプト中で直接ランダムな数値を付与しているわけではありませんが、getScriptのデフォルトがキャッシュをしない設定なので、ajaxSetupでキャッシュをする設定に上書きしています。
実際にゲームとして公開する場合は数値をべた書きではなく別ファイルに定数として持たせて、バージョンアップごとに定数を書き換える、という形になるのかな
そして最後にtsw.jsで読み込んでいるファイルのうち、シナリオファイルと[loadcss]で読み込むcssと[loadjs]で読み込むjsのファイル名末尾に?定数を付与すればおｋ
一応これで短編ノベル程度ならオフラインでも動いています。立ち絵がヌルヌル動いたりフルボイスだったり長編ノベルだとどうなるかはわからない
あとティラノスクリプトの本体部分に手を加えているのでやるなら自己責任でお願いします！！！
#ティラノスクリプト