enchant.js
enchant.jsの物理演算プラグインで遊ぶ
0JavaScriptの物理演算といえばBox2dというのが有名ですが、それをenchant.jsから簡単に操作できるプラグインが
作成されていたので紹介します。
(さらに…)
【enchant.js】回転時も衝突判定をしてくれるプログラムと問題点
2enchant.jsでiPhone向けゲームアルゴリズムを色々試したところ、Canvasで画像を描画するより、Spriteを多用したほうが軽いことがわかりました。
Canvasを一度読み込んで色々描画してから書き込むのより、Sprite900個を設置したほうが軽いというのは何か書き方を間違っている気がしなくもないですが、1000個未満ならSpriteを設置してもiphoneでも問題ないのがわかったのはびっくりしました。（一度に動かすとまた別ですが）
しかしCanvasではなくSpriteで処理すると多少問題がでるのが、Spriteを回転して斜めにすると上手く衝突判定が行われないのです。
というのも、enchant.jsではSpriteのXY座標＋縦横幅の四角形で衝突判定を行っているのですが、回転時もこの部分は変わらないのです。
そこで、斜めになったときの計算のアルゴリズムを模索しなくてはとおもっていたらちょうどそのことについて書いていたサイトが見つかりました。
(さらに…)
Enchant.js。Surface(Canvas)拡張プラグイン
0Enchant.jsでお絵かきソフトでも作ろうかなと思ったのですが、Surfaceクラスからcontextを介して毎回
Canvasにアクセスするのが面倒になってきたので、よく使いそうなパターンをクラス化しました。
(さらに…)
Enchant.jsでSurfaceをgetPixelするときの注意点
0久々にenchant.jsを弄ってみました。
HTML5らしく、Canvasを使った何かを作ってみようと砂が上から落ちてきて下に落ちるだけのプログラムを作成して
問題点にあたりました。
enchant.jsとTwitterの連動
0enchant.jsとTwitterが連動出来るようなAPIが登場しました。
これでenchant.jsを使ってTwitterを利用したゲームやタイムラインの表示とかができるかも。
しかし、どうもjavascriptはなれないせいか、配列が使いにくかったり、正規表現がやりにくいです。
せっかくですので、以前作ったTwitterをマルコフ変換するプログラムをenchant.jsで作成しようとするも、その二つの仕様の違いによりなかなかうまくいきませんでした。
いろいろ調べてたら・・・・なんとjavascriptにマルコフ変換その他をしてくれるライブラリがありました。
JavaScriptライブラリ「Web AI」
なんか苦労してたのが馬鹿みたいでした。
さっそくこれを使って作成。作成したのがこちら
人工無能「あなた」
しかし、Twitterというのが、他のブログなどの文章と違う性質を持っているせいか、人によってはうまく表示されないようです。
まだライブラリを完全に把握してないので使い方間違っているのかなあ？
enchant.jsの3D回転を拡張するプラグインSprite3d
0以前の記事で、enchant.jsで回転軸を変えるのには成功したのですが、回転方向を変えるrotateXYZは上手く行きませんでした。
というのも、Spriteオブジェクトではレンダリングされるたびに、スタイルを書き換えているのですが、これのせいで別でスタイルを変えても上書きされてしまってたのです。
最初はSpriteのイベントリスナーを弄る予定だったのですが、無名関数で登録されていて、変更が困難だったので、新しくSprite3Dというクラスを作成しました。
enchant.jsでオブジェクトの回転軸を変更するプラグイン
0enchant.jsでは回転機能がサポートされています。
しかし、これが地味に中心軸のみの設定で、別の座標を軸に回転させることができません。
回転軸の変更にはtransform-originというCSSプロパティを設定すればいいのですが、それを簡単に設定するプラグインを作りました。
enchant.jsで加速度センサーを使う
09leapで加速度センサーを使ったゲームが投稿されていました。
すごいなどうやってやっているのだろう？と調べてみると、iOS4.2から加速度センサーをjavascriptで取得できるＡＰＩが実装されていたとのこと。それはすごく面白そうということで、enchant.jsで使えるように色々調べてみました。
enchant.jsの画面を好きな場所に配置する。
0enchant.jsでゲームを作って公開するとき、画面が左上に固定されてしまいます。
これはenchant.jsが最初にbody要素の直下にenchant-stageというDIV要素を作るので、レイアウトの変更は難しいのかなー？
とおもってソースを覗いてみると、どうもすでにenchant-stageというIDの要素がある場合は、そこに表示してくれるようです。
(さらに…)
enchant.jsで角度と距離で衝突判定をするプラグイン
0enchant.jsには衝突判定に、短形同士で判定するintersectと、直線距離で判定するwithinがあります。
withinを使うと自身を中心に円上にある距離内でヒットした場合は判定できるのですが、ゲームを作っているうちに、自分が向いている方向の前方45度のみで衝突判定を行いたい場合がありました。
というわけで、衝突判定を円状ではなく弧状で判定できるarc_withinメソッドを追加できるプラグインを作成しました。
ダウンロード
使い方。
index.htmlのgame.jsの前に
<script type="text/javascript" src="arc_within.js"></script>
を追加
衝突判定を行いたい箇所で、withinの代わりに
this.arc_within(衝突を判定するオブジェクト,衝突までの最大の距離,角度)
角度は自身のrotationが0の時は真上を起点として、±（角度/2)度の範囲で判定します。