0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Unity2D対戦ゲーム] 攻撃モーション/非ダメ/当たり判定の実装方法 #1 (一から作るチュートリアル) Mac版

Last updated at Posted at 2020-01-29

#初めにUnityHubから新規プロジェクトを作る
まずは、プロジェクトの右上から新規作成をクリックします
スクリーンショット 2020-01-24 23.26.19.png

次にこの画面が出てきます。
スクリーンショット 2020-01-24 23.32.46.png

この時にテンプレートを[2D]をクリックして設定をして、プロジェクト名を変更します(好きなプロジェクト名で大丈夫) 変更をしたら作成ボタンをクリックします。(2Dは2D、3Dは3Dのゲーム開発に合わせて設定する事)
スクリーンショット 2020-01-24 23.43.56.png

プロジェクトを開くと、このようになります。もし、このUnity Editor Update Checkが出たら、バツボタンをクリックして消してください。
スクリーンショット 2020-01-24 23.52.19.png

消したらようやくプロジェクトを新規作成ができましたね。
スクリーンショット 2020-01-24 23.59.06.png

#Asset Storeから動かすキャラクターなどをインポートする
ステージ作成をするのとキャラクターの配置をしていきたいので、真ん中にある[Asset Store]をクリックしてください。クリックしたらこのような画面になります。
スクリーンショット 2020-01-25 0.26.27.png

検索で今回は「bandit」というAssetを使います。(FREEは無料のAssetです)これをクリックします。
スクリーンショット 2020-01-25 0.36.15.png

次に、このダウンロードボタンをクリックしてください。
スクリーンショット 2020-01-25 0.44.07.png

ダウンロードが終わればインポートのボタンに切り替わります。
スクリーンショット 2020-01-25 0.49.44.png

インポートをクリックしたら、また画面がこのように出て、矢印も全部付いていると思うので、そのままインポートをクリックしてください。
スクリーンショット 2020-01-25 0.51.48.png

これで、入れる事ができました。
スクリーンショット 2020-01-25 1.03.17.png

Asset Storeは使わないので、マウスの右クリックのメニューから[Close Tab]で、一旦閉じましょう。
スクリーンショット 2020-01-25 1.18.19.png

閉じたら、このようになります。
スクリーンショット 2020-01-25 1.20.10.png

無事にAsset Storeの作業は終わりました。

###Asste Storeからインポートした[Asste]のDemoについて(初めて使う人は、大事な事)
[Asste]のDemoでキャラクターなどの動きなどが確認できる。(Demoが無いとAsste Storeに出せないルールがある)

左下のプロジェクトビューのAsstesの[Bandit-Pixel Art]を押したら、真ん中にDemoのファイルが出るので、クリックします。
スクリーンショット 2020-01-25 1.33.01.png

Demoをクリックしたら、この画面になります。
スクリーンショット 2020-01-25 1.33.24.png

Demoのシーンを開くとこのようにキャラクターを確認できます。
スクリーンショット 2020-01-25 1.35.33.png

スペースキーなどを押して、動きを確認する事ができます。
スクリーンショット 2020-01-25 1.36.08.png

確認ができたら、再生を止めて左下のAssetsのところにある[Scenes]をクリックします。
スクリーンショット 2020-01-25 2.36.40.png

次に、この画面になるので、SampleSceneをクリックします。
スクリーンショット 2020-01-25 2.43.20.png

クリックしたらこのようになります。
スクリーンショット 2020-01-25 2.43.41.png

画面の一番下にある黄色の警告文は、気になると思うので消しときましょう。消すのには、オレンジに囲っている左下のConsoleをクリックします。
スクリーンショット 2020-01-25 2.43.41.png

次にこのような画面になるので、左にある[Clear]をクリックします。
スクリーンショット 2020-01-25 2.54.47.png

クリックをしたら無事に消えました。
スクリーンショット 2020-01-25 2.55.08.png

黄色の警告文は[Clear]をすると消えるのですが、赤色のびっくりマークは、エラーなので、ちゃんと解決しないと消えないので、それはまた違うところで説明します。[Console]の隣の[Project]をクリックして戻しましょう。
スクリーンショット 2020-01-25 2.55.08.png

スクリーンショット 2020-01-25 3.15.52.png

#ステージ作成
左下のAssetsの[Bandit- Pixel Art]をクリックします。
スクリーンショット 2020-01-25 3.25.14.png

次に左上にあるHierarchyの下の[Create]をクリックします。
スクリーンショット 2020-01-25 3.21.18.png

クリックをしたら、[2D Object]の[Tilemap]を選択します。
スクリーンショット 2020-01-25 3.34.48.png

HierarchyのところにGridが表示されます。
スクリーンショット 2020-01-25 3.35.38.png

Gridの三角印をクリックしてください。
スクリーンショット 2020-01-25 3.35.38.png

このようにTilemapが出てくるので、Tilemapクリックで選択したら、Inspectorのところが表示されます。
スクリーンショット 2020-01-25 3.36.14.png

