FreeStyleVision

使いやすい和製ゲームエンジンenchan.jsですが、当たり判定がイケてないようです。

(さらに…)

画面周りのちょっとした処理をjavascriptで関数化することはよくありますが、規模が大きくなってくると本来のロジックが見えにくくなってしまってあまりよろしくないなあ、と思うことが多々あります。
過去にjQueryプラグインのソース解析に挫折したことがあって作るのも難しいと思い込んでいたのですが、実はとっても簡単でしたのでご紹介します。

(さらに…)

Rubyが持っている配列同士の引き算のようなことをJavaScriptでやりたかったので、調べてみました。
割とあっさり情報が見つかりました。

• 配列の差分をとりたい – ヨーキョクデイ

こちらの記事では、関数として実装していますが、Arrayクラスの中に入れてしまって実用的なパフォーマンスが出るのかどうかを調べてみます。

(さらに…)

前回、イベントの仕組みで状態管理を実装した例を解説しました。

• enchant.jsで状態管理実装 – イベント

今回は管理する項目を減らすために、できるだけオブジェクトによろしくやってもらう仕組みについて解説します。

(さらに…)

どんなに美しい3Dクラフィックスであっても、基本的にゲームはパラパラ漫画のようにヒトコマずつ処理されます。
enchant.jsにも、「フレーム」という概念があります。

フレームが始まるごとにイベントが発生するので、作り手はフレーム内の処理を書くだけでゲームっぽいものが作れます。
ゲーム開始後つまり「ゲーム中」についてはこれだけでも十分ゲームが実装できます。
しかし、規模が大きくなるにつれて「ゲームの開始前、終了後」など管理項目が増えてきます。
これらの処理をフレームイベント内だけで記述しようとすると、だんだん無理がでてきます。

今回はイベントドリブン的な実装を行なった部分について、解説してみます。

(さらに…)

前回はTitanium Mobileで散々にやられちゃいました。

しかし、ネットで見る限り、Titanium Mobileそのものがそこまでひどいもののようにも思えないのです。
私の試し方にどこか問題があるような気がしてならないので、もう一度チャレンジしてみることにします。

テーマは同じく「Titanium Mobileでenchant.jsを（簡単に）アプリ化し、サウンドの再生（等の弱点）を克服する」です。
ネットの情報を見る限りiPhoneはここまで苦労していないようなので、今回のターゲットはAndroid（エミュレータ）のみです。

(さらに…)

以前、enchant.jsのサウンド再生について、イマイチな結果が出てしまいました。

• iPhoneでenchant.jsのサウンド再生

ブラウザ実装の対応を待つ以外になにか良い手はないものかと考えたところ、TitaniumMobileのWebViewにenchant.jsを載せて、サウンド部分だけネイティブの機能を使えばよいのでは？と思いつきました。
うまくいけば開発効率はほぼそのままに、enchant.js（とブラウザ実装）だけでは実現が難しい部分もクリアでき、さらにiphone、Android両対応が実現できてしまいそうです。

(さらに…)

Javascript製ゲームエンジンenchant.jsについて、過去にいくつかの記事を書きました。

• enchant.jsの概説
• enchant.jsのサンプルゲームを読む
• 当たり判定処理　前編
• 当たり判定処理　後編

ここでは触れていないのですが、enchant.jsではiPhone(MobileSafali)ではサウンドの再生に制限があります。

wise9 › enchant.jsのサウンド機能で、ゲームをさらにカッコよく！

特に、iOS上のブラウザ (Mobile Safari) については、「プレイヤーが画面にタップしたとき以外、音声が再生できない！」という大きな制限があるため、暫定的に、デフォルトでは以下のようなコードを実行しフラグを立てない限り再生されないという仕様になっています。・・・が、いまのところバグがあるらしくiOSで正しく再生されません!目下修正中です!

と、いうことで今回はiPhoneでのサウンド再生について調べてみました。
以下のサイトの情報を参考にしています。

D-lagoon ブログ [enchant.js]iPhoneで音を鳴らすのに一苦労 | D-lagoon ブログ

検証のために以下のようなコードを作成しました。

enchant();
enchant.Sound.enabledInMobileSafari = true;//必須

IMAGE_FILE = "chara1.png";
SOUND_FILE = "gameover.wav";
InitBear = function(no){
var game = enchant.Game.instance;
var bear = new Sprite(32, 32);
bear.image = game.assets[IMAGE_FILE];
bear.x = (game.width - bear.width) * (no/5);
bear.y = (game.height - bear.height) * (no/5);
bear.frame = no * 5;
return bear
};

window.onload = function(){

var game = new Game(320, 320);

game.fps = 15;
game.preload(IMAGE_FILE, SOUND_FILE);
game.onload = function(){

var no = 1;

// 1: 通常、これで再生できる
var bear1 = InitBear(no++);
bear1.addEventListener("touchstart", function(){
game.assets[SOUND_FILE].clone().play();
});
game.rootScene.addChild(bear1);

// 2: 参考サイト（D-lagoon ブログ）での回避策
var bear2 = InitBear(no++);
bear2.addEventListener("touchstart", function(){
game.load(SOUND_FILE, function(){
game.assets[SOUND_FILE].play();
});
});
game.rootScene.addChild(bear2);

// 3: 上からloadを省略してみる
var bear3 = InitBear(no++);
bear3.addEventListener("touchstart", function(){
game.assets[SOUND_FILE].clone().play();
});
game.rootScene.addChild(bear3);

// 4: イベントだけ拾って保持
var bear4 = InitBear(no++);
bear4.flag = false;
bear4.addEventListener("touchstart", function(){
if(this.flag) game.assets[SOUND_FILE].clone().play();
this.flag = false;
});
bear4.addEventListener("enterframe", function(){
this.flag = true;
});
game.rootScene.addChild(bear4);

};
game.start();
};

結果は予想通り、2と3でサウンドの再生を確認できました。
しかし、再生までに数秒かかるので、実用的とは言えませんが、Mobile Safaliではこれが限界なようです。

【後日談】
数日後、ふと同じ検証を行なってみました。
するとなぜか1,2,3,4すべてのパターンでサウンドが再生されました。
ソースは触っていないのに何故？？？
ですが、やっぱり再生までに数秒かかるので、実用的とは言えません。

以上です。

過去に弊社fujiiがjQueryMobileの紹介記事を書いています。

jQuery Mobileを試してみました。

先日やっと試すことができたので、記録しておきます。
PC向けサイトでjQueryに慣れているけど、jQueryMobileは初めて使う、と言う人は以下の点に注意して利用されることをおすすめします。

(さらに…)

前編ではキャラクタ同士の当たり判定について考えてみました。
後編ではキャラクタと壁の当たり判定について考えてみます。

当たり判定処理　前編

(さらに…)