暑いし、天気も悪いし、特にやることもなかったので、突然昨日の午後、ゲームを作る気になった.

突如思ったものなので、何も決まっていない…

なので、何を作るか決めることからだ…

自分自身ゲームもあまりやらないので、こういう系のゲームとか(ジャンルとか)思いつくことができず、まぁ深く考えずに自分が作ってみたいゲームを作ってみようと意気込み、以下のゲームコンセプトのwebミニゲームを作ってみようと思った.

(ゲーム作ったことないので大分粗雑なゲームになると思うけど、許してください…)

ミニWebゲームコンセプト概要

おそらくゲームのジャンルは、「タワーディフェンス」?

「同じステージ内を逃げ回りながらうじゃうじゃ出てくる全部の敵を倒すゲーム」

ってところなはず.2Dゲームです.

プレイヤーが扱える主人公は魔法使いで動作は「魔導書」と「道具」と「逃げ回る」ことのみ

さてプレイヤーの操作はこんな感じ.

• プレイヤは物理攻撃してくる敵に対して物理的反撃は何もできない
• 攻撃された場合は、「魔導書」と「逃げ回る」ことができる
• 魔導書(ノート)には、「敵の名前」を書き、「行動」も書いて操る (どっかで見たことある設定)
• 道具は、「欲しい道具」を描いて使う
•  敵を攻撃するのはあくまで敵.敵に裏切らせて戦わせるゲーム

こういうゲームなんて言うんだろう…

ゲームシステムに用いる技術概要

webは作ったことあるけどゲームのために何かを作ったことはそういえばない…まぁゲーム関係のライブラリを使ってればなんか形になるだろと、これまた深く考えずにどういう形でシステム全体を組むか考えた.

上のコンセプトを実現するために必要な技術をまず列挙

・魔導書に書かれた内容を認識する

OCRというより手書き文字認識が必要.あまりサーバに負荷をかけたくないのでclientサイドで完結するようにしたい.いいものを見つけたかったけど、今回見つけたのは、

• tesseract.js
• ocrad.js

の二つ.他は見つからなかった….なぜこんなにも手書き文字認識流行りなのにいいのないんだ…
tesseractはかなり遅い気がする. ocradはtesseractよりも手書き文字認識用なはずなのに精度が低い気がする.どうやらGoogle Cloud PlatformにもBeta版でHandWritten recognitionってのがあるみたいだけど、うーん…

WebページとかでOCRや手書き認識できるようにするJavaScriptライブラリ探してます…

・描かれた絵を描いた内容を認識する

描かれた絵がなんなのかを認識するのは、以下の投稿でも書いているQuickDrawと同じ技術が必要.100個しかできないけど、そこまで難しいものを作るつもりはないので、今回はこれでいいかも.本腰入れるときは、QuickDrawの公開されているもので訓練する必要がありそう.

Googleの落書きするQuickDrawのサンプルとかデータセットとか

・ゲームを用意する

特にこれに関してはこだわりが無かったのだけど、今回はPhaser3ってのを使う.

2Dゲーム用のライブラリとして初めて使うのだけど特にいいことあるんかな?そこそこ人気っぽいので選んだだけで特にこだわりはなし.

https://phaser.io/phaser3

さてゲームを作るぞ!

ということでGithub Repositoryも作った!

https://github.com/UrusuLambda/SpellBookChildren

 

全体としてはこんな感じで作りたい(使うものだけ決めた).結構シンプル?特にサーバ側は全くNode.jsである必要ない… staticなファイルの送受信しかしないし、もっとチープなものでよいはず.

古い人間なのと今回UIとかあまり頑張る必要ないのでReactもAngular.jsも使っていない.JQueryを使っています.今時使わないんですかね?

何か追加で実装したくなったら設計見直しだな.

現状の進捗状況

まだ必要なものをごった煮の状態でつなぎ合わせたところまで…

どれもサンプルコードを一つの画面に押し込んだだけ.全く協調して動いていない.

上側がゲーム画面で下側に操作画面.

下左側が魔術書、下右側がスケッチブックになっている.

それぞれの認識結果が下のグレーの部分に表示されている.

左側の絵はOCRADを使っているけど認識結果はそこそこ.

右側の絵は扇風機描いてファンと判定されている.

各実装について

手書き文字認識している箇所

この部分で2200msに一度OCRADを行ってスペルの認識をしている.OCRを行っているのはこの部分だけなので大分コード的には楽だ. Tesseract.js を使ってもそこまで手間は変わらない.

お絵描きのキャンバスを用意している箇所

これがお描きする場所を用意している部分.これも比較的簡単.canvasでマウスがupになったときにスペルの認識を行うようにしている.ここらへん特に工夫なし.

TensorFlowを使ってスケッチの内容推定している箇所

できた結果はresult-txt-picのところに打ち込んでいる.上位5個の結果を入れている.ここらへんも元のソースコードほぼまんまでとりあえず持ってきた.サンプル状態だけど少しずつ変更していこう.

おわりに

とりま下準備はできた.全く動いていないけど、ここまでできていれば一旦よか.

https://urusulambda.github.io/products/spellbook.html

上に作業成果物を置いていきます.

来週以降も継続して作っていきたいな.