以前cocos2d-JSで作ったbmsjsをDOMベースでmithril.jsで実装してみました。降ってくるのは全部div要素です。デモhttp://bokuweb.github.io/bmsjs-ithildinキーは白鍵が左からZ,X,C,Vが、黒鍵が左からS,D,FがターンテーブルにはBがアサインされてます。ソースgithub.comなんでわざわざDOMで・・。パフォーマンスを考えればWebGL使えって話しなんですが、以下の理由により試してみました。すべてをcssでスタイリングしたかった勉強のため、また、どれだけ動くか試したかったすべてをcssでスタイリングしたかったもともとユーザにテーマを作ってもらいたいと思い、cocos2d-JS版の時もjsonで設定できるようにスタイル部分を切り出そうとしていたんだけど、これがかなり辛かった。すべてがcssでスタイリングできるようになればテーマ作ってもらえるんじゃないかと思い着手した。cocos2d-JSはテキスト入力やリスト、ラジオボタンなどを用意するのが大変で、この辺りをreactやmithrilでやりたかったのも理由のひとつ。適当な空のdivでも予備で複数配置しとけば、backgroundとかz-indexとか使って自由にオブジェクトを配置できるしかなり利便性もよさそうだった。(box-shadowなど)を当てられるとリペイント時間が増大するんじゃないかってのがあった。勉強のため、また、どれだけ動くか試したかった結構動いた。デモも基本的には60FPS出てると思う。GitHub)やfastDOM版(https://github.com/bokuweb/bmsjs-ithildin/tree/use_fastdom)も作ったんだけどカクつきが一番少ないのはMithril版だった。この辺りもっと定量的に評価したい。)ただ、少し踏み外すとカクつきが頻発したりしており、まだまだエフェクトなどを追加する必要があるので自分のスキルではこれ以上はきついんじゃないかと判断した。すれば自分の今のスキルと今回の要件を鑑みると、ハイブリッドがいいのではないかと考えている。動きが多く、アニメーションなどを必要とする箇所を必要最低限ピックアップしWebGLを使用、その他スコアや動いのないオブジェクトなどはDOMのレイヤーを被せて構成する。これならばパフォーマンスも確保できつつテーマをcssでスタイリングできる。cocos2d-JSが一番とっつきやすいかも。flashing今まで知らなかったんですが、描画があった箇所をハイライト(画像の緑枠)してくれる機能です。下のペインの「Rendering」タブを選択するとあります。"retain"}を返すようにし対策しました。react版ではそのようなことはなかった。flashing同様、「Rendering」タブを選択するとあります。こいつをイネーブルにすると画像右上のようにFPSが確認できます。常時60FPSが保てるようこいつで確認しました。これからbmsjsはサーバ側にも多くの課題を抱えているので本格運用はまだまだ先になりそう・・。これからまたcocos2d-JSを触るとなるとちょっとモチベーション保てなさそうなので、積み残しているtwitterクライントとかElixirの勉強とか(本当はサーバー再度もPhoenixでやりたい)リフレッシュしてから再開する予定。ここで遊べる(スマホ...2015-09-15最強のTwitterクライアント進捗その2昨日の問題がひとまず落ち着いたのでmac版のみv0.0.1をアップし...2015-09-082015年8月に見つけたWEBサービス等作ってみた記事まとめ8月分です。Electronなど多め。bmsjs(α版)というWEBサービスをリリースしました。bmsjs...2015-05-17particle2dxでソードアート・オンライン風のエフェクトを作成し再生する以前紹介したParticle2dxで遊んでみました。12引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。