localstorage.enchant.js (enchant.js meetup! 発表資料)

18
localstorage.enchant.js ymrl 芸者東京エンターテイメント インターン

Upload: rei-yamamoto

Post on 16-Apr-2017

4.925 views

Category:

Technology


1 download

TRANSCRIPT

localstorage.enchant.jsymrl 芸者東京エンターテイメント インターン

自己紹介

名前:ymrl(やまある と読みます)

芸者東京エンターテイメント インターン

慶應義塾大学 政策・メディア研究科 修士課程1年

趣味として「このまま眠りつづけて死ぬ」「TweetShooting」などのWebサービスを製作

芸者東京とenchant.js

スマートホン用ブラウザゲーム開発に使用

スマートホン用ゲームの難しさ

touchイベントなど独自イベントの処理・デバッグ

➡enchant.jsが解決

サウンド関係(iOSでは1音のみ再生可能)

描画処理などのパフォーマンス

回線帯域の細さ・不安定さ

localstorage.enchant.js のご紹介

画像の3G経由のロード回数を減らすために開発

ゲーム内で使用する画像データをローカルに設置することでアクセスを回避

HTML5のlocalStorageを使用

Data URI Scheme の形式で保存する

localStorage

ブラウザ側にデータを保存することができる

ただし文字列のみ

ドメインごとにkey-valueストアとして使用できる

iOSの場合、容量は5MBまで

localStorage['key-name'] のようにしてアクセス

Data URI Scheme

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

通常のURLの代わりにデータの内容を直接記述する方式

<img src=”data:image/png;base64;,...”>のように使える

データ本体はBase64にエンコードされる

画像ではCanvasのtoDataURIメソッドで生成可能

Data URI Schemedata:image/png;base64,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

Data URI Scheme の生成(例)

var img = new Image();img.src = 'foo.png';img.addEventListener('load',function(){ var cvs = document.createElement('canvas'); cvs.height = this.naturalHeight; cvs.width = this.naturalWidth; var ctx = cvs.getContext('2d'); ctx.drawImage(this,0,0); console.log(cvs.toDataURL());});

localstorage.enchant.jsの設計

enchant.jsのGame#preloadと互換性を持たせる

リリース直前に保存するファイルを決めるため

画像のURLをキーとしてlocalStorageに保存

画像がlocalStorageにない場合は並行してpreload

使用方法

game.preload('foo.png');

をgame.preloadToLocalStorage('foo.png');

にするだけ

使用例

enchant();window.addEventListener('load',function(){ var game = new Game(400,400); game.preloadToLocalStorage('/img/Lenna.jpg'); // localStorage['/img/Lenna.jpg'] に画像が保存され、 // 次回からは localStorageから読み出されるようになる game.addEventListener('load',function(){ var lenna = new Sprite(400,400); lenna.image = game.assets['/img/Lenna.jpg']; game.rootScene.addChild(lenna); }); game.start();});

問題点

画像の更新ができない

画像URLをキーとしているため、すでに保存されている場合は更新されない

画像のURLを変更した場合、以前のデータが残ってlocalStorageの容量を圧迫してしまう

画像の更新

画像ファイルの指定を'foo.png#20111021'のようにする

スクリプト側で#以降の文字列が変更されていた場合には過去のファイルを削除する

パフォーマンス

Data URI Schemeからの復元には時間がかかる

iOS Simulator↔Local Serverでは通常のロードが30msに対して、localStorageからは81ms

3G越しでは速度の差は小さくなる

ロード速度は Cache > localStorage > 通常

これからの予定

localStorageの容量が逼迫した場合の処理

古いデータを探して削除するなど

音声など画像以外のデータも保存できるようにする

Base64のエンコードを自前で実装する必要がある

Thank you.geishatokyo’s enchant.js repository:https://github.com/geishatokyo/enchant.js