「Unity」の記事 - Crieit

Unityで〇×ゲームを作ろうぜ（＾～＾）？

2023-01-17T23:44:33+09:00

教育目的

プログラミング・スキルの普及のために、 この記事の内容は　改変・転載許可

成果物： 📖 Tic tac toe
コード： 📖 Tic-Tac-Toe

📅2023-01-17 tue

📖 アマゾン創業者が部下に繰り返し続けた「過酷な一言」

「　👆　ジェフ・ペゾスは　モックアップの時点で完成度高くないと　企画も通さないらしいぜ。迷惑だよな」

「　どう迷惑を受けたんだぜ？」

「　モックアップ作りから妥協しない姿勢が　Amazon の強さの秘訣だ、みたいな論調の記事を読むと
だったら　もう　モックアップ作るの　いいかな、　弱くていいや、　と　なにもかも　嫌になってしまう」

「　個人サークルの１人が言う　モックアップ　と、
１４０万人ほどの社員がいる企業の社長が言う　モックアップ　を同じように扱おうとするのが　性格が意固地なのよ。
モックアップに完成度を求めていないケースだってあるのだから、
特定の社長に最適化せず　もっと言葉を適当に使えばいいのよ」

「　これより　Unity を使って　〇×ゲームの やっつけモックアップ を作る。
今回の趣旨は　技術　を何も説明せず、　雰囲気　で書く　ヒカルの碁方式　だぜ」

「　Qiita と Zenn で規約違反になるから　Crieit でやるのか」

「　いや、思想違反」

「　ガイドラインぐらい　程度は違えど　どこにでもあるのだから　守ればいいのよ」

「　👆 これ、 Unity Hub （ユニティハブ）。
なんか並んでる１つ１つは　レッスンの残骸とか、　手指の練習の残骸とか、　まあゲーム１個分の何かだぜ」

「　なるほど　画面を見せていくわけか　YouTube でやれだぜ」

「　嫌だぜ」

「　👆 最初は　とにかく　プロジェクト名　を付けろだぜ。
偉いさんは　SEO　や　name conventions　を考えた　いい感じの名前を　付けたいと考えるかもしれないが
わたしの流儀は　『あの世に持っていけるものは何もなし』　だぜ。　ひねらず　付けて　進め」

「　現世利益に興味を持てだぜ」

「　墓碑銘は　『墓』　にしましょう」

「　👆 プロジェクトを開くと　Unity Editor（ユニティー・エディター）が出てくる。
わたしは　4K（よんけー）ディスプレイ　を使っているので　大きな添付画像になってしまうから、
以降は　適当にウィンドウを縮めて　スクリーンショットを貼っていくぜ」

「　そこらへんの You Tube でゲーム開発動画が　たくさんあるから　読者諸君は　詳しくは勝手にググれだぜ」

「　👆 〇×ゲーム作るんだったら　盤が要るだろ。　平面（へいめん；Plane プレーン）を置こうぜ？」

「　ぜったい　Unity Learn で企画書を書けだの、設計を練れだのレッスン受けたのにな。
プログラマー・スキル・レベル剥奪だぜ」

「　設計を 信じて ないのよ。　プロジェクトは崩壊すると思ってるから」

「　じゃあ　お父んは何を信じて　Unity Editor　なんか開いたのか？」

「　あっ、そういえば　〇　も　×　も　素材が無いぜ！」

「　👆 わたしにはモデルを作るスキル無いので Windows Paint で描くぜ」

「　行き当たりばったりだな」

「　行動してから考える人 ですからね」

「　お父んの頭の中に効率と戦略が無いことは分かった」

「　👆 画像をプレーンに　ドラッグ＆ドロップ　すれば　テクスチャーを貼るの完了だぜ」

「　Unity、 3Dが得意なのに　ペラペラの平面に Windows Paint の画像貼り付けるの
Unity の無駄遣いだよな」

「　まだ 行動の途中 で、 考える ところまで　行ってませんからね」

「　そう言えば、盤に　黒くて太い線を引きたいけど、　黒い太線を引くのも　めんどくさいんだよな。
それに　盤のマスをクリックしたかどうか　範囲を調べるのも　めんどくさい……」

「　👆 そこでプレーンを９枚置いて、マスの代わりとしようぜ！」

「　お父んの優先順位の中で、 アートワーク の順位は下の方にあることが分かった」

「　花より団子 の人ですからね。　〇×ゲームができれば　なんでもいいのよ」

「　しかし　どういう感じにすりゃ　〇×ゲーム　を作れるのか　よく分からんな」

「　👆 ここで一旦　プロジェクトを保存して　Unity Editor を終了するぜ」

「　考えるのをやめたか」

「　👆 わたしの Git Hub を開くんだぜ」

「　ソースを　クラウドに保存するんだな」

「　👆 クラウド上に　リポジトリを作るぜ。　リポジトリというのは　ファイル置き場　ぐらいの意味だぜ」

「　👆 GitHub Desktop for Windows というデスクトップ・アプリケーションと連動するんで、
ローカルPCのさっきの Tic-Tac-Toe のファイルを、
いったんローカルPC側のリポジトリでコミットし、
続いてクラウド上のリポジトリへプッシュするぜ」

「　何を言っているか分からないが　まあ　がんばれだぜ」

「　👆 リモートにファイルが置かれたな」

「　本当は コード・レビュー を入れて、コメントをちゃんと書いてコミットして使うものなんだけど、
やらないのよ」

「　やらないだろうな」

「　ドカスカ　プッシュしろだぜ」

「　Git Hub にソースをプッシュしたから、
ソースを壊してしまったときは　それより前のバージョンへ　巻き戻すことが可能になったわね」

「　適当に　どこかに戻せれば　十分だぜ」

「　戻してから考える んだろうなあ」

「　👆 マス（※英語でSquare スクウェア）をマウスでクリックしたときに　〇×を付けたいんだろ。
とりあえず Square という名前で C#（しーしゃーぷ）スクリプトを作ろうぜ？」

「　Git Hub で、いつでもリセットできるから　お父んの とりあえず進もうぜ、困ったら戻ろうぜ法 が完成だな」

「　頼りない名前の法だなあ」

補足：📖Unity 2020でスクリプトの日本語が文字化けするのを修正する

「　👆 これが Visual Studio 2022 （びじゅある　すたじお　にせんにじゅうに）というデスクトップ・アプリケーションだぜ。
こんな画面出てきても、これから何かけばいいか分からないだろ」

「　何でも書いたらいいんじゃないか」

「　👆 そう！
何もないところのうち　いい感じのところに mouse と打鍵すれば、
わたしが書きたいものを予測して候補が出てくる。これが Visual Studio の利点であるインテリセンス（IntelliSense）という AI だぜ。
1990年代後半にはすでにあった」

「　👆 そしてその候補で合ってたら、キーボード上の tab キーを１回押せだぜ。
スケルトン・コードを書いてくれる。
スケルトンというのは、穴埋め文章の穴じゃない方だな」

「　適当の達人だな」

「　いい感じのところ がどこなのか説明してくれないから　真似するの無理よ」

「　👆 何書けばいいか分からないから、とりあえず Debug.Log("なんちゃら") を書けだぜ。
このテクは　デバッグ・ライト（Debug write）と言う」

「　とりあえず が多いな」

「　👆 で、スクリプトは書いただけでは動かない。
マス（※画面上では Square 0 ～ Square 8）というゲーム・オブジェクトに Square スクリプトを持たせる。
この操作を アタッチ (Attach) と呼ぶ」

「　👆 カメラの位置も　あんまりだったので、 Main Camera の位置を調整する」

「　👆 ゲーム・ビューも好きなようにいじって、 Unity Editor の上の方に置いてある再生ボタンを押せだぜ」

「　👆 するとゲーム画面になる。
黄緑色のマスをクリックしたら、 Unity Editor の左下に『マウスボタンを押しました』と出てきた。
これで動作確認完了だぜ」

「　マスがクリックできることまでは　分かったな。
そこから　どうするのか　分からんけど」

「　クリックしたマスの上に　〇のカード　が飛んでくりゃ　よくない？」

「　じゃあ　〇のカード ５枚、 ×のカード ４枚を予め作っておけばいいのかだぜ？」

「　めんどくさ……。マスの表面のテクスチャーを貼り替えりゃよくないかだぜ？」

「　あらゆる発想が　めんどくささに　飲み込まれて　消えていくわね」

「　お父ん　ぜったい　あらゆる企画マンと　会話　合わないよな」

「　👆 とりあえず GameManager C#スクリプトをアタッチした Game Manager ゲーム・オブジェクトを作れだぜ」

「　👆 GameManager C#スクリプトの　いい感じのところに、　いい感じに　マテリアルを３つ書くと」

「　👆 マテリアルを　ドラッグ＆ドロップで　設定できる欄が　できるから」

「　👆 がんばって　ドラッグ＆ドロップ　しろだぜ」

「　👆 Nought ゲーム・オブジェクトと、 Cross ゲーム・オブジェクトは　結局使わないので　消せだぜ」

「　行き当たりばったりの　ひずみ　ここに出るの　わらう」

「　バーチャル空間だから　無駄な発注を　やりたい放題よ　徒労が増えるだけで」

「　👆 GameObject C#スクリプトに　実質５行ほど　コードを書き足したぜ」

「　👆 Square C#スクリプトに　実質４行ほど　コードを書き足したり、編集したりしたぜ」

「　なんの説明もないところが　今回の記事の趣旨だな」

「　👆 だが、もう　○、×　を交互に置けるぜ」

「　👆 もう印を置いてあるところを　またクリックして　印を変えることができるぜ」

「　👆 イリーガル・ムーブ（非合法手）のチェックはしてないからな」

「　しなきゃ　いけなくない？」

「　プロフェッショナルなプログラマーなら　必ず　修正するし、
レッスン中なら　不具合の修正は　ほっといて　後回しにしろだぜ。
不具合の修正は　気持ちが乗らないからな」

「　不具合の修正より、気持ちがノるか　ノらないかが　優先されるのね」

「　ぜったい　わらう」

📅2023-01-18 wed

「　👆 勝ったとき　『勝ち！』　って出てくれば　気持ちがノるだろ。
まずは　その前に　勝ったかどうか判定するプログラムを書こうぜ？」

「　プログラムらしい話に進むな」

📅2023-01-20 fri

「　👆 テキストをまず作っておこうぜ。
普段は非表示にしておいて、必要な時に表示すればいい」

「　仕込みだな」

「　👆 勝敗判定を　どこに　どういう風に書けばいいのか分からない。
分からなかったら　なんとかManager C# スクリプトを作って、　なんとか Manager ゲーム・オブジェクトにアタッチすればいいぜ」

「　お父んは『いいぜ』と言うが、　ダメだったら戻ればいいスタイルだからな」

「　迷路をとりあえず進んでるだけよね」

「　👆 Position （ポジション） C# スクリプトもいるかもしれない。スケルトンを置いておこう」

「　要るか　要らないか　分からなくても　スケルトンを置くのが　お父んの開発スタイルだよな」

「　👆 Piece （ピース；駒）イナム（enum；列挙）型も作っとこ。　あとで使うだろ」

「　どんどんタネを仕込んで　あとで　組み合わせる　やり方か」

「　ちゃんと　組み合わさるか　事前に検討して　必要なものだけを洗い出すステップを　やらないのよ、　ノらないから」

「　👆 ポジションに Piece 型の配列を持たせようぜ。
これ、 Unity Editor で　いじれるようにしようかな、 [SerializeField] アノテーション付けたろ」

「　👆 やっぱ Position Manager ゲーム・オブジェクトも作って Position C#スクリプトをアタッチしようぜ？
盤を編集でけて　お得だろ」

「　お得かどうかは関係ないんじゃないか？　損だったら戻ればいいのだから　進めば」

「　最後に　まとめ切れるかどうか　関係無いですからね、この開発手法」

「　👆 Position は Clear 関数や、 SetPiece 関数を使うだろ。
class の public 修飾子も消して internal アクセスにしておこうぜ。
Linq はパフォーマンスが心配なんで使わないぜ」

「　それが　何かの説明は　しないんだな」

「　👆 GameManager C#スクリプトに入ってた movesCount フィールドは、 Position クラスにあった方がいいので　移動した。
MovesCount アクセッサ―も追加したぜ」

「　👆 movesCount フィールドを Position クラスに持っていかれた GameManager クラスの方には、
Position インスタンスにアクセスできるようにプロパティを用意し、参照箇所も Position プロパティに変更するぜ」

「　フーン」

「　👆 Square 0 ゲーム・オブジェクトの 0 の部分だけ取るように正規表現（せいきひょうげん；RegularExpression）を書き、
Position インスタンスにセットするように書いてみた」

「　へぇ」

「　👆 これで、マスをクリックすると、○と×が入っているのが分かるな」

「　Cross （×）と Nought （○）が逆よ」

「　ぬぎぎぎぎ！」

「　👆　インクリメントは最後にやれだぜ！」

「　👆　Position インスタンスが盤を表している。
Element 1 と Element 4 と Element 7 に Nought が入っていれば、３つの○が並んだということだぜ」

「　タテ、ヨコ、ナナメに同じピースが３つ並んでいることを判定できる数式があるの？」

「　○×ゲームぐらいの　盤サイズの小ささなら　全パターン網羅して　ハードコーディングしたった方が早いぜ」

「　👆　Position クラスに GetPiece メソッドが無いと盤のマスを見れないので追加する」

「　👆　例えば３つ並んだケースの一覧とか要るだろ。
要ると思ったものを　予め　作っておくんだぜ」

「　要ると分かってから　作った方が良くないか？」

「　ノらないから　そんなこと　しないのよ」

「　👆　対局結果も要りそうだ。作っとこ」

「　この開発手法では　工数の見積もりを取れないのでは？」

「　設計してないんだから　見積もりがあるはずないじゃない」

「　👆　勝敗判定を書いている途中に思ったんだが、負けかどうかは判定してないな」

「　じゃあ　『勝敗判定』ではなくて　『勝ったか判定』だぜ」

「　👆　対局結果から　負け　を削除しとこ。
GameResult も　こっそり GameResults に変えた」

「　勝ち　しか無かったら、どっちが勝ったのか　分からなくない？」

「　👆　まさか　Lose　を使う必要がないとは　思わなかったぜ」

「　ダメだったら戻ればいい　の現場だな」

「　👆　JudgeManager で対局結果を見れたら　デバッグが楽だと思ったから　フィールドと　プロパティ付けたろ。
winPatterns も　こっそり static readonly 付けたろ」

「　👆　対局結果を返すのではなく、対局結果をフィールドに入れるように変更。
名前も DoJudge から SetupJudge に変更」

「　👆　GameManager クラスの中で JudgeManager インスタンスの SetupJudge メソッドを使ってみよう」

「　👆　ちゃんと Win が入ってるな」

「　👆　でも Draw 判定が 10手目にされたので　1　引いとこ」

「　１０手目なんか　無いんだけどな」

「　👆　対局結果のゲーム・オブジェクトのアクティベートのチェックを外して、存在していないことにしよ」

「　👆　存在しないゲーム・オブジェクトだったら、 Unity は見つけられないので、
[SerializeField] アノテーションを利用して　ゲーム・オブジェクトにアクセスする仕組みを　仕込むぜ。
ついでに SetActive( ) メソッドを使って、ゲーム・オブジェクトのアクティベートのチェックを入れるコードも書いておくぜ」

「　👆　ドラッグ＆ドロップしておくぜ」

「　👆　対局結果が出るようになったぜ」

「　配色わる」

「　文字のような○×の上に　文字　出してるしな」

「　他の　盤ゲームが　対局結果を　どう表示しているか　見てこいだぜ」

「　👆　わたしに美術はできないので、終局時に　半透明のフロント・カバーが　かかるようにしよう！」

「　確かに　お父んは　企画　通らなさそう」

「　👆　これで　十分　十分」

「　ビデオゲームは　見た目のできが　内容のできだと　思われるのよ」

「　ノらないところは　やらないでおこうぜ？」

「　他の人はむしろ　目に付く　見た目を　いじりたがるんだけどな」

「　次は　リスタート・ボタン　を付けようぜ？」

📅2023-01-21 sat 00:31 end

📅2023-01-22 sun 01:34 start

「　👆　2020年代の GUI というと Web クライアントや、 Windows デスクトップ・アプリケーションでは進歩、淘汰の激戦区だが、
Unity に付いてる GUI は 1990年代かな、というぐらいクラシックなものなので　あまり気合を入れずに使うぜ」

「　👆　リスタート・ボタンの見た目は　こんなんでいいんじゃないか？」

「　美術の欠如している　わたしたちは　これでいきましょう」

「　👆　JudgeManager に Clear メソッドを付けるぜ」

「　👆　Position の Clear メソッドで moveCount フィールドを　ゼロ初期化してなかったので　するぜ」

「　仕込みをしてるんだな」

「　👆　GameManager に Clear メソッドを付けるぜ。
この中で　Position インスタンスと、 JudgeManager インスタンスの Clear メソッドを呼び出すとともに、
対局結果のテキストと、盤に被せた半透明の幕のアクティベートのチェックを外して、ゲーム中に存在しない扱いにするぜ」

「　👆　また、 Start メソッドで Clear メソッドを呼び出した」

「　それは要るのか？」

「　シーン・ビューで　テキストの表示のアクティベートのチェックを外すの忘れたりしたまま　リリース　したくないだろ」

「　👆　ボタンを押したら、 Game Manager ゲーム・オブジェクトの持っている GameManager C#スクリプトの Clear メソッドが
呼び出されるように　マウス操作で紐づけるぜ。
この技術の名前は　イベント・リスナー（Event Listener）だぜ」

「　👆　リスタート・ボタン自体のアクティベートのチェックを　オン／オフする仕組みを忘れてた　追加しよ」

「　👆　だんだん　ごつく　なってきたな」

「　👆　でも　リスタート・ボタンが出てきたぜ。押してみよ」

「　👆　盤はクリアーされてないぜ？　なぜだぜ？」

「　WPF （ダブリュー・ピー・エフ）の MVVM （エム・ブイ・ブイ・エム）の ViewModel （ビュー・モデル）に慣れた癖で忘れていたが、
Unity ではデータをクリアーしても、シーンは連動していないのだった」

「　これは　ゲーム・プログラミングなのよ。
デスクトップ・アプリケーションのような　処理が重たい技術は　流行らないのよ」

「　👆　マスの材質を　緑色の素材に貼り替えたろ」

「　👆　貼り替わったぜ」

「　これで　○×ゲームは　卒業かだぜ？」

「　まだ　イリーガル・ムーブ　を禁止していないわよ？」

「　👆　じゃあ　バリデーター（Validator）を作ればいいだろ。
そのマスに置けるかどうかだけ　チェックすればいいのかだぜ？」

「　👆　あっ、　Square 0 みたいなゲーム・オブジェクトの名前しか取れね。 0 みたいなマス番号取れね」

「　不便よねえ」

「　👆　じゃあ　ヘルパー関数　作ればいいんだぜ。
GameManager で　似たようなコード前に作ったから　引っこ抜いて　共通利用できるようにするぜ」

「　👆　既存のコードは見やすくなるし」

「　👆　新しいコードは書きやすくなる」

「　👆　これで　非合法手　は防げたんじゃないか？」

「　Nought win のあとに　まだ　X を置けるんじゃない？」

「　👆　半透明の青い膜が被っていて、　マスはクリックできないから
対局終了後に　マスをクリックすることは　でけないぜ」

「　じゃあ　いいかあ」

「　これで　完成か？」

「　コード・レビュー　しようぜ？
プログラミングの　へたくそなところがある」

「　👆　例えば　『駒を置く』は入力だが、　『対局結果を表示する』は出力だぜ。
入力メソッドが　出力してるなんて　イケてないぜ」

「　判断基準は　イケてるか　イケてないか　なのね」

「　プログラマーの気分　を　重要視してるんだな。　その点では Ruby に似ているな。お父んのポリシーが　分かってきたぜ」

「　👆　『出力』の部分を DoMove メソッドから外に出したいが、
piece 変数が DoMove メソッドに束縛されているから、 piece 変数を自由変数に変える方法を考えようぜ」

「　なんだか分からないが　任せたぜ」

「　👆　Position クラスに手番（Turn）を持たせようぜ。
初期値は Nought」

「　👆　手番を追加する NextTurn メソッドもいるや。追加しとこ」

「　👆　インクリメントも NextTurn メソッドの中で　やってまお。
MovesCount プロパティーのセッター（set）も要らなくなったから、短く書いたろ」

「　👆　これで DoMove の中から piece 変数が消えた。代わりに Position に依存するようになったぜ」

「　👆　こうやって UpdateGameResultView メソッドに切り分けることがでけたな。
しかし DoMove メソッドを実行すると UpdateGameResultView メソッドまで　実行されてしまうのは　イケてないな」

