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

KnockoutJSを使ってSVGを制御するサンプル

2015 年 10 月 26 日 月曜日 by 山平

KnockoutJSを使ってSVGを制御するサンプルを作ってみました。

こんな感じです。

screenshot

長らくSVG実装が出揃わない状況が続いていましたが、最近やっと落ち着いてきました。

慣れ親しんだDOM操作で厳密な座標が制御できるSVGは、Web上でちょっとしたグラフ等を表示するのにとても都合がいいです。
また、MVVMによる画面制御も、jQueryのセレクタ管理に疲れた体にとてもやさしいです。
データを更新するだけでKnockoutJSがDOMを更新してくれるので、画面制御のためのコードがありません。

上のサンプルはHTMLとJavaScriptあわせて50行に満たない簡単なものですので、解説は不要だと思います。

以上です。

enchant.jsの当たり判定不足を補う その3

2014 年 11 月 13 日 木曜日 by 山平

引き続き、前回から持ち越した問題である「傾いた矩形の4点がもう一方の傾いた矩形の内側にあるか」を考えます。

(さらに…)

enchant.jsの当たり判定不足を補う その2

2014 年 10 月 9 日 木曜日 by 山平

前回、enchant.jsの当たり判定がイケてない理由を説明しました。

回転する矩形同士の衝突判定を自前で実装することを目標に、考察を進めていきます。

(さらに…)

enchant.jsの当たり判定不足を補う その1

2014 年 8 月 8 日 金曜日 by 山平

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

(さらに…)

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

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

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

(さらに…)

CSS3ボックスレイアウト調査

2013 年 5 月 9 日 木曜日 by 山平

CSS3で登場したボックスレイアウトは便利なのですが、ブラウザごとに対応がまちまちだったりベンダープレフィックスがついたりと面倒なので、調査した記録を残します。

FirefoxとGoogleChrome・SafariなどWebkit系についてはそれなりに分かってきた気がしますが、IEとOperaについては調査不十分です。

(さらに…)

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両対応が実現できてしまいそうです。

(さらに…)