スポンサーリンク

Unity実習23、UIを作ってみよう

SnapCrab_NoName_2016-6-8_14-8-34_No-00.jpg

今回から本の第三部
いよいよ大詰め?です

で、早速UIの作成なのですが...
本のは古いUIの作り方?みたいなので解説などはフルカット
まぁ、ひよこのときにuGUIやりましたからね
イマドキ古いのを勉強しても意味ないし~、みたいな
なので、ササッと作って次に行きます
もし、uGUIでやりたいという方は、折角なのでそっちで作ってみるのもいいかも?

ProjectのAssets内に UNIDRA_DATA/Data/MainGame/2D Assetsフォルダを丸ごとドラッグ&ドロップ
中にあるテクスチャがインポートされます
SnapCrab_NoName_2016-6-8_13-12-28_No-00.jpg

SnapCrab_NoName_2016-6-8_13-13-52_No-00.jpg

タイマーの表示
Hierarchyに空のオブジェクトを作成、名前をGameGUIに変更
SnapCrab_NoName_2016-6-8_13-17-43_No-00.jpg

ProjectのAssets/Scriptsに UNIDRA_DATA/Data/MaiGame/Scripts/Chapter13/GameTimerGui.cs をドラッグ&ドロップ
その後、Hierarchyにある GameGUI に取り付けます
SnapCrab_NoName_2016-6-8_13-19-11_No-00.jpg

Inspectorでいくつか項目を変更
Timer Iconに、ProjectにあるAssets/2D Assets/TimerIconをドラッグ&ドロップ
Timer Lebel StyleのNomalでText Colorを白に
OverflowのFont Sizeを 30
Text Clippingを Overflow
にします、他は画像参照
SnapCrab_NoName_2016-6-8_13-33-19_No-00.jpg

ゲームを実行すると、左上に残り時間が表示されます
SnapCrab_NoName_2016-6-8_13-33-34_No-00.jpg

プレイヤーと敵のステータスを表示
ProjectのAssets/Scriptsに UNIDRA_DATA/Data/MaiGame/Scripts/Chapter13/CharacterStatusGui.cs をドラッグ&ドロップ
SnapCrab_NoName_2016-6-8_13-40-30_No-00.jpg

HierarchyのGameGUIに取り付け
Timer Lebel StyleのNomalでText Colorを白に
OverflowのFont Sizeを 20
Alignmentを Upper Right
Text Clippingを Overflow
Back Life Bar Textureに ProjectのAssets/2D Assets/BlackLifeBar をドラッグ&ドロップ
Front Life Bar Textureに ProjectのAssets/2D Assets/FrontLifeBar をドラッグ&ドロップ
他画像のとおりに
SnapCrab_NoName_2016-6-8_13-50-11_No-00.jpg

ゲームを実行するとプレイヤーの名前、体力、敵の名前、敵の体力が表示されます
SnapCrab_NoName_2016-6-8_13-53-59_No-00.jpg

ゲームオーバーとゲームクリアの表示
ProjectのAssets/Scriptsに UNIDRA_DATA/Data/MaiGame/Scripts/Chapter13/GameResultGui.cs をドラッグ&ドロップ
HierarchyのGameGUIに取り付け
Game Over TextureとGame Clear TextureにそれぞれProjectのAssets/2D Assetsにある FontGameOver と FontCongratulations をドラッグ&ドロップ
SnapCrab_NoName_2016-6-8_14-1-51_No-00.jpg

SnapCrab_NoName_2016-6-8_14-2-38_No-00.jpg

ゲームを実行して、ゲームオーバーとクリアした際に表示されるか確認しましょう
SnapCrab_NoName_2016-6-8_14-3-59_No-00.jpg

これでUI終わり!
元からスクリプトがあったのもありますが、早かったですね
次回はタイトル画面の作成です
関連記事

Leave a Reply


管理者にだけ表示を許可する

Comment

Leave a Reply


管理者にだけ表示を許可する