「　👆　あっ　いけね！
対局が終了しているときは　NextTurn しないように　バリデーション・チェックしようぜ」

「　👆　JudgeManagement クラスの SetupJudge メソッドを、
変更があったかどうか返すように　変更するぜ」

「　👆　判定に変更があれば dirtyJudgement フラグを立て、
dirtyJudgement フラグが立っているときだけ UpdateGameResultView メソッドは働き、
働いたら dirtyJudgement フラグは下ろす、という風に作るぜ」

「　めんどくさ」

「　👆　これで UpdateGameResultView メソッドの呼び出しを
DoMove メソッドの外に出して、
Update メソッドの中へ　引っ越すことがでけたぜ」

「　👆　そんなけ　コードをいじっても　ゲームは何にも変わらないじゃない。
コードを　イケてるようにすることに　何の意味があんの？」

「　ワザを安定して出せるようになると、
もっと　大きなワザ　を出せるようになる。大きなワザ　を出せるようにするために　コードを掃除してるんだぜ」

「　👆　GameManager クラスの Clear メソッドの中で　画面表示を切り替えているのは　掃除しないのかだぜ？」

「　する」

「　👆　Position クラスの SetPiece メソッドも、変更があったかどうか返すようにしようぜ？」

「　👆　マスをクリックして、絵柄に変化があったときだけ dirtySquares セットに　マス番号を追加することにするぜ」

「　👆　これで　DoMove メソッドの中から　表示をコントロールするコードは　消えてなくなっただろ」

「　入力メソッドの中では　出力はしないようにしたんだな」

「　dirtyなんちゃら フラグが　入力メソッドと　出力メソッドの　橋渡しをしているのね」

「　👆　GameManager クラスの Clear メソッドの中にあったコードも、 dirty フラグを立てるだけでよくなったぜ」

「　これで　表示周りのコードの　クリーンナップ　は終わりか？」

「　まだある」

「　👆　GameObject.Find メソッドは　処理に時間がかかるらしい。
できれば　Start メソッドで１回使ったあとは　使わなくて済むようにしたいぜ」

「　やってくれだぜ」

「　👆　GameManager クラスの Start メソッドが呼び出された時点で、GameObject.Find を先にしてしまって、
ゲーム・オブジェクトをメモリに入れておけばいいぜ」

「　他に　どこを　クリーンナップ　するんだぜ？」

「　👆　例えば get アクセッサ―で変数をリターンしているだけのプロパティなんかは……」

「　👆　ラムダ式と同じなんだったら、書き方が短いラムダ式にするとかかな。
パフォーマンスに違いがでるのか　知らんけど」

「　パフォーマンスの測定をするほどの　速度が必要なアプリケーションじゃないから
ちょっとぐらいパフォーマンスが違っても　違いは分かんないわねえ」

📅2023-01-22 sun 06:45

「　👆　WebGL 形式で　実行ファイルを出力してみようぜ？」

「　👆　Visual Studio Code に Live Server エクステンション入れてると　ローカルWebサーバー起ちあがるんで、
Tic Tac Toe の index.html を開いてみようぜ？」

「　👆　開けたな」

「　👆　プレイできるぜ」

「　○×ゲームできても　ビデオゲームって感じ　しないけどな」

「　２か月 Unity Lesson でビギナーコースを受けて、○×ゲームを作るのに　３日間かかるようでは　気が遠くなるわよね」

「　仕込みが　なんにも無いからな。
重要なのは　制作進行を覚えて　素材の発注を見積もることだぜ」

「　UI もタイトル画面も何もかもがなくてゲーム開発の全体像はまだ見えないわね」

「　まあ、先に進もうぜ」

📖 Unity Play

「　👆　Unity Play という Web サイトがある」

「　👆　ここには、作ったゲームをアップロードするページがある」

「　👆　というわけで、 WebGL のファイルが入ったフォルダーを .zip 圧縮し……」

📖 Tic tac toe

「　👆　アップロード完了。 Play Unity に置いたぜ」

「　👆　まあ　○×ゲーム　しかできないんだけどな」

📅2023-01-22 sun 07:22 end

＜おわり＞

📔Unity で iOS/Android アプリの設定値をセキュアに扱う方法

2021-08-16T02:31:05+09:00

はじめに

iOS/Android でユーザーの情報をセキュアに扱う必要があったので、調査したところ Android には EncryptedSharedPreferences が存在することを知りました。iOS には Keychain Services が存在します。

今回は Unity の iOS/Android プラットフォーム上で設定値を保存するための実装を行う必要があったので、Unity から扱えるようネイティブプラグインを作成しました。今後もこういった要望はありそうでしたので、記事として手順や内容を書き記しておくことにしました。

本記事内で紹介しているコードは下記にアップ済みです。

https://github.com/nikaera/Unity-iOS-Android-SecretManager-Sample

動作環境

MacBook Air (M1, 2020)
Unity 2020.3.15f2
Android 6.0 以上
- EncryptedSharedPreferences が使用可能なバージョン

Android のネイティブプラグインを作成する

Android 環境ではまず External Dependency Manager for Unity を利用して、Unity の Android ネイティブプラグインで EncryptedSharedPreferences 利用可能にします。

(追記) Gradle を利用したライブラリのインストール方法

shiena さんにご教授いただいたのですが、こちらの記事のように Gradle を利用することでも簡易にライブラリの取り込みが可能なようでした。

手順は上記の記事をご参照いただくとして、Gradle を利用する方法で外部ライブラリを取り込む際の Assets/Plugins/Android/mainTemplate.gradle および Assets/Plugins/Android/gradleTemplate.properties は下記になります。

```diff gradle:Plugins/Android/mainTemplate.gradle
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
+ implementation 'androidx.security:security-crypto:1.1.0-alpha03'
DEPS}

android {


```diff properties:Assets/Plugins/Android/gradleTemplate.properties
org.gradle.jvmargs=-Xmx**JVM_HEAP_SIZE**M
org.gradle.parallel=true
android.enableR8=**MINIFY_WITH_R_EIGHT**
+ android.useAndroidX=true
unityStreamingAssets=.unity3d**STREAMING_ASSETS**
**ADDITIONAL_PROPERTIES**

Gradle を利用した方法でライブラリを利用される際は、次の External Dependency Manager for Unity で必要なパッケージをインストールする の手順はスキップ可能です。EncryptedSharedPreferences を利用するためのネイティブコードを追加する のステップから進めてください。

External Dependency Manager for Unity を利用する方法だと、取り込み先プロジェクト内でライブラリの競合が発生する恐れがあります。Gradle を利用する方法であれば回避が可能です。¹

External Dependency Manager for Unity で必要なパッケージをインストールする

External Dependency Manager for Unity をインポートするため unitypackage をダウンロードして、EncryptedSharedPreferences を導入したい Unity プロジェクトを開いてから unitypackage をクリックすることで、External Dependency Manager for Unity を Unity プロジェクトにインポートします。

unitypackage をクリックして Unity プロジェクトに External Dependency Manager for Unity をインポートする" />

Unity プロジェクトの Build Settings からプラットフォームは Android に切り替えておきます。Enable Android Auto-resolution? というダイアログの選択肢はどちらを選んでも構いません。²

External Dependency Manager for Unity で各種パッケージを管理する方法は README に記載がある通り、*Dependencies.xml というファイルを Editor フォルダに配置することで可能になります。

今回は EncryptedSharedPreferences を導入するため、下記の xml ファイルを Editor フォルダ内に配置します。




    
        
        
            
                
                extra-google-m2repository

その後、Unity メニューから Assets -> External Dependency Manager -> Android Resolver -> Force Resolve を選択して、Assets/Editor/AndroidPluginDependencies.xml の内容を元に EncryptedSharedPreferences を利用するのに必要なパッケージを自動で Assets/Plugins/Android フォルダにダウンロードします。

Assets -> External Dependency Manager -> Android Resolver -> Force Resolve を選択する" />
1. Unity メニューから Assets -> External Dependency Manager -> Android Resolver -> Force Resolve を選択する

Assets/Plugins/Android フォルダに配置される" />
2. 実行に成功すると EncryptedSharedPreferences を利用するのに必要なライブラリ群が Assets/Plugins/Android フォルダに配置される

ここまで来ればあとは Android ネイティブコードを Assets/Plugins/Android フォルダ内に配置して Unity 側から叩けるようにするだけです。

EncryptedSharedPreferences を利用するためのネイティブコードを追加する

早速下記の Android ネイティブコードを Assets/Plugins/Android~~/SecretManager.java に配置します。

// Assets/Plugins/Android/SecretManager.java
package com.nikaera;

import com.unity3d.player.UnityPlayerActivity;

import java.lang.Exception;

// External Dependency Manager for Unity によって、
// 必要な jar が含まれているため EncryptedSharedPreferences の利用が可能になる
import androidx.security.crypto.EncryptedSharedPreferences;
import androidx.security.crypto.MasterKey;

import android.content.Context;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;

import android.os.Bundle;
import android.util.Log;

public class SecretManager {
  private SharedPreferences sharedPreferences;

  public SecretManager(Context context) {
    try {
        // EncryptedSharedPreferences で設定値を保存する際に用いる、
        // 暗号鍵を扱うためのラッパークラスをデフォルト設定で作成する
        MasterKey masterKey = new MasterKey.Builder(context)
                .setKeyScheme(MasterKey.KeyScheme.AES256_GCM)
                .build();

        // EncryptedSharedPreferences のインスタンスを生成する
        // コンストラクタで作成した masterKey を指定している
        this.sharedPreferences = EncryptedSharedPreferences.create(
          context, context.getPackageName(), masterKey,
          EncryptedSharedPreferences.PrefKeyEncryptionScheme.AES256_SIV,
          EncryptedSharedPreferences.PrefValueEncryptionScheme.AES256_GCM
        );
    } catch (Exception e) {
        e.printStackTrace();
    }
  }

  /**
   * 指定したキーで値を保存する関数
   * @param key 値を保存する際に用いるキー
   * @param value 保存したい値
   * @return boolean 値の保存に成功したかどうか
   */
  public boolean put(String key, String value) {
    SharedPreferences.Editor editor = sharedPreferences.edit();
    editor.putString(key, value);

    return editor.commit();
  }

  /**
   * 指定したキーで保存した値を取得する関数
   * `put` 関数で保存した値を取得するのに利用する
   * @param key 取得したい値のキー
   * @return string キーに紐づく値、存在しなければ空文字が返却される
   */
  public String get(String key) {
    return sharedPreferences.getString(key, null);
  }

  /**
   * 指定したキーで値を削除する関数
   * @param key 削除したい値のキー
   * @return boolean 値の削除に成功したかどうか
   */
  public boolean delete(String key) {
    SharedPreferences.Editor editor = sharedPreferences.edit();
    editor.remove(key);

    return editor.commit();
  }
}

その後、上記を Unity スクリプトから実行可能にするための C# クラスを作成します。本記事ではファイルを Assets/Scripts/EncryptedSharedPreferences.cs に配置します。

// Assets/Scripts/EncryptedSharedPreferences.cs
using UnityEngine;

/// 
///     利用するネイティブコードは Assets/Plugins/Android/SecretManager.java に記載
/// 
/// 
///     EncryptedSharedPreferences
/// 
class EncryptedSharedPreferences
{
    private readonly AndroidJavaObject _secretManager;
    public EncryptedSharedPreferences()
    {
        // コンストラクタで com.nikaera.SecretManager のインスタンス生成を行う
        var activity = new AndroidJavaClass("com.unity3d.player.UnityPlayer")
            .GetStatic("currentActivity");
        var context = activity.Call("getApplicationContext");
        _secretManager = new AndroidJavaObject("com.nikaera.SecretManager", context);
    }

    public bool Put(string key, string value)
    {
        return _secretManager.Call("put", key, value);
    }

    public string Get(string key)
    {
        return _secretManager.Call("get", key);
    }

    public bool Delete(string key)
    {
        return _secretManager.Call("delete", key);
    }
}

あとは用途に応じて下記のようなコードで設定値の保存や取得などを行えます。

// ...
var _sharedPreferences = new EncryptedSharedPreferences();

// name をキーとして値を nikaera で保存する
_sharedPreferences.Put("name", "nikaera");

// name をキーとして値を取得する
var name = _sharedPreferences.Get("name");

// "nikaera" が出力される
Debug.Log(name);

//　name をキーとして値を削除する
_sharedPreferences.Delete("name");

// ...

iOS のネイティブプラグインを作成する

iOS の場合は外部ライブラリを利用しないため、External Dependency Manager for Unity は利用しません。本来であれば Swift で信頼できる外部フレームワークを取り込み利用できると良さそうですが、今回は Objective-C でネイティブプラグインを書いていきます。³

Keychain Services を利用するためのネイティブコードを追加する

早速下記の iOS ネイティブコードを Assets/Plugins/iOS/KeychainService.mm に配置します。

// Assets/Plugins/iOS/KeychainService.mm~~
// Keychain Services を利用するために Security フレームワークを利用する
#import 

extern "C"
{
    // 指定したキーで値を保存する関数
    // - param
    //   - dataType:  値を保存する際に用いるキー
    //   - value: 保存したい値
    // - return
    //   - 保存時のステータスコードを返却する (0 以外は失敗)
    int addItem(const char *dataType, const char *value)
    {
        NSMutableDictionary* attributes = nil;
        NSMutableDictionary* query = [NSMutableDictionary dictionary];
        NSData* sata = [[NSString stringWithCString:value encoding:NSUTF8StringEncoding] dataUsingEncoding:NSUTF8StringEncoding];

        [query setObject:(id)kSecClassGenericPassword forKey:(id)kSecClass];
        [query setObject:(id)[NSString stringWithCString:dataType encoding:NSUTF8StringEncoding] forKey:(id)kSecAttrAccount];

        OSStatus err = SecItemCopyMatching((CFDictionaryRef)query, NULL);

        if (err == noErr) {
            attributes = [NSMutableDictionary dictionary];
            [attributes setObject:sata forKey:(id)kSecValueData];
            [attributes setObject:[NSDate date] forKey:(id)kSecAttrModificationDate];

            err = SecItemUpdate((CFDictionaryRef)query, (CFDictionaryRef)attributes);
            return (int)err;
        } else if (err == errSecItemNotFound) {
            attributes = [NSMutableDictionary dictionary];
            [attributes setObject:(id)kSecClassGenericPassword forKey:(id)kSecClass];
            [attributes setObject:(id)[NSString stringWithCString:dataType encoding:NSUTF8StringEncoding] forKey:(id)kSecAttrAccount];
            [attributes setObject:sata forKey:(id)kSecValueData];
            [attributes setObject:[NSDate date] forKey:(id)kSecAttrCreationDate];
            [attributes setObject:[NSDate date] forKey:(id)kSecAttrModificationDate];
            err = SecItemAdd((CFDictionaryRef)attributes, NULL);
            return (int)err;
        } else {
            return (int)err;
        }
    }

    // 指定したキーで値を取得する関数
    // - param
    //   - dataType: 値を取得する際に用いるキー
    // - return
    //   - キーに紐づく値、存在しなければ空文字が返却される
    char* getItem(const char *dataType)
    {
        NSMutableDictionary* query = [NSMutableDictionary dictionary];
        [query setObject:(id)kSecClassGenericPassword forKey:(id)kSecClass];
        [query setObject:(id)[NSString stringWithCString:dataType encoding:NSUTF8StringEncoding] forKey:(id)kSecAttrAccount];
        [query setObject:(id)kCFBooleanTrue forKey:(id)kSecReturnData];

        CFDataRef cfresult = NULL;
        OSStatus err = SecItemCopyMatching((CFDictionaryRef)query, (CFTypeRef*)&cfresult);

        if (err == noErr) {
            NSData* passwordData = (__bridge_transfer NSData *)cfresult;
            const char* value = [[[NSString alloc] initWithData:passwordData encoding:NSUTF8StringEncoding] UTF8String];
            char *str = strdup(value);
            return str;
        } else {
            return NULL;
        }
    }

    // 指定したキーで値を削除する関数
    // - param
    //   - dataType:  値を削除する際に用いるキー
    // - return
    //   - 保存時のステータスコードを返却する (0 以外は失敗)
    int deleteItem(const char *dataType)
    {
        NSMutableDictionary* query = [NSMutableDictionary dictionary];
        [query setObject:(id)kSecClassGenericPassword forKey:(id)kSecClass];
        [query setObject:(id)[NSString stringWithCString:dataType encoding:NSUTF8StringEncoding] forKey:(id)kSecAttrAccount];

        OSStatus err = SecItemDelete((CFDictionaryRef)query);

        if (err == noErr) {
            return 0;
        } else {
            return (int)err;
        }
    }
}

Keychain Services は Security フレームワークを利用するため、KeychainService.mm に対して Security フレームワークの依存関係を設定する必要があります。

KeychainService.mm で Security フレームワークの利用を可能にする" />
KeychainService.mm で Security フレームワークの利用を可能にする

その後、上記を Unity スクリプトから実行可能にするための C# クラスを作成します。本記事ではファイルを Assets/Scripts/KeychainService.cs に配置します。

// Assets/Scripts/KeychainService.cs
using System.Runtime.InteropServices;

/// 
///     実装は Assets/Plugins/iOS/KeychainService.mm に記載
/// 
/// 
///     Keychain Services
/// 
class KeychainService
{
#if UNITY_IOS
    [DllImport("__Internal")]
    private static extern int addItem(string dataType, string value);

    [DllImport("__Internal")]
    private static extern string getItem(string dataType);

    [DllImport("__Internal")]
    private static extern int deleteItem(string dataType);
#endif

    public bool Put(string key, string value)
    {
#if UNITY_IOS
        // 返却されるステータスが 0 なら成功
        return addItem(key, value) == 0;
#endif
    }

    public string Get(string key)
    {
#if UNITY_IOS
        return getItem(key);
#else
        return null;
#endif
    }

    public bool Delete(string key)
    {
#if UNITY_IOS
        // 返却されるステータスが 0 なら成功
        return deleteItem(key) == 0;
#endif
    }
}

あとは用途に応じて下記のようなコードで設定値の保存や取得などを行えます。

// ...
var _keychainService = new KeychainService();

// name をキーとして値を nikaera で保存する
_keychainService.Put("name", "nikaera");

// name をキーとして値を取得する
var name = _keychainService.Get("name");

// "nikaera" が出力される
Debug.Log(name);

//　name をキーとして値を削除する
_keychainService.Delete("name");

// ...

(余談) インターフェースで iOS/Android のふるまいを共通化する

このままだとプラットフォームを切り替える毎にコードを書き直さないとならないので、インターフェースを利用して共通化を行います。

public interface ISecretManager
{
    /// 
    /// 指定したキーで値を保存する関数
    /// 
    /// キー
    /// 値
    /// 保存に成功したかどうか
    bool Put(string key, string value); 

    /// 
    /// 指定したキーの値を取得する関数
    /// 
    /// キー
    /// 指定したキーで設定された値、無ければ null
    string Get(string key);

    /// 
    /// 指定したキーの値を削除する関数
    /// 
    /// キー
    /// 削除に成功したかどうか
    bool Delete(string key);
}

その後、Assets/Scripts/EncryptedSharedPreferences.cs および Assets/Scripts/KeychainService.cs を下記の通り ISecretManager の実装に紐付けます。

// Assets/Scripts/EncryptedSharedPreferences.cs
using UnityEngine;

/// 
///     利用するネイティブコードは Assets/Plugins/Android/SecretManager.java に記載
/// 
/// 
///     EncryptedSharedPreferences
/// 
class EncryptedSharedPreferences: ISecretManager
{
    private readonly AndroidJavaObject _secretManager;
    public EncryptedSharedPreferences()
    {
        var activity = new AndroidJavaClass("com.unity3d.player.UnityPlayer")
            .GetStatic("currentActivity");
        var context = activity.Call("getApplicationContext");
        _secretManager = new AndroidJavaObject("com.nikaera.SecretManager", context);
    }

    #region ISecretManager

    public bool Put(string key, string value)
    {
        return _secretManager.Call("put", key, value);
    }

    public string Get(string key)
    {
        return _secretManager.Call("get", key);
    }

    public bool Delete(string key)
    {
        return _secretManager.Call("delete", key);
    }

    #endregion
}

// Assets/Scripts/KeychainService.cs
using System.Runtime.InteropServices;

/// 
///     実装は Assets/Plugins/iOS/KeychainService.mm に記載
/// 
/// 
///     Keychain Services
/// 
class KeychainService: ISecretManager
{
#if UNITY_IOS
    [DllImport("__Internal")]
    private static extern int addItem(string dataType, string value);

    [DllImport("__Internal")]
    private static extern string getItem(string dataType);

    [DllImport("__Internal")]
    private static extern int deleteItem(string dataType);
#endif

    // KeychainService.mm に定義した関数を呼び出す
    #region ISecretManager

