東方紺珠伝 スコアテーブルの製作 1

最近製作を始めたWebサイトについて。

東方紺珠伝 – スコアテーブル
http://th15.imo-tikuwa.com/

これは今年の夏のコミックマーケットにて同人サークル「上海アリス幻樂団」様より発売される「東方紺珠伝 ~ Legacy of Lunatic Kingdom.」のスコアアタックの補助を行うことを目的としたWebシステムです。
現在は公式サイトよりダウンロードできる体験版に対応しています。

機能(できること)

  • スコア情報のチャプタークリアごとの登録
  • スコア検索

スコア情報のチャプタークリアごとの登録

1
スコア情報の登録機能です。
スコアデータの入力部分にはHandsontableというExcelに近い入力を実現するプラグインを使用しました。

また、スコアデータをキャプチャからせっせと書き写すのは大変時間のかかる作業であったため、スコアデータが表示されているキャプチャ画像をアップロードすることで、画像から数値を認識する仕組みの構築を行いました。当初tesseract-ocrという画像認識を行うライブラリをJavaにラップしたTess4Jというライブラリを使用する予定でしたが、自分の設定が甘く100%正確な値とならないことがあるため独自に実装しました。

独自の実装について(備忘録)

  1. アップロードされた画像のチェック(640px、960px、1280pxおよび画像サイズ)
  2. 数値が表示されるエリアをBufferdImage#getSubImageで切り取る。
  3. 1文字辺りの幅を算出(スコアと素点はカンマ分を引いた値を算出)
  4. 文字数分ループ
  5. BufferdImage#getSubImageで1文字を切り取る
  6. 切り取った画像の黒(#000000)、または白(#ffffff)、素点画像は青(#40c0ff)のピクセル数を取得
  7. ピクセル数がユニークになったときは、あらかじめ用意したピクセル数に対応した数値を返す。
  8. ピクセル数がユニークにならなかったときは、判別可能なキーピクセルの色を元に数値を返す。

思いつきで実装したので、だいぶ冗長なところがありますがとりあえず動作はしています(^^;
指定領域内の色を基準にしているため、チャプターグレイズとチャプターボーナスは背景が黒(#000000)もしくは白(#ffffff)な画面の場合、正常な数値が返りません。

スコア検索

スコアデータの検索機能です。
画面にデフォルトで表示されている「難易度」「使用キャラ」の他に、詳細条件のリンクをクリックし、「プレイヤー名」「備考」「期間」「並び順」を指定して検索することが可能です。

今後の更新予定

  • 同一難易度におけるスコアデータの比較
  • 登録/編集機能のバグフィックス
  • UIをまともな形に…
スポンサーリンク
GoogleAdsense



GoogleAdsense



シェアする