‘JavaScript’ タグのついている投稿

jQueryプラグインが意外と簡単に作れる話

2013 年 7 月 22 日 月曜日 by 山平

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

(さらに…)

配列の引き算をJavascriptで実装してみる

2013 年 6 月 4 日 火曜日 by 山平

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

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

(さらに…)

enchant.jsで状態管理実装 – オートマトン

2013 年 4 月 11 日 木曜日 by 山平

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

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

(さらに…)

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

2013 年 4 月 2 日 火曜日 by 山平

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

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

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

(さらに…)

enchant.jsをTitanium MobileのWebView上で動かせた記録

2012 年 12 月 12 日 水曜日 by 山平

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

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

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

(さらに…)

enchant.jsをTitanium MobileのWebView上で動かせ(なかっ)た記録

2012 年 12 月 4 日 火曜日 by 山平

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

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

(さらに…)

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

2012 年 10 月 15 日 月曜日 by 山平

Javascript製ゲームエンジン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すべてのパターンでサウンドが再生されました。
ソースは触っていないのに何故???
ですが、やっぱり再生までに数秒かかるので、実用的とは言えません。

以上です。

jQuery Mobileを試した記録

2012 年 7 月 24 日 火曜日 by 山平

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

jQuery Mobileを試してみました。

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

(さらに…)

当たり判定処理 後編

2012 年 6 月 19 日 火曜日 by 山平

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

当たり判定処理 前編

(さらに…)

当たり判定処理 前編

2012 年 5 月 21 日 月曜日 by 山平

ゲームに欠かせない処理に当たり判定があります。
当たり判定は大きく分けて「プレイヤーキャラクタと敵キャラクタ(動くもの同士)の当たり判定」と「キャラクタと壁(動くものと動かないもの)の当たり判定」の2通りあります。

当たっているかどうかを調べると言う意味ではどちらも同じなのですが、当たった後の処理に違いがあります。
キャラクタ同士の場合、何と何が当たったかで処理が変わるため、処理(仕様)を決めておく必要があります。
キャラクタと壁の場合、当たった後の処理で座標を修正するのはキャラクタなのであまり難しく考える必要がありません。

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

(さらに…)