    public bool Put(string key, string value)
    {
#if UNITY_IOS
        return addItem(key, value) == 0;
#else
        return false;
#endif
    }

    public string Get(string key)
    {
#if UNITY_IOS
        return getItem(key);
#else
        return null;
#endif
    }

    public bool Delete(string key)
    {
#if UNITY_IOS
        return deleteItem(key) == 0;
#else
        return false;
#endif
    }

    #endregion
}

あとは上記をよしなに利用可能な SecretManager クラスを作成します。

// Assets/Scripts/SecretManager.cs
using UnityEngine;

/// 
///     Editor 利用時のみ PlayerPrefs を利用する
/// 
/// , 
public static class SecretManager
{
#if UNITY_EDITOR
#elif UNITY_ANDROID
        private static ISecretManager _instance = new EncryptedSharedPreferences();
#elif UNITY_IOS
        private static ISecretManager _instance = new KeychainService();
#endif

        public static bool Put(string key, string value)
        {
#if UNITY_EDITOR
                PlayerPrefs.SetString(key, value);
                PlayerPrefs.Save();

                return true;
#elif UNITY_IOS || UNITY_ANDROID
                return _instance.Put(key, value);
#else
                Debug.Log("Not Implemented.");
                return false;
#endif

        }

        public static string Get(string key)
        {
#if UNITY_EDITOR
                return PlayerPrefs.GetString(key);
#elif UNITY_IOS || UNITY_ANDROID
        return _instance.Get(key);
#else
            Debug.Log("Not Implemented.");
            return null;
#endif
        }

        public static bool Delete(string key)
        {
#if UNITY_EDITOR
            PlayerPrefs.DeleteKey(key);
            PlayerPrefs.Save();

            return true;
#elif UNITY_IOS || UNITY_ANDROID
            return _instance.Delete(key);
#else
            Debug.Log("Not Implemented.");
            return false;
#endif
        }
}

これでプラットフォーム間の実装差異を気にすることなく、下記のような記述で設定値の保存や取得などを行えます。iOS/Android 以外のプラットフォームで追加実装したい場合はプラットフォーム依存コンパイルと ISecretManager の実装クラスを新たに作成することで簡単に追加できます。

// ...
// name をキーとして値を nikaera で保存する
SecretManager.Put("name", "nikaera");

// name をキーとして値を取得する
var name = SecretManager.Get("name");

// "nikaera" が出力される
Debug.Log(name);

//　name をキーとして値を削除する
SecretManager.Delete("name");

// ...

おわりに

今回は iOS/Android で設定値をセキュアに扱うための方法についてまとめてみました。実際は Keychain Services 周りは実装が大変なので、External Dependency Manager for Unity とか使って KeychainAccess のような外部ライブラリを利用する構成のほうが良いと思われます。

本記事の内容に誤りがあったり、実際にはセキュアな実装ができていない等々あれば是非コメントでご指摘いただけますと幸いです。

参考リンク

逆に External Dependency Manager for Unity を利用する方法のメリットは、UnityPackage などでライブラリとして配布する際に、ライブラリを動作させるのに必要な外部パッケージも同梱した状態で配布が可能になるなどがあります。(当然ライセンスには気を付ける必要がありますが...) ↩︎
パッケージの依存関係を自動で解決するかどうかという選択肢になります。本記事では明示的に Resolve を実行するため Disable でも Enable でも進行上の問題はありません。 ↩︎
CocoaPods もサポートされているようなので、iOS でも Android 同様、外部ライブラリを取り込むのは簡単にできそうでした。例えば KeychainAccess とか使いたい。 ↩︎

GameCI で Unity の CI 環境を GitHub Actions で構築する

2021-05-26T22:30:30+09:00

はじめに

先日同僚が Unity の CI 環境を構築するためのライブラリである GameCI について教えてくれました。早速 GameCI の GitHub Actions を利用して、サンプルプロジェクトで色々動作検証してみたところ、Unity の CI 環境を楽に構築できることが分かりました。

もちろん、Unity Cloud Build を利用すれば CI 環境の構築は以前から楽にできました。しかし、選択肢の 1 つとして GameCI を持っておくことで、サクッと GitHub Actions に統合する形で Unity の CI 環境を導入できるのは他には無いメリットを感じました。

本記事で紹介しているソースコード、及び検証時に利用したプロジェクトは GitHub にアップ済みですので、手っ取り早く内容を把握されたい方は下記をご参照くださいませ。

https://github.com/nikaera/Unity-GameCI-Sample

業務でも利用できそうなので、GameCI を利用して CI 環境を構築する手順を記事でまとめました。

GameCI に備わっている機能紹介

GameCI には現状下記の GitHub Actions が用意されているようです。

機能	概要
Activation	Unity ライセンスを任意の Unity バージョンで発行する
Test runner	Unity の PlayMode 及び EditMode のテストを実行する (テスト結果の出力にも対応)
Builder	任意の Platform ビルドを実行する (アーティファクト利用でダウンロードも可能)
Returning a license	Unity ライセンスの返却ができる (Professional License のみ対応)
Remote builder	GitHub Actions のスペックでは満足のいくビルドができない際に AWS 環境でハイスペックなマシンを用意してビルドできる。ビルドのためのインフラ構築には AWS CloudFormation を使用している (現在は AWS のみ対応。今後 GCP, Azure にも対応予定とのこと)
Deployment	Unity ビルドを各種 Platform 向けにデプロイする (iOS 及び Android のみ記載あり。厳密に言うと `Builder` でビルド出力した内容を `fastlane` を用いてデプロイするためのワークフロー紹介になっている)

上記を見ると既に GameCI には開発者として Unity CI に欲しい機能は最低限揃っているように見受けられました。 また本記事では、今後機会があれば試してみたいと考えていますが Remote builder 及び Deployment については言及していません。

今回は実例を交えながら Activation 及び Test runner、Builder、Returning a license の使用方法について紹介していきます。

Activation: GameCI で必要となる Unity License のアクティベーションを行う

GameCI で Unity ライセンスをアクティベートするには Activation を利用します。早速ドキュメントの手順に沿って作業を進めていきます。

まず CI を導入したい GitHub 上の Unity プロジェクトの .github/workflows 内に Unity ライセンスアクティベート用のワークフローファイルを作成します。

# .github/workflows/activation.yml
name: Acquire activation file
on:
  workflow_dispatch: {}
jobs:
  activation:
    name: Request manual activation file 🔑
    runs-on: ubuntu-latest
    steps:
      # GameCI の Activation を利用して alf ファイルを発行する
      - name: Request manual activation file
        id: getManualLicenseFile
        uses: game-ci/unity-request-activation-file@v2
        with:
          # Unity プロジェクトのバージョンを指定する
          # ProjectSettings/ProjectVersion.txt に記載されているバージョンを入力すれば OK
          unityVersion: 2020.3.5f1
      # Upload artifact (Unity_v20XX.X.XXXX.alf)
      - name: Expose as artifact
        uses: actions/upload-artifact@v2
        with:
          name: ${{ steps.getManualLicenseFile.outputs.filePath }}
          path: ${{ steps.getManualLicenseFile.outputs.filePath }}

その後、デフォルトブランチにプッシュして GitHub Actions で実行可能にしたら、下記手順に従い Unity ライセンスファイルのアクティベート及びダウンロードを行います。

alf ファイルを生成する" />
1. ブラウザから GitHub リポジトリにアクセスして、Unity ライセンスアクティベート用のワークフローを実行して alf ファイルを生成する

2. ワークフローの実行に成功したら、該当項目をクリックして詳細画面に遷移する

Artifacts の項目から alf ファイルをダウンロードする" />
3. Artifacts の項目から alf ファイルをダウンロードする

alf ファイルをアップロードする" />
4. Unity license manual activation webpage からログインして alf ファイルをアップロードする

5. Unity ライセンスの利用用途に応じて適切な選択肢を入力する (本記事では Personal ライセンスを選択)

Download license ボタンをクリックして ulf ファイルをダウンロードする" />
6. Download license ボタンをクリックして ulf ファイルをダウンロードする

これで Unity ライセンスファイルのアクティベートは完了です。次にアクティベートしたライセンスファイルを GitHub リポジトリの Secrets に登録して、GameCI で PlayMode 及び EditMode のテストが実行できるようにしていきます。

alf 拡張子のファイルがライセンスリクエストファイルを指していて、Unity ライセンスの発行に必要となるファイルです。ulf 拡張子のファイルが Unity ライセンスのファイルです。¹

Test runner: PlayMode 及び EditMode テストを実行して結果を参照する

GitHub Actions 上でテストを実行するために、先ほどアクティベートした Unity ライセンスの情報をワークフロー上で扱えるようにする必要があります。そのため、まずは Secrets に ulf ファイルの内容を登録することから始めます。

Secrets 登録画面に遷移する" />
1. Unity ライセンスの情報登録のため、Github リポジトリの Secrets 登録画面に遷移する

Secrets の UNITY_LICENSE を参照する。そのため、Name を UNITY_LICENSE で Value に ulf ファイルの中身をコピー & ペーストしておく" />
2. GameCI はライセンス情報参照のため、デフォルト設定では Secrets の UNITY_LICENSE を参照する。そのため、Name が UNITY_LICENSE、Value には ulf ファイルの中身を登録する²

上記作業で GameCI でテストやビルド実行を行える環境が整ったので、動作検証のためテスト実行用のワークフローファイルを作成します。

# .github/workflows/test.yml
name: Run EditMode and PlayMode Test
on:
  workflow_dispatch: {}
jobs:
  test:
    name: Run EditMode and PlayMode Test
    runs-on: ubuntu-latest
    steps:
      # actions/checkout@v2 を利用して作業ディレクトリに
      # Unity プロジェクトの中身をダウンロードしてくる
      - name: Check out my unity project.
        uses: actions/checkout@v2

      # GameCI の Test runner を利用して
      # EditMode 及び PlayMode のテストを実行する
      - name: Run EditMode and PlayMode Test
        uses: game-ci/unity-test-runner@v2
        env:
          # 2. の手順で Secrets に登録した Unity ライセンスの情報を指定する
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}

          # もし Professional license を使いたい場合は、
          # メールアドレス、パスワード、シリアルナンバーを入力する必要がある
          # ref: https://game.ci/docs/github/test-runner#professional-license
          # UNITY_EMAIL: ${{ secrets.UNITY_EMAIL }}
          # UNITY_PASSWORD: ${{ secrets.UNITY_PASSWORD }}
          # UNITY_SERIAL: ${{ secrets.UNITY_SERIAL }}
        with:
          projectPath: .
          # テストの実行結果もみたい場合は githubToken を指定する
          # secrets.GITHUB_TOKEN は Secrets 未登録でも利用可能
          githubToken: ${{ secrets.GITHUB_TOKEN }}

          # Unity プロジェクトのバージョンを指定する
          # ProjectSettings/ProjectVersion.txt に記載されているバージョンを入力すれば OK
          unityVersion: 2020.3.5f1

          # 実行したいテストの種類を指定できる
          # 指定可能な値は All, PlayMode, EditMode
          # testMode: All

          # テスト実行時に利用したい Docker イメージを明示的に指定できる
          # customImage: 'unityci/editor:2020.1.14f1-base-0'

      # テストの実行結果をアーティファクトにアップロードしてダウンロードして参照できるようにする
      - uses: actions/upload-artifact@v2
        if: always()
        with:
          name: Test results
          path: artifacts

上記のワークフローファイルを GitHub Actions 上で動作検証する際の手順は下記になります。

1. Unity のテストを実行するためのワークフローを選択して実行する

Test Results の項目からテストの実行結果を確認する" />
2. ワークフローの実行が成功したら、詳細画面に遷移した後、Test Results の項目からテストの実行結果を確認する

テスト実行用のワークフローファイルでは workflow_dispatch で実行可能にしていますが、pull_request を利用すればプルリク時にテストを実行させることが可能になります。

Builder: プロジェクトのビルドを実行して出力結果を確認する

GameCI にはプロジェクトのビルドを行うための GitHub Actions も用意されています。実際に GameCI で WebGL ビルドを行いその内容を GitHub Pages で確認できるようにして動作検証していきます。

早速 WebGL ビルドを行うためのワークフローファイルを作成していきます。

# .github/workflows/webgl_build.yml
name: Run the WebGL build
on:
  workflow_dispatch: {}
jobs:
  build:
    name: Run the WebGL build
    runs-on: ubuntu-latest
    steps:
      # actions/checkout@v2 を利用して作業ディレクトリに
      # Unity プロジェクトの中身をダウンロードしてくる
      - name: Check out my unity project.
        uses: actions/checkout@v2

      # GameCI の Builder を利用して、
      # Unity プロジェクトのビルドを実行する
      - name: Run the WebGL build
        uses: game-ci/unity-builder@v2
        env:
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
        with:
          # 今回は WebGL ビルドを行いたいため WebGL を指定する
          # WebGL 以外の指定可能な値は下記に記載の値が利用可能
          # ref: https://docs.unity3d.com/ScriptReference/BuildTarget.html
          targetPlatform: WebGL

          unityVersion: 2020.3.5f1
      # Builder で出力した WebGL ビルドを GitHub Pages にデプロイする
      - name: Deploy to GitHub Pages
        uses: JamesIves/[email protected]
        with:
          # GitHub Pages デプロイ用の Orphan ブランチ名を指定する
          branch: gh-pages

          # デプロイ用ビルドフォルダパスを指定する
          # GameCI の Builder はデフォルトでは build フォルダにビルド内容を出力する
          folder: build

      # Builder で出力した WebGL ビルドをアーティファクトでダウンロード可能にする
      - name: Upload the WebGL Build
        uses: actions/upload-artifact@v2
        with:
          name: Build
          path: build

上記のワークフローファイルを GitHub Actions 上で動作検証する際の手順は下記になります。

1. Unity の WebGL ビルドを実行するためのワークフローを実行する

2. ワークフローの実行が成功したら、詳細画面に遷移した後、ビルド内容が正常そうか確認する

3. ビルド内容を確認するための GitHub Pages の設定を Settings から行う

4. GitHub Pages でブラウザから WebGL ビルドの動作確認をする

上記のように Builder を利用することで WebGL ビルドの成否及び、最新のビルド内容を常に GitHub Pages で見られるようにできます。 すると WebGL ビルドが正常かどうかの確認が常に GitHub Pages を見れば把握できるようになるため、Unity1 週間ゲームジャムなどに参加する際で便利に活用できそうです。

WebGL ビルドを行う際、Unity バージョンやアセットの対応状況によっては正しくブラウザ上で動作しないビルドが出力されます。ただし、ブラウザで発生するエラー内容によっては WebGL のビルド設定を見直すだけで解決できる場合があります。 例えば unityframework is not defined というエラーが発生した際は、この記事のように WebGL の Build Settings を見直すことで解決できる場合があります。

私の環境では JamesIves/github-pages-deploy-action で GitHub Pages へのデプロイを行った際、デフォルトでは /WebGL/WebGL フォルダにビルド内容が出力されました。そのため、ブラウザから WebGL ビルドにアクセスする際、/WebGL/WebGL のような URL にアクセスする必要がありました。

Returning a license: GameCI で利用している Unity License を返却する

通常利用することは無いと公式サイトにも書かれていますが、Professional License の返却も GameCI で行うことが可能です。 今回は Personal License を利用したため使用しませんでしたが、下記をワークフローのステップに組み込むことで Professional License を返却できるようです。

# ...
# どこかのタイミングでライセンスのアクティベートを行う
- name: Activate Unity
  uses: game-ci/unity-activate@v1
  env:
    UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}

#...
# ステップの最後などに game-ci/unity-return-license@v1 を呼び出して
# アクティベート済みのライセンスを返却する
- name: Return license
  uses: game-ci/unity-return-license@v1
  if: always()
  #...

おわりに

以前 Unity コマンドを駆使して自分で CI 環境を構築した経験があるのですが、
GameCI を利用した方が全然楽に Unity CI 環境構築を GitHub Actions 上で行えました。

ちなみに GameCI で利用されている Docker イメージは以前からよく使われていた gableroux/unity3d が元になっているようでした。ってか GabLeRoux さんのホームページを見たら、GameCI の開発を始めた方のようでした。すごい。

本記事が GitHub Actions で Unity CI 環境構築を始めようとしている方の助けになれれば幸いです。

参考リンク

alf ファイル及び ulf ファイルの実態は XML ファイルです。 ↩︎
適当なテキストエディタで ulf ファイルを開き全文をコピー & ペーストします。 ↩︎

Unityで複数の入力方法に対応するタイピングゲームを作ろう

2021-03-06T10:10:58+09:00

はじめに

はじめまして、情報系の大学に通っているプログラム初心者の大学生です。

2年前にゼミ内で小さなゲームジャムが開催され、タイピングゲームを作ることになったのですが、ネット上で紹介されている既存のタイピングゲームの制作方法では入力方法に以下のような問題があると思いました。

1. 単語を打つ手段があらかじめ決まっている。
例 : "し"と打つときに"si"と打たなければいけなく、"shi"には対応していない。

2.単語を別々に入力できない。
例 : "ちゃ"と打つときに"ち"と"ゃ"を別々にタイプできない。

そこで今回はどんな打ち方にも対応できるタイピングゲームの制作に挑戦してみました。
この記事では仕組みとプログラムに関して紹介していきます、参考にしていただければ幸いです。

参考にした作品

今回制作したプログラムでは「寿司打」のタイピングシステムを参考にしています。

寿司打

こちらからプレイできます。

どのようなシステムかというと

ゲーム画面ではこのようにタイプする文字と入力方法が表示されています。
この状態で"し"を"si"ではなく"shi"と入力しようとすると...

"sh"と入力した時点で1つ目の"し"の入力方法が"shi"に置き換わります。
(2つ目の"し"の入力方法は変わらず表示されている。)

他にも

"ック"を入力する際に、"xtu"と"ku"で別々に入力しようとすると...

"xtu"の"x"を入力した時点で”ッ”と"ク"を別々と考えて入力方法を置き換えています。

プログラム

筆者なりに上記のシステムを再現しようとすると以下のようなプログラムになりました。

Kanji.txt

タイピングゲーム内で使う文章をそのまま入力します。
一度のタイピングで入力する長さを決めて改行してください。

別に君を求めてないけど
横にいられると思いだす。
君のドルチェ＆ガッパーナの
その香水のせいだよ。

Japanese.txt

Kanji.txtの内容を全てひらがなにして入力してください。

べつにきみをもとめてないけど
よこにいられるとおもいだす。
きみのどるちぇあんどがっぱーなの
そのこうすいのせいだよ。

KanjiFuri.txt

Kanji.txt内の文字をひらがなにした時、何文字になるかを入力してください(ひらがなの場合は1)

21212111111
211111121111
2111113111111
1122111112

Dictionary.cs

全ての入力方法を連想配列で整理しています。
下の方にある関数はKeyかValueを渡すことで紐づけられた要素を全て取り出すことができます

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Dictionary : MonoBehaviour
{
    //デフォルトの入力方法
    public readonly Dictionary dic = new Dictionary() {

        {"あ", "a"},{"い", "i"},{"う", "u"},{"え", "e"},{"お", "o"},
        {"か", "ka"},{"き", "ki"},{"く", "ku"},{"け", "ke"},{"こ", "ko"},
        {"さ", "sa"},{"し", "si"},{"す", "su"},{"せ", "se"},{"そ", "so"},
        {"た", "ta"},{"ち", "ti"},{"つ", "tu"},{"て", "te"},{"と", "to"},
        {"な", "na"},{"に", "ni"},{"ぬ", "nu"},{"ね", "ne"},{"の", "no"},
        {"は", "ha"},{"ひ", "hi"},{"ふ", "hu"},{"へ", "he"},{"ほ", "ho"},
        {"ま", "ma"},{"み", "mi"},{"む", "mu"},{"め", "me"},{"も", "mo"},
        {"や", "ya"},{"ゆ", "yu"},{"よ", "yo"},
        {"ら", "ra"},{"り", "ri"},{"る", "ru"},{"れ", "re"},{"ろ", "ro"},
        {"わ", "wa"},{"を", "wo"},{"ん", "n"},
        {"が", "ga"},{"ぎ", "gi"},{"ぐ", "gu"},{"げ", "ge"},{"ご", "go"},
        {"ざ", "za"},{"じ", "zi"},{"ず", "zu"},{"ぜ", "ze"},{"ぞ", "zo"},
        {"だ", "da"},{"ぢ", "di"},{"づ", "du"},{"で", "de"},{"ど", "do"},
        {"ば", "ba"},{"び", "bi"},{"ぶ", "bu"},{"べ", "be"},{"ぼ", "bo"},
        {"ぱ", "pa"},{"ぴ", "pi"},{"ぷ", "pu"},{"ぺ", "pe"},{"ぽ", "po"},
        {"ぁ","xa" },{"ぃ","xi" },{"ぅ","xu" },{"ぇ","xe" },{"ぉ","xo" },
        {"っ", "xtu"},
        {"ゃ","xya" },{"ゅ","xyu" },{"ょ","xyo"},
        {"きゃ","kya"},{"きぃ","kyi"},{"きゅ","kyu"},{"きぇ","kye"},{"きょ","kyo"},
        {"しゃ","sya"},{"しぃ","syi"},{"しゅ","syu"},{"しぇ","she"},{"しょ","syo"},
        {"ちゃ","tya"},{"ちぃ","tyi"},{"ちゅ","tyu"},{"ちぇ","tye"},{"ちょ","tyo"},
        {"にゃ","nya"},{"にぃ","nyi"},{"にゅ","nyu"},{"にぇ","nye"},{"にょ","nyo"},
        {"ひゃ","hya"},{"ひぃ","hyi"},{"ひゅ","hyu"},{"ひぇ","hye"},{"ひょ","hyo"},
        {"みゃ","mya"},{"みぃ","myi"},{"みゅ","myu"},{"みぇ","mye"},{"みょ","myo"},
        {"りゃ","rya"},{"りぃ","ryi"},{"りゅ","ryu"},{"りぇ","rye"},{"りょ","ryo"},
        {"ぎゃ","gya"},{"ぎぃ","gyi"},{"ぎゅ","gyu"},{"ぎぇ","gye"},{"ぎょ","gyo"},
        {"じゃ","zya"},{"じぃ","zhi"},{"じゅ","zyu"},{"じぇ","zye"},{"じょ","zyo"},
        {"ぢゃ","dya"},{"ぢぃ","dyi"},{"ぢゅ","dyu"},{"ぢぇ","dye"},{"ぢょ","dyo"},
        {"びゃ","bya"},{"びぃ","byi"},{"びゅ","byu"},{"びぇ","bye"},{"びょ","byo"},
        {"てゃ","tha"},{"てぃ","thi"},{"てゅ","thu"},{"てぇ","the"},{"てょ","tho"},
        {"うぁ","wha"},{"うぃ","whi"},{"うぇ","whe"},{"うぉ","who"},
        {"でゃ","dha"},{"でぃ","dhi"},{"でゅ","dhu"},{"でぇ","dhe"},{"でょ","dho"},
        {"くぁ","qa"},{"くぃ","qi"},{"くぇ","qe"},{"くぉ","qo"},
        {"ふぁ","fa"},{"ふぃ","fi"},{"ふぇ","fe"},{"ふぉ","fo"},
        {"ヴぁ","va"},{"ヴぃ","vi"},{"ヴ","vu"},{"ヴぇ","ve"},{"ヴぉ","vo"},
        {"ぴゃ","pya"},{"ぴぃ","pyi"},{"ぴゅ","pyu"},{"ぴぇ","pye"},{"ぴょ","pyo"},
        {"、","," },{"。","."},{"「","["},{"」","]"},
    };

    //デフォルトではない入力方法
    public readonly Dictionary Epicdic = new Dictionary()
    {
        {"ca","か" },{"ci","し" },{"cu","く" },{"ce","せ" },{"co","こ" },
        {"cha","ちゃ"},{"chi","ち"},{"chu","ちゅ"},{"che","ちぇ"},{"cho","ちょ"},
        {"cya","ちゃ"},{"cyi","ちぃ"},{"cyu","ちゅ"},{"cye","ちぇ"},{"cyo","ちょ"},
        {"fu","ふ"},
        {"ja","じゃ"},{"ji","じ"},{"ju","じゅ"},{"je","じぇ"},{"jo","じょ"},
        {"la","ぁ" },{"li","ぃ" },{"lu","ぅ" },{"le","ぇ" },{"lo","ぉ" },
        {"lya","ゃ" },{"lyu","ゅ" },{"lyo","ょ" },
        {"ltu", "っ"},
        {"nn","ん" },
        {"qu","く" },{"qyi","くぃ"},{"qye","くぇ"},
        {"sha","しゃ" },{"shi","し"},{"shu","しゅ"},{"she","しぇ"},{"sho","しょ"},
        {"tsu","つ"},
        {"yi","い"},{"ye","え"},
    };

    //渡した要素と紐づいている要素をdicから探し、リストにして返します。
    public KeyValuePair SearchdicKey(string key)
    {
        var dicpair = new KeyValuePair();

        foreach (KeyValuePair pair in dic)
        {
            if (key == pair.Key)
            {
                dicpair = pair;
            }
        }
        return dicpair;
    }

    //渡した要素と紐づいている要素をdicから探し、リストにして返します。
    public KeyValuePair SearchdicValue(string value)
    {
        var dicpair = new KeyValuePair();

        foreach (KeyValuePair pair in dic)
        {
            if (value == pair.Value)
            {
                dicpair = pair;
            }
        }
        return dicpair;
    }

     //渡した要素と紐づいている要素を両方のdicから探し、リストにして返します。
    public List> SearchTotaldicKey(string key)
    {
        var dicpair = new List>();

        foreach (KeyValuePair pair in Epicdic)
        {
            if (key == pair.Value)
            {
                dicpair.Add(new KeyValuePair(pair.Value, pair.Key));
            }
        }

        foreach (KeyValuePair pair in dic)
        {
            if (key == pair.Key)
            {
                dicpair.Add(pair);
            }
        }
        return dicpair;
    }

    //渡した要素と紐づいている要素を両方のdicから探し、リストにして返します。
    public List> SearchTotaldicValue(string value)
    {
        var dicpair = new List>();

        foreach (KeyValuePair pair in Epicdic)
        {
            if (value == pair.Value)
            {
                dicpair.Add(pair);
            }
        }

        foreach (KeyValuePair pair in dic)
        {
            if (value == pair.Key)
            {
                dicpair.Add(new KeyValuePair(pair.Value, pair.Key));
            }
        }
        return dicpair;
    }
}

SetList.cs

次にタイピングするKanjij.txtと同じ行にあるJapanese.txtとKanjiFuri.txtの文字列をSetLists()に渡し、それぞれを区分しながらListに要素を追加していきます。

・Japanese.txtは一度に入力可能でありながら、文字列が最長になるように区分し、FuriListに追加していきます。
・KanjiFuri.txtは1つの数字ごとに文字列を区分しながらKanjiFuriListに追加していきます。
・また、FuriListに要素を追加しながらDictionary.dicから入力方法を取得し、RomaListに追加していきます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SetList : MonoBehaviour
{
    private SetText ST;
    private Dictionary Dic;

    public List RomaList;
    public List FuriList;
    public List KanjiFuriList;

    void Awake()
    {
        ST = GetComponent();
        Dic = GetComponent();
    }

    private string FuriStr = "";
    private string RomaStr = "";

    //FuriStrとRomaStrの内容をそれぞれのリストに入れて初期化する。
    private void AddList()
    {
        FuriList.Add(FuriStr);
        RomaList.Add(RomaStr);

        FuriStr = "";
        RomaStr = "";
    }

    //渡されたJapanese.txtの一行を一文字づつ仕分けるよう
    public void SetLists(string Roma , string KanjiFuri)
    {

        for(int i = 0; i < Roma.Length - 1; i++)
        {
            var chr = Roma[i].ToString();

            switch (chr)
            {
                case "っ":

                    FuriStr += chr;

                    if (i != Roma.Length - 1)
                    {
                        switch(Roma[i + 1].ToString())
                        {
                            case "あ":
                            case "い":
                            case "う":
                            case "え":
                            case "お":
                            case "な":
                            case "に":
                            case "ぬ":
                            case "ね":
                            case "の":
                            case "ん":
                                RomaStr += Dic.SearchdicKey(Roma[i + 1].ToString()).Value;
                                AddList();
                                break;

                            default:
                                RomaStr += Dic.SearchdicKey(Roma[i + 1].ToString()).Value.Substring(0,1);
                                break;
                        }
                    }
                    else
                    {
                        FuriStr += chr;

                        AddList();
                    }
                    break;

                case "ぁ":
                case "ぃ":
                case "ぅ":
                case "ぇ":
                case "ぉ":
                case "ゃ":
                case "ゅ":
                case "ょ":

                    if (i != 0 && FuriStr != "")
                    {

                        if (Dic.dic.ContainsKey(FuriStr + chr))
                        {
                            FuriStr += chr;

                            RomaStr += Dic.SearchdicKey(Roma[i - 1].ToString() + chr).Value;

                            AddList();
                        }
                        else
                        {
                            AddList();
                            FuriStr += chr;
                            RomaStr += Dic.SearchdicKey(chr).Value;
                            AddList();
                        }
                    }
                    else
                    {
                        FuriStr += chr;

                        RomaStr += Dic.SearchdicKey(chr).Value;

                        AddList();
                    }

                    break;

                case "ん":

                    FuriStr += chr;
                    RomaStr += Dic.SearchdicKey(chr).Value;

                    if (i != Roma.Length - 1)
                    {
                        switch(Roma[i + 1].ToString())
                        {
                            case "あ":
                            case "い":
                            case "う":
                            case "え":
                            case "お":
                            case "な":
                            case "に":
                            case "ぬ":
                            case "ね":
                            case "の":
                            case "ん":
                            case "や":
                            case "ゆ":
                            case "よ":
                            case "ゃ":
                            case "ゅ":
                            case "ょ":
                                RomaStr += "n";
                                break;
                        }
                    }
                    else
                    {
                        RomaStr += "n";
                    }

                    AddList();

                    break;

                default:

                    if (i != Roma.Length - 1)
                    {
                        switch (Roma[i + 1].ToString())
                        {
                            case "ぁ":
                            case "ぃ":
                            case "ぅ":
                            case "ぇ":
                            case "ぉ":
                            case "ゃ":
                            case "ゅ":
                            case "ょ":

                                FuriStr += chr;

                                break;

                            default:
                                FuriStr += chr;
                                RomaStr += Dic.SearchdicKey(chr).Value;

                                AddList();
                                break;
                        }
                    }
                    else
                    {
                        FuriStr += chr;
                        RomaStr += Dic.SearchdicKey(chr).Value;

                        AddList();
                    }


                    break;
            }
        }

        int num = 0;

        for(int i = 0; i < KanjiFuri.Length - 1; i++)
        {
            num += KanjiFuri[i] - '0';

            KanjiFuriList.Add(num);
        }
    }
}

SetText.cs

txtファイルや表示中の文字列の行数、打ち終わった字数などを管理しています。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


public class SetText : MonoBehaviour
{
    private SetList SL;
    private TypingSystem TS;

    [SerializeField] private TextAsset Furigana = null;     //ここにKanjiFuri.txtを入れる
    [SerializeField] private TextAsset Hiragana = null;     //ここにJapanese.txtを入れる
    [SerializeField] private TextAsset Kanji = null;        //ここにKanji.txtを入れる

    [SerializeField] private List FuriList = new List();
    [SerializeField] private List HiraList = new List();
    [SerializeField] private List KanjiList = new List();

    [SerializeField] private Text RomaText = null;  //ここにKanjiFuri.txtの内容を表示するためのテキストを入れる
    [SerializeField] private Text FuriText = null;  //ここにJapanese.txtの内容を表示するためのテキストを入れる
    [SerializeField] private Text KanjiText = null; //ここにKanji.txtの内容を表示するためのテキストを入れる

    [SerializeField] private int ColumunNum = -1; //現在打っている文字列の行数、最初に+1するため最初は-1にする

    private int SetColumunNum
    {
        get { return ColumunNum; }
        set
        {
            ColumunNum = value;
            SL.SetLists(HiraList[ColumunNum],FuriList[ColumunNum]);
            KanjiProp = 0;
            ListProp = 0;
            FuriProp = 0;
            RomaProp = 0;
        }
    }

    public int Romanum { get; private set; }
    public int Furinum { get; private set; }
    public int Kanjinum { get; private set; }
    public int Listnum { get; private set; }

    //メインの文字の設定
    private int KanjiProp
    {
        get { return Kanjinum; }
        set
        {
            Kanjinum = value;
            var kanjifuristr = "";
            kanjifuristr += KanjiList[ColumunNum].Insert(Kanjinum, "");
            KanjiText.text = kanjifuristr;
        }
    }

    //フリガナの文字の設定
    private int FuriProp
    {
        get { return Furinum; }

        set
        {
            Furinum = value;
            var furistr = "";
            furistr += HiraList[ColumunNum].Insert(Furinum, "");
            FuriText.text = furistr;

            while (Furinum >= SL.KanjiFuriList[Kanjinum])
            {
                KanjiProp++;
            }
        }
    }

    //SetList.FuriListの何個目の要素を打っているか
    private int ListProp
    {
        get { return Listnum; }

        set
        {
            if(value == SL.FuriList.Count)
            {
                ResetText();
                return;
            }
            else if(value != 0)
            {
                FuriProp += SL.FuriList[Listnum].Length;
            }
            Listnum = value;
        }
    }

    //ローマ字の設定
    public int RomaProp
    {
        get { return Romanum; }
        set
        {
            Romanum = value;

            if (Romanum == SL.RomaList[Listnum].Length)
            {
                ListProp++;
                TS.ResetTypedStr();
                RomaProp = 0;
            }
            else
            {
                var romastr = "";

                for (int i = 0; i < SL.RomaList.Count; i++)
                {
                    var str = SL.RomaList[i];

                    if (i != Listnum)
                    {
                        romastr += str;
                    }
                    else
                    {
                        romastr += str.Insert(Romanum, "");
                    }
                }
                RomaText.text = romastr;
            }
        }
    }

    private void Start()
    {
        SL = GetComponent();
        TS = GetComponent();

        SetStrList(Hiragana, HiraList);
        SetStrList(Furigana, FuriList);
        SetStrList(Kanji, KanjiList);

        ResetText();

        void SetStrList(TextAsset textAsset, List list)
        {
            var array = textAsset.text.Split('\n');
            list.AddRange(array);
        }
    }

    //テキストを初期化する
    private void ResetText()
    {
        SL.FuriList.Clear();
        SL.RomaList.Clear();
        SL.KanjiFuriList.Clear();

        SetColumunNum++;
    }

}

TypingSystem.cs

txtファイルや表示中の文字列の行数、打ち終わった字数などを管理しています。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TypingSystem : MonoBehaviour
{
    private SetList SL;
    private SetText ST;
    private Dictionary Dic;

    private string Typedstr;

    public void ResetTypedStr()
    {
        Typedstr = "";
    }

    private void Awake()
    {
        ST = GetComponent();
        SL = GetComponent();
        Dic = GetComponent();
    }

    string[] keys = { "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", 
        "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "-", ",",".","[","]"};

    //keys内にあるキーを打った時
    void Update()
    {
        foreach (string key in keys)
        {
            if (Input.GetKeyDown(key))
            {
                TypeJudge(key);
            }
        }
    }

    public void TypeJudge(string type)
    {
        //打っている途中の文字と現在打った文字をつなげる
        var JudgeStr = Typedstr + type;
        bool jud = false;

        //打った文字が n で 前の文字が nn じゃない場合
        if (type == "n" && SL.RomaList[ST.Listnum] == "n")
        {
            SL.RomaList[ST.Listnum] = "nn";
            RightEnter();
            return;
        }

        //正しく打てている場合
        if (type == SL.RomaList[ST.Listnum][ST.RomaProp].ToString())
        {
            RightEnter();
        }
        else
        {
            //Dictionaryの中のEpicDic内の文字を打とうとしている場合
            for (int i = SL.FuriList[ST.Listnum].Length; i != 0 && !jud ; i--)
            {
                var SearchStr = SL.FuriList[ST.Listnum].Substring(0,i);

                if (i != 1 && SL.FuriList[ST.Listnum][0].ToString() == "っ")
                {
                    SearchStr = SearchStr.Substring(1, SearchStr.Length-1);
                }

                var list = Dic.SearchTotaldicKey(SearchStr);

                foreach (var d in list)
                {
                    var MatchStr = "";

                    if (i != 1 && SL.FuriList[ST.Listnum][0].ToString() == "っ")
                    {
                        MatchStr += d.Value.Substring(0, 1);
                    }

                    if (JudgeStr.Length <= MatchStr.Length + d.Value.Length && !jud)
                    {

                        MatchStr += d.Value;

                        if (JudgeStr == MatchStr.Substring(0, JudgeStr.Length))
                        {
                            //print(MatchStr + "で見つかりました");
                            TypeMatch(i , MatchStr);
                        }
                    }
                }
            }

            //該当した文字が無い場合(ミスタイプしている場合)
            if(!jud)
            {
                MissEnter();
            }

        }

        //EpicDic内にある文字が正しく打てている時に呼び出される
        //打った文字とまだ打っていない文字を切り分ける作業をする
        void TypeMatch(int num, string MatchStr)
        {
            jud = true;
            var Furistr = SL.FuriList[ST.Listnum];
            SL.FuriList[ST.Listnum] = Furistr.Substring(0, num);
            SL.RomaList[ST.Listnum] = MatchStr;

            if(Furistr.Length != num)
            {
                SL.FuriList.Insert(ST.Listnum + 1, Furistr.Substring(num));
                SL.RomaList.Insert(ST.Listnum + 1, Dic.SearchdicKey(SL.FuriList[ST.Listnum + 1]).Value);
            }

            Typedstr = JudgeStr;
            RightEnter();
        }

        //ミスタイプしたとき
        void MissEnter()
        {
            print("ミスしました！");
        }

        //正しく打てているとき
        void RightEnter()
        {
            Typedstr = JudgeStr;
            ST.Romanum++;
        }
    }
}

実際に動かしてみる

上にあるプログラムを全て同じオブジェクトにアタッチし、以下の画像のように設定すると動きます。

完成した作品

そしてこのプログラムを組み込んで実際に完成した作品がこちらになります。

ケロツグ -雨乞いタイピング-

Webからのプレイはこちらから。
プロジェクトのダウンロードはこちらから

芥川龍之介の「蛙」の文をひたすら打つタイピングゲームです。
文字を打つたびに蛙が増えていき、正確なタイピングを続けると制限時間が増えたりします。

最後に

作るのは苦戦しましたが内容は結構シンプルな構造になっていると思います。
この方法で作っていると対応していないキーが出てくると思います。
見つけた場合はDisctionary.csの方に書き足して頂けると対応されると思います。

最後まで読んでいただきありがとうございました。

柔軟な入力方法に対応したタイピングゲームの作り方

2020-12-05T16:08:03+09:00

この記事は「Unityゲーム開発者ギルド2 Advent Calender 2020」12日目の記事です。

まえがき

おはようございます。こんにちは。こんばんは。そしてはじめまして。アキオと申します。ちょうど記事を公開した12月12日が私の誕生日でして、今回で26歳になりました。この26歳の間はとにかくUnityとRailsを触って、様々なゲームやサービスを多数公開運営したいと思います。

早速質問ですが、皆様はタイピングゲームはお好きでしょうか？

最近はPC離れも加速してモバイルゲームが主流となった今、タイピングゲームは減少傾向です。けれでもPCメインのunityroomは、同じPCメインのタイピングゲームとの相性は抜群です。特にunity1weekに毎回参加している人々は、タイピングゲームを作ってみたいとは思ったことがあるはずです。

けれどもunity1weekで300~500近い作品が公開される中でタイピングゲームは多くて3作品しかありません。全体では8000近いゲームがunity1weekで公開されていますが。タイピングゲームは1%しか存在しません。

では、なぜ相性抜群のタイピングゲームがunityroomに少ないかというと
「実力差が大きい」「ありがちなゲームになる」という理由もあるかと思いますが、何よりも「作るのが難しい」のではないかと私は思います。

というのも現在ネット上に公開されている日本語入力のタイピングゲームのほぼ全てが、「し」を「shi」、「つ」を「tsu」と入力できます。

そのような柔軟な入力方法を実装するのが難しいから、タイピングゲームが少ないのではないかと私は思います。

逆を言えば、その柔軟な入力方法に対応していないタイピングゲームの作成は簡単だと私は思います。けれどもそれでは「やりにくい」「今時のタイピングゲームではない」という感想を抱えて、作るのをためらうのではないでしょうか？

なので、今回はunityroom等にタイピングゲームを増やすべく、その柔軟な入力方法に対応したタイピングゲームの作り方を紹介したいと思います。

対象読者は、ある程度Unityが触れて、TextMeshPro等などが使えることを想定しています。なのでちょっと説明が雑かもしれませんが、ご了承願います。

とりあえずUnityを起動してタイピングゲームを作ろう！

まず普段通りにプロジェクトを作成します。（2Dでも3Dでも可能）今回はTextMeshProを使いますので、TextMeshProをインポートして、TextMeshProのGameObject「TextMeshProTitle」と「TextMeshProRoman」のオブジェクトを作成します。

そして「TypingManager.cs」を作成します。そして空のGameObject「TypingManager」をHierarchyにアタッチして、そのGameObjectに先ほど作成した「TypingManager.cs」をInspector上でアタッチします。

ここからは、延々と「TypingManager.cs」にコードを書きます。

タイピングゲームの要となる「OnGUI()」を定義しよう！

Unityではスクリプトの生成時に最初から存在するUpdate()というイベント関数が存在しますが、これは毎フレーム呼び出される関数なので、1フレームあたりに2回以上の入力が発生すると、2回目以降のキー入力が検知できないので、基本使うべきではありません。
なので今回は、Unityでは標準でOnGUI()というイベント関数を使います。この関数はキーボードやマウスのクリックならびにクリック解除の時に呼び出されます。今回はあくまでもキーの入力時のみに処理を行いたいのでifを使って以下のように書きます。

private void OnGUI()
{
    if (Event.current.type == EventType.KeyDown)
    {
        // キーが入力された時に処理される。
    }
}

OnGUI()関数にEvent.current.type == EventType.KeyDownという条件式を書けば、キーの入力時のみtrueになり、処理が実行されるようになります。

もう早速ですが、タイピングゲームに使われるOnGUI()の中身を全部書きましょう。以下のようになります。

private void OnGUI()
{
    if (Event.current.type == EventType.KeyDown)
    {
        switch(InputKey(GetCharFromKeyCode(Event.current.keyCode)))
        {
            case 1:
            case 2:
                _romanIndex++;
                if(_roman[_romanIndex] == '@')
                {
                    InitializeQuestion();
                }
                else
                {
                    _textMeshProRoman.text = GenerateRomanText();
                }
                break;
            case 3:
                // ここにミスタイプ時の処理を記述する
                break;
        }
    }
}

当然ですがInputKey()やGetCharFromKeyCode()、InitializeQuestion()、GenerateRomanText()ならびに_roman[]、 _romanIndex、 _textMeshProRomanは未定義ですので、このままでは動作しません。なのでそれぞれのメソッドや変数の解説をしながら実装したいと思います。

KeyCodeをcharに変換する「GetCharFromKeyCode()」関数を実装しよう！

キーが入力されOnGUI()が実行されるとEvent.current.keyCodeに入力されたキーコードが格納されます。型はKeyCodeです。
この型はタイピングゲームのアルゴリズム実装には向いていないので、KeyCodeをcharに変換する関数GetCharFromKeyCode()を実装しましょう。
以下のようになります。今回はShift入力は省略しました。

char GetCharFromKeyCode(KeyCode keyCode)
{
    switch (keyCode)
    {
        case KeyCode.A:
        return 'a';
        case KeyCode.B:
        return 'b';
        case KeyCode.C:
        return 'c';
        case KeyCode.D:
        return 'd';
        case KeyCode.E:
        return 'e';
        case KeyCode.F:
        return 'f';
        case KeyCode.G:
        return 'g';
        case KeyCode.H:
        return 'h';
        case KeyCode.I:
        return 'i';
        case KeyCode.J:
        return 'j';
        case KeyCode.K:
        return 'k';
        case KeyCode.L:
        return 'l';
        case KeyCode.M:
        return 'm';
        case KeyCode.N:
        return 'n';
        case KeyCode.O:
        return 'o';
        case KeyCode.P:
        return 'p';
        case KeyCode.Q:
        return 'q';
        case KeyCode.R:
        return 'r';
        case KeyCode.S:
        return 's';
        case KeyCode.T:
        return 't';
        case KeyCode.U:
        return 'u';
        case KeyCode.V:
        return 'v';
        case KeyCode.W:
        return 'w';
        case KeyCode.X:
        return 'x';
        case KeyCode.Y:
        return 'y';
        case KeyCode.Z:
        return 'z';
        case KeyCode.Alpha0:
        return '0';
        case KeyCode.Alpha1:
        return '1';
        case KeyCode.Alpha2:
        return '2';
        case KeyCode.Alpha3:
        return '3';
        case KeyCode.Alpha4:
        return '4';
        case KeyCode.Alpha5:
        return '5';
        case KeyCode.Alpha6:
        return '6';
        case KeyCode.Alpha7:
        return '7';
        case KeyCode.Alpha8:
        return '8';
        case KeyCode.Alpha9:
        return '9';
        case KeyCode.Minus:
        return '-';
        case KeyCode.Caret:
        return '^';
        case KeyCode.Backslash:
        return '\\';
        case KeyCode.At:
        return '@';
        case KeyCode.LeftBracket:
        return '[';
        case KeyCode.Semicolon:
        return ';';
        case KeyCode.Colon:
        return ':';
        case KeyCode.RightBracket:
        return ']';
        case KeyCode.Comma:
        return ',';
        case KeyCode.Period:
        return '_';
        case KeyCode.Slash:
        return '/';
        case KeyCode.Underscore:
        return '_';
        case KeyCode.Backspace:
        return '\b';
        case KeyCode.Return:
        return '\r';
        case KeyCode.Space:
        return ' ';
        default:
        return '\0';
    }
}

（誰かこのコードを簡潔にできるなら教えて）

ひどいコードですね（笑）でも私の技術力ではこうなってしまいました。こうやって、KeyCodeをcharに変換しているわけです。今回はShiftキーによる大文字入力には対応していません。Functionキーなどには入力対応しておらず、それらが入力された場合にもOnGUI()が実行されEvent.current.keyCodeに格納され、上記の関数が実行されますが、その場合はnull文字\0を返しています。

「InputKey()」を実装しよう！

さて、OnGUI()関数を確認すると、GetCharFromKeyCode()のcharの返り値が、InputKey()の引数となっているわけですが、この関数は入力が正しいか否かを判断します。この関数の返り値はintで、正しい入力があれば1を、ミスタイプであれば3を返し、null文字ならば0を返します。

int InputKey(char inputChar)
{
    char currentChar = _roman[_romanIndex];

    if(inputChar == '\0')
    {
        return 0;
    }

    if(inputChar == currentChar)
    {
        return 1;
    }

    return 3;
}

返り値の2については、後ほどの「柔軟な入力方法」によって解説します。

ところで「_romanとか_romanIndexって何？」と思った方、今から解説します。

タイピングの状態を格納するインスタンス変数を作成しよう！

タイピングゲームを実装するからには、当然タイピング用の状態を格納する変数が必要になります。
なので今回は_romanとromanIndexのインスタンス変数を定義しましょう。

public class TypingManager : MonoBehaviour
{
    private List _roman = new List();
    private int _romanIndex = 0;
}

_romanはタイピングの処理に用いられるListのインスタンス変数で、頻繁にAdd()やClear()を用いますので、Listとなっております。
そして_romanIndexは_romanの参照に用いられるだけのint型のインスタンス変数です。

問題を初期化する「InitializeQuestion()」関数を実装しよう！

どんなタイピングゲームにも「問題の初期化」というのは必ず存在しますので、それを行うための関数InitializeQuestion()を実装します。

void InitializeQuestion()
{
    Question question = _questions[UnityEngine.Random.Range(0, _questions.Length)];

    _romanIndex = 0;

    _roman.Clear();

    char[] characters = question.roman.ToCharArray();

    foreach(char character in characters)
    {
        _roman.Add(character);
    }

    _roman.Add('@');

    _textMeshProTitle.text = question.title;
    _textMeshProRoman.text = GenerateRomanText();
}

Clear()メソッドで_romanの中身を空にし、その後questionのromanプロパティ（string型）をToCharArray()メソッドでchar型の配列に変換して、foreachで_romanに次から次へとAdd()メソッドで追加します。

そして_romanの最後に@を追加します。この@が「タイピングの終わり」であることを示します。

ところでQuestionが登場しました。タイピングゲームにはタイピング用の文字列のリストが必要になります。

なのでQuestionクラスを作成して、[SerializeField]でインスペクタ上から文字列を編集できるようにします。

_textMeshProTitleや_textMeshProRomanは、画面に表示するためのTextMeshProのオブジェクトが格納されたインスタンス変数です。
ついでに、TextMeshProのGameObjectを取得するコードもStart()関数等に追加します。

using System; //追加する
using System.Collections;
using System.Collections.Generic;
using TMPro; //これも追加する

// 以下の追加する
[Serializable]
public class Question
{
    public string title;
    public string roman;
}
// ここまで

public class TypingManager : MonoBehaviour
{
    // 以下を追加する
    [SerializedField] Question[] _questions = new Question[12]; //お好きな数字をどうぞ

    private TextMeshProUGUI _textMeshProTitle;
    private TextMeshProUGUI _textMeshProRoman;
    // ここまで
    void Start()
    {
        // 以下を追加する
        _textMeshProTitle = GameObject.Find("TextMeshProTitle").GetComponent();
        _textMeshProRoman = GameObject.Find("TextMeshProRoman").GetComponent();
        InitializeQuestion();
        // ここまで
    }
}

表示用のテキストを作る「GenerateRomanText()」関数を実装しよう！

タイピングゲームには当たり前のように、入力後の文字と入力前の文字で色が異なりますので、それを実装するための関数を実装します。

string GenerateRomanText()
{
    string text = ""
    for (int i = 0; i < _roman.Count; i++)
    {
        if (_roman[i] == '@')
        {
            break;
        }
        if (i == _romanIndex)
        {
            text += ""
        }

        text += _roman[i];
    }
    text += ""
    return text;
}

TextMeshProにはタグ機能が存在しており、特定の部分のみスタイルを変更する「」を使用しました。

ただ、このままでは画面上に「」などが表示されてしまいます。なのでUnityエディタ上で「Project Settings」→「TextMeh Pro」の「Settings」→「Default Style Sheet」の「Default Style Sheet (TMP_StyleSheet)」をダブルクリックして、Inspector上で以下の図のようにタグを追加します。

こうすることによって、「」は表示されなくなり、タイピング済の文字とそうでない文字のスタイルが変わります。

とりあえず完成だ！

最後にUnityエディタ上の「Hierarchy」から「TypingManager」を選択して、Questionsの値をセットすれば完成です。
（Romanのセットには最短になるようセットします（「chi」→「ti」、「zyo」→「jo」等））

これで「Play」を実行しましょう！

柔軟な入力方法に対応させよう！

タイピング機能はうまく動作しましたか？
（動作しなかった場合、自力でソースコード等を修正できますか？🙇‍♂️）

しかし先ほど作成したタイピングゲームは柔軟な入力方法には対応していません。
このままでは、非常に操作性の悪いタイピングゲームとなってしまい、今時リリースできるようなものではありません。

なので本題である柔軟な入力方法に対応させます。

WindowsとMacで異なる入力方法

タイピングの入力方法については、以下のURLが参考になります。

Windows：
https://www.cc.saga-u.ac.jp/system/CenterSystem/ime_romaji.htm

Mac：
https://support.apple.com/ja-jp/guide/japanese-input-method/jpim10277/6.2.1/mac/10.15

よくよく確認すると、WindowsとMacでは入力方法が異なることがわかります。（例：Windowsでは「ca」と入力できるが、Macではできない）
もしもWindowsおよびMac専用のソフトとしてリリースするのであれば、両方に対応する必要はないと思いますが、WebGLでビルドしてunityroomにアップロードする場合、WindowsとMacを区別する必要があります
再び「TypingManager.cs」を編集します。

public class TypingManager : MonoBehaviour
{
    private bool _isWindows; //追加する
    private bool _isMac; //追加する

    void Start()
    {
        // 以下を追加する
        if(SystemInfo.operatingSystem.Contains("Windows"))
        {
            _isWindows = true;
        }

        if(SystemInfo.operatingSystem.Contains("Mac"))
        {
            _isMac = true;
        }
        // ここまで

        InitializeQuestion();
    }
}

柔軟な入力方法に対応するアルゴリズム

現在の日本語入力タイピングにおいて、柔軟な入力方法に対応させるアルゴリズムはいくつか存在します。
今回は「前後比較法（私が勝手に名付けた方法です）」を使います。

「前後比較法」は、今入力すべき文字とその文字の前後を比較することによって「どのひらがなを入力するのか」を判断して、入力してもOKな文字を抽出するアルゴリズムです。

例えば「うちわ（utiwa）」を考えましょう。

まず最初の入力文字が「u」なので、入力するひらがなは「う」であることが判明します。「う」の別入力が「wu」であるので「w」を入力しても構わないことがわかります。

当然ですが、別入力を行いますとローマ字を改良する必要があります。今回の例で「w」を入力するとローマ字表記は「wutiwa」に変化します。

次の入力文字も「u」ですが、前の文字が「w」なので「う」の入力途中であることが判明します。よって今回は「w」を入力することができません。

そして「u」の入力後、入力文字が「t」になります。この入力文字の前が母音で、後の文字が「i」なので「ち」を入力することが判明します。同様に「ち」の別入力は「chi」なので「c」を入力してもOKとなります。

もちろん「c」を入力した後は「wuchiwa」に変形する必要があります。

こんな感じでほかの文字に対応させることができます。

「InputKey()」関数を大規模改造する。

上記のアルゴリズムを用いてInputKey()を改良します。
以下のコードを解説するとかなり長いので省略します。

int InputKey(char inputChar)
{
    char prevChar3 = _romanIndex >= 3 ? _roman[_romanIndex - 3] : '\0';
    char prevChar2 = _romanIndex >= 2 ? _roman[_romanIndex - 2] : '\0';
    char prevChar = _romanIndex >= 1 ? _roman[_romanIndex - 1] : '\0';
    char currentChar = _roman[_romanIndex];
    char nextChar = _roman[_romanIndex + 1];
    char nextChar2 = nextChar == '@' ? '@' : _roman[_romanIndex + 2];

    if (inputChar == '\0')
    {
        return 0;
    }

    if (inputChar == currentChar)
    {
        return 1;
    }

    //「い」の曖昧入力判定（Windowsのみ）
    if (_isWindows && inputChar == 'y' && currentChar == 'i' &&
        (prevChar == '\0' || prevChar == 'a' || prevChar == 'i' || prevChar == 'u' || prevChar == 'e' ||
         prevChar == 'o')) 
    {
        _roman.Insert(_romanIndex, 'y');
        return 2;
    }

    if (_isWindows && inputChar == 'y' && currentChar == 'i' && prevChar == 'n' && prevChar2 == 'n' &&
        prevChar3 != 'n')
    {
        _roman.Insert(_romanIndex, 'y');
        return 2;
    }

    if (_isWindows && inputChar == 'y' && currentChar == 'i' && prevChar == 'n' && prevChar2 == 'x')
    {
        _roman.Insert(_romanIndex, 'y');
        return 2;
    }

    //「う」の曖昧入力判定（「whu」はWindowsのみ）
    if (inputChar == 'w' && currentChar == 'u' && (prevChar == '\0' || prevChar == 'a' || prevChar == 'i' ||
                                                   prevChar == 'u' || prevChar == 'e' || prevChar == 'o'))
    {
        _roman.Insert(_romanIndex, 'w');
        return 2;
    }

    if (inputChar == 'w' && currentChar == 'u' && prevChar == 'n' && prevChar2 == 'n' && prevChar3 != 'n')
    {
        _roman.Insert(_romanIndex, 'w');
        return 2;
    }

    if (inputChar == 'w' && currentChar == 'u' && prevChar == 'n' && prevChar2 == 'x')
    {
        _roman.Insert(_romanIndex, 'w');
        return 2;
    }

    if (_isWindows && inputChar == 'h' && prevChar2 != 't' && prevChar2 != 'd' && prevChar == 'w' &&
        currentChar == 'u') 
    {
        _roman.Insert(_romanIndex, 'h');
        return 2;
    }

    //「か」「く」「こ」の曖昧入力判定（Windowsのみ）
    if (_isWindows && inputChar == 'c' && prevChar != 'k' &&
        currentChar == 'k' && (nextChar == 'a' || nextChar == 'u' || nextChar == 'o'))
    {
        _roman[_romanIndex] = 'c';
        return 2;
    }

    //「く」の曖昧入力判定（Windowsのみ）
    if (_isWindows && inputChar == 'q' && prevChar != 'k' && currentChar == 'k' && nextChar == 'u')
    {
        _roman[_romanIndex] = 'q';
        return 2;
    }

    //「し」の曖昧入力判定
    if (inputChar == 'h' && prevChar == 's' && currentChar == 'i')
    {
        _roman.Insert(_romanIndex, 'h');
        return 2;
    }

    //「じ」の曖昧入力判定
    if (inputChar == 'j' && currentChar == 'z' && nextChar == 'i')
    {
        _roman[_romanIndex] = 'j';
        return 2;
    }

    //「しゃ」「しゅ」「しぇ」「しょ」の曖昧入力判定
    if (inputChar == 'h' && prevChar == 's' && currentChar == 'y')
    {
        _roman[_romanIndex] = 'h';
        return 2;
    }

    //「じゃ」「じゅ」「じぇ」「じょ」の曖昧入力判定
    if (inputChar == 'z' && prevChar != 'j' && currentChar == 'j' &&
        (nextChar == 'a' || nextChar == 'u' || nextChar == 'e' || nextChar == 'o'))
    {
        _roman[_romanIndex] = 'z';
        _roman.Insert(_romanIndex + 1, 'y');
        return 2;
    }

    //「し」「せ」の曖昧入力判定（Windowsのみ）
    if (_isWindows && inputChar == 'c' && prevChar != 's' && currentChar == 's' &&
        (nextChar == 'i' || nextChar == 'e'))
    {
        _roman[_romanIndex] = 'c';
        return 2;
    }

    //「ち」の曖昧入力判定
    if (inputChar == 'c' && prevChar != 't' && currentChar == 't' && nextChar == 'i')
    {
        _roman[_romanIndex] = 'c';
        _roman.Insert(_romanIndex + 1, 'h');
        return 2;
    }

    //「ちゃ」「ちゅ」「ちぇ」「ちょ」の曖昧入力判定
    if (inputChar == 'c' && prevChar != 't' && currentChar == 't' && nextChar == 'y')
    {
        _roman[_romanIndex] = 'c';
        return 2;
    }

    //「cya」=>「cha」
    if (inputChar == 'h' && prevChar == 'c' && currentChar == 'y')
    {
        _roman[_romanIndex] = 'h';
        return 2;
    }

    //「つ」の曖昧入力判定
    if (inputChar == 's' && prevChar == 't' && currentChar == 'u')
    {
        _roman.Insert(_romanIndex, 's');
        return 2;
    }

    //「つぁ」「つぃ」「つぇ」「つぉ」の分解入力判定
    if (inputChar == 'u' && prevChar == 't' && currentChar == 's' &&
        (nextChar == 'a' || nextChar == 'i' || nextChar == 'e' || nextChar == 'o'))
    {
        _roman[_romanIndex] = 'u';
        _roman.Insert(_romanIndex + 1, 'x');
        return 2;
    }

    if (inputChar == 'u' && prevChar2 == 't' && prevChar == 's' &&
        (currentChar == 'a' || currentChar == 'i' || currentChar == 'e' || currentChar == 'o'))
    {
        _roman.Insert(_romanIndex, 'u');
        _roman.Insert(_romanIndex + 1, 'x');
        return 2;
    }

    //「てぃ」の分解入力判定
    if (inputChar == 'e' && prevChar == 't' && currentChar == 'h' && nextChar == 'i')
    {
        _roman[_romanIndex] = 'e';
        _roman.Insert(_romanIndex + 1, 'x');
        return 2;
    }

    //「でぃ」の分解入力判定
    if (inputChar == 'e' && prevChar == 'd' && currentChar == 'h' && nextChar == 'i')
    {
        _roman[_romanIndex] = 'e';
        _roman.Insert(_romanIndex + 1, 'x');
        return 2;
    }

    //「でゅ」の分解入力判定
    if (inputChar == 'e' && prevChar == 'd' && currentChar == 'h' && nextChar == 'u')
    {
        _roman[_romanIndex] = 'e';
        _roman.Insert(_romanIndex + 1, 'x');
        _roman.Insert(_romanIndex + 2, 'y');
        return 2;
    }

    //「とぅ」の分解入力判定
    if (inputChar == 'o' && prevChar == 't' && currentChar == 'w' && nextChar == 'u')
    {
        _roman[_romanIndex] = 'o';
        _roman.Insert(_romanIndex + 1, 'x');
        return 2;
    }

    //「どぅ」の分解入力判定
    if (inputChar == 'o' && prevChar == 'd' && currentChar == 'w' && nextChar == 'u')
    {
        _roman[_romanIndex] = 'o';
        _roman.Insert(_romanIndex + 1, 'x');
        return 2;
    }

    //「ふ」の曖昧入力判定
    if (inputChar == 'f' && currentChar == 'h' && nextChar == 'u')
    {
        _roman[_romanIndex] = 'f';
        return 2;
    }

    //「ふぁ」「ふぃ」「ふぇ」「ふぉ」の分解入力判定（一部Macのみ）
    if (inputChar == 'w' && prevChar == 'f' &&
        (currentChar == 'a' || currentChar == 'i' || currentChar == 'e' || currentChar == 'o'))
    {
        _roman.Insert(_romanIndex,'w');
        return 2;
    }

    if (inputChar == 'y' && prevChar == 'f' && (currentChar == 'i' || currentChar == 'e'))
    { 
        _roman.Insert(_romanIndex,'y');
        return 2;
    }

    if (inputChar == 'h' && prevChar != 'f' && currentChar == 'f' &&
        (nextChar == 'a' || nextChar == 'i' || nextChar == 'e' || nextChar == 'o'))
    {
        if (_isMac)
        {
            _roman[_romanIndex] = 'h';
            _roman.Insert(_romanIndex + 1, 'w');
        }
        else
        {
            _roman[_romanIndex] = 'h';
            _roman.Insert(_romanIndex + 1, 'u');
            _roman.Insert(_romanIndex + 2, 'x');
        }
        return 2;
    }

    if (inputChar == 'u' && prevChar == 'f' &&
        (currentChar == 'a' || currentChar == 'i' || currentChar == 'e' || currentChar == 'o'))
    {
        _roman.Insert(_romanIndex, 'u');
        _roman.Insert(_romanIndex + 1, 'x');
        return 2;
    }

    if (_isMac && inputChar == 'u' && prevChar == 'h' && currentChar == 'w' &&
        (nextChar == 'a' || nextChar == 'i' || nextChar == 'e' || nextChar == 'o'))
    {
        _roman[_romanIndex] = 'u';
        _roman.Insert(_romanIndex + 1, 'x');
        return 2;
    }

    //「ん」の曖昧入力判定（「n'」には未対応）
    if (inputChar == 'n' && prevChar2 != 'n' && prevChar == 'n' && currentChar != 'a' && currentChar != 'i' &&
        currentChar != 'u' && currentChar != 'e' && currentChar != 'o' && currentChar != 'y') 
    {
        _roman.Insert(_romanIndex, 'n');
        return 2;
    }

    if (inputChar == 'x' && prevChar != 'n' && currentChar == 'n' && nextChar != 'a' && nextChar != 'i' &&
        nextChar != 'u' && nextChar != 'e' && nextChar != 'o' && nextChar != 'y')
    {
        if (nextChar == 'n')
        {
            _roman[_romanIndex] = 'x';
        }
        else
        {
            _roman.Insert(_romanIndex, 'x');
        }

        return 2;
    }

    //「きゃ」「にゃ」などを分解する
    if (inputChar == 'i' && currentChar == 'y' &&
        (prevChar == 'k' || prevChar == 's' || prevChar == 't' || prevChar == 'n' || prevChar == 'h' ||
         prevChar == 'm' || prevChar == 'r' || prevChar == 'g' || prevChar == 'z' || prevChar == 'd' ||
         prevChar == 'b' || prevChar == 'p') &&
        (nextChar == 'a' || nextChar == 'u' || nextChar == 'e' || nextChar == 'o'))
    {
        if (nextChar == 'e')
        {
            _roman[_romanIndex] = 'i';
            _roman.Insert(_romanIndex + 1, 'x');
        }
        else
        {               
            _roman.Insert(_romanIndex, 'i');
            _roman.Insert(_romanIndex + 1, 'x');
        }

        return 2;
    }

    //「しゃ」「ちゃ」などを分解する
    if (inputChar == 'i' &&
        (currentChar == 'a' || currentChar == 'u' || currentChar == 'e' || currentChar == 'o') &&
        (prevChar2 == 's' || prevChar2 == 'c') && prevChar == 'h')
    {
        if (nextChar == 'e')
        {
            _roman.Insert(_romanIndex,'i');
            _roman.Insert(_romanIndex + 1, 'x');
        }
        else
        {
            _roman.Insert(_romanIndex, 'i');
            _roman.Insert(_romanIndex + 1, 'x');
            _roman.Insert(_romanIndex + 2, 'y');
        }

        return 2;
    }

    //「しゃ」を「c」で分解する（Windows限定）
    if (_isWindows && inputChar == 'c' && currentChar == 's' && prevChar != 's' && nextChar == 'y' &&
        (nextChar2 == 'a' || nextChar2 == 'u' || nextChar2 == 'e' || nextChar2 == 'o'))
    {
        if (nextChar2 == 'e')
        {
            _roman[_romanIndex] = 'c';
            _roman[_romanIndex + 1] = 'i';
            _roman.Insert(_romanIndex + 1, 'x');
        }
        else
        {
            _roman[_romanIndex] = 'c';
            _roman.Insert(_romanIndex + 1, 'i');
            _roman.Insert(_romanIndex + 2, 'x');
        }

        return 2;
    }

    //「っ」の分解入力判定
    if ((inputChar == 'x' || inputChar == 'l') &&
        (currentChar == 'k' && nextChar == 'k' || currentChar == 's' && nextChar == 's' ||
         currentChar == 't' && nextChar == 't' || currentChar == 'g' && nextChar == 'g' ||
         currentChar == 'z' && nextChar == 'z' || currentChar == 'j' && nextChar == 'j' ||
         currentChar == 'd' && nextChar == 'd' || currentChar == 'b' && nextChar == 'b' || 
         currentChar == 'p' && nextChar == 'p'))
    {
        _roman[_romanIndex] = inputChar;
        _roman.Insert(_romanIndex + 1, 't');
        _roman.Insert(_romanIndex + 2, 'u');
        return 2;
    }

    //「っか」「っく」「っこ」の特殊入力（Windows限定）
    if (_isWindows && inputChar == 'c' && currentChar == 'k' && nextChar == 'k' &&
        (nextChar2 == 'a' || nextChar2 == 'u' || nextChar2 == 'o'))
    {
        _roman[_romanIndex] = 'c';
        _roman[_romanIndex + 1] = 'c';
        return 2;
    }

    //「っく」の特殊入力（Windows限定）
    if (_isWindows && inputChar == 'q' && currentChar == 'k' && nextChar == 'k' && nextChar2 == 'u')
    {
        _roman[_romanIndex] = 'q';
        _roman[_romanIndex + 1] = 'q';
        return 2;
    }

    //「っし」「っせ」の特殊入力（Windows限定）
    if (_isWindows && inputChar == 'c' && currentChar == 's' && nextChar == 's' &&
    (nextChar2 == 'i' || nextChar2 == 'e'))
    {
        _roman[_romanIndex] = 'c';
        _roman[_romanIndex + 1] = 'c';
        return 2;
    }

    //「っちゃ」「っちゅ」「っちぇ」「っちょ」の曖昧入力判定
    if (inputChar == 'c' && currentChar == 't' && nextChar == 't' && nextChar2 == 'y')
    {
        _roman[_romanIndex] = 'c';
        _roman[_romanIndex + 1] = 'c';
        return 2;
    }

    //「っち」の曖昧入力判定
    if (inputChar == 'c' && currentChar == 't' && nextChar == 't' && nextChar2 == 'i')
    {
        _roman[_romanIndex] = 'c';
        _roman[_romanIndex + 1] = 'c';
        _roman.Insert(_romanIndex + 2, 'h');
        return 2;
    }

    //「l」と「x」の完全互換性
    if (inputChar == 'x' && currentChar == 'l')
    {
        _roman[_romanIndex] = 'x';
        return 2;
    }

    if (inputChar == 'l' && currentChar == 'x')
    {
        _roman[_romanIndex] = 'l';
        return 2;
    }

    return 3;
}

こうすることによって、「し」を「shi」、「ふ」を「fu」と入力できるようになります。
実際、上記のコードは完璧ではありませんが、これでもゲームとして十分だと思います。

さいごに

私は文章下手なので、少々読みにくい点はあったかもしれませんが、それでも、長々とした記事をお読みいただき、誠にありがとうございます。

上記のコードは自由にアレンジしても、そのままコピペしても構いません。
むしろ、それでタイピングゲームの製作に関心を持ってもらえたら幸いです。

サンプル

サンプルはunityroom上にて公開しております。
なお、今回はミスタイプ数などの要素が加わています。

https://unityroom.com/games/typingsample

GitHub

内容は、上記のサンプルのプロジェクトです。

https://github.com/AkioMabuchi/SampleTyping

Unity3D上でマウスポインタの位置のグリッド座標を簡単に取得する

2020-12-03T07:00:09+09:00

はじめに

いつもお世話になっております。
この度アドベントカレンダーに参加したいなと思いまして、
なんでも Advent Calendar 2020に記事を投稿することにしました。
普段はnoteやTwitterで活動しております。

さて、今回のテーマは「Unity3D上でマウスカーソルの位置のグリッド座標を得られるようにする」というものですが、言葉だけつらつら並べてもわかりにくいのでサンプル画像を用意しました。最終的にこんな感じで選択できるようになります。

この画像のようにマウスカーソルの位置の座標を光らせられるようにしましょう。
(キャラクター移動方法などは省略致します。ご了承下さい。また地形に高低差がある場合、この方法では上手くいかないと思います)

使用する機能

上記を実現する方法としてパッと思いつくのはPlaneやCubeを敷き詰めて全てにコライダーコンポーネントをアタッチし、マウスカーソルが当たっているかどうかを都度計算するという方法ですが、これはコストがかかり過ぎるので実用向きではありません。

ならばどうするかと言うと、Unityが標準でサポートしているGridとTilemapを使います。
これはUnity2Dでメインに使われている機能になります。普通はその名の通りタイル(マップチップ)を敷き詰めてフィールドを表現する機能なのですが、これを活用することで3D上でも簡単にグリッド座標を取得することができるようになります。

大まかな手順

大まかには以下の手順で進めていきます。

PlaneとGrid、Tilemapオブジェクトの用意
Plane上にカーソルが乗っている時、光らせる為の小さいPlane(=SelectPlane)を表示
Plane上からカーソルが外れた際、SelectPlaneを非表示にする
RaycastでPlane上のマウスカーソルのある位置を取得する
その地点をTilemapのWorldToCellメソッドでグリッド座標に変換
更にCellToWorldメソッドでもう一度ワールド座標に変換し、SelectPlaneのpositionに代入

とりあえず以上になります。なおグリッド座標を単純に取得したいだけなら太字部分だけを行えばOKです。

実際の手順

それでは行って参りましょう。

PlaneとGrid、Tilemapオブジェクトの用意

まずは空のGameObjectを一つ作成し、その子要素に「3Dオブジェクト」-「平面」を1枚用意します。大きさや位置などは任意で変更して下さい。
更にGameObjectの階層下に「2Dオブジェクト」-「タイルマップ」を作成します。
(光らせたい方は1グリッドのサイズ/10の大きさで平面をもう一つ作成します=SelectPlane
任意でマテリアルを変更しておきましょう。位置のY座標を0.01程度上げておき、MeshColliderコンポーネントを外しておきます。また、通常は非表示にしておくといいです)
するとヒエラルキータブはこんな感じになるはずです。

そしてGridオブジェクトとTilemapオブジェクトを以下のように変更して下さい。

一応全て載せていますが、基本はGridコンポーネントのセルスウィズルを「XZY」にすることと、Tilemapコンポーネントの向きを「XZ」にすることが大事です。

あとは任意ですがカメラの向きも変えておくと確認しやすいかもしれません。

これでオブジェクト側の用意は終わりました。

SelectPlaneの表示/非表示

それではスクリプトを書いていきます。まずは手始めにSelectPlaneの表示と非表示から。
OnGridPointerスクリプトを作成して下さい。そこに以下のように記述します。

using UnityEngine;

public class OnGridPointer : MonoBehaviour
{
    [SerializeField]
    private GameObject selectPlane;

    private void OnMouseEnter()
    {
        selectPlane.SetActive(true);
    }

    private void OnMouseExit()
    {
        selectPlane.SetActive(false);
    }
}

ビルドしたらPlaneにアタッチし、Select PlaneにSelectPlaneオブジェクトを設定しておきます。
実行してみます。以下のようにマウスカーソルが上に乗ったらSelectPlaneオブジェクトが表示され、外れたら非表示になればOKです。

マウスカーソルのあるPlane上の位置の取得

マウスカーソルのあるPlane上の位置はRaycastを飛ばすことで取得します。
OnGridPointerクラスを以下のように変更します。

// メソッドを追加
private void OnEnter()
{
    if (Camera.main == null) return;
    Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
    RaycastHit hit;
    if (Physics.Raycast(ray, out hit))
    {
        selectPlane.transform.position = hit.point + new Vector3(0, 0.01f, 0);
    }
}

private void OnMouseOver()
{
    OnEnter();
}

// メソッドを変更
private void OnMouseEnter()
{
    selectPlane.SetActive(true);
    OnEnter();
}

試しにSelectPlaneオブジェクトの位置を変更することで実際に取得できているか確認できるようにしています。
また、そのままだとPlaneオブジェクトと重なってしまってSelectPlaneオブジェクトが埋もれてしまう為、若干上に座標をずらしています。Y座標に0.01足しているのはその為です。
実行してみます。以下のようにマウスカーソル位置にSelectPlaneオブジェクトが移動すると思います。

グリッド座標を取得し、その位置に移動

最後にグリッド座標を取得し、SelectPlaneオブジェクトをその位置に移動させましょう。
OnGridPointerクラスを以下のように変更します。

// スクリプトの最初に以下を追記
using UnityEngine.Tilemaps;

// パラメーターを追加
[SerializeField]
private Tilemap tilemap;

// メソッドを変更
private void OnEnter()
{
    if (Camera.main == null) return;
    Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
    RaycastHit hit;
    if (Physics.Raycast(ray, out hit))
    {
        Vector3Int gridPos = tilemap.WorldToCell(hit.point);
        Vector3 complementPos = new Vector3(tilemap.cellSize.x / 2, 0.01f, tilemap.cellSize.y / 2);
        Vector3 worldPos = tilemap.CellToWorld(gridPos) + complementPos;
        selectPlane.transform.position = worldPos;
    }
}

ビルドしたら、コンポーネントのTIlemapにはTilemapオブジェクトを設定して下さい。

一度グリッド座標に直してから再度ワールド座標に直すことで、位置を正規化しています。
ただしこれで取得できるのはあくまでグリッドの左上の座標の為、1グリッドのサイズ(=tilemap.cellSize)/2を足して中央にずらす必要があります。
実行してみます。以下のようにグリッド座標単位でSelectPlaneオブジェクトが移動できればOKです。

終わりに

Unity3D上でマウスカーソルのある位置のグリッド座標を取得できました。これを応用すれば最初の画像のようにキャラクターをその位置に移動させたりといったことが可能になると思います。RPGやローグライクゲームなどにいかがでしょうか。

最後に今回の参加について。もともとネタがなかったのでアドベントカレンダーには参加しないつもりだったんですが、もしかしたらこのネタはいいかもしれないと思い結局参加してしまいました。
検索しても出てこなかったので多分二番煎じではないと......ないといいですね。
(もしネタ被りしていたらすみません......!)

ここまでお付き合い下さり、ありがとうございました。

おまけ：最小のコード

もしSelectPlaneを使わず、グリッド座標のみを取得したい場合、コードは以下のようになると思います。

using UnityEngine;
using UnityEngine.Tilemaps;

public class OnGridPointer : MonoBehaviour
{
    [SerializeField]
    private Tilemap tilemap;

    public Vector3Int GetGridPointer()
    {
        if (Camera.main == null) return new Vector3Int();
        Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
        RaycastHit hit;
        if (Physics.Raycast(ray, out hit))
        {
            Vector3Int gridPos = tilemap.WorldToCell(hit.point);
            return gridPos;
        }
        return new Vector3Int();
    }
}

ご査収下さい。

UnityのWebGLで日本語が表示されない時の対策

2020-08-17T08:18:58+09:00

「unity1week」と言うUnity1週間ゲームジャムにビジュアルノベルを作って参加したのですが、WebGLにビルドした時に日本語が表示されないと言う問題がおきました。
その時の対処法です。

原因：WebGLだと日本語が表示されないフォントがある

原因は初期設定のフォント。
Unityのフォントの初期設定が「Arial」とフォントなのですが、このテキストは日本語フォントが含まれていないそうです。
Unityの開発画面上では、違うフォントを自動で適応してくれるので問題なく表示されますが、これがWebGLでは適応してくれないので空白になってしまうのです。
テキストノベルなのに文字がない…。なんてことになってしまいます。

解決方法：日本語テキストに対応しているフォントに変える

解決方法はシンプルにArialから日本語に対応しているフォントに変更することです。
調べてみると、フォントは、google notoのNoto Sans CJK JPを利用することが多いようです。
こちらをダウンロード、プロジェクトに入れて、テキストのフォントを変えればオッケーです。

詳細はこの記事がわかりやすいです。
UnityのWebGLで日本語を表示する

日本人のUnity開発者には初歩的な知識のようですが、初めてだったので結構苦戦しました。
Unityでノベルゲームを作る人は注意してください。

作ったゲームはこちら

ビジュアルノベル「増える」

ブログ書いてます。

Visual Studio Code内でUnityEngine.UIなどへの参照ができない(インテリジェンスが働かない)場合の修正方法

2020-07-28T20:55:49+09:00

Unity 2019.3.10f1で確認しています。
2019.4以降では解決しているかもしれません。

発生する現象

Unity2019でプロジェクトを作成するとUnityではエラーが発生していないにも関わらず、Visual Studio Code内でUsing UnityEngine.UIなどへ参照ができない現象が発生します。

↑画像のようにUIの下に赤線が表示される

UnityEngin.UIにあるImageも正常に参照できておらずimage.まで打っても候補が表示されない。

表示されるエラー内容

Using directive is unnecessary. [Assembly-CSharp]csharp(IDE0005)
Unnecessary using directive. [Assembly-CSharp]csharp(CS8019)
The type or namespace name 'UI' does not exist in the namespace 'UnityEngine' (are you missing an assembly reference?) [Assembly-CSharp]csharp(CS0234)

解決方法

Package ManagerからVisual Studio Code Editorのパッケージのバージョンを上げる
メニューのWindowからPackage Managerを開きVisual Studio Code Editorを選択します。

初期は1.1.4になっているはずなので、1.2.0を選び右下のUpdate to 1.2.0ボタンを押して更新します。

更新後はVisual Studio Codeを再起動してください。

再起動後も参照ができないままのときは、少し時間をおいてからVisual Studio Codeを再起動してみてください。

【Unity】大学生でも出来る全部無料のゲーム開発環境（おすすめアセットなど） by 大学生ゲーム制作者

2019-06-12T19:42:11+09:00

2019/5/20

おはようございます。

ゲーム作りも面白いけど、機械学習とか極めてみるのも面白そうだなあと思っている、大学生ゲーム制作者の村人Uです。

VRとかMRもいいですね。

さて、今日はゲームの開発環境（基本的にUnityのアセット）について書こうと思います。

開発環境といっても、ゲームを作る為に使っているツールの話で、開発者向けの内容になってしまいます。

実はゲーム開発を開始した段階で、一度こういう記事は書いたのですが、結構変化があったのでその辺についても触れながら、今の開発環境を改めて書き直そうと思います。

無料かつ個人（チーム）でのゲーム開発環境

ちなみに、紹介するものは全部無料で利用出来ます。

Unity

ゲーム制作者お馴染みのゲームエンジン。

これが無ければ始まらない。

これ一つでPCゲームから、スマホゲーム、VRまで作る事が出来てしまいます。

↑ゲーム起動時にこういうの見た事ないですか？

使った事はないのですが、対抗馬にUnrealEngineというのがあって、イメージとしてはUnrealEngineは3Dゲームや映像制作に強く、プログラミングがそこまでできなくても扱えます。

Unityは2Dでも3Dでも幅広く扱えて、頑張れば何でも出来るというイメージです。

また、ネットの情報量はUnityの方が多いような気がします。

Unityについては↓の記事が分かりやすいです。

今日からはじめるUnity - Qiita

Photon2

Unityのアセットの1つです。

Unityに入れて使います。

昔は以下の機能が別々に分けられていたのですが、今は1つのPhoton2にまとめられています。

Photon Unity Networking (PUN)

オンライン通信を行う為に使用します。

マルチプレイや通信対戦が可能になります。

今回はリアルタイム通信で位置同期やダメージの同期、マッチングなどに使っています。

ラグが大きいかなぁと心配していたのですが、頑張れば白猫プロジェクトくらいのゲームが作れると思います。

PUN2 - FREE AssetStore

PhotonChat

PUNは常に様々な通信が必要な場合に使いますが、文字のやりとりや数回程度の通信であればPhotonChatが利用できます。

PUNでもチャット機能は実装できるのですが、PhotonChatはチャットに特化していてPhoton2より楽に実装出来ます。

また、荒野行動のようにフレンドにリアルタイムでチーム招待を送る機能などは、このPhotonChatで行う事が出来ます。

Photon2については↓の記事が分かりやすいです。

PUN2で始めるオンラインゲーム開発入門【その１】 - Unity Connect

PlayFab

サーバーにデータを置きたい場合などに利用します。

俗にmBaaSと呼ばれるサービスです。

所持コイン、魔法石、フレンド、プレイ時間などのユーザーデータをサーバーで管理する事ができます。

Unityとの相性も良いです。

ただし、ネットにはほぼ英語の情報しかないです。

僕の知っている限り、このようなサービスは他にもNifty Cloud Mobile Backend (NCMB)やfirebaseなどがあります。

僕も初めはNCMBを使っていたのですが、PlayFabに移行しました。

理由は後ほど説明しますが、初心者の方にはNCMBをおすすめします。

PlayFabについては、↓の記事が導入を書いてくれています。

PlayFabでUnityを動かしてみる -その1下準備編- - Qiita

↓の記事では実際に使ってみた感想やまとめを書きました。

無料で使えるmBaaSのPlayFabをプレイヤーデータ管理に使ってみた by 大学生ゲーム制作者

こちらもUnityのアセットです。

ツイッターやLineなどのSNSと連携したい時に使います。

ゲーム内からSNSのアプリを起動し、用意した定型文やスクリーンショットの投稿をしてもらう事が出来ます。

しかし、SNS連携はURL Schemeを利用する方法もあり、ツイッターかLineであればこのURL Schemeを利用する方が簡単です。

このSocialConnectorはその他のSNSにも幅広く対応出来るというのが魅力かなぁと思っています。

SocialConnectorについては↓の記事が分かりやすいです。

【Unity】Social ConnectorでTwitterにスクショを投稿する

Nifty Cloud Mobile Backend (NCMB)

↑で説明したPlayFabのように、サーバーでデータを管理する時に使います。

サーバーにデータを保存、サーバーからデータを取得などの機能があります。

また、Unityとの相性も良いです。

PlayFabと違うのは、機能の数と無料枠です。

PlayFabはフレンド機能、グループ機能、ログイン機能、アイテム機能などが事前に備わっている、要はゲーム特化になっているのに対し、

NCMBは、エクセルのようなマスがあるだけの、シンプルで幅広い用途で利用できるのが特徴です。

また、↓の記事でも書きましたが、NCMBは無料枠が少し足りない可能性があります。

対してPlayFabはNCMBのような制限は無いので、ユーザーの数が増えたとしても問題ありません。

Unityでリアルタイムフレンド申請の実装方法を考えた話 by 大学生ゲーム制作者

ただ、PlayFabは多機能な分複雑な上、日本語の情報が少ないので、扱うのが少し難しいと思います。

なので初心者の方であれば、シンプルで日本語の情報が多い、NCMBをおすすめします。

NCMBについては↓の記事が分かりやすいです。

【Unity】NCMBを使ってサーバにデータを保存、取得する方法 | tama-lab

さて。

今回は、Unityで使用しているアセットを中心に今の僕の開発環境について書きました。

まだ今後、課金機能、ガチャ機能などを作る予定なのでその時に使ったものについてはまた後日書きたいと思います。

こちらからは以上でーす。ではでは。

アニメーションについて1

2019-06-06T02:40:29+09:00

前置き

Unityを触る上でアニメーションはとても大事。らしい。
ま僕アニメーション部分担当した事ないですがw
なので先ずはアニメーションの基礎知識を学ぶのが必要らしいので↓のサンプルを元に勉強して行く。
(動作させた動画も撮ったけどどこにあげていいものかよく分からんので一旦保留。)

3DRunゲーム

(これ画像サイズ調節できる機能ないんか・・？）

障害物をぴょんぴょん乗り越えて行くオートスクロール系の3Drun。
これにはどんな技術が使われてるんだろうか。

Unityアニメーション基礎知識

Mecanim（メカニム）

・UnityにはMecanimと呼ばれるアニメーションシステムがある。
・Unity 4.0から導入されたアニメーションの機能。(ちなみに今はUnityの最新は2019)
・これ、スクリプト書かずにアニメーションが作れる（！？）らしい。

閑話

という事でMecanimを利用する事でプログラマーに頼らずアニメーション担当のスタッフだけでアニメーション部分の作成が可能なのだ！素晴らしい。分担って最高。

という事でアニメーションについてでは基本的にコードは書かず、
Unityの機能Mecanimと仲良くなって行こうと思います。
本格的にUnityのAnimetorコンポーネントとか触って行くのはまた次回。

Mecanimについての詳しい説明は参考サイトの方を見てください。ここに限らずググれば色々出てきます。多分触って覚えた方が分かりやすい感じですが。
ってあれ？この参考サイトにアニメーションの作り方書いてある？w

^o^・・・

ま、まぁ僕の方でもある程度掻い摘んで載せて行きます。
了

参考サイト

Mecanimについて

Unityでゲーム作る(方針のみ)

2019-06-05T02:03:50+09:00

Unityでゲーム作りたい

「ゲーム作るかー」と思ってても中々やらんし、ゲーム案件最近触ってないんで勉強がてらやっていきます。
先ずは記事だけ。明日から触って行く。
暇があったら別記事でhtml5ゲームの方も作ります。今はunity。

技術とか知見になる予定のもの

Unity
UniRx
2D/3D
AR/VR

閑話

俺の考えてるゲーム絶対面白いのに作る時間ないが？
作り方わからんが？

と多少プログラム触ってきたけど「おし、作るか！」から「はい完成！」とはいかないゲーム。
WebGL？iOS？Android？Steam？とかプラットフォーム選別から始めちゃうと「あ、だり」となってやらない事も多い。
「Unityのチュートリアル一通りやったぞwふんw」
って人には不要な記事かもしれない。

基本参考書の順番で作って行く。
2Dアクションゲームが本当は作りたいけど参考書の順番で作って行く。

参考書

Unityゲームプログラミング・バイブル

【PlayFab入門】UnityでPlayFabサーバーとデータの送受信

2019-05-28T19:37:44+09:00

2019/4/28

おはようございます。

「１日３食、夜は寝る」は誰が決めたんだろうと思っている、大学生ゲーム制作者の村人Uです。

今回は、Azureが運営するPlayFabというサービスを利用して、サーバーでデータ管理をする方法について書きます。

説明はUnityを使用したものになりますが、使い方はUnity以外でもあまり変わりません。

PlayFabについては、別の記事に書きましたので今回は実際の使い方について触れていきます。

無料で使えるmBaaSのPlayFabをプレイヤーデータ管理に使ってみた by 大学生ゲーム制作者 - QUEST LAB

サーバーにログインする

PlayFabでは、ユーザーがサーバーに必ずログインする必要があります。

といっても、ユーザーにIDとパスワードを決めてもらう必要はなく、こちらで勝手に決めたIDでログインができます。

//using PlayFab.ClientModels;をスクリプトの最初に記述して下さい

public static void LoginPlayFab(Action resultCallback = null)
    {
        var request = new LoginWithCustomIDRequest { CustomId = SystemInfo.deviceUniqueIdentifier, CreateAccount = true};
        PlayFabClientAPI.LoginWithCustomID(request, result => OnLoginSuccess(result, resultCallback), OnLoginFailure);
    }

上記の例で、LoginPlayFab関数を使う事でPlayFabにログインする事ができます。

なかなかヘンテコな書き方があって、見慣れないかもしれませんがPlayFabを使う場合は今後もこんな感じで書いていきます。

        var request = new LoginWithCustomIDRequest { CustomId = SystemInfo.deviceUniqueIdentifier, CreateAccount = true};

この部分では、ログインするためのリクエスト文を作成しています。

この中のCustomIdがユーザーを識別するIDで、ユーザー毎にユニークな（唯一の）IDを指定する必要があります。

今回の場合は、SystemInfo.deviceUniqueIdentifier という端末ごとに違うIDを取得して利用しています。

このように、CustomIdやCreateAccountのようなPlayFabさんが事前に決めた変数名に値を代入する事でPlayFabのサーバーにどんな指示を送るか決める事が出来ます。

注）これらは、using PlayFab.ClientModels; がスクリプトの最初に記述されている必要があります。

サーバーにデータを送信する

サーバーへのログインに成功したら、データを送信する事が出来るようになります。

public static void SendUserData(){
   PlayFabClientAPI.UpdateUserData(
            new UpdateUserDataRequest(){
            Data = new Dictionary() {
            {"Coin", "10"}
        }}, result => Debug.Log("Successfully updated user data"),
            error => {
                Debug.Log("Got error setting user data");
                Debug.Log(error.GenerateErrorReport());
            });    
}

これまたヘンテコなのですが、↑ではPlayFabClientAPI.UpdateUserDataという一つの関数しか使っていません。

このように関数を使う事によって、今回の場合サーバーに、「キーが"Coin"、値が"10"」のデータを送信する事が出来ます。

ちなみに、この関数は↓のような引数を取っています。

PlayFabClientAPI.UpdateUserData(UpdateUserDataRequest request , Action resultCallback, Action errorCallback);

今回の場合、この中のrequestの部分が

new UpdateUserDataRequest(){
            Data = new Dictionary() {
            {"Coin", "10"}
        }}

に当たり、resultCallbackが

 result => Debug.Log("Successfully updated user data")

に当たり、errorCallbackが

error => {
                Debug.Log("Got error setting user data");
                Debug.Log(error.GenerateErrorReport());
            }

に当たります。

サーバーからデータを受け取る

サーバーへの送信とほぼ同じ感覚で出来ます。

public static void GetUserData(){
 PlayFabClientAPI.GetUserData(
            new GetUserDataRequest() {
            PlayFabId = PlayerData.Instance.MyPlayFabID,
            Keys = null
        }, OnGetUserData
        }, (error) => {
            Debug.Log("Got error retrieving user data:");
            Debug.Log(error.GenerateErrorReport());
        });
}

public static void OnGetUserData(GetUserDataResult result){
         if (result.Data == null || !result.Data.ContainsKey("Coin")) Debug.Log("No Coin");
        else result => Debug.Log(result.Data["Coin"].Value);
}

↑の例では、PlayFabサーバーからユーザーデータを取得し「Coin」というキーを持つデータの値を取り出しています。

ここでもサーバーにデータを送信する時と似た感じで、次のような関数を使っています。

PlayFabClientAPI.GetUserData(GetUserDataRequest request , Action resultCallback, Action errorCallback

送信時と大きく違うのは、この関数の引数の内resultCallbackに当たる部分がOnGetUserDataになっているという事です。

見てもらえれば分かるように、resultCallbackの型は Action になっています。

この Action という型は、「GetUserDataResultを引数にとる関数」を表します。

なので、今回の場合OnGetUserDataというGetUserDataResultを引数に持つ関数を指定する事が出来ます。

そしてこのresultCallbackという引数ですが、これはPlayFabからデータの取得が成功した時に呼び出される関数になります。

つまり、今回の場合データの取得が完了したらOnGetUserDataという関数が呼び出されることになります。

またその時に引数に渡されるGetUserDataResultに様々な情報が格納されています。

実際には、上記のようにresult.DataにデータがDictionaryの形で格納されているのでそれを利用する事が多いと思います。

もっと知りたい

今回書いたのは、正確にはPlayFabの中のごく一部の機能であるPlayerDataについてです。

PlayFabにはデータの管理の方法だけでも

Player Data
Read Only Data
Internal Data
Group Data
Shared Group Data

など、様々なデータの扱い方があります。

複雑に感じるかもしれませんが、逆に言うとそれだけ機能が充実しているという事でもあると思います。

詳しい説明は↓のPlayFabのドキュメントに載っています。

現時点(2019/4/28)で全て英語ですが、グーグル翻訳を使えば割と読めちゃいます。

最近のグーグル翻訳は凄いですね。

Azure PlayFab のドキュメント - PlayFab | Microsoft Learn

無料で使えるmBaaSのPlayFabをプレイヤーデータ管理に使ってみた by 大学生ゲーム制作者

2019-05-20T17:56:38+09:00

ご存知の方は少ないかもしれませんが、サーバーの知識いらずでサーバーでデータ管理できるサービスがあります。

そのサービスはmBaaSなどと呼ばれています。

特にUnityを使う個人開発者は、Nifty Cloud Mobile Backend (NCMB) を使う人が多いイメージです。

しかしどうやら、同様の機能をもつPlayFabというサービスもあるようです。

さらに最近、どんどん便利になってきているらしい。

2018年1月にMicrosoftに買収されたとか。

今回は、そんなPlayFabを実際に使ってみた感想とまとめを書いてみようと思います。

PlayFabで出来る事

そもそもPlayFabで何が出来るかというと、

サーバーでデータ管理
ログインなどプレイヤー管理
フレンド機能
SNS連携
グループ、ギルド機能
アイテム管理
課金機能
サーバーサイドのスクリプトも実装可能
統計をカスタマイズして見れる

こんな感じの事が出来ます。
これらの機能をいい感じに管理してくれているのが、PlayFabの特徴です。

今回僕が使ったのは、1 ~ 3の機能だけですが十分便利でした。

また、現在はプレ版ですが今後のアップデートでリアルタイム通信関係の機能も追加されるようです。

PlayFabの利用例

https://playfab.com/games/のページに載っていますが、

など、有名なゲームの利用例があるようです。

世界的に有名なゲームの名前があるので、信用できるサービスと言えます。

また、PlayFabを調べていると2015年の記事も見つかるので海外では割と長い事使われていそうです。

PlayFabの利用価格

https://playfab.com/pricing/のページに載っています。

無料枠では、

一部の機能が利用できない
MAU(月のアクセスユーザー数)の制限なし
データ容量、APIリクエスト回数制限に関する記述はなさそう

一部の機能が利用できない事についてですが、有料枠の機能は僕が見ても何に使う機能か分からないレベルの物が多かったです。

この記事で書いてきた機能についてはおそらく全て無料で利用可能です。

正直、無料枠で十分だと思っています。

（まだ実際に運用している訳ではないので、断言はできません）

その他サービスとの比較

その他サービスと言っても、僕はNCMBしか使ったことないのですが...

PlayFabを使うメリットは、

ユーザー管理が楽かつセキュア（既に必要な機能が揃っている）
ゲームに特化している
有名な利用例もあり、信用できる

デメリットは、

ドキュメントが英語しかない
使い方がやや複雑（導入コストが高い）
ゲーム特化な分、自由度が低い

NCMBなどの場合、ログイン機能やフレンド機能だけでも結構大変です。

まして、アイテム交換などの機能を作ろうと思うと骨が折れます。

PlayFabではその辺の事は既に用意されているので、メソッドを使うだけで便利です。

にも関わらず日本でPlayFabはあまり浸透していません。

おそらく一番の原因は、日本語のドキュメントがない事です。

僕も調べていて、導入部分だけの記事くらいしか見つかりませんでした。

しかし、Microsoftがつい最近新しいドキュメントを公開していて、それを見ると日本語に対応してくれそうな雰囲気を出しています。（言語で日本語が選択できる）

今後、期待できるかもしれません。

PlayFabの新しいドキュメントはこちら

またPlayFabは仕組みを理解するまで少し時間がかかります。

機能が設計されている為、NCMBほどユーザーの自由なデータ管理も出来ません。

融通が利かなくて困るケースも出てくるかと思います。

まとめ

現状をまとめると、英語がよめるなら機能が豊富なPlayFabはおすすめ。

厳しければ、シンプルイズベストのNCMBや応用性の高いFirebaseなどを使った方が良いと思います。

また、まだ機能が完全に完成していない部分もあって今後の進展に期待といった感じです。

日本語ドキュメントが公開された辺りから、使い始めてみると良いのではないでしょうか。

もしかしたら僕がPlayFabの記事を書くかもしれませんが。

その時はよしなに。ではでは。

Unityでリアルタイムフレンド申請の実装方法を考えた話 by 大学生ゲーム制作者

2019-05-18T19:44:40+09:00

フレンド申請に限らず、チームに招待する機能を作りたい。

申請ボタンを押したら即座に相手に通知が行って、承認か拒否を選べる機能が欲しい！

フレンドのデータベースには、Nifty Cloud Mobile Backend (NCMB)を利用する予定。

なので始めはNCMBを使った実装を考えたけれど、どうにも問題があった。

そこで最も良い方法を調べて、考えた。

結論から言うと、最後に書くPhotonChatを使うのが良さそう。

（まだ実際に使ったわけではないので、確定ではないのですが）

NCMBでデータストアを監視して実装

NCMBに新しく、フレンド申請クラスを追加してそれを監視する。

フレンド申請クラスには、申請先のユーザーID, 申請元のユーザーIDをデータとして入れるようにする。

新しくデータが追加された時に、自分に対する申請が無いかをチェックする事でフレンド申請の機能にする方法。

問題点

５秒に１度くらいのペースで新規データをチェックしないとリアルタイム性に欠ける。

データが追加された時にUnity側の関数を呼び出す機能があれば良いのだが、どうやらそれは無さそう。

もし、毎日100人がプレイしたとするとNCMBの無料枠1,000,000APIリクエストは

1,000,000(回) / 30 (日) / 100 (人) = 333 (回)

333 (回) × 5 (秒) / 60 (秒) = 27.75 (分)

となり、一人当たり一日28分以上プレイすると無料枠を超える事になる。

NCMBの無料枠を超えると、5万円 / 月かかるのでこんなオーバーの仕方ではもったいなさすぎる。

NCMBでプッシュ通知で実装

NCMBの機能を使って、特定の人にフレンド申請のプッシュ通知を送る。

プッシュ通知とはiPhoneとかAndroidでゲームを起動してなくても来る通知の事。

問題点

そもそもプッシュ通知の本来の使い方と違う気がする。

プッシュ通知を利用する場合、NCMBではiPhoneかAndroidで実機ビルドをする必要がある。（エディタ上では使えない）

また、iOSでは確かAppleDeveloperの有料アカウントが必要など非常に面倒事が多い。

一番の問題はエディタ上で使えない為、デバッグが大変すぎるという事。

Photon Unity Networkingで個人ルームに入室して実装

Photon Unity Networking (PUN) でRPCを利用する方法。

メニュー画面に入った時点で、自分一人のルームを作成する
NCMBで保存されている申請を送りたい人のPhotonUserIDでFindFriend関数を使う
Photonのフレンドリストが更新されるので申請を送りたい人を探し、その個人部屋に入室する
RPCを使って申請のやりとりを行う

問題点

常に個人用のルームに入室している必要があり、無駄。

複数人同時に申請を送る場合、ルームがわけわからなくなる。

申請をする為だけに人のルームに勝手にはいる事になり、何か違う。

実装がなかなかに面倒くさい。

Photon Unity Networkingでフレンドの招待ルームを監視して入室

上記同様PUNを利用するが、こちらはチーム申請の際の話。

既にフレンドリストが存在していれば、

招待する側はカスタムプロパティでInviteっていう名前のルームを作る
ルームに入れる人をチーム申請したい人のUserIDのみに制限する
全てのプレイヤーはFindFriend関数ですべてのオンラインのフレンドを取得している
全てのプレイヤーはオンラインのフレンドがInviteという名前のルームを作成した場合、そのルームへの参加を試みる
参加に成功すればそれがチームになる

問題点

常にFindFriend関数を更新する必要がある。

非常に無駄。

実装が大変。

NCMBの代わりにPlayFabを使ってみる

最近サービスが充実してきたPlayFabというサービスがあるらしい。

日本ではまだ全然広まっていないが、マイクラなど有名なゲームが採用しているようだ。

機能は、NCMBのようにmBaaSだと思われる。

NCMBとの違いは、よりゲームに特化した機能が多い事だ。

機能が豊富なのでNCMBの問題を解決できるかと期待したが、

『普通そういう使い方はしません。

今後のアップデートでそういう事が出来るようになる可能性が高いけど、今はまだNCMBと同じ方法でしか出来ないよ』

と書かれていて残念。

問題点

今回の件に関してはNCMB同様の問題で解決できそうにない。

また、まだ日本語のドキュメントが皆無と言ってい良い。

英語読むの大変。

でもNCMBやめてデータベースとして利用したいと思えるほど便利そうだった。

NCMBの代わりにFirebaseを使ってみる

NCMBに似たサービスでもう一つ、Firebaseなるものがあるようだ。

Firebaseでは招待の機能があってそれを使えば実現できる可能性がある。

問題点

Firebaseはそれなりにサーバーサイドの知識が要りそう。

Unityとの連携に時間的コストがかかりそうだったから後回しにした。

現状、次のPhoton Chatでの実装の方が楽そうだったのでそれ以上は調べていない。

Photon Chatで実装

PlayFabの質問ページで僕と同じ事を考えている人がいた。

その答えは、「無理だから、ExitGamesとか使ってね。」

という事だった。

ExitGamesってなんだ？ってなって、調べたらPhotonだった。

「だから無理だって！！」

と思ったが調べるとPhotonChatなるものがあるらしい。

Photon Chatを使えば楽にリアルタイムでテキストデータのやり取りが出来るらしい。

確かに、フレンド申請は単純な文字のやり取りにすぎない。

そんなに難しい話じゃないやんけ！

NCMBでプレイヤーデータの中にPhotonChatのユーザーIDを持っておく
フレンド申請したいプレイヤーを検索で見つけ、そのプレイヤーのPhotonChatのユーザーIDでプライベートチャットを開始
チャットで招待メッセージを送信
招待メッセージを受け取ったらそれに対する回答を送信
承認された場合、NCMBのフレンドリストにプレイヤーIDを追加

チームの場合も同様。

という事でこれから実装していこうと思います。

（絶対一筋縄じゃいかない）

【Unity】Photon2でチームマッチメイキングをする方法【Photon2】

2019-05-14T18:55:13+09:00

2019/3/13

制作中のゲーム 『Play the Fox』 で マッチングの機能を作った。

今回はその実装方法を書きます。

実装した内容は以下

完全ランダムなマッチメイキング
1vs1及び2vs2及び8人乱闘のゲームモードに対応
2vs2ではランダムにチームを組んでマッチング

今回は、UnityのPhoton2を使う。...無料だから。

仕組みを解説

雑な図解。

これは2vs2だけど、他もほぼ同じ仕組み。

最初に味方を見つけるためのマッチングをする。
必要人数見方が見つかったらそれをチームとする。
そのチームのリーダーが相手を見つけるマッチングをする。
プレイヤーが必要人数揃ったらゲーム開始

といった流れ。

実際のスクリプト

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Photon.Pun;
using ExitGames.Client.Photon;
using Photon.Realtime;
using Photon.Pun;
using Enums;
using UnityEditor;

public class PTFNetworkManager : MonoBehaviourPunCallbacks
{
    private static PTFNetworkState state = PTFNetworkState.Idle;

    public  string leaderUserID;
    private string[] teamUserIDs;

    public static PTFNetworkState State
    {
        get { return state; }
    }

    void Update()
    {
        switch (state)
        {
            case PTFNetworkState.FindAlly:
                if (PhotonNetwork.InRoom)
                {
                    if (PhotonNetwork.CurrentRoom.PlayerCount == PhotonNetwork.CurrentRoom.MaxPlayers && PhotonNetwork.MasterClient.UserId != null)
                    {
                        //人数が揃ったらリーダーとチームメンバーを設定
                        leaderUserID = PhotonNetwork.MasterClient.UserId;
                        SetTeamUserIDsWithCurrentRoom();
                        //準備完了フラグを立てる
                        var properties  = new ExitGames.Client.Photon.Hashtable();
                        properties.Add( "foundAlly", true );
                        PhotonNetwork.LocalPlayer.SetCustomProperties(properties);
                        //ステート切り替え
                        state = PTFNetworkState.FoundAlly;
                    }
                }

                break;
            case PTFNetworkState.FoundAlly:
                //全員が設定を終えたら退室
                if (CheckAllPlayerFoundAlly())
                {
                    Debug.Log("Found Ally!");
                    PhotonNetwork.LeaveRoom();
                    PhotonNetwork.JoinLobby();
                    state = PTFNetworkState.FindOpponent;
                }
                break;
            case PTFNetworkState.FindOpponent:
                //リーダージャナイバアイ
                if (leaderUserID != PhotonNetwork.LocalPlayer.UserId)
                {
                    PhotonNetwork.FindFriends(new string[1]{ leaderUserID });
                }

                if (PhotonNetwork.InRoom)
                {
                    //部屋に入ったら準備完了
                    Debug.Log("Ready! Waiting others or start!");
                    state = PTFNetworkState.Ready;
                }

                break;
            case PTFNetworkState.Ready:
                //人数が揃ったら開始するとか。
                break;
        }
    }

    public override void OnPlayerPropertiesUpdate(Player target, ExitGames.Client.Photon.Hashtable changedProps)
    {
        Debug.Log("target is " + target + "\n changed props are" + changedProps);
    }

    /// 
    /// 現在の設定でマッチメイキングを開始
    /// 
    public static void StartMatchMaking()
    {
        //ステートは味方を探す
        state = PTFNetworkState.FindAlly;
        ConnectToMaster();
    }

    private static void ConnectToMaster(){
        string gameMode = PlayerPrefs.GetString("GameMode", "Skirmish");

        if (!PhotonNetwork.IsConnected)
        {
            PhotonNetwork.ConnectUsingSettings();
            Debug.Log("Connecting to master...");
        }else{
            PhotonNetwork.JoinLobby();
        }
    }

    public override void OnConnectedToMaster(){
        PhotonNetwork.JoinLobby();

        Debug.Log("Joining Lobby...");
    }

    /// 
    /// ロビーに入ったらとりあえず見方を探す
    /// 
    public override void OnJoinedLobby()
    {
        Debug.Log("Connected Master Server!");

        if (state == PTFNetworkState.FindAlly)
        {
            FindAlly();
        }else if (state == PTFNetworkState.FindOpponent)
        {
            FindOpponent();
        }
    }

    private void FindAlly()
    {        
        string gameMode = PlayerPrefs.GetString("GameMode", "Skirmish");

        //ここから見方を探す
        //味方のプレイヤーの人数
        byte expectedMaxPlayers = 1;
        //想定プレイヤー
        //GameMode(gm)とFindType(ft)でソート
        ExitGames.Client.Photon.Hashtable expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "skirmish" }, {"ft", "ally"} };

        switch (gameMode)
        {
            case "Skirmish":
                expectedMaxPlayers = 1;
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "skirmish" }, {"ft", "ally"} };
                break;
            case "Solo":
                expectedMaxPlayers = 1;
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "solo" }, {"ft", "ally"}  };
                break;
            case "Duo":
                expectedMaxPlayers = 2;
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "duo" }, {"ft", "ally"}  };
                break;
        }

        PhotonNetwork.JoinRandomRoom(expectedCustomRoomProperties, expectedMaxPlayers);
    }

    /// 
    ///相手を探す
    /// リーダーのみ利用。
    /// 
    private void FindOpponent()
    {
        Debug.Log("leaderUserID : " + leaderUserID);
        Debug.Log("myUserID : " + PhotonNetwork.LocalPlayer.UserId);
        if (leaderUserID != PhotonNetwork.LocalPlayer.UserId) return;
        Debug.Log("I am leader! I start finding opponent!!");
        string gameMode = PlayerPrefs.GetString("GameMode", "Skirmish");

        //ここから相手を探す
        //全体のプレイヤーの人数
        byte expectedMaxPlayers = 1;
        //想定プレイヤー
        //GameMode(gm)とFindType(ft)でソート
        ExitGames.Client.Photon.Hashtable expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "skirmish" }, {"ft", "opponent"} };

        switch (gameMode)
        {
            case "Skirmish":
                expectedMaxPlayers = 8;
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "skirmish" }, {"ft", "opponent"} };
                break;
            case "Solo":
                expectedMaxPlayers = 2;
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "solo" }, {"ft", "opponent"}  };
                break;
            case "Duo":
                expectedMaxPlayers = 4;
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "duo" }, {"ft", "opponent"}  };
                break;
        }

        //ランダムマッチメイキング
        PhotonNetwork.JoinRandomRoom(expectedCustomRoomProperties, expectedMaxPlayers, MatchmakingMode.FillRoom, TypedLobby.Default, null, teamUserIDs);

        //ステートは相手を探す
        state = PTFNetworkState.FindOpponent;
    }

    /// 
    /// ルーム入室失敗時、ステートにあった部屋を作成する
    /// 
    /// 
    /// 
    public override void OnJoinRandomFailed(short returnCode, string message){
        Debug.Log("Faild to Join Room!");

        Debug.Log(message);

        string gameMode = PlayerPrefs.GetString("GameMode", "Skirmish");

        //ルームオプションの設定
        string findType = "";
        if (state == PTFNetworkState.FindAlly)
        {
            findType = "ally";
        }else if (state == PTFNetworkState.FindOpponent)
        {
            findType = "opponent";
        }
        byte expectedMaxPlayers = 1;
        ExitGames.Client.Photon.Hashtable expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "skirmish" } };

        switch (gameMode)
        {
            case "Skirmish":
                if (state == PTFNetworkState.FindAlly)
                {
                    expectedMaxPlayers = 1;
                }else if (state == PTFNetworkState.FindOpponent)
                {
                    expectedMaxPlayers =8;
                }
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "skirmish" }, {"ft", findType} };
                break;
            case "Solo":
                if (state == PTFNetworkState.FindAlly)
                {
                    expectedMaxPlayers = 1;
                }else if (state == PTFNetworkState.FindOpponent)
                {
                    expectedMaxPlayers =2;
                }
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "solo" }, {"ft", findType} };
                break;
            case "Duo":
                if (state == PTFNetworkState.FindAlly)
                {
                    expectedMaxPlayers = 2;
                }else if (state == PTFNetworkState.FindOpponent)
                {
                    expectedMaxPlayers =4;
                }
                expectedCustomRoomProperties = new ExitGames.Client.Photon.Hashtable() { { "gm", "duo" }, {"ft", findType} };
                break;
        }

        RoomOptions roomOptions = new RoomOptions();
        roomOptions.CustomRoomPropertiesForLobby = new string[]{"gm", "ft"};
        roomOptions.CustomRoomProperties = expectedCustomRoomProperties;
        roomOptions.MaxPlayers = expectedMaxPlayers;
        roomOptions.PublishUserId = true;

        Debug.Log(roomOptions.CustomRoomProperties);

        //ルームの作成
        PhotonNetwork.CreateRoom("", roomOptions, null, teamUserIDs);

        Debug.Log("Created Room!");
    }

    public override void OnJoinedRoom()
    {
        Debug.Log("Joined Room!");
        Debug.Log(PhotonNetwork.CurrentRoom.CustomProperties);

        if (state == PTFNetworkState.FindAlly)
        {
            var properties  = new ExitGames.Client.Photon.Hashtable();
            properties.Add( "foundAlly", false );
            PhotonNetwork.SetPlayerCustomProperties(properties);
        }
    }

    private void SetTeamUserIDsWithCurrentRoom()
    {
        teamUserIDs = new string[PhotonNetwork.PlayerListOthers.Length];
        for (int i=0; i friendList)
    {
        foreach (FriendInfo friendInfo in friendList)
        {
            if (friendInfo.UserId == leaderUserID && state == PTFNetworkState.FindOpponent)
            {
                PhotonNetwork.JoinRoom(friendInfo.Room);
            }
        }
    }

    private bool CheckAllPlayerFoundAlly()
    {
        Player[] playerList = PhotonNetwork.PlayerList;
        foreach (Player player in playerList)
        {
            if (player.CustomProperties["foundAlly"] == null)
            {
                return false;
            }

            if (!(bool)player.CustomProperties["foundAlly"])
            {
                return false;
            }
        }

        return true;
    }
}

雑なコード解説（需要あれば書き足します）

StartMatchMaking() を呼び出すとマッチングが開始する。

Photonに関してだけ使っている順番に書くと、

PhotonNetwork.ConnectUsingSettings();

PhotonNetwork.JoinLobby();

ゲームモードが同じ、見方探し中のルームを探す。

PhotonNetwork.JoinRandomRoom(expectedCustomRoomProperties, expectedMaxPlayers);

参加可能なルームが無い場合、

PhotonNetwork.CreateRoom("", roomOptions, null, teamUserIDs);

味方が全員揃ったら、

PhotonNetwork.LeaveRoom();

PhotonNetwork.JoinLobby();

ゲームモードが同じ、相手探し中のルームを探す。

PhotonNetwork.JoinRandomRoom(expectedCustomRoomProperties, expectedMaxPlayers, MatchmakingMode.FillRoom, TypedLobby.Default, null, teamUserIDs);

参加可能なルームが無い場合、

PhotonNetwork.CreateRoom("", roomOptions, null, teamUserIDs);

ルームに入室したらステートをReadyに変えてマッチング完了。

後は人が揃うのを待ったり、強制的にゲーム始めたりお好きにどうぞ。

あとがき

これは完全にランダムでしかない。

今後、フレンドとチームを組んだり出来るようにする予定。

その辺に関しては先にフレンド関係のシステムを作ってからやるのでもう少し先になりそう。

やり方としては、最初の味方探しのJoinRandomRoomに条件を加えるだけのはず。

UnityでSpriteアニメーションを画像差し替え可能な実装をする

2019-05-12T18:44:46+09:00

2019/3/8

そろそろアニメーションをつけてかっこよくしたいという事で、その辺の機能を作った。

でもUnityでSpriteアニメーションを行う機能が充実していなかった。

色んな記事を見ても汎用性が低そうな実装が多い。

そこで今回はAnimationからスクリプトの関数を呼び出し、Animatorで管理する方法で実装してみた。

利点は２つ。

通常通りアニメーターが利用できるのでGUIでステート管理が可能。
似たアニメーションを違うキャラクター用にスプライトの差し替えが可能。

本当に簡単で申し訳ないが、作成方法を書いておこう。

スプライトの切り替えをするスクリプトを作成する

スプライトの切り替えを行うスクリプトを用意する。

今後UnityのAnimationからAnimationSpriteNextの関数を呼ぶことになる。


public Sprite[] animationSprites;

private int animation_index;
void AnimationSpriteNext(){
    GetComponent().sprite = animationSprites[animation_index];
    animation_index = (animation_index + 1) % (animationSprites.Length);
}

こんな感じの内容が書かれたスクリプトを書く。

スクリプトを作成したら、アニメーションさせたいオブジェクトにアタッチしてスクリプトは終わり。

Animationを作る

アニメーションさせたいオブジェクトに新規AnimatorとAniamationを作成してコンポーネントに。

Animationウィンドウで、右クリック → Add Animation Event

追加したAnimation Eventをクリックして、Inspectorで先ほど作成したAnimationSpriteNext関数を選択。

必要なコマ数イベントを作成して、AnimationSpriteNextを呼ぶ事でアニメーションになる。

インスペクターでアニメーションさせるスプライトを設定

上記のスクリプトを付けたオブジェクトのInspectorを見る。

InspectorでこのスクリプトのanimationSpritesにアニメーションに必要なスプライトを設定する。

以上で設定は終わり。

これで再生して無事動けば完成だ。

僕が実際に利用する際は、animationSpritesはデータベースから参照している。

ちなみに、データベースにはScriptableObjectを使用した。

応用

UnityのAnimationを使うので、追加でα値を変えるアニメーションが簡単に追加出来る。

また、通常のアニメーションとしてアニメーターで管理出来る。

その為移動ステート、スキルステート、待機ステートなどを作って遷移規則を作ってしまえばいい感じに動く。

Animation Eventは何も関数を呼ばないとエラーになるので、僕はEndAnimation()という空の関数を作って最後に呼ぶことにしている。

正直悪くはないが、これじゃない感もある。

特に、後から見直した時にどうなってんのか分からなくなりそうなのが怖い。

一度アニメーション全部を管理するスクリプトを書こうと思ったけど、
結局アニメーターみたいなGUIが欲しい！ってなって詰んだ。orz

進みすぎてもはや何やったか覚えてない

2019-05-06T18:38:40+09:00

2019/2/27

ゲームシステムが面白いか確認したいから、

早く一通り遊べるプロトタイプを作れという事になった。

やった事

環境配置フェーズに環境を置けるようにした
金の仕組みを作った
EPが自動回復するようにした

環境を置けるようにした

環境配置フェーズ中に左下にある環境マーカーを掴んで離すことで置けるようにした。

マーカーが置けない場所、置ける場所をUnityのLayerで分けた。

指を離したタイミングでレイを飛ばして、下に置けないものがないかを確認する。

これで今後出てくるチェス要素に対応できる。

スマホでは指で環境マーカーが見えなくなるかと思ったけど、意外と大丈夫そうだった。

よく考えるとパズドラも掴んでるドロップは見えないけど何とかなってる。

金の仕組みを作った

環境の変化（水→木→土→金）の最終状態が金だ。

金は集めた数によって環境配置フェーズに置ける環境の数が増える。

今は、金３枚集める毎に木、土、火が解放されていく。

この仕組みを完成させた。

EPが自動回復するようにした

スキル発動に使うEPを自動回復するようにした。

これでスキルの連続使用はできない。

回復量は完全にEPがなくなった状態から４秒でスキルが使えるようになるくらい。

あまりゲームスピードを上げすぎないようにしている。

この辺は今後の調整が聞くように設計しておこう。

今の段階では進捗がありすぎて、技術的な記事を書ける量ではない。

もう少し落ち着いてきたら開発に関するニッチな記事も書いていこー。

リアルタイム通信におけるダメージ処理の同期、ラグへの対策方法

2019-05-05T21:22:28+09:00

2019/2/26

隙間時間にちょこちょこ進めた。

やった事は、

開始のタイミングの同期
ダメージ処理の同期
プレイヤーデータの管理

の３つ。

開始のタイミングの同期

FightステートとArrangeステートの切り替えのタイミングを同期した。

RPCで実装していて、マスタークライアントのステートが切り替わるときに合わせる。

プレイ時間を、roomのカスタムプロパティを用いて記録するようにした。

が、まだどう使うかは分からない。

ダメージ処理の同期

ダメージを与えたときにRPCで同期するようにした。

そも、ダメージ処理の方法を２つ考えていた。

自分が攻撃を当てた時に、与えたダメージ同期する
自分が攻撃を食らった時に、食らったダメージを同期する。

ラグを考慮した時に起こるデメリットはそれぞれ、

敵の攻撃をよけたのにラグのせいでダメージを食らう
敵に攻撃を当てたのにラグのせいでダメージが入らない

このゲームでは、攻撃を「避ける」よりも「当てる」ことに注意が向いていると思った。

より注意が向いている方を気持ちよくしたいので、今回は2を採用してみた。

他のfpsゲームとかも見ているとこうなっているような気がする。

プレイヤーデータの管理

プレイヤーのデータはサーバーで管理する。

今回使うのはNCMB（Nifty Cloud Mobile Backend）だ。

タイトル画面で、プレイヤーデータの照合。

初プレイの場合は新規作成する。

作成したプレイヤーデータに対してNCMBでIDが自動生成される。

そのIDをPlayerPrefsで保存しておく事で２回目以降のプレイではそのデータを利用する。

あとは、作成したデータベースに必要に応じてカラムを追加するようにした。

今のところ、

プレイヤー名
プレイヤーID(ncmbのObjectidで代用)
使用キャラクター
解放済みキャラクター
コイン
ランク
プレイ時間

をデータとしてサーバーに保存するつもりだ。

今はプレイたー名のみ保存できる状態。

BorderLands2楽しい。

【開発２日目】いろいろ同期

2019-05-05T21:22:04+09:00

2019/2/26

色んな同期処理について考えて、ちょっと実装した。

同期できたもの

技の発動
環境の変化
HP
EP

今日は、上記の４つの同期に成功した。

全てPhotonを使った同期処理を行う。

技の発動と環境の変化はRPCで、

HPとEPはPlayerのCustom Propatiesを使った。

これから同期するもの

開始のタイミング
残り時間
スキルによるダメージ

今思いつく範囲では、こんな感じ。

開始のタイミングと残り時間の同期は早めに行いたい。

ダメージの同期は、先にスキルを作ってからになりそうだ。

今のところ、順調だ。

技発動の同期は地味に２時間くらい悩んだ...。

「Unity」の記事 - Crieit

Unityで〇×ゲームを作ろうぜ（＾～＾）？

📔Unity で iOS/Android アプリの設定値をセキュアに扱う方法

GameCI で Unity の CI 環境を GitHub Actions で構築する

Unityで複数の入力方法に対応するタイピングゲームを作ろう

柔軟な入力方法に対応したタイピングゲームの作り方

Unity3D上でマウスポインタの位置のグリッド座標を簡単に取得する

UnityのWebGLで日本語が表示されない時の対策

Visual Studio Code内でUnityEngine.UIなどへの参照ができない(インテリジェンスが働かない)場合の修正方法

最新AIを使って人の顔の大きさを数値化するアプリをつくった話

このアプリを作った理由

【Unity】大学生でも出来る全部無料のゲーム開発環境（おすすめアセットなど） by 大学生ゲーム制作者

アニメーションについて1

Unityでゲーム作る(方針のみ)

【PlayFab入門】UnityでPlayFabサーバーとデータの送受信

無料で使えるmBaaSのPlayFabをプレイヤーデータ管理に使ってみた by 大学生ゲーム制作者

Unityでリアルタイムフレンド申請の実装方法を考えた話 by 大学生ゲーム制作者

【Unity】Photon2でチームマッチメイキングをする方法【Photon2】

UnityでSpriteアニメーションを画像差し替え可能な実装をする

進みすぎてもはや何やったか覚えてない

リアルタイム通信におけるダメージ処理の同期、ラグへの対策方法

【開発２日目】いろいろ同期