BMSをブラウザで遊べるWEBサービス『bmsjs』のα版を公開いたしました
概要
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２レベルのプレイヤーまで持っていきたいと思いますのでよろしくお願いいたします。 最後に再度リンクを張っておきます。
【WEBサービス】youtubeを使った音ゲー×タッチタイピングサービスを作ってみた【つくってみた】
あけましておめでとうございます。 2015年は頭にあるサービスをいくつか形にしたいと考えているbokuwebです。
早速ですが、2014年の秋から作っていたサービスをβ版ですが公開しましたので告知いたします。
つくったもの
どんなもの?
「typebeats」はタッチタイピングを楽しく学ぶことを目標に作成した、youtube動画の音楽に合わせてタイピングする音ゲー×タッチタイピングサービスです。
いわゆる「BEATMANIAシリーズ」や「太鼓の達人」のような音ゲーとタイピングゲームを合わせてものです。
使用技術
- 言語 PHP、CoffeeScript(JavaScript)
- フレームワーク enchant.js、 jQuery
- CSSフレームワーク Flat UI(Twitter Bootstrap)
- データベース MySQL
- CMS wordpress
- バージョン管理 Git
- WEB API YouTube Player API
制作経緯
自分はPCのを触る仕事にもかかわらずブラインドタッチが苦手です。 ゲームで練習したこともありますが、いまいち続かなかったため、楽しく続けられるものをイメージして作成しました。”これじゃタイピングの練習になんねーよ”ってつっこみは無しでお願いします。。
また、実はhttp://typebeats.com/という、２年ほど前に作成していて今回の http://cloud.typebeats.com/は次期バージョンという位置付けになっています。
開発に関して - デザイン編 -
ゲームの実装などより、デザインに多くの時間を割いています。(というかデザインができないため時間がかかてしまった、という言い方が正しい) そのわりにこれかよって気もしますが、素人なりにそれっぽくがんばったつもりです。 ゲームなのであまり地味地味にならないように気をつけました。
ただ、細かい部分などは匙を投げてしまったり、見てみぬふりをしてしまっている部分がありますので、そのあたりは目をつぶってください。（僕はゲーム部分がほぼほぼ実装されると急にモチベーションが下がってしまうようです。）
背景画像
知らない人は少ないかもしれませんが背景はhttp://graphicriver.net/で買いました。 クオリティの高い背景やゲーム用のキャラクタなどが安値で販売されています。
Design Templates - Fonts - Logo - Icons | Customizable | GraphicRiver
CSSフレームワーク
CSSフレームワークはFlat UI - Free Bootstrap Framework and Themeを使用しました。 フラットデザイン自体賞味期限が怪しいですが、やはりこういったフレームワークを使用するだけで見た目をなんとかごまかすことができます。
Flat UI - Free Bootstrap Framework and Theme
フォント
知らないひとはいないかもしれません。 M+ OUTLINE FONTS | WEB FONTSを使用させてもらっています。
アイコン
アイコンはFont Awesome, the iconic font and CSS toolkitを使用しています。 種類が豊富で使いやすい。
Font Awesome, the iconic font and CSS toolkit
ロゴデザイン
ロゴデザインにはSquarespace Logo — Squarespaceを使用しています。 簡単にそれっぽいロゴができる素晴らしいサービス。 低解像度であれば無料です。
Squarespace Logo — Squarespace
開発に関して - 技術編 -
クライアントサイド
ゲーム部の言語はCoffeeScriptを使っています。最高です。 1人でjavascriptを書くならCoffeeScriptを使わない理由はないかと思っています。(あくまで個人的な意見ですが)
javascriptで以下の記述が
$(function() { // hoge });
CoffeeScriptならこうなる
$ -> # hoge
また、フレームワークにはenchant.jsを使用しました。 以前のhttp://typebeats.com/ではフレームワークを使用せずに実装したんですが、今回enchant.jsを使用することでこんなに簡単になるのか！と驚きました。 この辺りの詳細についても機会があったら記事にしたいです。
'15.1.18 記事にしました
100行で書けるブラウザで動作するyoutube音ゲーの作り方 - ぼくのかんがえたさいきょうのうぇぶさーびす
サーバサイド
wordpressを使用しています。 ほんとはRuby On RailsやPythonなどを使用してみたいところですが、今回の本題はそこではないので使い慣れたwordpressを使用しています。oAuthやコンタクトフォームもボタンひとつで導入できるのも素敵なポイントです。
読んでませんが以下のような書籍もでていますね。
- 作者: Rakhitha Nimesh Ratnayake,プライム・ストラテジー株式会社(監訳),長尾高弘
- 出版社/メーカー: オライリージャパン
- 発売日: 2014/11/27
- メディア: 大型本
- この商品を含むブログ (2件) を見る
使用プラグインやカスタマイズなどは読んでくれる方がいそうであれば記事にしたいです。
WEB API
Youtube Player APIを使用しています。 javascriptから非常に簡単にyoutube動画を操作することができます。
iframe 組み込みの YouTube Player API リファレンス - YouTube — Google Developers
TODO
- コメント、評価機能を付ける
- パフォーマンスの改善 現状FPSが24程度しかでておりません。 公開後分かったんですが、ガベージコレクションが頻繁に走るようなつくりになってしまっているようです。 この辺の詳細もできれば記事にしたいです。
- 人気譜面一覧の追加
- コード整理して、コア部分をコードレシピ - 初心者のための簡単プログラミングレシピサイトにまとめてみたい
初心者向け簡単プログラミングレシピ投稿サイト『コードレシピ』を公開しました - あのねノート。
- 譜面作成時のタイミング調整機能の追加
ひとまず以上です。 技術部の詳細や公開後の話など機会があれば記事にしたいですね。
それでは本年もよろしくお願いいたします。
