【UnityC#講座】角度と力を決めてボールの飛距離を競うゲーム【Flying Ball】



【Unityアセットストア公式】初購入特別キャンペーン

期間:日本時間 10月31日 17:00時まで
対象:アセットストアで初購入のユーザー限定
詳細:Unityアセットストアで初めてアセットを購入いただく方限定、アセット全品20%OFF


◆◆◆◆


Unity5.6.0f3
Windows10

今回は今までよりもゲームらしいものを作ります。
タイミング良く画面をタッチすることで最適の角度と力を決めてより遠くにボールを目指すゲームです。
今回のプロジェクト名は「Flying Ball」にしました。
さあ、さっそくオブジェクトを設置していきましょう!

■ボールを飛ばす

Flying Ball/Sphere&Plane

まずSphereとPlaneを出します。

Hierarchy > Create > 3D Object > Sphere
Hierarchy > Create > 3D Object > Plane

Flying Ball/Sphere位置

Flying Ball/Plane位置

 

位置はこの通りにしてください。
白と白で見にくいならばMaterialをアタッチしてそれぞれ色を変えましょう。

Project > Create > Material

出したらInspectorのAlbedoから色を変えてください。

Flying Ball/Sphere&PlaneWithMaterial

次はスクリプトを作ります。
C#のShotスクリプトを作ってください。

Input.GetMouseButtonDown(0)は左クリックに反応しますが、右クリックは(1)、真ん中クリックは(2)になります。
AddForceRigidbodyに力をかけて動かします。

そうしたら、

1.SphereのComponentにRigidbody追加。
2.Sphereにスクリプトをドラッグアンドドロップ。
3.SphereのInspectorのShotのRigidbodyの欄にRigidbodyつけたSphereをドラッグ&ドロップ。
4.thrustの空欄に加えたい力の数値を入力。

Flying Ball/SphereのInspectorのShotScriptとRigidbody

さてこれで一旦再生してみましょう。
画面を左クリックしたら無事Sphereが前方に飛んだでしょうか。

Flying Ball/左クリックで飛ぶ

あとInspector/Transform/RotationのX軸の数値を変えることで飛ぶ角度を変えられます。

次はCameraSphereを追うCameraPosスクリプトを書きます。

これをMain Cameraにドラッグ&ドロップしてください。
再生した時にちゃんとSphereを追って行ったでしょうか?

■角度を決められるようにする

次は動く棒をタイミングよくクリックで止めてボールが飛ぶ角度を0.1~90度までの間で決定できるようにします。
まずはImageを出してください。

Hierarchy > Create > UI > Image

出したらInspectorからWidthを129、Heightを9にします。

Inspector > Image (Script) > Color

そこからImageの色を替えられるので好きなものにしてください。

次は俗に空のオブジェクトと言われるCreate Emptyを出します。
これはゲーム上では見えず触れられもしないため、位置を取得したりスクリプトを入れておくのに便利です。

Hierarchy > Create > Create Empty

これをクリックするとHierarchyにGameObjectが現れます。

そして次からが少々ややこしいのですが、

1.GameObjectを同じHierarchyのCanvasにドラッグ&ドロップして子オブジェクトにする。
2.ImageをGameObjectにドラッグ&ドロップして子オブジェクトにする。

このようになります。

Flying Ball/Canvas,GameObject,Image

それからGameObjectとImageをそれぞれこのような位置にしてください。

Flying Ball/Meter位置 Flying Ball/Image位置

 

さあ再びShotスクリプトを開いてください。
ここに角度を決めるコードを追加します。

そうしたらSphereのInspectorのスクリプトの欄に空欄ができるのでImageの親オブジェクトのGameObjectをドラッグ&ドロップします。
そうするとこのようになりました。

Flying Ball/角度を決めて飛ぶ

無事角度を変えて飛んだでしょうか?
InspectorのTransformから確認してください。

スポンサーリンク

■飛距離の表示・やり直しボタンを設置する

次はボールを飛ばす力の入力、と行きたいところですが、やはりどれくらい飛んだか分からないとつまらないし、やり直すのに停止と再生のボタンを押すと時間かかるのは不便なので先にここを何とかしましょう。
まずはTextを出します。

Hierarchy > Create > UI > Text

そうしたらSceneを操作するこの2Dの拡大・縮小のボタンを押して操作します。

Flying Ball/UIの拡大縮小ボタン

Scene上に青い4つの丸が出るのでそれを外側の白い枠線の角にそれぞれ合わせてください。

Flying Ball/Textの大きさを変える

次はInspectorを次のようにします。

Flying Ball/TextのInspector

Font Sizeを見やすい大きさへ。
Alignmentを上下左右の真ん中へ。
Colorを見やすい色へ。

そしてついでにComponentでShadowを出すとTextに好きな色で影がつけられます。
Outlineを出すとTextのふちに色をつけられます。

Flying Ball/Text

ここら辺は自由に設定してもらって構いません。

次はボタンを出します。

Hierarchy > Create > UI > Button

Textと同じように操作して適当な大きさ、位置に置いてください。

Flying Ball/Buttonの位置

ボタンの中の文字はButtonの子オブジェクトのTextのInspectorから変えます。

Flying Ball/ButtonのText

Flying Ball/ButtonのTextのInspector

次はスクリプトを書きます。
Shotスクリプトに入れても良いのですが、ここに載せるには長くなるので新たに書くことにしましょう。
名前はLandingにしました。

なぜ-10で終わるようにしたかと言うと、Sphereの角度を変えるとY軸の位置も変わって0未満になってしまうことが分かったのでそこまで引き下げました(笑)

