Unity(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】uGUIのInputFieldの使い方 チャット風機能【ひよこエッセンス】

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.0.0f4 Personal(2015年5月)

 

f:id:hiyotama:20150504205926p:plain

 

ひよこエッセンスの時間です〜

今回はゲーム画面から文字を入力するInputFieldという機能について解説していきたいと思います〜

uGUIまとめ( InputField)

 

①とりあえず使ってみる

何はともあれ使ってみましょう〜新しくProjectを作成し、HierarchyビューのCreate>UI>InputFieldを選択します〜

 

f:id:hiyotama:20150522155834p:plain

InputFieldを選択

 

今回はButtonとTextも用意して下さい〜

 

f:id:hiyotama:20150522155952p:plain

これだけ用意する

 

f:id:hiyotama:20150522160211p:plain

程よく配置

 

この状態で既にInputFieldに文字入力することは可能です〜が、ボタンを押した時に入力した文字を別の場所に表示する、チャット風の機能が欲しいところです〜

 

それではSaveScriptという名前のスクリプトを作り、Buttonオブジェクトに取り付けて下さい〜以下ソースです〜

 

 

public変数のinputFieldとtextがありますので、それぞれオブジェクトを指定してあげます〜

 

f:id:hiyotama:20150522160940p:plain

ドラッグ&ドロップ!

 

ボタンを押した時にSaveTextメソッドが実行され、InputFieldオブジェクトに入力されたテキストをstring型変数strへ保存、その後それをTextオブジェクトのtextに代入して表示しているという形です〜最後にInputFieldのテキストは初期化しています〜

 

ボタンを押した時にSaveTextが実行されるように設定し、実行してみましょう〜設定方法については以下エッセンスをご参照下さい〜

 

f:id:hiyotama:20150522161458p:plain

クリックでSaveTextを呼ぶよう設定

 

f:id:hiyotama:20150522161720p:plain

文字を入力しボタンをクリックすると・・・

 

f:id:hiyotama:20150522161802p:plain

Textオブジェクトに文字が!

 

日本語が入力したい等色々と設定したいと思いますので、InputFieldの設定について説明していきます〜

 

 

②InputField解説

それではInputFieldオブジェクトのInput Field(Script)コンポーネントについて解説していきたいと思います〜

 

f:id:hiyotama:20150522162048p:plain

赤枠の部分

 

Interactableは InputFieldを有効にするかどうかです〜

 

Transitionは通常時(Normal)、触れた時(Highlighted)、クリックした時(Pressed)、無効となった時(Disabled)の状態の変化を設定できます〜

Noneは何も変化せず、Color Tintは色の変化、SpriteSwapは画像の変化、Animationはアニメーションの変化をそれぞれ設定することができます〜

Color Tintの中にあるColor Multiplerは、設定した色にColor Multiplerの値を掛け算した色を表示します〜

Fade Durationは、色が移り変わるまでにかかる時間を設定します〜

 

NavigationはUI同士の関係をどのように管理し、表示するかを決めます〜

下のVisualizeボタンを押すと、SceneビューにUI同士の関わりを表示させることができます〜今回の場合は以下のような関わりが表示されました〜

 

f:id:hiyotama:20150522164640p:plain

黄色い矢印で関係を表す

 

None、Horizontal、Vertical、Automatic、Explicitとモードがあるのですが、違いがよく分からないので保留とさせて頂きます〜

 

Text ComponentはInputFieldに文字を入力する際のTextオブジェクトを指定します〜デフォルトではInputFieldの子オブジェクトであるTextオブジェクトが指定されています〜

 

TextはText Componentで指定したオブジェクトのtext部分をただ表示しているだけです〜

 

Character Limit文字数の制限が可能です〜

 

Content Typeは色々な文字入力方法を指定できます〜基本的に、何か制限したい時に使うといいかもしれません〜

Standard: 普通の文字入力です〜

Autocorrected: 自動変換してくれるかと思いましたが、してくれませんでした〜

Integer Number: 数字しか入力できません〜

Decimal Number: 数字とカンマしか入力できません〜

Alphanumeric: アルファベットか数字しか入力できません〜

Name: アルファベットとスペースしか入力できず、頭文字が大文字になります〜

Email Address: @マークが入っている等条件があるかと思いましたが、結構なんでもOKでした〜

Password:「*」で文字を隠してくれます〜

Pin: こちらも「*」で文字を隠します〜初期状態で入力されていないと表示されませんでした〜

Custom: 自分で設定します〜

 

Line Typeは、行の設定ができます〜Single Lineは一行しか認められず、Multiple Lineは複数行書くことができます〜Multiple Line Submitのほうの改行方法はよく分からないのですが、Multiple Line Newlineのほうはreturnキーで改行できました〜

 

※※※重要※※※

日本語入力はMultiple Line Newlineを選択しなければできないという点です〜ご注意下さい〜

 

Placeholderは、何も文字が入力されていない時に表示する薄い文字を表します〜デフォルトではInputFieldの子オブジェクトに存在します〜

 

Caret Blink Rateは文字入力位置にあるカーソルの点滅速度を決定します〜

 

Selection Colorはテキストをドラッグして選択した時の背景色です〜

 

Hide Mobile Inputは、スマホでスクリーンキーボードを使う時には隠してしまうか決められます〜

 

On Value Change (String)は、入力情報が変更される度にイベントを呼び出すことができます〜

 

End Edit (String)は、文字入力後Input Field外をクリックしたり、Enterキーを押したりした時にイベントを呼び出すことができます〜

 

On Value ChangeとEnd Editに独自のスクリプトを設定する場合は、ButtonのOn Clickを設定した時と同じ要領でいけるかと思います〜

 

 

ざっと見てきましたが、とりあえず文字入力してstring型の変数に保存できれば、あとは各自色々とできるかと思います〜

 

以上、ひよこエッセンスでした〜

ありがとうございました〜