Skip to content

enchant.jsが進化!新機能でプチ・ネットゲームを作っちゃおう!

どうもお久しぶりです!9leapチームのリョーヘイです。いまはハッカソンのまっただ中、ARCでは夜通しみんなでプログラミング中!

キッチンでもプログラミング。

さて今日は、本日からリリースされた9leapの「データベース機能」を紹介しますよ。enchant.jsのプラグイン「memory.enchant.js」とセットで使うと、プレイデータをユーザごとに保存できます。さらにそれだけではなく、最近ゲームをプレイしたユーザや、Twitterでフォローしている友達のデータを参照できる機能もあるんです!

この機能を使えば、たとえばこんなゲームが作れちゃいますよー。

(プレイには一度だけTwitterアカウントを使ったログインが必要です…ご了承ください。)黒いクルマがいわゆる「ゴースト」ですね。ランキング上位のプレイヤーからランダムで選ばれた、右上に表示されてるアイコンのヒトのプレイデータと対戦できるんです。

JavaScriptでデータ保存と言えば「Cookie」がメジャーですが、文字列しか保存できなかったり、他の人のデータを参照できなかったり…と、なかなか機能の多いゲームを作るのが難しい。かといって、一つのゲームのためにサーバを立てるわけにもいかないし…。今日追加された9leapの「データベース機能」は、この二つの問題を一挙解決!

今まで作れなかった、途中でセーブが必要な長編ゲームや、アクセスするごとにキャラクターが成長するゲーム、また友達のデータを読み込んで交流・対戦するようなゲームも作れちゃいますよ。

プラグインのダウンロードは例によって github からドウゾ。

https://github.com/wise9/enchant.js
https://github.com/wise9/enchant.js/tree/master/plugins

今回のアップデートで、「nineleap.enchant.js」からTwitter連携機能が分離され「twitter.enchant.js」となりました。今まで通りTwitter機能を使いたい人は、両方のプラグインを読み込んでくださいね!

データベース機能のサンプルコードは以下の通り。

window.onload = function(){
game = new Game(320, 320);

game.memory.player.preload();
// 自分のデータをロード

 game.memories.friends.preload();
game.memories.recent.preload();
game.memories.ranking.preload();
// フォローしているユーザ、最近プレイしたユーザ、スコア上位のユーザをロード

game.memory.user['9leap'].preload();
// スクリーンネームを指定してロード

game.onload = function(){
if( game.memory.player.data.foo == null){
game.memory.player.data.foo = 0
};
// 初期化

game.memory.player.data.foo ++;
// データ書き込み

game.memory.update();
// 保存

var friendScore  = game.memories.friends[0].data;
var friendSprite = game.memories.friends[0].toSprite();
// 他人のデータにアクセス、アイコンをスプライトとして取得

var highscore = game.memory.player.score;
var topscore  = game.memories.ranking[0].score;
var topresult = game.memories.ranking[0].result;
// スコア、プレイ結果も取得可能

game.end(score, result);
// スコア、プレイ結果は従来通り game.end の時点で書き込まれます
}
}

 

 

 

もしかしたらこのコードだけで「フムフムわかった!」とゲームを作り始めちゃう猛者の方もいらっしゃるかもしれませんが…いちおう解説しておきますね。

game.memory.player.preload(); … 自分のデータをロード
game.memories.recent.preload(); …最近プレイしたユーザのデータをロード
game.memories.ranking.preload(); …ランキング上位のユーザのデータをロード
game.memories.friends.preload(); …Twitterでフォローしている友達のデータをロード (足りない場合は最近プレイしたユーザで補充)

window.onloadとgame.onloadのあいだに入っている関数で、プリロードするデータを指定してください。

game.memory.player.data

読み込まれたデータは、連想配列としてここに格納されます。この配列を書き換えて、以下のコードを実行すると、書き換えられたデータがサーバに保存されます。

game.memory.update();

初回プレイ時には、初期化を忘れずに。

if( game.memory.player.data.foo == null){
game.memory.player.data.foo = 0
};

他の人のデータは以下のようなコードでアクセスできます。game.memories.friends が配列になっていますので、添え字で指定したりforで回したりしてデータを取り出しましょう。twitterプラグインにもあるtoSpriteメソッドを使えばかんたんにアイコンを表示できます。

var friendData = game.memories.friends[0].data;
var friendSprite = game.memories.friends[0].toSprite();
// 他人のデータにアクセス、アイコンをスプライトとして取得

ちなみに今回のアップデートで、スコア・プレイ結果へのアクセスもできるようになりました。それぞれ、score、resultというプロパティに保存されています。

var highscore = game.memory.player.score;
var topscore  = game.memories.ranking[0].score;
var topresult = game.memories.ranking[0].result;
// スコア、プレイ結果も取得可能

※追記
データベース機能は、9leapのサーバにアップロードした状態でないとテストできませんが、以下のフラグを立てると、ブラウザのLocalStorage (ブラウザ内に情報を保存する機能) でAPIの動作をエミュレートしながらローカルでテストすることができます。

enchant.nineleap.memory.LocalStorage.DEBUG_MODE = true;

9leapの「ゲームID」を指定すれば、ローカルから9leapのサーバに直接接続してデバッグが可能です。

enchant.nineleap.memory.LocalStorage.GAME_ID = 101;

このときGAME_IDに設定する数値は、9leapにアップロードしたゲームのURLの末尾の数字になります。
一度非公開でアップロードし、アップロード先のURLの末尾の数字をこのGAME_IDに設定します。
開発が終わったら「公開する」でゲームが公開されます。

このエントリーをはてなブックマークに追加
はてなブックマーク - enchant.jsが進化!新機能でプチ・ネットゲームを作っちゃおう!
Post to Google Buzz
Share on GREE

Related posts:

  1. enchant.jsでTwitter連携ゲームを作ろう! (その1 プラグイン解説編)
  2. 必見!9leap投稿ゲームプログラムの作り方!
  3. enchant.jsのサウンド機能で、ゲームをさらにカッコよく!
  4. [9leap]enchant.jsのサウンド機能をすぐ使う
  5. [enchant.js]shi3z式ゲームプログラミング #7 タイムアタックは神!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*