概要
bmsjs(α版)というWEBサービスをリリースしました。 bmsjsはブラウザ上で動作するBMSプレイヤーとSNSの機能を持つWEBサービスです。
BMS?
元々は、KONAMIの音楽ゲーム『beatmania』を模したシミュレータにあたる『BM98』用の譜面データフォーマットとして開発されたため、現在では同様のシミュレータ（BMSプレイヤー）に用いる譜面データ（曲データ）、あるいはゲームシステム全体を指す場合が多い。2000年代中盤頃までは、「ネットユーザーのPCには何かしらのBMSプレイヤーが入っている」と言われるほどの一大ムーブメントを巻き起こしていた。[要出典]現在はブームが沈静化しているものの、未だに新作BMS楽曲が作られるなどの根強い人気を保っている。かつてのBMS作曲家の中には、プロに転向した者や著名なボーカロイドプロデューサーも多い。
wikipediaより
どんなサービスか
先にも述べましたが、BMSプレイヤーとSNSの機能を持ったWEBサービスです。 具体的には以下のような機能を有しています。
- BMSプレイヤー
- フォーラム
- アクティビティ(twitterライクなつぶやき機能)
- グループ
- フレンド機能
プレイヤーだけでなくフォーラムやグループなどでユーザ間でコミュニケーションが取れるようになっています。 SNS機能の需要は正直不明ですが、Javascriptで作成したBMSプレイヤーのみのサービスの場合、SEO面で非常に苦しく検索流入が望めない状態となりますし、スタンダードなコミュニティサイトも存在しない(?)ようなので合わせて設置しています。
使用方法
http://bmsjs.netにアクセスします。 twitter、googleのアカウントでログイン可能で、ログインすることでプロフィールの編集やフォーラムでのトピック作成や発言、アクティビティストリームでのつぶやきなどが可能となります。将来的にはユーザ登録することでランキングに参加できるようにする予定です。
もちろん、ユーザ登録なしにプレイすることも可能です。その場合はメニューの「Play BMS」をクリックするかhttp://bmsjs.net/bms/にアクセスしてください。選曲後、プレイが開始されます。現在はPCのキーボードのみ対応しており、ターンテーブルがShiftキー、白鍵が左からZ、X、C、V、黒鍵が左からS、D、Fに対応しています。（将来的にはGamapadAPIで専用コントローラに対応する予定です。）。
遊び方についてはこちら(http://bmsjs.net/how-to-play/)も合わせて参照してください。
推奨ブラウザはchromeです。楽曲の再生がカクつく場合は、お手数ですが、「他のタブをすべて閉じる」、「ブラウザを再起動する」などを試してみてください。パフォーマンスについては随時改善していく予定です。
現在の登録曲の中のお気に入りは「AVALON」です。ぜひ遊んでみてください。（少しまだバグってますが）
なぜ作ったのか
「ハード屋だけどソフトをバリバリできるようになりたい」ってのがスタートでした。が、最近は「趣味グラミング楽しー」ってなってて何が動機なのか分からなくなりつつあります。ただ、本業にフィードバックできるものも非常に多く、やってみてよかったという思ってます。（趣味グラミングでCoffeeScriptを書いたあと本業でCを書くとゲンナリするときもありますが・・。）最近はElectronやNW.jsを使って、USBやRS232C通信をするデスクトップアプリケーションもさくっと作れちゃうのでWEB技術を仕様した趣味グラミングは組み込みハード屋さんにもおすすめです。
少し話しがそれましたが、そんな状況のなかBMSを題材にしたのは、ふと「enchant.jsでブラウザで動くBMSプレイヤー作れそうだなー」とぼんやり思ったのと、ブラウザで動くプレイヤーができれば以下のような問題を解決できるのではないかと考えたからです。
- BMSプレイヤーのデファクトスタンダードであるLR2(LunaticRave2)がmacで動かない ※1
- 曲データの管理先が一元化されていない
- 曲データはローカルに展開するのでマシンのストレージを圧迫する
- これ！といったコミュニティサイトがない？（あったら教えてください)
※1 wineで動くけど
ちなみに自分の中ではBMSって5腱の「BM98」で完全に止まってたんだけど、もう一度遊んでみたいと思ったのも理由の一つです。 (なので腕前はひどいですし、界隈のこともこれから勉強しなければなりません。)
製作について過程や技術的なところ
構成
- サーバ ：さくらレンタルサーバスタンダード
- CMS ：wordpress
- DB ：MySQL
- ゲーム : cocos2d-JS
ゲーム側の実装
まずはenchant.jsで簡単なプレイヤーを作ってみました。
これは思いの外、2週間くらいでさくっとできて一番シンプルな譜面は動くようになりました。
プロトタイプがさくっとできたので「簡単じゃーん」と思ったんですが、実装を進めると躓きまくりでした。 まずは仕様理解が困難であったこと、BM98で時代が止まっていた自分にとっては「えー！そんな動きすんの？！」ってのが結構ありました。仕様も増改築を繰り返した老舗温泉旅館のような佇まい。
とか
を参考にしながら進めました。
更に実装が進むにつれパフォーマンス面での問題が出てきました。描画スプライトや再生音源が増えると自身のマシン(MBA 11-inch, Mid 2011 4GB core-i5)ではカクカクになることが多くなり、GCを極力抑えるなど工夫はしましたが今後のことを考えenchant.jsからcocos2d-JSに乗り換えました。
以前も紹介しましたが、GCについてはこのへんが勉強になりました。
あとcocos2d-JSとenchant.jsのパフォーマンス比較を載せときます。
Cocosjslite vs enchant by bokuweb
※ coscos2d-JSではWebGLが使用可能なブラウザで、cc.spriteBatchNodeを使用すればもっと差がでるかと思います。
cc.spriteBatchNodeを使用すると「一度の描画命令で子ノードが全部描画できる」らしいです。バッチ描画という仕組みらしいですが詳しいことはわからんです。
またこういったリッチな表現が簡単にできるのもメリットです。
Cocos2d-html5 Hello World test
coscos2d-JSにすることでパフォーマンスはかなり改善しましたが、再生音源の多い曲ではまだカクつきが見られますので要改善です。とはいえ、簡単な曲であれば比較的安定するようになったので一旦ここでα版としています。
ゲーム側のテスト
”スプライトやレイヤーを作ったらテストを書いて動かす”というのを繰り返しました。（テストをさぼってるとこも多いですが・・。） 趣味グラミングだと本業が忙しくなったり、モチベーションが低下したりで放置した際、前回まで何をやっていたのかさっぱり分からなくなるので小さく作ってテストするよう意識しました。趣味グラミングに限らず当たり前かもですが・・。
テストにはmochaアサーションにはchaiを使用しています。
どうするのがベストか分かりませんでしたが、テスト毎にテストシーンを作りテスト対象を配置し、挙動を確認しています。
以下はnoteスプライトのテスト一例です。
ビルド後test/runner.htmlをブラウザで開くと以下のようにnoteスプライトがテストできます。
また、TravisCIからはphantomjs上でテストを実行するようにしており、(gulp-mocha-phantomjsを使用。)gulp test※でテストが走るようにしました。mocha-phantomjsではキャプチャすることができるので、今回の場合以下のようなキャプチャが取れます。
※ gulpfileについては後述
キャプチャの差分を自動で検知するようにできれば効率のよいテストができるかもしれません。
デザインについて
Design Templates - Fonts - Logo - Icons | Customizable | GraphicRiverで素材を買ってPixelmatorでごにょごにょしました。素人にはデザインはきついです。移植したいスキンがある方や、オリジナルスキンを作りたい方いませんかね。大歓迎です。
サーバー選定
最初はVPSにする予定でしたが、それらを０から勉強してる内にモチベーションが枯渇する気がしたので、今回はさくらのレンタルサーバスタンダードにしました。BMSファイルが一曲数十MBになるので転送量が一番ネックになると思いましたが、さくらのレンタルサーバスタンダードの場合転送量の目安が80GB/日なので、ひとまずは大丈夫かと思います。もし転送量が上限を超えそうな場合はCloudFront等検討しようと思っています。
サーバー側の実装
サーバー側はwordpressを使っています。SNS機能はbuddypressというプラグインで実現しています。
buddypressについては最近公開された以下の記事が参考になります。
「サーバー側もNode.jsで実装して・・・」とも思いましたが、今回のメインはそこではないので、極力手を抜いてゲーム側を触る時間をつくりました。
なのでサーバー側はほとんどコーディングしていません。デザインも「KLEO」という有料テーマを使用しています。（高かったですがそれに見合うクオリティだったと思います。）
参考までに自分で入れたプラグインは以下のような感じです。
- Akismet
- Gianism
- Jetpack by WordPress.com
- PHP Code Widget
- WP-DBManager
- WP Social Bookmarking Light
- WP Super Cache
α版のリリース
プロトタイプを作ったのが去年の12月末だったので丸8か月が経過してしまいました。 現状でもメニュー画面などガタガタですし、課題が山積みで生煮えですが、α版として公開いたします。 なぜなら僕のモチベーションが0になりかかってるからです。
ゲーム側のソースはこちらで公開しています。
ライセンスは最終的に画像データ(resディレクトリ以下)を除いて※AGPLなどにする予定ですが、現状はCC BY-NC-ND 4.0にしています。※画像データは購入した素材から作成したものであるため。
余談
Gulpfileについて
gulpfileはこんな感じ。
gulp watchしておくとsrc/*.coffeeに変更があった場合、watchifyで差分ビルドし、ディレクトリのトップにmain.jsを生成します。（cocos2d-JSはmain.jsがエントリポイントのため）
あとgulp testでphantomjs上でテストが走るように設定しています。
Androidアプリについて
cocos2d-JSを使用する利点としてはAndroid/iOS向けビルド※ができることが挙げられるんですが、実際にビルドして自分のスマホ(XperiaZ)でプレイしてみるとカックンカックンで話になりませんでした。
音源の再生がないとヌルヌル動くんですが、音源の再生を伴う場合、複数の音源のロードと解放を繰り返すことでGC発生しまくってるんじゃないかと思います。たぶん。iOSはシミュレータでは試しましたが実機では試していません。シミュレータではいい感じに動いていました。
※現在のバージョンはAndroid/iOS向けビルドできない状態です。
TODO
残作業は山のようにあるけど、必須で優先度高いのは以下。 意見を取り入れながらプチプチつぶしていきたいです。 その他「先にこれやってくれ」ってのがあったら、twitterや楽曲追加要望・仕様変更・提案フォーラムなどでご連絡お願いいたします。
- ランキングの実装
- 専用コントローラ対応（GamePadAPIでなんとかなる？）
- AutoPlayの切替(AutoPlay動作は実装完了しておりAutoPlayボタンの配置)
- ロングノート対応
- ランク判定
- ハイスピード対応
- パフォーマンス改善
- スキンの移植・改善
思ったこと
- デザインもうﾏﾁﾞ無理。
- ロジックが大方実装できてデザインやらなんやらに差し掛かった時点でモチベーション八割減だけどそこはなんとか気合で乗り越える。
- LR2(LunaticRave2)すごい。
- cocos2d-JSいいよ！(v3.8?(3.7だっけ？)でcocos2d-xに統合)
- あちこちで言及されていることだけど、個人でのサービス開発はモチベーションとの勝負。完璧を求めすぎず、ゆるーいくらいがいいと思う。
- あれもこれもと風呂敷を広げすぎると挫折してリリースできなかったりリリース後に機能追加・修正する気力がなかったりするけどそれは本末転倒。
さいごに
改善点やご意見・ご要望など、何かあればtwitter(@bokuweb)やbmsjsのメールフォームやフォーラムでご指摘いただけると嬉しいです。引き続き（飽きなければ）いずれはLR２レベルのプレイヤーまで持っていきたいと思いますのでよろしくお願いいたします。 最後に再度リンクを張っておきます。