Unityに関連する記事です

 以下の内容で順番に実装を進めていきます。

手順3 −手球を実装−
 5.Canvas内に手球(キャラ)ゲームオブジェクトを配置する
 6.手球用スクリプトを作成する



 新しい学習内容は、以下の通りです。

・SpriteEditorの使い方
・Vector2.normalized変数



5.Canvas内に手球(キャラ)ゲームオブジェクトを配置する

手球(キャラ)の画像をUnityにインポートする



 手球用のフリー素材をネットで見つけてきてダウンロードしましょう。自分の考えている世界観に合うキャラクターにしていただければいいと思います。

 ダウンロードしましたら、背景と同じようにUnityにインポートします。インポート場所もSpritesフォルダにします。


SpriteEditorを使って1つにまとまっている画像を分割する


 手球用の画像が1枚の画像であれば、この手順は不要です。
もしも複数の画像が1枚の画像としてまとまっている場合には、SpriteEditorというUnity機能を利用して、1枚の画像を複数の画像に分割します。



 インポートした手球用の画像をSpritesフォルダ内で選択します。
インスペクターに画像の情報が表示されますので、画像のような設定して、右下のApplyボタンを押します。
ここでは Sprite Mode を Multiple にしていることで分割を可能しています。

画像のインスペクター画像



 
 その後、インスペクターにある Sprite Editor ボタンを押してください。
ウインドウでSprite Editorが開きます。このウインドウの大きさは可変可能ですので、見やすい大きさに適宜変更して使用してください。

Sprite Editor画像



 ウインドウ内の左上にあるSliceボタンを押すことで、画像の分割ができます。適宜な大きさやサイズで分割してみてください。
升目がわかっているのであれば、Grid By CellCount を指定することで行の画像数と列の画像数を指定して分割できます(3×3、などの場合)

 Sliceをすると画像に切れ目が入りますので、各画像が適切な大きさになっているかを確認します。その後、修正する場合にはSliceを押せば何回でも修正できます。
問題なくSliceが終了しましたら、SpriteEditorウインドウの右上にある Apply ボタンを押してください。これで画像の分割が確定されます。
確定後でもSliceは可能です。変更した場合には最後に必ず Apply して分割情報を反映してください。

 分割に成功すると、1つのファイルであった干支の画像の右横に矢印アイコンが表示されます。




 このファイルをクリックすると、分割された手球用の画像が表示されます。


 ファイルの通し番号が画像のように順番になっていない場合には、SpriteEditor内で分割している画像を選択することで、ファイル名の変更ができます。
分割画像を選択後、右下にある、下記の画像のような小さいインスペクターの部分で変更できます。


手球用のImageゲームオブジェクトを1つ作成する


 Canvas内に手球となるゲームオブジェクトを用意します

 Canvas上で左クリックをしてメニューを表示し、UI => Image を1つ作成します。
Sceneビュー内の中央に白いゲームオブジェクトが作成されます。名前を CharaBall に変更します。

 このときCanvas内に作成されているかを確認してください。
CharaBall ゲームオブジェクトのインスペクターを確認して、RectTransformコンポーネントがアタッチされていれば問題ありません。






 以下は、CharaBallゲームオブジェクトのインスペクターを見ながら行います。
RectTransformコンポーネントを確認し、位置情報と大きさを画像のように設定してください。WidthとHeightが手球の大きさになります。

CharaBallゲームオブジェクト RectTransform インスペクター画像



Sceneビューの位置



 Imageコンポーネントを確認し、SourceImageの部分に手球の画像を登録できます。どれでもよいので1つの手球の画像を設定してください。
画面上の白い状態のゲームオブジェクトに、適用したイメージが反映されます。


 次にゲーム内でCharaBallゲームオブジェクトの振る舞いを決めるために、コンポーネントを2つ新しくアタッチします。

 まずはRigidbody2Dコンポーネントをアタッチします。画像のように設定をしてください。

CharaBallゲームオブジェクト Rigidbody2D インスペクター画像



 このコンポーネントによって物理演算を追加することで、手球がはじかれた際の処理(加速し、減速する)を実装します。
この機能を実装するためのこのコンポーネントを追加しています。


 続いて、手球が他のゲームオブジェクトと干渉してぶつかるようにするために、CapsuleCollier2Dコンポーネントをアタッチします。
画像のように設定をしてください。コライダーの大きさはイメージと合うようにEditボタンを使って適宜調整してください。

CharaBallゲームオブジェクト CapsuleCollier2D インスペクター画像



 以上でこの手順は終了です。

6.手球用スクリプトを作成する


 Project内にフォルダを新しく1つ作成し、その中にスクリプトファイルを作成します。

 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

 以上でこの手順は終了です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます