Unity 練習2

ノベルゲームのひな型を作る練習．
以下のnote記事を参考にして作成し，自分が制作する過程をメモしていく．

環境を作る

練習1と同様に，次のような配置で行っていく

まずProject上で

右クリック→[create]→[Folder]→名前を入力

によって，Scripts，Animators，Resourcesの三つのフォルダーを新たに作成する．すると次のようになる．

さらに同様の手順で"Resources"フォルダ内に
"Animations"，"Sprites"，"Prefabs"，"Texts"，"AudioClips"
の五つのフォルダを作成する．

テキストウインドウなどの配置

Hierarchy上で

(右クリック)or(＋ボタン)→[UI]→[Canvas]

を選択し，Canvasを作成する．

(Canvasをクリック)→(右クリック)→[Create Empty]

によってCanvasの子オブジェクトとして"GameObject"を作成．
作成した"GameObject"の名前を"GameManager"に変更する．
次に，次の手順で"GameObject"の子ノードとして"Panel”を作成．

(GameObjectをクリック)→(右クリック)→[UI]→[Panel]

作成した"Panel"の名前を"BackgroundPanel"に変更する．
その次同様の手順で"BackgroundPanel"階層下に"Panel"を二つ作成し，それぞれ名前を"MainTextPanel"，"NameTextPanel"にする．
また，この二つのそれぞれの階層下に次の手順で"text"を作成．

(MainTextPanel)→(右クリック)→[UI]→[text]
(NameTextPanel)→(右クリック)→[UI]→[text]

"MainTextpanel"下の"test"の名前を"MainText"に，
"NametextPanel"下の"test"の名前を"Nametext"にする．
その後にBackgroundPanelの階層下に"GameObject"を作成し，
名前を"CharacterImages"にする．
これらの作業が終わると次のようなHierarchyになる．

これらを作成し終えたら，いよいよ位置を変更していく．
まず"Gamemanager"から変更する．Inspectorを見ていく．
初期状態では，ract Transformの左上は，赤の十字のようなものになっている．(下図参照)

その赤の十字の箇所を選択し，次の図で示すものに変更する．

その後，次の図に示すように値を変更する．

"BackgroundPanel"の位置次のようにを変更する．

"MainTextPanel"を次のように変更する．

"NameTextPanel"を次のように変更する．

"MainText"を次のように変更する．

"NameText"を次のように変更する．

"CharacterImages"を次のように変更する．

ここまで実行すると次のような画面になる．

ここまでが参考サイトの内容であるが，参考サイトと筆者の画面の比率が異なり，ラベルゲームらしさがあまりないので，ここからは筆者が独自に成型していく．

"MainTextPanel"のHeightが枠の大きさを決めているのが分かるので，これを次のように変更する．

このままでは文字が上手く表示されていないので文字の大きさを"MainText"のFont Sizeを次のように変更する．

"NameTextPanel"でも同様に枠の大きさを次のように設定する．PosYで枠の位置を，Widthで幅を，Heightで高さを設定する．

こちらも文字列を適切に表示するために"NameText"を変更する．

以上のように設定すると次のような画面になる．

ページ送りアイコンの作成

Projectタブ内で最初に作ったAssets/Resources/Spritesフォルダに移動し，次の手順で三角形のスプライトを作成する．

(右クリック)→[Create]→[Sprites]→[Triangle]

作成した後のProjectタブは次のようになる．

次にHierarchyタブ内のCanvas/Gamemanager/BackgroundPanelの階層下に空のオブジェクトを作成し，名前を"NextPagelcon"にする．

("BackgroundPanel"をクリック)→(右クリック)→[Create Empty]

"NextPagelcon"の階層下に"Image"を次の手順で作成する．

("Nextpagelcon"をクリック)→(右クリック)→[UI]→[Images]

ここまで行うと次のような画面になっている．

"Image"のInspectorの部分をDefault UI Materialを開いて(開かなくてもよい)表示させると次のようになる．ImageのSource Imageのところに，先ほどProjectタブにて作成した"Triangle"をドラッグする(下の画像ではすでにドラッグ済みであり，元々はNone(Sprite)となっている)．

"Triangle"をドラッグした後，ImageのUse Sprite Meshにチェックを入れる．これによってGameタブの図形が三角形になる．画面の様子を次の図で示す．

そして，Inspectorタブ上のPosやRotation，Colorなどを操作して，この図形を好きなように配置する．筆者は次の図のように設定した．WidthとHeightを操作して大きさを変えたが，Scaleの操作でも行えそうである．

ここで作成したアイコンにアニメーションを付ける．
プロジェクトタブ内のAssets/Animatorsに入り，次の手順を行う．

(右クリック)→[Create]→[Animator Controller]

これによって作成したものの名前を"NextPageconAnimator"にする．すると次の図のようになっている．

続けて，Assets/Resources/Animationフォルダ内で次の操作を行い，Animationを作成する．

(右クリック)→[Create]→[Animation]

そして名前を"NextPagelconAnimation"に変更する．Projectタブ内は次の図のようになる．

次に，Hierarchy上のCanvas/GameManager/BackgroundPanel/NextPagelcon
を右クリックし，Inspector上にNextPagelconを表示させる．
Inspector上で次の操作を行い，Animatorを追加する

[Add Component]→(Animatorで検索)→[Animator]

追加後は次の図のようになる．

Animatorの下にあるControllerに，先ほどProjectタブ内で作成した"NextPagelconAnimator"をドラッグする．
次にProjectタブ内の"NextPagelconAnimator"をダブルクリックして次のような画面にする．

このままでは操作がしにくいので，画面の比率を操作する．

Projectタブ内のAssets/Resources/Animationsから，
"NextPagelconAnimation"を先ほど拡大したタブにドラッグする．つぎの図のようになる．
Exitなどはドラッグで動かせる．

次に，Projectタブ内の"NexePagelconAnimation"をダブルクリックすると次のようなタブが画面のどこかに出現する．

出現したばかりでは，まだAdd Propertyを選択することが出来ない．このタブを出現させたまま，Hierarchyタブ内の
"NextPagelcon"をクリックすると，Add Propertyを押すことが出来るようになる．以下の手順を行う．

[Add Property]→(RectTransformの左にある△を押して展開)
                                                                       →[Anchored Position]

すると，タブは次のようになる．
(Anchored Positionは上下運動させるときに使う)

このタブは左右を拡張すると，次のようになる．

この右の部分で動作を記録する．
Animationタブの"NextPagelcon:Anchored Position"の左の△を押して展開する．すると次のようになる．

時間が書いてあるところを選択すると線が移動する．次の図は0:02を選択した．(Positionには-30，30を入れた)

線を動かすとPosition.xとyの値も変動していることが分かる．これはInspectorに反映されている．

白い四角形の点もドラッグで動かすことが出来る．これらを用いてAnimationの動きを作成する．また，Animationの動きをレコーディングするとき，Hierarchyタブ上で"NextPagelcon"を選択していないと，"enable/diable keyframe recording mode"と表示されてレコーディングを行えないので，注意すること．

調整のコツを記す．白い線は物体が動き終わるまでの時間を決めている．「1:00」のところに線を置くと1秒で動き終わる．左の数字を打ち込むところは，アニメーションの開始地点と終了地点を示す．レコーディングボタンを押す前に打ち込んだものが開始座標となり，レコーディングボタンを押した後に打ち込んだものは終了地点の座標を示す．
今回私が作りたいのは上下にだけ動くものである．よって初期状態は次のように設定する．

後は次の手順を行って，上下運動させる．

(recordingボタンを押す)→(白い線を1:00に移動)
→(Anchored Position.yの値を0にする)→(recordingボタンを押す)

ここまでで，一回だけ下に下がる動きをするようにした．あとはこれを繰り返したい．次の手順を行ってループさせる．

(Projectタブの"NextPagelconAnimation"をクリック)
　　　　　　　　　　→(InspectorタブのLoop Timeをチェック)

すると次のようになっている．

実際に実行ボタンを押して確かめてみるとよい．

unity練習2はここまでにして，unity練習3につなげようと思います．次からはスクリプトの編集も行います．