NieRのメニュー画面をReact + Reduxで写経する
3月です。 4月から新生活ということで研究やインターンが終わってしまい、プログラミングをやっていく場と目的が取り上げられたので自分のことしか考えていないコードを書くチャンスです。 ということでNieR Automataのメニュー画面をReactで実装してみました。 ゲームUIをブラウザで動くように写経する活動、あまり見られないですが結論からいうとめっちゃ楽しいので体験として良いです。
様子
装飾が加わった pic.twitter.com/WRsTSlL0Nm
— aodnawg (@aodnawg) 2018年3月7日
動いている様子はここから。
IEでみていないけどIEでみると多分八つ裂きにされます。
Safariですらビミョーな動作をする。chromeでやっていきましょう。
https://aodnawg.github.io/nier/public/
github。コードは汚い。
使用技術
ReactとReduxを使っています。
Javascriptは話題のWebpack4を使ってコンパイルしています。 なんか速くなったらしい(何もわからない)。
見た目の調整はSassで記述してこれもwepbackでコンパイル。
アイコンや図形はすべてSVGで書いている。
直線や円形は直接JavaScriptで計算してるけどカーソルとか装飾的な箇所はAffinity Designerで書き出した。
React、SVGを直接DOMとしてpropsで値をダバダバ流していけるのでとても楽しい。
メニュー画面を開くときに三角形がランダムに表示される演出がめっちゃ好きで、これはまた別記事で実装方法書きたい。
所感
資料はネットにたくさんある。
プラチナの開発記事も含め、外部のインタビューにもたくさん資料は転がっている。
こういう記事がゴロゴロと転がっており、写経のためのヒントは用意されている。
Reduxめっちゃ頭使う
データ構造を考えるのがめっちゃ苦手で、リアルタイムな状態をどのように構造化するかを考えるのってめっちゃ頭を使う。
このあたりをナメまくって実装を進めたので本当にひどいデータ構造になっている。
またReactの方もこのデータ構造に依存しまくった書き方にしているので、データ構造の変更に対応するのにめちゃくちゃ時間がかかってしまう。ボロッボロな地盤の上にReactが頑張って動いている感じになってしまった。
Reduxというより依存度が高いデータ構造はちゃんと設計しないとあとで死ぬ。
どんなページを持っていて、現在どのページを表示しているか?とかを適切に表現する方法とか書いてある記事があったら読みたい。
また変更を加えるときにImmutableに行わなければならないから
うっかり破壊的な処理をしてバグに気づくのに時間がかかったりしてしまった。このあたりは慣れかな。
頭を空っぽにしてコードを書きたい。
アニメーションの非同期処理がむずい
たとえば、メニュー画面を表示したあとに文字のタイピングアニメーションを表示させる、など非同期に処理が続いていくときに困った。 Reduxを使うときに非同期処理をさせるライブラリとしてよくredux-thunkとredux-sagaが挙げられるが今回はsagaを利用した。名前がカッコイイので。
アニメーションの非同期処理についてはDenaの開発ブログがよかったです。
おしまい
おしまい。UI写経楽しいのでおすすめ。
NieRのタイピングアニメーションをJavaScriptで再現した
NieR Automata
キャラクターデザイン、マップデザイン、音楽、ストーリー、コンセプトアート どれをとってもサイコーなゲームだけど、UIデザインもサイコーで凝った作りをしている。
【NieR:Automata】2B 全武器モーション鑑賞動画 All actions
モーションも最高。もはや総合芸術と言える。
プラチナゲームの開発ブログもサイコーな記事がとっても多く、NieRにおけるUI開発が取り上げられた記事も公開されている。フラットデザインを基調にしつつも単調にならないように楽譜をモチーフとした装飾を散りばめる工夫などが述べられており、めっちゃ読み応えがある。読め。丁寧に英語翻訳されているのもある。外国人も感謝して読め。
余談だけど同じプラチナのサイコーなゲームBayonettaのUIも公開されているので読め。
『ベヨネッタ2』のUIデザイン | Bayonetta2 開発ブログ
ちなみに設定資料集には一切UIについての言及はなかったのでウェブページにしか参考資料がない。 各種アイコンなど眺めたかった..。
文字列のタイピングアニメーション
UIパーツにはそれぞれアニメーションが実装されており、それらを眺めるだけで楽しい。 それで今回気になったのは、メニュー画面展開時におけるタイトル文字表示のアニメーション。
なるほど pic.twitter.com/DmEv8Sg1OZ
— aodnawg (@aodnawg) 2018年3月4日
みたことのないタイピングの仕方をしている。最高。 これ、毎回固定パターンで表示しているのではなく、毎回ランダムに文字を表示していて、例えば「ITEM」という文字列を表示するとき、以下のようなパターンで文字列が変化していく。
パターン1
I T I IE IM IT ITI ITM ITE ITEI ITEM
パターン2
I II IM ITI ITE ITT ITEI ITEM
たぶんメニュー画面を展開する時にランダムにこれらの文字列を作成していると考えられる。
YouTubeで実況動画をquick timeでキャプチャーしてコマ送りにして確認した。 ちなみにquick timeの画面収録は概ね60fpsだけどyoutubeに上がっている動画のfpsがよくわかんなかったのですべてのフレームを拾いきれたかどうか定かではない。 あとコマ送りするときにtouch barが役に立ってよかった。touch barが初めて役に立った。
NieRタイピングの変化を作成するアルゴリズムを考えてみる
完全に再現するにはキツいけど雰囲気だけでも実装してみよう。
- 文字列(e.g. ITEM)を取得する
- 配列 result を宣言する
- ループスタート ( i = 0 で初期化 )
- 文字列 i + 1 番目の文字を取得 (i=2の場合、「E」)
- 文字列 0 ~ i 番目 までの文字列を取得する ( i=2の場合、「IT」)
- 文字列からランダムに1文字取得する
- 配列 result に 2.で取り出した文字列と3.でランダムに取得した文字を連結させる(IT + ?)
- と3.の文字が等しくないならばこのループの3.に戻る
- iをインクリメントする
- iが文字列(e.g. ITEM)の長さになるまでループを繰り返す
- 配列 result を出力する
コードで表現するとこうなる。
call(string) { const result = []; for (let i = 0; i <= string.length - 1; i += 1) { const char = string[i]; const current_string = this.string.slice(0, i); const max_type = 3; // タイピング回数を制限する。たぶんNieRとはこのあたりの実装が全然違う let typed_times = 0; let is_equal = true; while (is_equal) { const random_char = get_random(string); // ここには書かないけどランダムに文字をとってくる関数を自力で実装 const typed = current_string + random_char; result.push(typed); typed_times += 1; if (random_char === char) { is_equal = false; } if (typed_times === max_type) { is_equal = false; result.push(current_string + char); } } } return result; }
文字列が長くなるにつれてタイピング候補が多くなり、配列が長くなる可能性があるため max_type
でタイピング回数を制御して早い段階で while
ループから抜け出せるようにする。
これで入力をITEMにするとこんな感じに出力される。
ここで出力された配列を順番に表示してNieR UI風のタイピングを表現することができる。 setTimeout関数などを使うとよい。
結果がこちら。
— aodnawg (@aodnawg) 2018年3月5日
See the Pen NieR Typing Animation by mortuary (@mortuary) on CodePen.
おしまい
ゲームUIをJavaScript、CSS等ウェブ技術で表現するのはめっちゃ面白くて、めっちゃ面白い。
1月読んだやつ
1月に読んだ本.修士論文を書いていたのであまり読めていない
ミレニアム5 復讐の炎を吐く女
- 作者: ダヴィドラーゲルクランツ,ヘレンハルメ美穂,久山葉子
- 出版社/メーカー: 早川書房
- 発売日: 2017/12/19
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
- 作者: ダヴィドラーゲルクランツ,ヘレンハルメ美穂,久山葉子
- 出版社/メーカー: 早川書房
- 発売日: 2017/12/19
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
単行本で本を買うことはめったにないけど一番すきなミステリーのシリーズなので即購入. リスベットがどんどん超人になっていく. 解説にも書いてあったけどリスベットを自由にすると物語性がなくなるので 今回は彼女はほとんど監獄にいて物足りなさがある. ミレニアム3もほぼ病院にいたし, 俺はリスベットがクールにハッキングしまくる描写が読みたいのに残念. リスベットをあまりにも超人にしすぎてしまった....
相変わらずリスベットはサイコーにクールで最高なんだけど ディープラーニング(作中ではディープ・ニューラル・ネットワークと表記)で 犯人特定する描写がめっちゃ違和感があった.あんな少ないデータで学習できる?? カスペルスキー社が謝辞に乗っていたけど,ちゃんと監修できてんのかな...? 最後の演説とかも「ん....?」となってしまった.リスベットはこんなにいいヤツではない.
とはいえミレニアムは無条件でサイコーな小説なので,次回作で最後になるのは悲しい.
パーフェクトRuby
- 作者: Rubyサポーターズ
- 出版社/メーカー: 技術評論社
- 発売日: 2017/05/17
- メディア: Kindle版
- この商品を含むブログを見る
大学の図書館で息抜きに読んでいた.
Ruby歴が1年くらいになってきたタイミングで読んでみると面白かった. メタプログラミングのあたりとかなるほどなーという感じがある.
自由度が高すぎる言語.なんでもできて逆に怖い. メタプログラミングはヤバいカッコいいけど実際に触ってみるとgrepできないし 意味わかんないし使い所がむずそう.
パーフェクトシリーズ良さそうだったので今はパーフェクトJavaScriptを読んでいる. これも良さそう.JavaScript実はめっちゃムズいっていうのが分かりはじめる.
完全に理解したい.
1984年
- 作者: ジョージ・オーウェル,高橋和久
- 出版社/メーカー: 早川書房
- 発売日: 2009/07/18
- メディア: ペーパーバック
- 購入: 38人 クリック: 329回
- この商品を含むブログ (348件) を見る
内容が重くて読むのに3ヶ月かかってしまった.
ただ「寡頭制共産主義の理論と実践」が登場してからはめちゃくちゃ面白くなってしまい すぐに読み切れた.拷問シーンになってからがまたキツくなったけど.トマス・ピンチョンの解説もよかった.
今思えばメタルギアVがバチバチに影響うけているのが分かってよかった.「BIG BOSS IS WATCHING YOU」とか,「二重思考」とか,ニュースピークで言語統制するところととかも,これスカルフェイスでは.
www.4gamer.net なるほど.
ディストピア小説にハマりそうな予感がするので「華氏451度」とか「すばらしい新世界」あたりが気になる.
ゲーム設定資料集
NieR:Automata Strategy Guide ニーア オートマタ 攻略設定資料集 ≪第243次降下作戦指令書≫
- 作者: 電撃オンライン編集部
- 出版社/メーカー: KADOKAWA
- 発売日: 2017/04/28
- メディア: 単行本
- この商品を含むブログを見る
NieR:Automata World Guide ニーア オートマタ 美術記録集 ≪廃墟都市調査報告書≫ (SE-MOOK)
- 作者: スクウェア・エニックス
- 出版社/メーカー: スクウェア・エニックス
- 発売日: 2017/02/23
- メディア: 大型本
- この商品を含むブログ (1件) を見る
コンセプトアートを堪能したいなら美術記録集, 設定画をじっくり見たいなら攻略設定資料集,という感じだった. 両方みたいならどっちも買え.
『ポケットモンスター サン・ムーン・Uサン・Uムーン 設定資料集 Essential』収録『ポケットモンスター ウルトラサン・ウルトラムーン対応 公式ポケモンぜんこく図鑑 2018』特別版
- 作者: 元宮秀介,ワンナップ,株式会社ポケモン,株式会社ゲームフリーク
- 出版社/メーカー: オーバーラップ
- 発売日: 2017/12/13
- メディア: 大型本
- この商品を含むブログを見る
ポケモン初の資料集.というだけでヤバい. おまけのデータブックとかは正直必要ない. 資料集の最後の杉森建の「1匹のポケモンが生み出されるまで」の話がめっちゃいいので全人類読んで欲しい・
機械学習初心者がサポートベクトルマシンのモデル作成を論文に書くまで
画像とかを分類する作業を研究でやっていて,色々考えた結果サポートベクトルマシンで機械学習することにした.が,それを論文にまとめなければならない.そして機械学習を専門にやっているような研究室ではないのでなかなか文章に落とし込んだりするのが辛かったりする.
色んな論文読んでどう書くべきかをまとめとく(プロ機械学習マンによる検閲が怖い).
まずなぜサポートベクトルマシンなのかを書く
まず発表で「なんでその手法を選んだの?」っていう質問が大体飛ぶ.ここで何故サポートベクトルマシンなのかが言えないとなかなかつらく,「ディープラーニングでやろうよ」とか「機械学習は内部がブラックボックスなのでそれはどうか」とか言われてしまう.みんなすぐディープラーニングとか言う.
ので,これを読め
サポートベクトルマシン (機械学習プロフェッショナルシリーズ)
- 作者: 竹内一郎,烏山昌幸
- 出版社/メーカー: 講談社
- 発売日: 2015/08/08
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
このあたりの記事も良かった.
SVMは2値分類との相性がとてもいいので自分がデータを二種類に分類したいということを説明し,SVMではそれが可能であるということを書く.
選んだカーネル関数とパラメーラ設定を書く
RBFカーネルが一番よい.一番よく使われるカーネルなので特に理由とかを示さなくてもよさそう.論文でも「最も一般的なRBFカーネルを採用する」みたいな表記があったりする,のでそれをパクる.
自分の場合は線形カーネルもやったけどあんまり結果は変わらなかった.
パラメーターはグリッドサーチを利用するとよい. pythonのscikit-learnを使うとグリッドサーチができる機能が実装されているので簡単.
特徴量の抽出について書く
サポートベクトルマシンに流していくデータをどうやって選定するかを書く.
画像系だとそのまま画像のピクセルを垂れ流さずに何らかの工夫をしている事例が多いのでそういうのを参考にしながら書く.
これはケースバイケースなので詳しく書かない....
学習させたモデルの評価する
評価方法については他のブログが参考になる.
再現率,適合率,特異度,正確度,F値などがあり,ざっくばらんに評価したいならF値,特定の事象のみに特化して評価したいならそれ以外で評価する.
この記事の病気の患者分類方法の事例が分かりやすい.
学習時間とかも評価の指標になるかも.
ここで満足できる値を定義してそれに合格したモデルが作成できたみたいな論が導ければ完璧.たぶん.
まとめ
特徴量の選定
カーネルとパラメータの設定
評価
の順に書くのが一般的っぽい.
特にSVMに詳しくない自分のような人が論文執筆中に不安になったら,先行論文を探してそれをパクる.自分を信用するやつは何をやってもダメ
おまけ:参考にした論文
-
カーナビアプリのためのSVMを利用した車の停止判定方法 https://ipsj.ixsq.nii.ac.jp/ej/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=178204&item_no=1&page_id=13&block_id=8
- Twitterの実況ツイートを利用したタイムライン上のネタバレ情報検知
- ダークネットトラフィックに基づく学習型DDoS攻撃監視システムの開発 https://ipsj.ixsq.nii.ac.jp/ej/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=146976&item_no=1&page_id=13&block_id=8