手順３ −手球を実装−
５．Canvas内に手球(キャラ)ゲームオブジェクトを配置する ６．手球用スクリプトを作成する
新しい学習内容は、以下の通りです。
・SpriteEditorの使い方 ・Vector2.normalized変数
５．Canvas内に手球(キャラ)ゲームオブジェクトを配置する 
手球(キャラ)の画像をUnityにインポートする
手球用のフリー素材をネットで見つけてきてダウンロードしましょう。自分の考えている世界観に合うキャラクターにしていただければいいと思います。
ダウンロードしましたら、背景と同じようにUnityにインポートします。インポート場所もSpritesフォルダにします。
SpriteEditorを使って１つにまとまっている画像を分割する
手球用の画像が1枚の画像であれば、この手順は不要です。
もしも複数の画像が1枚の画像としてまとまっている場合には、SpriteEditorというUnity機能を利用して、1枚の画像を複数の画像に分割します。
インポートした手球用の画像をSpritesフォルダ内で選択します。
インスペクターに画像の情報が表示されますので、画像のような設定して、右下のApplyボタンを押します。
ここでは Sprite Mode を Multiple にしていることで分割を可能しています。
画像のインスペクター画像
その後、インスペクターにある Sprite Editor ボタンを押してください。
ウインドウでSprite Editorが開きます。このウインドウの大きさは可変可能ですので、見やすい大きさに適宜変更して使用してください。
Sprite Editor画像
ウインドウ内の左上にあるSliceボタンを押すことで、画像の分割ができます。適宜な大きさやサイズで分割してみてください。
升目がわかっているのであれば、Grid By CellCount を指定することで行の画像数と列の画像数を指定して分割できます(３×３、などの場合)
Sliceをすると画像に切れ目が入りますので、各画像が適切な大きさになっているかを確認します。その後、修正する場合にはSliceを押せば何回でも修正できます。
問題なくSliceが終了しましたら、SpriteEditorウインドウの右上にある Apply ボタンを押してください。これで画像の分割が確定されます。
確定後でもSliceは可能です。変更した場合には最後に必ず Apply して分割情報を反映してください。
分割に成功すると、１つのファイルであった干支の画像の右横に矢印アイコンが表示されます。
このファイルをクリックすると、分割された手球用の画像が表示されます。
ファイルの通し番号が画像のように順番になっていない場合には、SpriteEditor内で分割している画像を選択することで、ファイル名の変更ができます。
分割画像を選択後、右下にある、下記の画像のような小さいインスペクターの部分で変更できます。
手球用のImageゲームオブジェクトを１つ作成する
Canvas内に手球となるゲームオブジェクトを用意します
Canvas上で左クリックをしてメニューを表示し、UI => Image を１つ作成します。
Sceneビュー内の中央に白いゲームオブジェクトが作成されます。名前を CharaBall に変更します。
このときCanvas内に作成されているかを確認してください。
CharaBall ゲームオブジェクトのインスペクターを確認して、RectTransformコンポーネントがアタッチされていれば問題ありません。
以下は、CharaBallゲームオブジェクトのインスペクターを見ながら行います。
RectTransformコンポーネントを確認し、位置情報と大きさを画像のように設定してください。WidthとHeightが手球の大きさになります。
CharaBallゲームオブジェクト RectTransform インスペクター画像
Sceneビューの位置
Imageコンポーネントを確認し、SourceImageの部分に手球の画像を登録できます。どれでもよいので１つの手球の画像を設定してください。
画面上の白い状態のゲームオブジェクトに、適用したイメージが反映されます。
次にゲーム内でCharaBallゲームオブジェクトの振る舞いを決めるために、コンポーネントを２つ新しくアタッチします。
まずはRigidbody2Dコンポーネントをアタッチします。画像のように設定をしてください。
CharaBallゲームオブジェクト Rigidbody2D インスペクター画像
このコンポーネントによって物理演算を追加することで、手球がはじかれた際の処理(加速し、減速する)を実装します。
この機能を実装するためのこのコンポーネントを追加しています。
続いて、手球が他のゲームオブジェクトと干渉してぶつかるようにするために、CapsuleCollier2Dコンポーネントをアタッチします。
画像のように設定をしてください。コライダーの大きさはイメージと合うようにEditボタンを使って適宜調整してください。
CharaBallゲームオブジェクト CapsuleCollier2D インスペクター画像
以上でこの手順は終了です。
６．手球用スクリプトを作成する
Project内にフォルダを新しく１つ作成し、その中にスクリプトファイルを作成します。
Project内で右クリックしてメニューを表示し、Create => Folder を選択し、名前を Scripts に変更します。
このScriptsフォルダ内で右クリックしてメニューを表示し、 Create => C# Script を選択し、名前を CharaBall に変更します。
CharaBallスクリプトのファイルをダブルクリックしてVisualStudioエディターを開いて、スクリプトを記述します。
CharaBall.cs
＜Vector2.normalized変数＞
Vector2のベクトルに正規化処理を行います。方向はそのままで、速度ベクトルを作成されます。
そのため、今回の処理であれば、向きや距離による速度の差がなくなります。
Vector2 direction = new Vector2(Random.Range(-2.5f, 2.5f), 1).normalized;
Unity公式スクリプトリファレンス
Vector2.normalized
https://docs.unity3d.com/ja/current/ScriptReferenc...
TechProjin様
UnityのVector3でよく使うものまとめ
https://tech.pjin.jp/blog/2016/02/16/unity_vector3...
CharaBallゲームオブジェクトにCharaBallスクリプトをアタッチする
先ほど作成したCharaBallゲームオブジェクトにCharaBallスクリプトをアタッチします。
ヒエラルキー上にあるCharaBallゲームオブジェクトに、CharaBallスクリプトをドラッグアンドドロップしてアタッチしてください。
スクリプトをアタッチした場合には必ずゲームオブジェクトのインスペクターを確認して、アタッチが完了しているかチェックします。
アタッチされていれば Speed 変数へのアサイン情報が表示されていますので、こちらに任意の数字(5〜10前後)を設定してください。手球の速度になります。
CharaBallゲームオブジェクト インスペクター画像
ゲームを実行して動作を確認する
ゲームを実行して動作を確認します。実行すると手球のゲームオブジェクトがランダムな方向に移動していきます。
ですが壁に接触すると跳ね返らずに止まってしまうと思いますが、今はその実装まで出来ていれば問題ありません。
次の手順では、壁に接触した際やラインに接触した際に跳ね返るようにしていきます。
実行動画 壁に接触するまで移動する
https://gyazo.com/ce6cd6c89751ec2d5c26ccbbe60d9fb7
以上でこの手順は終了です。