Unityで簡単なタイピングソフトを作成する

今回はUnityで簡単なタイピングソフトを作成したいと思います。

ローマ字入力のタイピングソフトですね。

簡単なタイピングソフトとは『機能的にシンプルなタイピングソフト』であり『タイピングソフトが簡単に作れる』、『簡単にタイピングソフトを作る』という事ではないのでご了承ください(^_^;)

以前の記事

Unityでキーボードからの入力を判定する
Unityでのキーボードからの入力についてみていきます。Input.GetKeyやInput.GetKeyDown、Input.GetKeyUp等の違いや使い方。Input.anyKeyやInput.anyKeyDownについても。

でキーボードからの入力を判定する事をやったのでその実践的な使い方のサンプルとしてタイピングソフトを作ってみます。

スポンサーリンク

タイピングソフトの概要

今回作成するのはローマ字入力のタイピングソフトになります。

問題をいくつか用意しておきタイピングに成功したら次の問題をランダムに出題するようにします。

1文字毎にタイピングに成功したか失敗したかを計測し、正解率等をUIで表示するようにします。

難しい機能は搭載しないので作成した問題をひたすら入力して終わる(実際は終わりがない・・・・)だけになりますね・・・・(^_^;)

タイピングソフトのUIを作成する

まずは問題を出力する部分、正解数、失敗数、正解率を表示するUIを作成していきます。

ヒエラルキー上で右クリック→UI→Canvasを選択し、名前をTypingSoftに変更します。

TypingSoftの子要素に右クリック→UI→Panelを2つ作成し、名前をInputPanelとDataPanelとし、それぞれサイズを調整します。

それぞれのパネルの子要素に右クリック→UI→Textを選択し名前をQuestionJ、QuestionR、Input、Currect Answer、Mistake、Currect Answer Rateとします。

タイピングソフトのUI階層

↑のような階層を作成します。

タイピングソフトUI

↑が作成したタイピングソフトのUIの配置になります。

キャンバスであるTypingSoftのCanvas Scalerを変更します。

Canvas Scalerを変更する

UI Scale ModeをScale With Screen Sizeに変更します。

Screen Match ModeはMatch Width or Heightにします。

MatchがWidthになっているので横幅に応じてUIのサイズが変更されます。

これでタイピングソフトのUIが完成しました。

タイピングソフトの機能を作成する

タイピングソフト用のUIが完成したのでタイピングソフトの機能を作成していきましょう。

まずはタイピングソフトの機能全般を行うTypingSoftスクリプトを作成しTypingSoftゲームオブジェクトに設定してください。

問題を作成し出力する

まずはTypingSoftスクリプトに問題文を作成し、問題の中からランダムに1つを選んでテキストに出力する処理を作成していきましょう。

まずは問題の日本語の配列とローマ字の配列を同じ並びで作成します。

問題の番号と配列の番号が一緒になるように作成していきます。

ローマ字の問題をもっと簡単に間違えず作成するにはひらがなと対応するローマ字の対応表を作成しておきそれを使ってローマ字を作成します。

例えば最初の『問題』に対応するローマ字を作るなら『もんだい』というひらがな文を配列で作成しておき、

『も』→『mo』、『ん』→『nn』、『だ』→『da』、『い』→『i』

とひらがなからローマ字を作成し、それを連結してローマ字を表示するテキストUIに表示するようにします。

今回は割愛ということで・・・・。

UIJとUIRは問題を表示するテキストUIを設定する変数でtransform.Findを使って子要素から対応するテキストUIを探して設定しています。

その後Random.Rangeを使って問題数分の中から1つの値を取得し、その番号に対応する問題をテキストUIに表示しています。

問題を出力する関数を作る

問題はタイピングソフトスタート時だけに出力するわけではなく、1つの問題が打ち終わった時も同じように出力します。

その為、問題をランダムに選び出力するという処理をひとまとめにして問題を出力する関数にまとめてしまいましょう。

問題出力関数をOutputQにまとめ、次の問題を表示する時はこのOutputQを呼び出せば新しい問題が表示されるようにします。

問題をタイピングする機能

次は表示された問題のローマ字をキーボードから入力出来るようにし、正解の時は正解数のカウントとInputに文字を表示し、失敗の時は失敗数のカウントと間違えた文字を別の色で表示します。

まずはキーボードからの入力と問題のローマ字が合っているかどうかの処理を作成していきましょう。

ローマ字の問題文の何文字目か?を表す変数indexを用意し正解時にはこの変数の数値を足していく事で次の文字を指すようにします。

Input.anyKeyDownで何らかのキーが押された時でマウスのボタンが押された時ではない事を判定し、

Input.GetKeyDownを使って現在見ているローマ字と打ったキーが同じかどうかを判定しています。

同じだった場合はCorrect関数、違った場合はMistake関数を呼んでいます。

それぞれの関数では正解と失敗という文字を表示しているだけで中身はこれから作成していきます。

Correct関数の実装

正解時の処理を行うCorrect関数の中身を実装していきましょう。

正解時には今入力した文字をInputテキストUIに出力し、ローマ字の問題の次の文字を指すようにし、正解率を計算します。

正解数を使いますので変数の宣言もしておきます。

変数宣言やUIの取得、テキストUIの初期化等は追加分だけ記載しています。

Correct関数内では正解数を増やしその後に正解率を計算してます。

タイピングが成功した場合は現在打っているローマ字をテキストに足しています。

文字を足した後に次の問題を見るようにindexを足しています。

indexが現在の問題のローマ字数を超えた時に新しい問題を表示するようにしています。

ここまでの機能を確認してみましょう。

タイピング正解時のサンプル

↑のようにタイピングに成功すると文字が表示され正解数が増えているのが確認出来ます。

Mistake関数の実装

次は失敗した時の処理を行うMistake関数を実装していきましょう。

タイピングを失敗した時はそのフレームで入力した文字列Input.inputStringの文字数分を失敗数に換算出来るようにしています。

同時押し分を換算しないのであれば

mistakeN++;

という処理だけでも大丈夫です。

その後正解率の計算をし、今まで正解してきた文字列に今打った文字を赤色にしたものを足してInputに表示するようにしています。

テキストの色を変更するにはタグを使用します。

colorに指定するのは#赤緑青透を16進数で表したものを指定します。

HTMLタグと同じですね、例えば赤色の文字にする場合は

<color=#ff0000ff>色を変える文字</color>

青色の文字にする場合は

<color=#0000ffff>色を変える文字</color>

となります。

タグと文字を同時に扱っているのでダブルクォーテーションと文字列とを連結しています。

タイピング失敗時の処理サンプル

↑のようにタイピング失敗時に間違えて打った文字が赤く表示されるようになりました。

CorrectAnswerRateの実装

最後に正解率を計算するCorrectAnswerRate関数を実装していきましょう。

例によって追加分だけの記述になります。

CorrectAnswerRate関数内では正解数と失敗数を使ってfloat型の正解率を計算しています。

correctNとmistakeNはint型の変数の為parseFloatを使ってfloat型に変換してから計算しています。

正解率を表示する時には小数点以下の桁を2桁にする為ToStringの引数に”0.00″を書き小数点以下は2桁の表示にしています。

これで正解率を計算し表示する関数CorrectAnswerRateの実装が終了しました。

キーボード押しっぱなしに対応する

ここまでの機能だとUpdate関数内でキーボードのキーが押されたかどうかはInput.anyKeyDownを使用している為1回しか判定されません。

本来であればキーボードのキーを押している間は常に文字が打ち続けられているはずなのでそうなるように変更してみましょう。

Update関数内のInput.anyKeyDownの部分を変更します。

Input.anyKeyDownからInput.anyKeyに変更します。

これでキーを押している間は判定がされるようになりました。

またタイピング失敗時の処理Mistake関数も変更します。

Input.inputStringが空でない時だけUIにテキストを表示するようにします。

これで変更完了です。

実はこれだけだと実際の入力とはちょっと違います。

例えば『monndai』という文字列を打つ時最初のnを打った状態でキーボードを押したままにしても次のnが失敗になってしまいます。

それは文字を判定しているのがInput.GetKeyDownなので次のフレームに来た時はelseの条件の方にいってしまい失敗とされてしまいます。

かと言ってInput.GetKeyDownをInput.GetKeyに変えてしまうと『monndai』の最初のnを押した時に次のnも押されてしまいます。

実際の入力に合わせていくのは難しいですね・・・・(^_^;)

なのでInput.anyKeyとInput.GetKeyDownではなくInput.anyKeyDownとInput.GetKeyDownのままでもいいかもしれません。

あくまで練習ソフトなので・・・・(-_-)

-- Input.anyKeyとInput.GetKeyでの判定(2017年05月05日)--

実際のタイピングと似た方法にする事が出来たので追記します。

Input.ResetInputAxesを使用するとそのフレームでの入力がリセットされるので、Input.GetKeyを使ってもすぐに次の判定をされる事がありません。

↑のような感じにすればキーの押しっぱなしでも連続する同じ文字の対応も出来、次の間違いにも対応出来ました。

いやぁ解決策ってあるものですね・・・・(^-^)

-- 追記終了 --

最後に作成したタイピングソフトを確認してみます。

タイピングソフトの改善点

今回作成したタイピングソフトは機能的に全然足りてません。

ローマ字の問題をひらがなから作成したり、『ちゃ』を入力する時に『cha』、『cya』と両方の入力に対応したりといった機能も取りつけると良さそうですね。

しかし1つの記事内でこれだけの物が出来た事を考えれば、タイピングオブザデッドみたいなタイピングゲームを作るのも十分可能ですね(^_^)v

本当は結構大変だけど・・・・(T_T)/~~~

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます