Unityを使った3Dゲームの作り方(かめくめ)Unityを使った3Dゲームの作り方(かめくめ)ゲーム開発エンジンUnityを使った3Dゲームの制作に参考になる情報を公開しています。15今回は、Unityでタイトル画面にスタートボタン、ゲーム終了ボタンのUI(ユーザインタフェース)を作成し、配置してみます。今までは、ひとつのシーンにオブジェクトを作成し、ゲーム開始とともにいきなり戦闘に入っていました。一般的なゲームではもちろんそんなことはありません。タイトル画面が表示され、なんらかのスタートボタンを押してゲームの中身に移動するはずです。タイトル画面を一つのシーンとして作成し、スタートボタンを押したらゲームの中身のシーンへと移動する処理を完成させます。スポンサーリンク新しいシーンを作成するまずは、タイトル画面を新しいシーンに作成したいと思います。Sceneを選択し、新しいシーンを作成します。Asと選択し、シーンを「Title」という名前で保存しておきます。次に、ヒエラルキー上で右クリック→UI→Canvasを選択し、名前をTitleWindowとします。UIはTitleWindowの子要素に設置していくことになります。UI関連のものを作成すると、必ずCanvasとEventSystemが作成されます。ボタン等が押された時のイベントを処理するのがEventSystemなので削除しないでそのままにしておきます。Canvasはどのように配置するか3つから選べます。Overlayとなっています。Overlayはシーンに配置するオブジェクト等より手前に表示されます。Cameraは指定したカメラ上にスクリーンサイズで表示されます。Spaceはスクリーンとは関係なく、ゲームオブジェクトと同じように表示されます。これはキャラクターと一緒に動くHPのバー等を作成する時に使えます。普通のゲームオブジェクトと同じように扱えます。Unityで敵キャラクターのHPを頭上に表示するUIを作成Unityで敵キャラクターのHPを表すUIを頭上に表示してキャラクターと一緒に移動するようにします。Overlayを選択します。TitleWindowの子要素としてUI→Panelを選択し名前をMainPanel、その子要素としてUI→Textを選択し名前をTitleText、UI→Buttonを選択し名前をStartButtonとして作成します。Canvasは実体を持たない枠組みで、Panelは実体のある枠組みという感じです。複数のPanelを設置して、それぞれのPanelにテキストやボタンの設置する領域を分ける事が出来ます。PanelのインスペクタでColorを薄緑に変更します。PanelはデフォルトではCanvas全体の大きさと同じなので、タイトル画面の背景が緑色になります。Presetsからstretch、stretchを選択します。選択する際はShift+Altキーを押しながら選択します。これでMainPanelはウインドウサイズに応じて縦と横に伸縮するようになります。次にTitleTextの設定を行います。Anchorsをクリックし、Shiftキー+Altキーを押しながらTopのCenterを選択します。Shiftキー+Altキーを押しながら選択する事で、アンカーの移動と同時にテキストも移動します。AlignmentをCenterとMiddleにして中央、真中にテキストを表示します。BestFitにチェックを入れると、枠の大きさに合わせてテキストサイズを合わせる事が出来ます。Sizeの範囲内のみ変わります。位置が確定したので、デフォルトのテキストをタイトルの名前に変更します。テキストに使用されているフォントは、ゲームに同梱する場合に使用料を取られます。インターネットブラウザはユーザーのパソコンにあるフォントを使って表示しているので、そんなことにはなりませんが・・・その為、無料のフォントを使わせてもらう事にします。無料の日本語フリーフォント投稿サイト日本語フリーフォント/ダウンロードなら「フォントフリー」。漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、明朝やゴシック体、手書きなどのカテゴリーから探すことができます。fontfree.meから無料のフォントを探してダウンロードします。Assetでフォントをインポートします。テキストのフォント選択(CharacterのFont)でインポートしたフォントに変更します。ComponentからUI→Effects→Outlineを追加して、テキストの周りに線を付けます。上のような感じにタイトルが出来上がりました。次はボタンを改良していきます。ボタンの上にマウスカーソルを持っていったり、ボタン上からマウスカーソルを外したり、クリックした時の演出をわかりやすくしたいと思います。現状では、デフォルトで多少変化しているのがわかると思います。ボタンを作成すると、子要素としてボタンに表示されるテキストが配置されます。作成したButtonの子要素のTextのインスペクタを表示し、テキストの中身を「スタート」に変更しておきます。次にボタンの演出を作成していきます。ボタンのインスペクタで、ButtonのTransitionをAnimationに変更します。これで、ボタンの上にマウスが来た時などにそれぞれの演出を作成する事が出来ます。Animationをクリックします。保存ダイアログが出るのでそのまま保存します。これがボタンのアニメーターコントローラーになります。作成されたアニメーターコントローラーはゲームオブジェクトと同じ名前のStartButtonで作成され、StartButtonにはAnimatorコンポーネントが取り付けられControllerの部分にはStartButtonアニメーターコントローラーが設定されます。アニメーターコントローラーは上のように状態と遷移、条件が既に作成された状態になっています。個々のボタンのアニメーションを付けていきましょう。UnityエディターのWindowメニューからAnimation→Animationを選択します。ボタンを指定するとアニメーションの編集が出来ます。NormalのところをHighlightに変更します。Highlightはボタンの上にマウスを乗せた時です。PropertyからImage→Color、RectTransform→Scaleをプラスします。アニメーションの最初と最後にダイヤマークが表示されます。最後のダイヤマークを選択し、録画マーク(赤い●をクリック)します。フレームの0の所のダイヤマークは不要なので選択し削除します。フレームの移動はフレームの数字が書いてあるところをドラッグすると出来ます。インスペクタのImageのところでColorを変更します。これでボタンの上にマウスが来た時に少しづつ赤色になります。色の変更の他にサイズも少し大きくしてみます。フレームの変更する位置に赤い線を置いて、録画ボタンが押されている状態でインスペクタの値を変更すると、自動でプロパティが追加されます。Scaleもフレームが1:00のところでインスペクタのScaleのX、Y、Zをそれぞれ1.1にします。同じようなやり方でマウスクリック時のアニメーションも編集します。マウスクリック時はボタンを青色にして設定しました。出来たボタンは上のようになります。見た目は全然よくないですね・・・・、ボタンアニメーションをどう作るかという点だけわかっていただければと・・・。スタートボタンを押した時にシーンを遷移させるスクリプトこれでボタンの演出の作成が終了したので、ボタンを押したらゲームシーンに移動するようにしたいと思います。ボタンを押した時に実行する機能を作成します。Emptyを選択し、名前をGameSystemに変更し、新しいスクリプトGameSystemを作り追加します。("Game");}}GameSystemにはStartGameメソッドを用意し、スタートボタンがクリックされたらGameSystemスクリプトのStartGameメソッドを実行するようにして、ゲームシーンに移動するようにしています。(Gameという名前でSceneを作っている必要があります)StartGameメソッドは自前のメソッドなので名前は適当に設定してください。SceneManager.LoadSceneでシーンの移動が行えます。シーンの移動を行う場合FileメニューのBuildSettingsを選択し、シーンをドラッグ&ドロップして追加します。上のシーンが最初に再生されるシーンとなります。次に、ボタンがクリックされた時にGameSystemゲームオブジェクトのStartGameメソッドが実行されるようにします。Clickの所で+を押します。functionとなっている個所にStartGameを選択します。これで、ボタンが押された時にGameSystemオブジェクトのStartGameメソッドが実行されることになります。Unityの実行ボタンを押して確認してみてください。タイトル画面からゲームシーンへの移動が行われるはずです。ゲーム終了ボタンを作成するゲームスタートボタンが出来たので、ゲーム終了ボタンも作成してみましょう。スタートボタンをコピーして、その下にゲームを終わるボタンを作成します。↑のような感じに配置しました。ゲームを終わるボタンを押した時の処理を、GameSystemスクリプトに追加します。UNITY_WEBPLAYERApplication.OpenURL("http://www.yahoo.co.jp/");#elseApplication.Quit();#endif}#ifやUNITY_EDITOR等はプラットフォームで処理分けする為の処理です。これは、いくつかのプリプロセッサーディレクティブで構成され、スクリプトを分割して、サポートしているプラットフォームごとに一つずつコンパイルし実行できます。docs.unity3d.com詳しくはUnityのマニュアルを参照してください。EndGameメソッドは『ゲームを終わる』ボタンを押した時に実行する予定のメソッドで、Unityのエディターだった時は再生をやめ、WebPlayer形式だった時はヤフーのトップページに飛ばし、それ以外の時はアプリケーションを終了します。WebPlayer形式の出力ってそろそろ出来なくなるっぽい・・・・(^_^;)WebGL形式で出力する事になるんですね、でもUnityが64bit版じゃないと出力出来ない・・・、それ以前にわたくしの場合パソコンが古くてファイル出力出来ない・・・(:_;)スタンドアロン形式でゲームを配布する場合は、『ゲームを終わる』ボタンを押すとウインドウが閉じるようになります。次に、ゲームを終わるボタンのOnClickにGameSystemオブジェクトをドラッグ&ドロップし、EndGameメソッドを実行するように設定してください。スタンドアロン形式で出力したゲームの『ゲームを終わる』ボタンを押して確認してみましょう。↑のようにゲームを終わるボタンを押すと、スタンドアロン形式なのでApplication.Quit()が実行されゲームが終了します。これで、タイトル画面のスタートボタンUIとゲーム終了ボタン、シーンの遷移が出来るようになりました。簡単?にインタラクティブなUIが作れる事がわかりました。07:43突然のコメントすみません。私はまだUnityを始めて1週間くらいのものです。こちらのページを参考に自分でシーンの遷移を作っていたのですが、よく分からないことがありコメントさせていただきました。GameStartメソッドとはどのようなものなのでしょうか?Ui作成時の名前などは、自分で作成したものにしていますので、どこが変わってしまうとこの遷移が実行されないのか分かっておりません。Clickの所で+で追加する辺りとの関連性を教えていただくことは可能でしょうか?宜しくお願い致します。12:19こんにちは。GameEnd(){}で書こうとしたときに名前空間にフィールドやメソッドのような......とエラーが出てしまい、うまく動きません。原因はなぜなのでしょうか。17:41他の記事も、大変参考になります。ありがとうございます。ところで、質問する方々に言いたい。こんな単純で一番簡単なUnityの基礎について質問するのに「よろしくお願いします」の一言も添えられないわけ?絶対自分で調べようとか思ってないでしょ。19:01こんにちは、この記事を参考にして、スタートボタンを作ってみたのですが、再生したときに、ボタンのアニメーションのみ作動していて、別のシーンに変化しません。17:36こんにちはこちらで紹介されていたゲーム終了プログラムを参考にさせていただいたのですが、コンパイルエラーCS0116を吐かれてしまいました。20:33こんにちは(^^)/エラーの原因は色々あるので、エラーメッセージの内容がわからないと原因の特定は難しいです。いったメッセージがコンソールに表示されているかを書いていただくと解決方法がわかるかもしれません。22:46SceneManagerが使えません。22:10UnityのバージョンによってはSceneManagerが別のnamespaceで定義されていたような気がします。("Game");}}SceneManagerの上にマウスポインタを持っていき右クリックからResolveで該当するnamespaceをusingディレクティブで指定してみてください。詳しいやり方はhttps://gametukurikata.com/program/uitextを参照してみてください。00:15原因としてはC#とJavaScriptの記述方法が混在していてエラーが発生しているようです。{}という形で関数名の前にfunctionという文字列を書き関数を定義しますが、C#の場合関数に当たるのがメソッドになり、functionという文字列は必要ありません。JavaScriptでは明示的に戻り値(関数やメソッドを実行して得られる値)を指定しなくても勝手に考慮してくれる為、戻り値の型を指定しなくても動作しますが、C#では戻り値の型を指定する必要があります。C#とJavaScriptでのスクリプトの書き方の違いについてはhttps://gametukurikata.com/program/javascriptcsharpこちらで解説しておりますので、参照してみてください。C#でスクリプトを組まれているようですので、C#で書いた場合のスクリプトを載せておきます。{SceneManager.LoadScene("Game");}}Startという名前のメソッドはすでに定義されている名前なので、このスクリプトを設定したゲームオブジェクトの登場と同時にシーンをロードする処理を実行してしまいます。その為、メソッド名はGameStartにし、ボタンでこのGameStartメソッドを呼び出す必要がある為、publicを付けて公にアクセス出来るようにしてあります。GameStartメソッドでの処理はGameシーンをロードする処理だけなので、戻り値を返す必要がありません。いった時は戻り値にvoidを指定します(計算結果を呼び出し元に返す必要がある場合はintやfloat、GameObject等を設定する場合もあり)。Application.LoadLevelは現在では奨励されないやり方となっている為、SceneManagerクラスのLoadSceneメソッドに書き換えています。SceneManagerクラスが定義されているUnityEngine.SceneManagementを新たにusingディレクティブで追加しています。このスクリプトで簡易サンプルを作成したところ、動作に問題はありませんでした。01:03GameSystemにはGameStart関数を用意し、スタートボタンがクリックされたらゲームシーンに移動するようにしています。startのところに出てうまくいきません。21:03同じ状況を再現出来ませんでした・・・・。エラー内容を見るとGameSystemスクリプトのStart関数が戻り値を返すようにしているけど戻り値を返していないという内容の気がしますが、同じエラーを出す事が出来ませんでした。スタートボタンを押すとエラーが発生するんでしょうか?GameSystemスクリプトの内容を書いて頂ければ何かわかるかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。サイト内検索が出来ますプロフィール管理人のかめくめちゃんです。(-_-)メールはこちらにお願いします(記事への質問はコメント欄にお願いいたします)。kamekumechan@gmail.comいずれはSIRENやバイオハザードみたいなアクションゲームを作りたいと思っています。ゲームシナリオが書けないので面白いゲームはなかなか作れません・・・・。(^_^;)名前の由来はカメが好きだからです。Д`)シクシク...お知らせ2020/01/18個人的にUnity2019.2.18f1をインストールしました。2020/01/01あけましておめでとうございます。(^^)/ユニティちゃんのRPGを作ってみようのPartyStatusスクリプトでpartyMembersのListの型がCharacterStatusとなっていたのでAllyStatusに変更しました。変更したというか、元々AllyStatusに書き換える前のスクリプトを掲載していたので修正しました。ユニティちゃんのRPGを作ってみよう10ーコマンド画面の作成とステータスの表示ーユニティちゃんのRPGでコマンド画面の作成とステータスコマンドを作成し、選択したキャラクターのステータスを表示するようにしていきます。20:00GetPartyStatusメソッドの戻り値もそれに伴って変更しています。2018/08/07コメント欄へのわたくしの返信は停止しております。わたくしに出来る事は既に記事にしてあるので、ブログ右上の検索窓を活用してください。(._.)またブログの最初の方の機能を積み上げていく記事に関しての疑問点は当ブログ記事のスクリプトの説明と寄せられた質問への回答Unityを使った3Dゲームの作り方(かめくめ)の機能積み上げ形式の記事のスクリプトの説明と寄せられた記事の機能についての質問への回答を掲載しています。21:41も参照してみてください。コメントの返信はありませんが、回答は記事に反映されている可能性があります。当ブログはハイスピードプランです。WordPressの編集画面の動作が早くなった。Unityを使った3Dゲームの作り方(かめくめ).。