リズムゲームWebアプリ"Stein-ferno"開発日記

最新記事へ

#1　2011/6/7

JavascriptでリズムゲームのWebアプリ「Stein-ferno」を開発する事にした。

おおまかな仕様

準備運動

本開発に取り組む直前、HTML5+JavascriptによるWebアプリ開発のpreproductionとして、
タイマー付きアナログ時計を開発していた。
JSの開発経験はこれ以外ほぼゼロ。この時計で得たノウハウを使ってStein-ferno開発に取り組む。

完成予定日は6/27。あと20日。
さて、間に合うのだろうか。

#2　2011/6/9

最初の一歩

Stein-ferno　ver0.1α
最低限の入力と出力を実装。数値がゼロに近いほど高得点。
GoogleChromeに最適化。IE9動作確認。なぜかIE7は不可だった。

ちなみに、この程度でもJSのコード部分だけで530byte。
565byteのテトリスなどには頭が上がらない。

#3　2011/6/10

リズムの抽象化

昨日作ったver0.1では、0.01秒に1回メインルーチンを呼び出して、画面を更新している。
要するに100fpsという訳。計算簡略化のため、60fpsで60四分音符/分(60bpm)のテンポにしようと思っている。

四部1拍間のリズムは、だいたい「四分音符」「八分音符」「三連符」「十六分音符」に大分される。

これ以上細かい音符は、難易度をいたずらに上げるだけのため考慮しない。
これらを基本リズムとして仕様を定めていく。
二拍三連なども、これらの組み合わせとして表現できる。


二拍三連ねえな。

さて、60fpsに対し60bpmのため、1拍は丁度60フレームである。
0フレーム目を強拍とし、各ノート(音符)の拍内の該当フレームを計算してみよう。
[0]
[0,30]
[0,20.40]
[0,15,30,45]
ここから入力精度の許容フレーム範囲を考えてみたい。
最も狭いノート間は15フレームのため、最大で前後7フレーム(15フレーム)の入力誤差を許容できる。
これ以上広い範囲を許容してしまうと複数のノートの許容範囲が重なってしまう。

Stein-ferno　ver0.2α
先日のプログラムを大体60fpsに改変した。
上記の四分音符[0]だけが延々と流れてくるだけのクソゲーが完成した。
93point以上が許容フレームである。
これなら、もう少し許容フレームを狭めたとしても問題なさそうだな。
少なくとも、この時点で難しすぎてゲームにならないといった事はない。

ちなみに現時点で既にiOSでの動作を諦めているのだが、どうしたものか。

#4　2011/6/17

「iOS対応は諦めた」と書いたが、それはJSのsetInterval()メソッドが
画面のドラッグ(スワイプ？)で止まってしまうから。
なんとかならないのか、この仕様。

Stein-ferno　ver0.3α
小節クラスを実装し、譜面表示の基礎システムを作った。
スタートボタンでゲーム開始すると表示される「0,0,0,0」という謎の数字は、
譜面データの配列をそのままアウトプットしている。
こういったHTMLを動的に書き換える処理を入れると、すごく現代的なWebページを作っている気分になる。
見ての通り、実際には全く大したことをしていないのだが。

そしていつの間にか、完成目標日の6/27まであと10日である・・・。

#5　2011/6/17

この日記とstein-fernoのコードを書くのにMS Visual Web Developerを使ってみた。
JSは書きやすいが、HTMLは微妙かな。

JSの仕様をよく理解していないため、クラスメソッドをひとつ定義するだけで
2時間もかかってしまった。
クラス定義という概念があるのかどうかが曖昧すぎて謎。これは本当にオブジェクト指向言語なのだろうか。

Stein-ferno　ver0.4α
ステージの進行に応じて譜面を動的に書き換える処理を実装。
後は実際の判定を譜面に対応させれば、ゲームとしては成立する。
ちなみに細かいことを言うと、最初の小節にはテンポメーカーとして必ず休符を配置するので、
いわゆる弱起となる。だから"第0小節目"という表記は正しい。

#6　2011/6/19

実際の譜面データに対応した判定を行う処理が、予想以上に難しかった。
今までは0フレーム目を基準としていたが、自由なフレームを基準とすると、
許容フレーム範囲が拍や小節をまたいでしまったりして、対応するため色々と仕様変更を余儀なくされた。