上の方にあるusingのところが追加されていることを忘れないでください。

そうしたらこのスクリプトもSphereにドラッグ&ドロップし、InspectorのLandingスクリプトの空欄にTextをドラッグ&ドロップします。
Buttonの子オブジェクトのTextと間違えないようにしてください。
最初にTextは右クリックで名前変えておくべきでしたね・・

次にButtonにセットしましょう。
まずButtonのInspectorのOnClickを見つけてください。

Flying Ball/ButtonのOnClick

その空欄に使うスクリプトを入れたオブジェクトをドラッグ&ドロップしてください。
今回はSphereですね。

Flying Ball/ButtonのOnClickプラス

そうしたらNo FunctionからLanding、Reloadとたどってクリックして出来上がりです。

Flying Ball/ButtonのOnClickプラス、Landing,Reroad()

その結果こうなりました。

Flying Ball/ReloadをするButton

うーむ、リロードするとなぜかMateralの色がおかしくなりますね。
申し訳ないのですが私にも原因は分かりません。
どうにかする方法が分かったらぜひ教えてください(笑)

—追記—

解決しました。

Window > Lighting > Setting > Global maps

・Auto Generateのチェックボックスを外す
・Generate Lightingのボタンを押す

これで色がおかしくなりません。

—追記ここまで—

■Sliderを利用して受け渡す力を決定する

次はSliderというUIを使います。

Hierarchy > Create > UI > Slider

Flying Ball/Sliderの子オブジェクト

Slider
Background
Fill Area
Fill
Handle Slide Area
Handle

このようなものが出てきましたが、Handle Slide Areaがつまみの部分はいらないのでまずそれを削除します。

次にSliderのInspectorのSlider(Script)を見て下さい。
まずはInteractableのチェックをはずします。
こうすると再生中につまみ部分をクリックしても動かせなくなります。

次にValueというスライダーがあるので動かしてみましょう。
そうすると画面上のSliderの中身が動くのですが、一番端まで行きません。

Flying Ball/SliderのValueを動かす、Inspector

Flying Ball/SliderのValueを動かす、Game

 

それを修正するにはFill AreaRect TransformのLiftとRightの値、そしてFillRect TransformのWidthの値を全て0にします。

Flying Ball/SliderのFill AreaのRect Transform

Flying Ball/SliderのFillのRect Transform

次は色を替えます。

前景はFillImage(Script)のColorから好きな色に変えてください。
拝啓はBackgroundのImage(Script)のColorのアルファを0にして透明にします。

Flying Ball/SliderのColorのアルファを0に

次は向きを替えます。

Hierarchy > Slider > Slider(Script) > Direction

DirectionBottom To Topにしてください。
あとはSceneで位置と大きさを調節して完成です。

Flying Ball/Sliderの位置

このようにしました。

そうそう、UIは基本的にHierarchyの下に配置されたものが手前に来るようになっています。
なのでもしSliderがTextを隠してしまうようならHierarchyで上の位置に来るようにドラッグ&ドロップしてください。

それではまたShotスクリプトを開いてください。
ここにSliderを動かすスクリプトを書き加えます。

保存したらSphereのInspectorのShot(Script)にSliderという空欄ができているのでHierarchyのSliderをそこにドラッグ&ドロップします。

さあちゃんとできているか確認してみましょう!

Flying Ball/Sliderが無事動くかな?

■Cubeで地面に模様をつける

さて、下に何もないとどれくらいの高さをどれくらいのスピードで飛んでいるのかさっぱり分かりませんね。
なので地面に縞模様をつけるのでCubeを出してください。

Hierarchy > Create > 3D Object > Cube

それをこのようなScaleにしてください。

Flying Ball/CubeのScale

色はMaterialで好きにつけてください。
できたらProjectのAssetsにCubeをドラッグ&ドロップしましょう。

そしてスクリプトを書きます。

さて無事に縞模様は出たでしょうか?

Flying Ball/Cubeの縞模様ができて完成

■まとめ

今回はオブジェクトを動かしたり角度を替えたりしました。
さらにImageやSlider、Button、TextといったUIも使っています。
これだけあれば最低限のゲームは作れると思いますが、実はまだ教えたいことがあり、それはこの記事が長くなったので次回に回します。

どうかお楽しみに!

↓  ↓  ↓

この記事の続きです。

【Unity講座】Flying Ballを強化する【PlayrePrefs、Skybox、Particle System、コルーチン】

2019年6月27日
【UnityC#講座】SliderでHPバーを作る

スポンサーリンク

目次に戻る


4 Replies to “【UnityC#講座】角度と力を決めてボールの飛距離を競うゲーム【Flying Ball】”

    1. yukiさん、アドヴァイスありがとうございます。
      そのリンクの通りにしたら直りました。

      あとJetpackを入れてみたのですが色んな機能があってよくわかりません。
      良かったらおすすめの機能を教えてください。

  1. このページの方、参考にさせていただいている者です
    ありがとうございます

    一つ質問なのですが
    弾く方向の算出において、
    カメラを回転して逆にすると、意図しない方向に飛んてしまって
    色々ともがいてはみたもののうまく制御できず、困っています。

    何か少しでも見解をいただければ幸いです。
    不躾な質問で申し訳ございませんが、
    よろしくお願いします。

    1. くまださん、コメントありがとうございます。
      カメラはTransformから向きを変えたのでしょうか?
      その場合、値を元に戻してCameraPosスクリプトの
      transform.rotation = Quaternion.Euler(22, 0, 0);
      の部分の値をいじって角度を変えて見てください。
      ダメだったらまたコメントお願いします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください