MMC Unity講座 -...

35
MMC Unity講座 1: ~ゲームエリアを作成~

Transcript of MMC Unity講座 -...

Page 1: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

MMC Unity講座

第1回: ~ゲームエリアを作成~

Page 2: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

ここからのUnity講座

実際にゲームを作る

作るゲームは、「ブロック崩し」

2

Page 3: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

ここからのUnity講座

【】←スライドタイトルにこのカッコがついている項目は、「ゆっくり覚えてね」の印

3

Page 4: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

今回のおしながき

1. プロジェクトを作成・準備

2. Canvasを置く

3. 壁を作る

4

Page 5: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

今回の新概念

Canvas(UGUI)

Component

Box Collider 2D

5

Page 6: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

プロジェクトの作成・準備

6

Page 7: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

プロジェクトの作成

「NEW」をクリック

「Project Name」を変更する

「Location」はどこでもよいが、自分が絶対わかる場所にする

「Template」を「2D」にする

「Enable Unity Analytics」をOFF

「Create Project」をクリック7

Page 8: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

8

Page 9: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

準備

ProjectタブのScenesファイル内の「Sample Scene」の名前を「Main Scene」に変更

9

Page 10: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

準備

GameタブでResolutionを「Standalone(1024x768)」にする

10

Page 11: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

Canvasの設定

11

Page 12: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

【Canvasとは】

Canvas:UGUIを置く場所のこと

UGUI:Unity上におけるボタン、画像、スクロールバー、入力フィールドなどのUIのこと

Canvasがないと、UIを置くことができない

12

Page 13: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

Canvasを置く

Hierarchyタブ内で右クリック

「UI」→「Canvas」をクリック

13

Page 14: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

【Component】

オブジェクトに何かしらの動作(「動きとは限らない」)をさせる

Inspectorタブで確認できる

スクリプト(C#のソースコード)もこれにあたる

14

Page 15: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

【Inspectorタブ】

Unityでは、オブジェクトに「Component」を装備することでゲームを作っていく

オブジェクトにくっついてるComponent一覧を表示するタブ

15

Page 16: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

【Inspectorタブ】

Componentの数値設定を変更できたりする

例:重力(物理演算)を与えるComponent

→重力の強さ、重さ、動ける方向など

16

Page 17: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

17

Page 18: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

CanvasのInspector設定

Render ModeをScreen Space –

Cameraに変更

Render CameraにHierarchyのMain

Cameraをドラッグ&ドロップ

UI Scale ModeをScale With Screen

Sizeに変更

Reference Resolutionの値を変更

→ x: 640, y: 960

Screen Match ModeをExpandに変更18

Page 19: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

19

Page 20: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

壁を作る

20

Page 21: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

フォルダ的なものを作る

HierarchyタブのCanvasを右クリック→「Create Empty」

作ったオブジェクトの名前を「Walls」に変更

WallsのInspectorで、Transform

positionのx, y値が0であることを確認

21

Page 22: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

22

Page 23: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

【オブジェクトの管理】

ただオブジェクトを置くだけだと、どこに何を置いたかわからなくなる

ファイル管理みたいに空オブジェクトを活用する

23

・プレイヤー・敵1

・コイン・敵2

・敵3

・コイン・敵2

・コイン

・プレイヤー・Enemys

・敵1

・敵2

・敵2

・敵3

・Coins

・コイン・コイン・コイン

Page 24: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

上の壁を作る①

HierarchyタブのWallsを右クリック→「UI → Image」

InspectorのRect Transformの値を次ページの画像と同じにする

名前を「Top」に変更

24

Page 25: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

25

Page 26: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

上の壁を作る②

InspectorタブのAdd component →

「Physics 2D → Box Collider 2D」

Box Collider 2DのSizeを変更

→ x: 1280, y: 100 (Transformと同じ)

26

Page 27: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

【Box Collider 2D】

オブジェクトに当たり判定を与えるComponent

いろんな形がある

2Dでは末尾に「2D」とつくものを必ず使用する

27

Page 28: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

上の壁を作る③

ImageコンポーネントのColorをお好みで変更(見本は黒)

28

Page 29: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

他の壁を作る

上の壁と同様の作業をして、右と左の壁を作る

名前は「Right」「Left」

「Ctrl + D」でTopを複製すると早い

数値は次ページの画像参照

29

Page 30: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

30

Left

Page 31: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

31

Right

Page 32: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

32

Sceneビューの状態

Page 33: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

今回はここまで

33

Page 34: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

次回予定(第2回)

C#についての軽い勉強(予定)

34

Page 35: MMC Unity講座 - nanzanmmcwiki.netnanzanmmcwiki.net/_media/pc/lecture/unity/第1回_ゲームエリアを作成.pdf · ここからのUnity講座 実際にゲームを作る 作るゲームは、「ブロック崩し」

第1回 おわり

お疲れさまでした

35