真ん中のゲームビューからシーンビューに切り替えるとこのようになります。
スクリーンショット 2020-01-25 17.12.43.png

シーンビューは作成する画面になり、(背景の配置など)ゲームビューは完成した時の画面になります。

次に[Tile Palette]という背景を貼りたい(Tile Paletteはペイントする筆のイメージ)事をしたいので、画面の真上辺りにある「Window」をクリックして、「2D」の[Tile Palette]を選びたいのですが、赤の矢印にあるUnityのバージョンによって[Tile Palette]が出てこない事があるので
スクリーンショット 2020-01-25 17.32.34.png

「Window」にある[Package Manager]を選択します。
スクリーンショット 2020-01-25 17.53.20.png

開くとこのような画面になるので、[2D Tilemap Editor]をクリックして右下のところが[Remove](取り除く)になっていたらOK。 もし、[Import](取り入れる)だった場合は、クリックしてください。
スクリーンショット 2020-01-25 17.53.54.png

ここまで出来たら、[Remove]の真上にあるバツボタンをクリックして戻してあげましょう。
スクリーンショット 2020-01-25 17.53.54.png

スクリーンショット 2020-01-25 18.27.03.png

[Import]が出来たら、画面の真上辺りにある「Window」をクリックして、「2D」の[Tile Palette]を選びます。
スクリーンショット 2020-01-25 18.24.21.png

このように画面が出てきましたね。
スクリーンショット 2020-01-25 18.29.16.png

開いていない方は、白矢印の[EnvironmentPalette]をクリックしたら、複数選択ができるようになり開く事が出来ます。
スクリーンショット 2020-01-25 18.39.44.png

この状態で試しに、絵の具の筆みたいな物を選択して、ブロックみたいな石をクリックします。
スクリーンショット 2020-01-25 19.02.15.png

見辛いかもしれないのですが、薄い白の線がブロックの周りを囲んでいたら選択されているのでOKです。
スクリーンショット 2020-01-25 19.05.41.png

シーンビューの画面上にマウスの矢印を持ってくるとこのようになります。
スクリーンショット 2020-01-25 19.15.11.png

さらにクリックした状態ですると、ブロックを配置する事が出来ましたね。
スクリーンショット 2020-01-25 19.15.42.png

シーンビューからゲームビューにクリックしてみると
スクリーンショット 2020-01-25 19.15.42.png

ゲームビューで確認する事が出来ます。
スクリーンショット 2020-01-25 19.33.42.png

この時に、ゲーム画面が16:10の場合1920x1080に、したいと思う事があればこのようにしてあげると出来ます。(今回は省略させていただきます)1.赤矢印をクリック、2.黄色の画面が出てきて、3.赤の囲んでいる辺りに、[+]があるのでクリック、4.水色のところの画面が出てくるので[Width & Height]のところの空白に[1920] [1080]の数字を入れて[OK]をクリックしてあげると設定する事が出来ます。
スクリーンショット 2020-01-25 19.38.28.png

スクリーンショット 2020-01-25 19.38.55.png

これで画面のサイズを合わせられてブロックも配置出来たのですが、ブロックの隙間が空き過ぎているので、[deformed]のサイズ(ブロック)を次は合わせてあげましょう。
スクリーンショット 2020-01-25 19.59.34.png

左下のプロジェクトビューの[Assets]の下の[Bandits-Pixel Art]の三角の矢印をクリックして、[Sprites]をクリックしてください。
スクリーンショット 2020-01-26 17.26.43.png

クリックしたらこの画面になるので真ん中の辺りに出した[EnvironmentTiles]をクリックしてください。
インスペクターも[EnvironmentTiles]の画面になればOK。
スクリーンショット 2020-01-26 17.37.57.png

スクリーンショット 2020-01-26 18.08.25.png

###ピクセル(画像)について
次にするのがピクセル(画像)のサイズの変更を行います。
スクリーンショット 2020-01-26 18.08.25.png

一度64にサイズを設定します。これでもまだ隙間がありますよね。(数字を入れたら右下の[Apply]をクリック)
スクリーンショット 2020-01-28 19.51.44.png

次に32にサイズを設定します。(数字を入れたら右下の[Apply]をクリック)
スクリーンショット 2020-01-26 18.38.22.png

ぴったりにブロックが隙間無しにつきましたね。この64のサイズのピクセル(画像)は全体の画像で、32のサイズのピクセル(画像)はこのブロック単体のサイズのピクセル(画像)なので、サイズが合っているので綺麗に配置が出来た状態になったと思います。

比較画像 (1)
スクリーンショット 2020-01-26 18.38.22.png
比較画像 (2)
スクリーンショット 2020-01-28 20.23.58.png

#キャラクターの配置
先にAnimationsのフォルダを作ります。
スクリーンショット 2020-01-29 5.43.45.png

プロジェクトビューの[Create]をクリックして[Folder]を選択します。
スクリーンショット 2020-01-29 5.44.00.png

[Animations]と入力してください。
スクリーンショット 2020-01-29 5.44.13.png

スクリーンショット 2020-01-29 5.45.02.png

HeavyBanditの画像をクリックして
スクリーンショット 2020-01-29 5.39.11.png

キャラクターの構えている画像を4枚選択してヒエラルキーのドラッグ&ドロップしてください。
スクリーンショット 2020-01-29 5.40.45.png

このように、出てくるので
スクリーンショット 2020-01-29 6.07.03.png

先ほど作った、フォルダーを選択してあげて、[HeavyBanditIdle]とSave Asに入力してSaveをクリック。  [Idle]の意味は待機するという意味
スクリーンショット 2020-01-29 6.09.17.png

そうするとこのように[Animations]のフォルダーに2つ新しく入っている。
スクリーンショット 2020-01-29 6.23.29.png

キャラクターを確認するとサイズが小さい。
スクリーンショット 2020-01-29 6.31.37.png

元のサイズが48x48なので、
スクリーンショット 2020-01-29 6.32.28.png

サイズを48に変えてあげる。[Apply]もクリックを忘れずに。
スクリーンショット 2020-01-29 6.40.49.png

標準のサイズを合わせてもまだ小さいので、
スクリーンショット 2020-01-29 6.41.04.png

カメラを近づけて合わせる。カメラのサイズと背景の色と高さ調整の3つと
スクリーンショット 2020-01-29 7.09.07.png

キャラクターの高さ調整。(調整はお好みで)
スクリーンショット 2020-01-29 7.09.22.png

これで0K。再生を押したら、キャラクターは動く動作をする。
スクリーンショット 2020-01-29 7.19.31.png

###アニメーション選択について
もし、動いている動作が早いってなるのであれば、[Window]の[Animation][Animation]を選択して
スクリーンショット 2020-01-29 7.25.52.png

このようにして、動かしたいアニメーションを複数選択して、0:06に合わしてあげるともう少し自然な動きになる。
スクリーンショット 2020-01-29 7.28.42.png

スクリーンショット 2020-01-29 7.32.12.png

とりあえず、キャラクターを配置して、アニメーションで動かす事が出来ます。

#物理演算をふようさせるコンポーネント(キャラクターを地面に走らせたり、ジャンプさせたりなど)
このように、[Rigidbody2D]をHeavyBandit_4(キャラクター)につけてあげてください。
スクリーンショット 2020-01-29 7.47.55.png

スクリーンショット 2020-01-29 7.48.25.png スクリーンショット 2020-01-29 7.48.48.png

キャラクターに物理演算が付くことによって、重力などキャラクターを動かす事(速度など)に関わってくる。「再生を押したら、重力によってキャラクターは落下する。(カメラから消える)」

そうならない為に、必要になってくるのが、[Collider]というもの。キャラクターを地面に歩かせるために、地面とキャラクターに[Collider]を付けて当たり判定をつける。
先ほどと同様に[BoxCollider2D]を付けてあげてください。
スクリーンショット 2020-01-29 8.20.23.png

キャラクターの周りにボックスのようなものが付いたのが[BoxCollider2D]というものです。
スクリーンショット 2020-01-29 8.26.26.png

スクリーンショット 2020-01-29 8.26.53.png

地面とキャラクターの[Collider]が上手く合えばちゃんと立つ
スクリーンショット 2020-01-29 8.44.33.png

スクリーンショット 2020-01-29 8.45.37.png

###追加説明
TileMapの[Collider]がブロック単体でついていて、このままだとキャラクターが歩く際に引っ掛かって、ちゃんと歩けなかったりこけたりするので、ブロック単体につけるのではなくて、ブロック全体のひとつとして付けてあげる。そのために、[Composite Collder2D]をまず付けます。
スクリーンショット 2020-01-29 9.07.06.png

次に[Tilemap Collider2D]の[Used By Composite]をチェック。
スクリーンショット 2020-01-29 9.07.41.png

チェックと同時にブロックの単体がなくなる。
スクリーンショット 2020-01-29 9.07.53.png

地面には、物理演算は動かないモノに対して関係ないので、(物理演算は、動くモノに対して付けてあげる)だからRigid body2Dの[Body Type]の[Static]に変えて動作を弱くする。
スクリーンショット 2020-01-29 9.08.48.png

これで、ようやくキャラクターを地面にちゃんと立たす事が出来ましたね。
スクリーンショット 2020-01-29 9.09.31.png

いつも、日頃お世話になっているサロンさんの動画があるので、ぜひ1度観に行っていただけるとありがたいです。他にも観るのも、実際に作るのも楽しくなるようなゲーム開発をしているので、開発のお役に立てられたら嬉しいです。

スタジオしまづのYouTubeチャンネル
https://www.youtube.com/watch?v=9F-M57l1iXM&t=419s

スタジオしまづが運営する「Unityゲーム開発サロン」
https://community.camp-fire.jp/mypage/projects/149191

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?