RPGツクールMVのセーブデータを端末間で共有した話

RPGツクールMVのセーブデータをスマホやPC間で共有した話

（「百聞は一見に如かず」というし，説明書く気力ないので，とりあえず試してみて欲しい）

HerokuとDockerfileを用意しました．

RPGツクールMV

• RPGツクールシリーズ最新作
• HTML5・JSで出力
  • アプリ化はCordovaとか使うらしい
  • （Electron使えばLinuxでもいけるよね）
  • Webページとして公開するほうが勝手がイイ
• ニコニコでいくつか作品が配信されている
  • http://info.nicovideo.jp/gamemaga/mvsample/

セーブデータ問題

• ゲームはクライアントのみで動く
  • Socket.ioも使えるが今は置いとく
• Webサーバにあげておけば，どの端末でも動く
  • そいえば，iOS SafariってユーザイベントからでないとAudio再生できなかったような....
  • （頑張ったんだろうな...）
• どの端末でも動くが，セーブデータは別
  • 端末ごと別のセーブデータになる
  • クライアント完結なので同期する手段がない
  • 保存先は定番のlocalStorageだった

今回の話

• どの端末でも同じセーブデータを使えるようにした
  • https://github.com/3846masa/rpgmv-save-store-proxy
  • Herokuでも立ちます
  • Dockerfileあります
• 「PCで進めて続きはスマホ」ができる！
• 追記 Audio周りのバグ修正パッチも含めました

仕組み

• 自分だけのセーブ保管サーバをつくる
  • Heroku + mongolab で無料（！）
• セーブ保管するJavaScriptを埋め込みたい
  • 作る側ではなく，あくまでプレイする側として
• mongodbAPI + セーブ保管JS埋め込み用Proxy
  • localStorageを読めるのは，配信サーバのみ
  • ならば配信サーバになってやればいい

詳しい話

• Express（Node.js）の勉強をかねて作った
• mongodbのAPIはexpress-restify-mongooseがものすごく楽
  • 何でもできるAPIなので，passportで認証をかける
  • 自分だけしか使わないならこれで十分
• Herokuでmongolab使うと無料
  • ただし，本人認証のためクレジットカード登録必要
• digest認証ではAndroid ChromeでAudio再生できない
  • これがわからなくて1日溶かした
• Proxyの方法はcrossorigin.meの実装を真似した
  • 例）http://proxyserver.com/http://example.com
• localStorageを自作関数に置き換えた
  • ブラウザ標準関数はthisが違うとエラー吐くので注意
  • Uncaught TypeError: Illegal invocation(…)

// Example
(function() {
  var _log = console.log;
  try {
    log.call(console, 'call');
    log.apply(console, ['apply']);
    log.bind(console)('bind')
    log('normal'); // Error
  } catch (_e) {
    console.error(_e);
  }
})();

• RPGツクールMVのデフォルトは，localStorage.setItemとかの関数をつかう仕様
  • localStorage['anykey'] = 'value';ではない
  • 連想配列方式の場合は__defineSetter__書けばいいはず
    • 今回は書いてない
• Babel6でclient-sideとserver-sideでpresetsを使い分ける方法
  • envオプションを使う
  • https://babeljs.io/docs/usage/babelrc/
  • 例）.babelrc
  • 環境変数によって動作が変わる
    • 詳しくはpackage.jsonでも見てくれ

まとめ

• Herokuで建てるの楽しい
  • mongolab最高！
• Express楽しい
  • passportが凄い
• キャラクタ可愛い
• セーブ共有できたのでやりまくれるね！