Heroes of the Storm のリプレイファイルを可視化したいなと思っている。
X 軸に時間、Y 軸に各ヒーローのマップ上の Y 位置をプロットしたグラフを作ったらリプレイの雰囲気がわからないかな？ と思ったので作って試してみる。
最終的には Web ページでグラフを表示できればいいと思うけど、まずは CSV ファイルにデータを出力して、それを外部ツールで表示して雰囲気を確認しようと思う。
Heroes of the Storm のリプレイファイルの解析には
https://github.com/Blizzard/heroprotocol
この heroprotocol という Blizzard 提供の Python ライブラリを利用します。
で、ヒーロー位置のマウスの位置とかから計算しないといけない、気がする。
よくわからない。次は、もう少しデータを読みこむあたりをやろうと思う。
ただ、MinionXP, CreepXP, StructureXP, HeroXP は定期的に出力されているので、これをグラフ化するのは簡単そうだ。
タワーディフェンスゲームを作っています。純粋なタワーディフェンスではなく、少し RTS 要素を加えたようなゲームにしたい。今は、自ユニットを操作するための入力処理まわりを作成中。
現在の進捗はこんな感じ。
操作まわりを作り直したら、ユニットの移動先を指定できるようになる。
そうすると、基本要素は実装できたことになる。がんばりたい。
Heroes of the Storm というゲームが好きだ。好きだけど上手くない。
なので、上手くなるためのツールを作ろうと思う。
ゲーム画面のミニマップを見るのが重要だけど見てないことが多いので、ミニマップを５秒ほど見なかったら音を出して警告するツールを作る。
使うのは視線検出デバイスの Tobii Eye Tracking 4C で、.NET で C# なアプリケーシンを実装する。
仕様としては
くらい。
まずは簡単なあたり、ゲームが始まったかどうかを検出するあたりから実装する。
最初の実装内容は
を実装する。
で、とりあえずフォルダがあるかどうかを検出して状態遷移をし始めるあたりまで実装した。
いい感じだ。
次は、視線位置に基づいて音を再生するあたりを実装したい。
VTuber をやってみようと思って既存のボイスチェンジャーを調べてみた。
そしたら自分でも作ってみたくなったので、作ってみる。
まずは、マイクの音を wav ファイルに出力するプログラムを作ろうと思う。
開発言語は .NET の C# で、マイクは手持ちの UAB-80 を使う。
NAudio を使うことにしたので nuget でインストールする。
NAudio のページに録音のサンプルがあったのでそれを元に Console アプリを作る。
https://github.com/naudio/NAudio/blob/master/Docs/RecordWavFileWinFormsWaveIn.md
で、こんなソースコードでマイクからの入力を wav ファイルとして録音できた。NAudio すごい便利。
class Program
{
static void Main(string[] args)
{
var waveIn = new WaveInEvent();
var writer = new WaveFileWriter("output.wav", waveIn.WaveFormat);
waveIn.DataAvailable += (s, a) =>
{
writer.Write(a.Buffer, 0, a.BytesRecorded);
if (writer.Position > waveIn.WaveFormat.AverageBytesPerSecond * 30)
{
waveIn.StopRecording();
}
};
waveIn.RecordingStopped += (s, a) =>
{
writer.Dispose();
waveIn.Dispose();
};
Console.WriteLine("Start");
waveIn.StartRecording();
System.Threading.Thread.Sleep(5000);
waveIn.StopRecording();
Console.WriteLine("Stop");
}
}
次は、録音した Wave ファイルのデータを可視化して、他の人の声と比べてみようと思う。
気楽に参加できるのと自分への〆切になるので毎年 マスコットアプリ文化祭 に参加しています。 そして、毎年のことなのですが「何作ればいいんだよ」と思ったりします。 もっと自由な発想力がほしいです。
とりあえず、思ったことを書いていこうと思います。
まず、これが今年のロゴです。
アメブロを更新しました。 『マスコットアプリ文化祭2017』 #マスコットアプリ文化祭 #キャラhttps://t.co/CRJlE4Y1R8
— ほんだみちひろ＠イラストレーター (@tanubom) October 2, 2017
ロゴの後ろにキャラクターが描かれてますね、とても可愛らしくて私は好きです。
ただ、このキャラクター達はここだけの登場で、協賛キャラクターでも素材配布もないのが私を悩ませます。
「協賛キャラクターは後から増えるかもしれないし、人数も多いからオリジナルキャラクターを描きましょうよ」
っていう大人の会話があったんだろうか、などと思わされました。
そもそも「マスコットアプリ文化祭」というタイトルなのに、協賛マスコットでなくても参加可能だし、アプリでなくても作品応募可能なので、深く考えなくていいんだよー、と思うことにしました。
で、各協賛サイトをめぐりながら思ったことを書くのは、また次の記事にします。
体調がよくなってコーディングできる状態になったので HTC Vive のコーディングを開始した。
ってあたりを調べながらやる。
Unity の Update(), FixedUpdate() のどっちを入力に使うべきかは検索したら下記ページがでてきた。 Google さんありがとう！
http://programming-ios.com/unity-update-fixedupdate-difference/
理解した内容を１行で書くと「Update() フレーム描画ごとに呼び出されて、FixedUpdate() は物理演算のときに呼び出されるから、物理演算の処理だけ FixedUpdate() に書こうね」だった。
SteamVR Plugin の SteamVR_TestThrow.cs のサンプルで入力処理を含めて全ての処理が FixedUpdate() に記述してあった理由はよく理解できてない。まぁ、気にせず進めようと思う。大丈夫、まだサンプルを作ってる段階じゃないか。動けばオッケーさ！
SteamVR の Prefabs フォルダにあった [CameraRig] をシーンに追加して、その Controller(left) / Model に下記 C# スクリプトをアタッチしたら動作した。
https://bitbucket.org/satofumi/vr_quest/src/21e36a750cf38cd01e5cbcabb862371682d1d519/vr_quest/Assets/Samples/ControllerSample_PrintInput.cs?at=default&fileviewer=file-view-default
SteamVR Plugin の使い方については下記ページを参考にした。
https://framesynthesis.jp/tech/unity/htcvive/
「すけすけゴーグルくん」アプリの記事を見て「あ、これなら私にも作れるかも」って思ったので作り始めた。 画像処理の勉強も兼ねようと思ったので、「実践コンピュータビジョン」(O’REILLY) を見ながら進めた。
まず、どう作るか考えた。
ーーーー ← メガネのフレーム画像
ーーーー ← カメラで取得した画像
ーーーー ← レンズ部分に透過画像をはめ込んだ画像
ーーーー ← メガネのフレーム画像
ーーーー ← カメラで取得した画像
ここまでで、透過前、透過後、そしてメガネの画像が必要そうなのがわかった。
で、必要な素材を「いらすとや」さんで探してきた。
いらすとや さん、ありがとう！
次に、適当な Web カメラがないのに気づいたので、最寄りのビックカメラで一番安いやつを買ってきた。
なんだろな、ここまで準備がガバガバだと、「本当に思いつきで始めたんだなー」って自分で客観視できて良いです。
私が勉強していく過程でわかったこととかを説明し直すのは面倒なので、作業途中のスクリーンショットだけ貼っていきます。
同じ画像で SIFT 特徴量を用いたマッチングをしたはずなのに、対応位置がずれてショックを受けたときのスクリーンショット。
ふて寝した後で見なおしたら、あっさり修正できたときのスクリーンショット
ホモグラフィーとか RANSAC を使って、モニタをカメラで撮った画像に対して検出できた画像の枠を青色で描画してみたときのスクリーンショット。 それなりに動作してちょっと嬉しかった。
最後に、眼鏡内に透過後の画像をはめ込むようにして、実際に動作させたときのスクリーンショット。 縮小してない画像に SIFT を適用して処理が激遅だったり、アフィン変換が RGB 画像だと失敗する理由がわからなくて、透過画像が白黒になったりしている。
とりあえず、動作したことにした！
今回の記事のソースコードとかは、以下にあります。
https://bitbucket.org/satofumi/transparent_glasses
だいたい実現したいことは実装したので、細かなネタも含めて解説していきます。 前回からいろいろ実装したあたりを書くべきな気がしましたが、だいぶん忘れたので総集編っぽくゲームを起動してからのネタを記述していきます。
以下、基本的にネタバレしかないので、未プレイの人は、とりあえず遊んでください。
http://hyakuren-soft.sakura.ne.jp/ZundaClicker/
では、タイトル画面から解説していきます。
最初はこんな感じに、どこにでもありそうな無難なタイトル画面だったのですが、
「ずんだ餅が降ってくる理由とか意味がわからない。 なんで？」 というコメントをもらったので、プロローグが表示されるようにしました。
プロローグの文章は、時間でスクロールするようになってて、ずんだ餅をなぜ穴に落としているのか、東北ずん子たちは何をしているのか、の説明が表示されます。 30 分くらいで考えた文章としてはいい感じの説明になっていると思います。 なので、遊んで確認して見て下さい。
（タイトル文字列の「Zunda Clicker」が背景と重なって読みづらくなったのは気にしないことにしました。 「Zunda Mochi Clicker」じゃないの？ ってあたりもです）
では、東北ずん子のスキルを説明していきます。 このゲーム中では３姉妹とも詰まったずんだ餅を穴に落とすためのスキルを持っているわけですが、ずん子のみ姉妹と違うスキル、そう、ずんだ餅を食べることができる、というスキルを持っています。 その理由は、ずんだ餅を食べる画像素材があったのはずん子のみ、だからです。（見も蓋もないな…）
このスキルがあるがために、ずん子は他の２人よりもスキルが発動しにくくなっています。 それはずん子に実装した処理ルーチンが
ずんだ餅が地面にあれば、そこに移動して食べ始める
↓
ずんだ餅が詰まっていればスキルを発動する
↓
適当に移動したりする
という優先順位になっているからです。
しかも、地面にあるずんだ餅を食べ終わるとずん子は寝ます。 寝てる最中はスキルが発動しないので、なおさらスキルが発動しにくいのです。 スキル、２つもあるのに…。
まぁ、気にせずその２つのスキル「ずんだアロー」と「もちもちジャンプ」について説明しましょう。
文字通り、普通のもちを ずんだ餅に変えてしまう技なわけですが、降ってきてるのは最初から全部ずんだ餅なんですよね。 じゃぁ、このスキルをどう表現すればいいか、そう、簡単です。 普通の餅がなければ召喚すればいいじゃない、ってやつです。
実装としては「ずんだゲート」から餅が出現するようにして、矢が餅に衝突したときに、その餅を消して、新たにずんだ餅を生成するようにしています。 ときどき、生成されたずんだ餅の速度が早すぎて壁を突き抜けることがありますが、物質が変換されてずんだになるレベルのエネルギー量を考えると、それは当然のことだと自分に言い聞かせながら作ってました。 みなさんも、そう理解してくれると助かります。
このずん子が壁の中に入って餅を落とすスキル、これは実は「ずんだアロー」より先に思いつきました。 ずん子にスキルが２つあるのは「もちもちジャンプを実装したけど、ずんだアローを実装しないわけにはいかないよなー」って悩んだ結果です。
で、ずん子の足先にずんだ餅や壁との当たり判定のための透明な円があるわけですが、ここだけずんだ餅がない空間ができてます。 上の画像では足先に透明な領域がありますが、「見えるべきは足先ではなくて太ももではないか！」って気づいたので、透明な領域が太ももになるように最新版では調整しなおしました。 自分で気づけてよかったと思っています。
修正後
あとは、ずん子がジャンプしたときに茶色の壁を飛び越えて左右端から地面に落ちてしまうことがあったので、ずん子専用の見えない壁「ウォール・ずん子」が配置されています。 この壁のおかげで、ずん子の進撃は防がれているのです。
それから、みなさんお気づきだと思いますが、ずんだ餅に埋もれたずん子がときどきジャンプするのは呼吸をするためです。
最後に「もちもちジャンプ」で穴に落ちたずん子がアプリ外に落ちてくるやつ、作る前は「このネタ最高じゃね？！」って思ってたんですけど、作ってみたら案外普通でした。 面白さを作る前に評価するのは難しいですね。
パワーアップ前後で威力が全然ちがう「きりたん砲」ですが、最新版では爆発と同時に画面外に飛び散ったずんだ餅をデスクトップに描画するようにしました。
ずんだクリッカーを起動したまま開発してて、ときどきずんだ餅がデスクトップに飛び散るのを見て「あぁ、動作させてるんだっけ？」って思ったりしました。 現状ではアプリ外に出たずんだ餅ごとにプロセスを起動してるのですが、複数個のずんだ餅を描画する １つのプロセスを起動する方が負荷が少なかったなー、と反省しています。
それから「きりたん砲」のカットインが「焼き払え！」って感じのポージングなのは大変お気に入りです。
なんというか「ずんだ口寄せ」っていうスキルの名称だけは決まったけど、どういう演出にすればいいかが全然決まらなかったです。 そのせいか、無難な作りになってしまってちょっと反省です。 ごめんね！ でも ZPS (Zunda Per Second) は大きいスキルだから許してね！
登録のボタンを押すと、本当に貯めている数だけのずんだ餅が落ちてくるようにしました。 なので、登録するずんだ餅の個数が多い場合は延々とずんだ餅が落ちてきます。 それを見てると変な笑いがこみ上げてくるから不思議です。
それから、左下のずん子は固定せずに山盛りずんだ餅の中腹に配置して、落ちてくるずんだ餅に流されるように変更しました。 いい感じです。
後から見なおしても、この処理を実装するときに作ったチケット（ソフトウェア作成タスクを管理するもの）は、意味不明な方に属すると思います。 （アプリ自体はネタを追い求めてますけど、ソフトウェアの開発自体は真面目にやらないと動作しないのでちゃんと管理してるのです）
作ってて楽しかった。
ありがとう。
やる気になったら登録されたずんだ餅の個数をグラフ化するあたりを作ります。
前回までで、
こんな感じだったアプリをゲーム化するべく実装を行っていった。 今回も淡々と何をやったか紹介します。 興味があればソースコードを見てもらえればと思います。
で、基本的にネタバレの嵐なので、まだ「ずんだ餅クリッカー」で遊んでない方はご注意ください！
ずんだ餅が詰まったときに、きりたんが「きりたん砲」を撃って詰まりを解消したら面白いんじゃね？ と思ったのがきっかけです。 「面白いかも！ って思ったら作ってみる」が、今回の合言葉です。
まずは、きりたんが穴の下に移動し、きりたん砲を撃つポーズを取るようにしました。
次に、 Detonator Explosion Framework を適用しました。
なかなかいい感じだと思います。 実際には爆風エフェクトが Sprite2D より手前に表示されたり奥に表示されたりして、それの修正に時間がかかっています。 結局 Detonator 側の C# スクリプト内に Renderer の layerSortingName を設定するコードを追記して解決しました。
このスクリーンショットなどは、姉たちが寝ているなかで「きりたん砲」をぶっぱなす感じが気に入っています。
つぎに、爆風だけだと微妙なので、Rigidbody2D を適用した透明なアセットを用意して爆風と同時に穴の下から上に移動する速度を設定して配置しました。 これで、爆風と同時にずんだ餅が微妙に飛び散って詰まりが解消されました。
で、連続で「きりたん砲」を撃ち続けると、餅が飛び散って積み上がってしまい、ずんだ餅が落ち続けてしまうのが確認できました。 これに対処するために、地面に落ちたずんだ餅はずん子に食べさせることにする決心をしました。 よろしくね、ずん子ちゃん。
次に、カットインを作成しました。 「きりたん砲」を使う前に表示することにしました。 このカットインの背景素材も「ぴぽや」のものを利用しています。 いい感じです。
あ、このあたりのキャラクターが移動したり砲撃するあたりの処理はコルーチンで実現しています。 わぁい、コルーチン。 私、コルーチン大好き！
次に、ずんだアローのカットインだけ先に作ってみました。
で、カットインの表示が重なると「ぎりだん砲ー」になるのが確認できました。 スキル発動は同時に起きないようにする必要があるのがわかりました。
あとは、ノリと勢いだけでずんだ餅のカットインも作りました。 いい感じです。
地面に落ちたずんだ餅を食べるあたりを、いろいろどうにかして実装したときのスクリーンショットです。（たしか
それから、そろそろ紹介ページでも作るか、って思ってて作った悪循環コラがこれです。 インパクトが不足しているのでボツにしました。
スキル「もちもちジャンプ」を実装したり。
タイトル画面を作ってみたり。
スキル「ずんだ口寄せ」を実装したり。
タイトル画面にロゴを適用したり。
どういう実装にするか決まらなかった「ずんだアロー」を実装したり。
スキル発動までのクールダウン時間を表示するためのアイコンを右側に配置したり。
とかをしました。
まだまだ完成じゃないので、引き続き実装してます。
つづく！
このアプリのソースコードは、下記プロジェクトで管理されています。
https://bitbucket.org/satofumi/zunda_clicker
以前に作ったずんだ餅を落とす脱穀機シミュレータを、ちゃんと Google Play とかでリリースすべく作り込みを始めた。 淡々と変更する様子のスクリーンショットを貼り付けながら、何を変更したのか簡単に書き出していく。
ずんだ餅が落ちる速度 zps (Zunda Per Second) を表示するようにした。
クリックしてない間に落ちるずんだ餅の数を表示するようにした。（右下）
背景画像を適用した。 草原だとずんだ餅の色と同じなので雪原にした。
（素材は東北ずん子のもの以外は「ぴぽや」の物を使ってる。
ずんだ餅が画面下まで落ちていくのは違和感があったので、穴を描画してそこにずんだ餅が落ちるかのような表現にした。
穴の画像と、穴の下部分の画像を用意して実現した。
穴の画像。これを左右に伸ばして使ってます。
↑ここに穴の下の部分が白色で、それ以外が透明な画像があります。（見えませんが
次に、キャラクターを配置しようとして東北ずん子ちゃんの画像を取り込んだ。
取り込んだら、ちょうど足が穴にはまっていて吹いた。
他の姉妹も配置した。
あと、ここまでで Anrdoid の加速度情報でもタップしたのと同じ操作になるようにしたり、ハイスコア相当の値がゲームの起動をまたいでも保持されるようにした。
今後の予定としては「ずんだ餅を 1,000 個ほど落とそう！」とかの実績を追加したり、キャラクターが動作するあたりを実装しようと思う。
タイトル画面を用意するかは、悩み中。
このアプリのソースコードは、下記プロジェクトで管理されています。
https://bitbucket.org/satofumi/zunda_clicker