Stein-ferno　ver0.5β
お陰でゲームとして最低限の形にはなった。
というかもうインプット面は完成ではないだろうか。 あとはアウトプット面。このままの画面では意味が分からないので、
譜面のグラフィック表示とリズムガイドマーカーを実装する。
そして難易度別の譜面自動生成が出来れば、めでたくゲームは完成である。
要するに、残るはインターフェースとレベルデザインという訳だ。ゲーム開発っぽくなってきたな。

#7　2011/6/21

HTMLフォームボタン入力からのイベント呼び出しは、環境によっては実際のクリックからイベント実行まで
数フレームのタイムラグが発生するようだ。リズムゲームとしては致命的。
特にiOSで顕著。ただのタッチスクロールはあれだけスムーズに動くのに。
インプットの形式を考え直す必要があるな・・・。

Stein-ferno　ver0.6β
リズムガイドマーカーと譜面表示を実装。直感的に遊べるようになった。
譜面の最初の音符に枠が付かないのは、とりあえず仕様。
ちなみに現在スクリプト部分で200行ぐらい。思ったより全然書いてないな。

#8　2011/6/30

この1週間ぜんぜんコードが書けなかった。
画面レイアウトを構想していたのだが、全然はかどらない。
誰かCSSの知識はいいから、センスを下さい。

その間に完成予定日を過ぎてしまったが、 とりあえず現段階で最低限の形になっているので良しとしよう。
新しい期限は、1週間送って7/7(木)だ。
ここまでには完成させて本業に移りたい。

#9　2011/7/5

Stein-ferno　ver0.7β
デザインを大幅に整理。
見た目は一気に変わったが、実はHTMLやCSS部分はそれほどいじっていない。
簡単な手直しだけで、ここまで見た目を変えることができる、HTML5+CSS3の威力を改めて思い知った。
(ただしセンスが必要だが)

ゲームの方はライフを導入し、ゲーム性を高めた。
あとは楽譜の自動生成が完成すれば、開発は完了だ。

#10　2011/7/7

Stein-ferno　ver1.0
楽譜の自動生成プログラムが完成。
まだ変拍子には対応していないが、後のアップデートにて高難易度ステージに実装する予定。
デザインもさらに磨き、IE9での見栄えも調整した(推奨環境はGoogleChrome)。
楽譜画像も一新し、さらに休符を混じえた複雑なリズムパターンを追加した(まだ実装はしていない)

これからやること

それにしても自分では全くクリアできないのだが、難しすぎるか？
本当はコレを難易度「易しい」とする予定だったが・・・。

#11　2011/7/12

Stein-ferno　ver1.1
難易度「やや易」「やや難」追加。
「やや難」には、先日用意した複雑なリズムパターンを実装。
その他、画像をCSSで縮小しデザインを調整した。

「普通」はクリアできるようになったが、「やや難」は全然無理。
「やや難」はこっそり救済措置としてライフの最大値を上げてあるので、
簡単なリズムで確実にEXELLENTを取ってライフを回復し ライフを高く保つのが鍵となっている。
段々とリズムゲームの趣旨を外れてきている。どうしてこうなった。

#12　2011/7/16

Stein-ferno　ver1.2
スクリーンショット
iPhone対応開始。
といってもまだ画面は最適化されてないし、 #4で述べたタイマーイベントの問題も解決していない。
とりあえずiPhoneのボタンイベントがクソかつキーボードが無いので、
画面をタッチしてTAPボタンと同じ効果が得られるように。最低限遊べるようになった。
しかしまあiPhoneごときで動けば、余程ロースペックなパソコンでも正常に動作するだろう。

#13　2011/7/19

台風6号がやばい。

Stein-ferno　ver1.3
スコアボード実装。調子に乗った配置にしてみた。
こういうふざけた事を簡単にできるのがCSS3の力。

Androidエミュレータを導入して動作確認してみた。
とりあえず動くが、エミュ上では処理落ちが激しくて正常なプレイは不可能だった。
実機でもこんなにもっさりするのだろうか。

さてやりたい事が大体終わった(スマホ対応はまだ微妙だが…)ので、 これにてstein-fernoは完成としたい。
予定よりも随分伸びてしまったのが反省点。
のんびりし過ぎたが、まあ趣味でやるプログラミングなので問題はない。