チュートリアル前回のチュートリアルでは、ボールの飛距離を計算してコンソールに出力する方法をお送りしました。ボールが停止する判定はRigidbodyのIsSleeping()を使っており、ボールがスリープモードに入ったタイミングで飛距離を計算しています。飛距離の計算がうまくいきそうなので、今回はUIのテキストを使ってゲーム画面に飛距離を表示させてみましょ。前回のチュートリアルはこちらから。エクスプラボ【第10回】斜方投射でボールの飛距離を計算するチュートリアルhttps://ekulabo.com/tutorial-distance-text斜方投射でボールが飛んだ後、地面を転がって停止した位置までの距離を測定するUnityチュートリアルです。ボールが停止したことを検知するために、RigidbodyのIsSleeping()を使用して、スリープモードに入ったことを確認しています。飛距離をゲーム画面に表示します。その際、スクリプトからUIテキストの中身を書き換えます。前回のチュートリアルで作成したプロジェクトをそのまま使います。このページに先にたどり着いた方は、チュートリアルの初回から追っていただけるといいかもしれません。IDも登録してサインインした。いうあなたに向けた超入門チュートリアルです。Unityの物理演算を体験するため、物体を自由落下させてみましょ。前回はボールの初期位置から停止した位置までの飛距離を計算し、コンソールに出力していました。飛距離の計算はうまくいきそうなので、今度は画面上に表示します。画面に表示するといえば、そう。以前ボタンを作った時にちょっと触れたのでした。エクスプラボ【第5回】画面にボタンを配置するUnityチュートリアルhttps://ekulabo.com/tutorial-ugui-buttonUnityでゲームを作るにあたって、PCならキーボードを使えますが、モバイルでは画面内にUIを用意して操作できるようにします。ここでは、そのUIを配置するチュートリアルを記載してます。UIが配置されるCanvasについても触れています。今回もガンガン使いますよー。『Hierarchy』ウィンドウから『Canvas』オブジェクトを選択し、右クリックまたは二本指タップでコンテキストメニューを開きます。[UI]->[Text]と選択することで、『Text』オブジェクトを作成しましょう。作成後、『Text』オブジェクトの名前を『DistanceText』に変更しました。[shift]キーを押しながら、アンカーを左上に設定します。Yを[-50]に設定し、Widthは[800]、Heightは[100]にします。ポジションの設定をアンカー設定後にしたのは、アンカー設定で[alt]キーを使ってポジションをリセットしているから。0にしてから設定した方が分かりやすいですからね。[shift]でアンカーを左上に続いてTextコンポーネントの設定です。実際に表示するときのテキストを入れることで、Widthなどの調整がしやすくなります。確認するのも大事ですし。この値は、あとでスクリプトのStart()から変更するので、このまま残しても構いません。私はいつも消さない派。Styleは[Bold]を選択しました。Sizeは[64]ですが、あなたのPCの画面サイズに合わせて調整してください。Textを装飾したいお年頃もう少し装飾しちゃいましょ。Component]->[UI]->[Effects]->[Outline]と進んで、Outlineコンポーネントをアタッチします。Outlineはテキストの縁取りをしてくれます。ちなみにOutlineの上にあるShadowは文字の影を作れるエフェクトです。ドロップシャドウを作りたい時に便利。Outlineコーデでオシャレに演出Outlineコンポーネントでは、縁取りの色と幅を設定できます。DistanceのXを[2]に、Yを[-2]にします。縁取りで注目を集める上が装飾せず、下が装飾ありのもの。Unityデフォルトの機能でも、ちょっとしたことで見栄えが変わります。それなりビフォーアフターこれで配置はOK。次はスクリプトから文字を変更します。次はスクリプトを編集していきます。何でもかんでもSphereBooster.csに入れるのはあまり良くないんだけど、今回は機能確認がメインなのでこのまま追記します。次回以降、時間をとってスクリプトの分割・改修を行う予定です。今回のスクリプト編集の方針は以下の通り。作成した『DistanceText』オブジェクトへの参照を取得テキストの初期値をセットするコンソール出力の代わりに、UIテキストに飛距離をセットするこれを踏まえて編集したのが以下のもの。ポイントごとに解説します。usingで宣言する名前空間の追加です。今回使いたいTextコンポーネントは、UnityEngine.UIの下にあるので、名前空間を宣言する必要があります。UIをいじる時に忘れがちなので注意。クラスの中に入って、メンバ変数を追加しました。『DistanceText』オブジェクトは『Sphere』オブジェクトとは別のオブジェクトなので、参照をセットする必要があります。他のオブジェクトのコンポーネントを操作するなら、参照を取得する。これはUnityでめちゃくちゃ使います。下の方では、Textコンポーネントのキャッシュ用変数と、画面に表示する飛距離の数字以外の文字列を変数に持たせています。“に変えたい場合に、コードの中で直書きしていると直し漏れがあったりするのでこの形にしています。Gist.続いてStart()の中身を変更しました。メンバ変数rbにRigidbodyへの参照をキャッシュしていたのと同じように、今回追加したメンバ変数distanceTextに『Text』オブジェクトのTextコンポーネントへの参照をキャッシュしています。画面に表示するテキストの初期値も設定しています。ここで呼び出しているSetDistanceText()はあとで紹介します。Gist.次は前回作成したCheckDistance()の変更です。コンソールに出力していた部分をSetDistanceText()に変えてUIテキストに表示するようにしました。Gist.最後にSetDistanceText()を追加しています。やっていることは単純で、プレフィックス、引数の距離、サフィックスを組み合わせて文字列を生成し、『Text』オブジェクトが持つTextコンポーネントにあるtextフィールドにセットしています。セットする先が紛らわしくてアレですが、これでUIテキストに表示する文字列を変えることができます。Gist.ここで紹介したのは更新部分ですが、全文はこちら。手っ取り早く、動きだけ先に確認したいって時はコピペもありな気がしてきた。今回のスクリプトの中で、[SerializeField]として指定したGameObjectのdistanceTextObject。Objectと名前のついたフィールドが現れます。オブジェクト参照のフィールドここに『DistanceText』オブジェクトを関連付けましょう。『Hierarchy』ウィンドウから『DistanceText』オブジェクトをドラッグして、新しく表示されたフィールドにドロップします。右の丸ボタンから『DistanceText』オブジェクトを選択してもOKです。参照ができたこの参照のセットを忘れると、ゲーム開始直後のGetComponentでぬるぽを食らうので注意。スクリプトを一気に更新した時なんかは、今でも忘れることがあります(反省)動作の確認んじゃ実行してみましょ。例のごとくGIFは2倍速です。前回コンソールに表示していた飛距離ですが、今回はゲーム画面に表示することができました。......なんかこう、Transformが見えないと、いつ止まるか分からないですね。今動いているのか、止まっているのか、プレイヤーに分からないなぁ。今回表示した飛距離、常に更新してみましょうか。止まった時に最終的な飛距離を出して、前回の記録より伸びたらハイスコア更新、みたいな感じならプレイヤーも「もうちょい伸びて!!」と結果を待ってくれそう。次回はハイスコア表示を実装してみましょ。まとめUIテキストを使って、画面にボールの飛距離を表示するチュートリアルでした。UIテキストはかなり使用頻度が高いので、是非とも使い方をマスターしたいところ。今回使ってみたOutlineコンポーネントを装飾に便利です。次回はハイスコアを表示するようにしてみます。エクスプラボ【第12回】ボールの飛距離を記録し、ハイスコアを表示するチュートリアルhttps://ekulabo.com/tutorial-high-scoreボールの斜方投射を行い、その飛距離を毎フレーム画面に表示し、更新していくUIテキストのUnityチュートリアルです。飛距離によってハイスコアを保持し、それを画面に表示する処理もスクリプトとGIFアニメ付きで紹介しています。ゲーム開発の攻略チャートを作りました!「ゲームを作ってみたいけど、何から手を付けていいか分からない!」そんなお悩みをお持ちの方向けに、todoがアプリをリリースした経験を中心に、ゲーム作りの手順や考慮すべき点をまとめたe-bookを作成しました。ゲーム作りはそれ自体がゲームのように楽しいプロセスなので、「攻略チャート」と名付けています。投稿一覧Unityを使ってアプリを作ったり、Assetを作ったりしてる個人開発者。Unity全般ネタとAsset開発の情報を扱っています。Asset開発は日本語の情報が少ないのよね。ことで些細なネタでも情報を蓄積するのが目的です。2018.05.05単純な斜方投射を拡張し、ゴルフのようなゲームを作るチュートリアル、そのまとめです。2018.05.05単純な斜方投射を拡張し、ゴルフのようなゲームを作るチュートリアルです。これまでのチュートリアルで作成したゲームをいよいよビルドしてみます。2018.04.13斜方投射でボールが飛んだ後、地面を転がって停止した位置までの距離を測定するUnityチュートリアルです。2018.04.30単純な斜方投射を拡張し、ゴルフのようなゲームを作るチュートリアルです。今回はコースを作成しています。2018.04.16画面に表示したSliderを使ってカメラをズームイン・ズームアウトさせるUnityチュートリアルです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。todoUnityのアセットを作ったり、スマホ向けのアプリを作っています。このブログではUnity初心者に向けたチュートリアルやテクニックを放出しています。詳しいプロフィールはこちら。お仕事の相談や現在提供中のサービスについては、こちらの『サービス内容』のページをご覧ください。Explorers_todoオンライントレーニングのサイトをオープン!エクスプラボを運営しているtodoが、より集中的にゲーム作りについて学べるオンライントレーニングのサイトをオープンしました。エクスプラボのトレーニングルーム』です。勉強したことの進捗も表示できるようになっているので、どれだけ頑張ったのかが分かるようになっています。ゲーム開発の攻略チャート』というe-bookをプレゼントしています。メルマガではゲーム開発のテクニックを中心に役立つ情報をお届けします。詳しくはこちら!お仕事の依頼はこちら!ゲーム開発のサポートも可能!エクスプラボではゲーム開発のサポートのサービスも行なっています。いう場合にオススメのプランです。詳細はこちら!もちろん、普通に開発依頼をいただいてもお手伝いします。その場合はお問い合わせへ。【Unity】ポストプロセシングを使って簡単にプロっぽいゲーム画面を作るゲームの作り方を学べるオンライン講座のサイトをオープンしました!RANKING【Unity】Mathfの切り上げ、切り捨て、偶数丸め。使い分けが大事よねMathf【Unity】ゲームといえばランダム要素。(12)作ったアプリ空とにゃんこと風船と癒し系縦スクロール避けゲーの『空とにゃんこと風船と』(TODOWORKS名義でリリース)気軽に遊べるスマートフォン向けアプリです。ボクセルアートで彩られるどこかレトロ、でも新しい世界で癒されてみませんか?ぼく、猫ですって!タップ系RPG『ぼく、猫ですって!』(TODOWORKS名義でリリース)気軽に遊べるスマホRPG。