PlayCanvasではゲーム内スクリプトから直接WebStorageを使用してデータの保存、読み込みができます。
ここでは、位置情報とマテリアル情報のセーブ、ロードができる簡単なサンプルとともに使い方を紹介します。また、コード全文を記事の最後に記載しておりますので参考までにお使いください。
なお、WebStorageの対応状況はこちらからご確認ください。
全画面表示はこちら
データの保存
//WebStorageに保存する
localStorage.setItem("position_x",this.entity.localPosition.x);
localStorage.setItem("position_y",this.entity.localPosition.y);
localStorage.setItem("position_z",this.entity.localPosition.z);
localStorage.setItem("mat",this.entity.model.material.name);
//テキスト出力
document.getElementById("action").innerHTML = "saved.";
WebStorageにはlocalStorageとsessionStorageの2つがあります。PlayCanvasはどちらもサポートしています。
サンプルではlocalStorageを使用しています。localStorage.setItem()メソッドでデータを格納することができます。
デバックの際は、ブラウザのデベロッパーツールからWebStorageに正しく格納されていることが確認できます。
データの読み込み
//WebStorageからデータ取得
var pos = new pc.Vec3(localStorage.getItem("position_x"),
localStorage.getItem("position_y"),
localStorage.getItem("position_z"));
this.entity.setLocalPosition(pos);
var mat = this.app.assets.find(localStorage.getItem("mat"));
this.entity.model.material = mat.resource;
this.entity.model.material.update();
//テキスト出力
document.getElementById("action").innerHTML = "loaded.";
localStorage.getItem()メソッドでデータの読み込みができます。WebStorageではすべて文字列型で格納されるため、PlayCanvasで再利用するには整形しなおす必要があります。
本サンプルでは、localStorageを使用しているため、サンプルではエディタを閉じてもデータは保持され続けています。WebStorageはドメインに付随するデータのため、同一ドメインであればページをまたいでも使用することができます。そのため、PlayCanvasでのゲーム結果を他のページで表示させる等といったことも可能です。
コメント
0件のコメント
サインインしてコメントを残してください。