「春のハンズオン祭り」で公開した 「ブロック崩しをつくろう！」の作成資料

1. ブロック崩しを作ろう！
（改訂版）
渋谷知弘
安達圭司

2. お詫び
4月25日 当日はお忙しい中、ホルトホールで開催された「春のハンズ
オン祭り」にてUnity「ブロック崩しを作ろう！」教室に来た下さった
方々、
わざわざお越しくださったのに、「ブロック崩しゲーム」完成まで、
時間内に内容を紹介しきることが出来ませんでした。
また、一部、解説が甘い部分があったため、参加者の皆様に混乱を
招く部分もあったりなどで、モヤッとした気持ちのまま、
お帰りになった方もいらっしゃったのではないでしょうか。
お詫びとして25日の補足資料として、「ブロック崩しゲーム」を、
Unity起動〜完成までの解説を、画面付きで、当資料にて
解説させていただきます。

3. 当資料について
当資料は、25日に「ブロック崩しを作ろう！」にご参加頂きました方向けに
制作しています。
そのため、Unity5のインストール〜起動までは、既に終了しているものを
前提としておりますので、
「Unityって何？」 「何ができるの？」 「どうやってインストールするの？」
といった方は、下記のURLなどで独自に調べてください。
http://hiromart.com/blog/how_to_install_unity5/
また、各スクリーンショット等は、MacOSXで作成しております。
Windows環境の人とは、若干細かい描写が変わってくるかもしれません
が、やってる事自体は変わらないので、空気を読みながら、
「なんとなくそれっぽく」がんばってください！

4. 配布物の確認
最初に配布物の確認をします。
同梱の「ブロックくずしを作ろう.zip」を解凍すると、
図のようなディレクトリ構成になっています。
それぞれ、
「Images」フォルダの中身は、
ゲーム内で使用する画像
「Scripts」フォルダの中身は、
ゲーム内で使用するプログラムを、
予めこちらで、テキストに書いたおいたものになります。
（コピペ用です）

5. UNITY5の起動〜
新規プロジェクトの作成
・新規プロジェクトを作成します。
Unityを立ち上げると、写真のような画面が出てきます。
これは、今までUnityで作ったプロジェクトの一覧になっています。
※いきなりUnityの編集画面が表示されてしまう場合は、
メニューバーより、[File] > [New Project]を選択してください。
まず今回は、新規にプロジェクトを作成しますので、
右上の青いボタン[New Project]を押してください。

6. 新規プロジェクトの作成

7. UNITYの起動確認
特に何も設定を変更していなければ、図のような画面が立ち上がって
くると思います。

8. 画面のざっとした説明
Hierarchy：sceneに配置されてあるオブジェクトの一覧（最初はカメラだけ）
Scene：sceneに実際にモノを置いた状態
Game：カメラを通して、どのように画面が見えているか
Project：このプロジェクトで使用する各種ファイルなどの構成
Inspecter：画面上に設置されたオブジェクト（モノ）の細かい設定

9. まずは使いながら慣れていきましょう！

10. ゲーム解像度の設定
このブロック崩しは、縦長の画面でプレイするゲームです。
ゲーム画面を縦長に設定しましょう。
まずは、先ほど紹介した「Game」ビューの、
アスペクト比を、9：16に設定します。(16:9ではない）
一覧に無い場合は、
＋マークを押して、
追加しましょう！

11. ゲーム解像度の追加
一覧になかった場合、9:16のアスペクト比を追加します。
アスペクト比とは、ざっくり言えば、画面の縦横の比率のことです。
Labelは、分かり易い名前を記入しましょう（書かなくてもOK）
Typeは、「Aspect Ratio」を選択してください。
そして、Width&Heightの部分を、「9」 「16」とそれぞれ記入してください。
選択することで、Gameの画面が縦長になると思います。

12. フォルダ構成を作成する
今回のゲームを作るにあたって、各種ファイルを整頓するために、
下記の4つのフォルダを作ります。
「Scenes」 「Scripts」
「Sprites」 「PhysicsMaterials」
Projectビューの、Assetsフォルダ
を右クリックして、
[Create]>[Folder]を選択して、
上記4つのフォルダを作成します。

13. 作ったフォルダの説明
【Scenesフォルダ】
このプロジェクトで使用するシーン（scene）を保管します。
Sceneについては次のコマで説明します。
【Spritesフォルダ】
このプロジェクトで使用する画像を保管します。
【Scriptsフォルダ】
このプロジェクトで使用するプログラムのソースコードを保管します。
【Physics Materialsフォルダ】
このプロジェクトで使用する素材の設定を保管します。
後々、ボールなどに設定する材質などの設定です。

14. SCENEとは…
ゲーム制作に移る前に、sceneについて簡単に説明します。
Sceneとは、ザックリ言えばゲームの場面です。
スーパーマリオブラザーズでいえば、
「タイトル画面」、「残機＆ステージ」、「１−１」、「１−２」… など、
全てが個別のsceneとなっています。

15. SCENEとは…②
Unityでも、各画面をsceneとして取り扱います。
試しに、現在のプロジェクトを保存してみましょう。
Cｔｒｌ + S もしくは、メニューの[File] > [SaveScene]
保存する名前と、保存先を聞かれるので、今回は取り敢えず
「Stage1」と命名し、先ほど作ったSceneフォルダを選択してください。

16. 画像の用意
いよいよゲームの制作に移ります。
まずは、配布している「ブロックくずしをつくろう」フォルダの
Imagesフォルダの中の画像を、先ほど作ったUnityの「Sprites」
フォルダに、ドラッグ＆ドロップで全て移動します。
ここに画像が表示されれば成功！

17. 画像の配置
ゲームに使う画像を配置していきます。
まずは、ゲームの背景となる画像[bg]をSceneビュー、もしくは
Hierarchyビューに、ドラッグして配置します。（どちらも同じ意味）
その際、Hierarchyビューに、bgが追加されますが、コレを選択すると、
Inspectorビューに、bgに関する細かい設定が表示されます。
設置位置を揃えるため、Transform
のPosition（位置）を、X,Y,Z、
それぞれ全て0に指定してください。
Scale（大きさ）,Rotation（角度）は
そのままで結構です。

18. カメラの設定
このままだと、画面サイズに対して背景がこぢんまりと、悲しい感じで
表示されていると思いますので、カメラのサイズを変更しようと思いま
す。
Hierarchyビューから、[Main Camera]を選択し、
Inspectorビューより、CameraのSizeを
1.4 に変更してください。
Gameビューの黄色い背景ｂｇが、
画面いっぱいにキッチリ収まったと思います。

19. 外壁の作成
背景とカメラの設定が出来ましたので、続いてブロック崩しの外壁を作
成します。
Spritesフォルダより、wallの画像ファイルを、先ほどと同じように、
ドラック＆ドロップで画面上に配置してください。
適当に配置すると位置がズレてしまうため、設置後、Inspecterから
Positionを全て0に指定してください。
こちらも完了したら、barとball、
そしてblockをそれぞれ、
ブロック崩しっぽく、適当に配置しましょう。
また、お好みに応じて障害物として、
daikeiや、starなども設置してみましょう！

20. 当たり判定の設定①
今のままでは、ただ画面上に画像を配置しただけなので、
続いて、設置した各画像に、それぞれ当たり判定をつけていきます。
当たり判定が無いと、ボールはブロックやバーをスルーしてしまいます。
四角いモノには、BoxCollider2D、
丸いモノには、CircleCollider2D、
複雑な形のモノ（daikeiやstarなど）には、PolygonCollider2Dを、
それぞれ指定していきましょう！
当たり判定をつける必要があるのは、 [ball] [block] [bar] [wall]、
そして設置した人は、[daikei], [star]です。

21. 当たり判定の設定②
たとえば、ボールに当たり判定を設定します。
①Hierarchyより、ballを選択
②ボールは丸いので、Inspectorより、
ballに、[Add Component]＞[Physics 2D]より、
CircleCollider2Dを追加します。
コレだけで簡単に当たり判定が設定できる！

22. 当たり判定の設定③
四角いモノには、BoxCollider2Dを、
複雑な形のモノにはPolygonCollider2Dを、
[Add Component]＞[Physics 2D]より、
ballと同じように、各部品に当たり判定を設定しましょう！
しかし、Wallへの当たり判定の設定はやや特殊です。
そのままBoxCollider2Dを指定しても、画面全体に当たり判定が
及んでしまいます。
ここは、BoxCollider2Dを、上壁、右壁、左壁の３つ追加し、
範囲の指定をしましょう。

23. 当たり判定の設定④
外壁の当たり判定設定を行います。
①Hierarchyよりwallを選択し、BoxCollider2Dを追加します。
②InspectorのBoxCollider2Dの設定画面より、EditControllerを
クリックしてください。Sceneビューに表示されている緑枠が当たり判
定ですが、ドラッグで大きさを変えられるようになっています。
①〜②を繰り返し、それぞれ上壁、右壁、左壁の当たり判定を設定し
ましょう！

24. いよいよボールを動かします。
重力や加速度など、物理的な挙動を簡単に付け加えることの出来る、
Rigidbody2Dコンポーネントを、ballに設定します。
方法はこれまでの通り、ballを選択後、「AddComponent」ボタンを
押し、[Physics２D]>[RigidBody2D]を選択し、適用します。
これにより、ゲームの再生ボタンを押すと、ボールが落下するようにな
ります。
しかし、ブロックくずしゲームで、ここまでリアルな挙動でボールが落ち
てしまうと困るので、Inspectorより、追加したRigidBody2Dの
GravityScale（重力）を0に、FixedAngleにチェックを入れましょう。
ボールの挙動を設定
ボールが落ちるように！

25. ボールの挙動を設定②
プログラムを書いてみる。
続いて、ブロック崩しのボールの挙動を、プログラムで設定します。
とはいえ、プログラムの内容を細かく説明しだすと大変なので、今回は
配布物フォルダ内「Scripts」フォルダの中に、予め作成したプログラ
ムをコピペして使います。
ここでは、Unityでプログラムをどのように書いて、どのように扱うかだ
け、体験していただけたらと思います。
まず、今回はボールを斜め上に発射し、壁にあたると跳ね返るプログ
ラムを作成します。

26. ボールの挙動を設定③
はじめてのプログラム
最初に作成した「Scripts」フォルダの中に、Ball.csという
C#という言語で作成するプログラムのファイルを作成します。
このプログラムのファイルを、以後、スクリプトと呼びます。
Scriptsフォルダを右クリック > [Create] > [C# Script]
で、作成されるファイルの名前を、「Ball」にしてください。
(大文字と小文字の違いに注意！）

27. ボールの挙動を設定④
はじめてのプログラム
先ほどのC#で作製したballをダブルクリックすると、すこじ時間が経っ
て、Mono Developerという、スクリプトのソースコードエディターが開
きます。この、Ball.csタブに書かれている文字列が、プログラムの内
容になります。
今回は、予め中に書かれている文章を全て削除し、
配布してあるScriptsフォルダの中の、
Ball.txtの内容を、そのままコピペして
ください。
コピペが終わったら、Ctrl+Sなどで、
保存をしてください。

28. ボールの挙動を設定⑤
はじめてのプログラム
Ball.csスクリプトの作成が終わったら、早速作ったスクリプトを、
ballに適用してみましょう。
①Hierarchyより、ballを選択して、[Add Compornent]をクリック。
②[Scripts] > [Ball.cs]を選択。
もしくは…
Projectビューから、Ball.csをHierarchyのballにドラッグ＆ドロップ
方法はどちらもで可能ですが、前者の方をおすすめします。
ballのInspectorに、右のような
コンポーネントが追加されていれば成功！

29. ボールの挙動を設定⑥
ballに、作成したコンポーネントを追加したところで、一度
「再生」ボタンを押してみましょう。
ボールが右斜め上に飛ぶようになりますが、wallにぶつかったところ
で、そのまま転がっていってしまいます。
これは、ボールの材質や特性を何も設定していないため、このボール
は反発しない材質で出来ているのようなものです。
次は、ボールが壁に跳ね返るように設定します。
ボ
ー
ル
は
壁
に
着
い
た
途
端
、
転
が
っ
て
い
っ
て
し
ま
う
・・・・

30. ボールの挙動を設定⑦
最初に作った、Assetの[Physics Materials]フォルダを右クリック
[Create] > [Physics Materials2D]を選択
すると、ボールが跳ねるようなアイコンの何かが作成されました。
ここでは、「Ball」と名づけておきましょう。
これは、適用した素材の反発の具合（弾力？）と、摩擦を設定できるもの
になります。
クリックすると、Inspector上で数値の変更が可能になっています。
Frictionが摩擦、Bouncinessが反発係数(弾力)になります。
今回はボールを動かし続けるゲームのため、
摩擦（Friction）は0に、
受けた力はそのまま100％返すので、
反発係数(Bounciness)は1に設定しましょう。

31. ボールの挙動を設定⑧
作成したPhysicsMaterials2DのBallを、Hierarchy上のballに指定
しましょう。（ややこしい！）
Ballをballにドラッグ＆ドロップで適用できますし、
ballのInspector上にある、Circle Collider2DのMaterialの部分か
ら、設定してあげても構いません。
何を言ってるのか分からない人は、
素直にドラッグドロップしましょう。
「再生」してみるとわかりますが、
ボールがブロック崩しの動きを
するようになりました！

32. バーを動かそう！
ここまで、ボールの設定が完了しましたが、
このままでは何も出来ないまま、ボールが落ちるのを眺めるだけの
ゲームになってしまいます。
ゲームの要であるバーを、キー操作で動かすスクリプトを作成します。
①まずは、ProjectビューのScriptsフォルダを右クリックし、
[Create] > [C# Script]と、先ほど同じ手順でスクリプトを作成します。
②名前は、[Bar]にしてください。
③先ほどのBallと同じ手順で、Mono Developerで開き、
中身を消して、配布物のBall.txtの内容をまるっとコピペしてください。
④作ったスクリプトを、Hierarchyのbarに適用します。
相変わらず、ドラッグ＆ドロップで大丈夫です。

33. バーが動いた！
「再生ボタン」を押してください。
キーボードの左右キーでバーが動かせ、
ボールを跳ね返すことが出来ます。
これで一気にブロック崩しっぽくなってきました！
写真では伝わりにくいこの躍動感…

34. ブロックを消そう
ブロックくずしというからには、ブロックが崩れないと意味がありません。
ボールがぶつかったら、ブロックが消えるようにしましょう。
例のごとく、Scriptsフォルダに、C# Scriptの[Block]というファイルを
作成し、配布物フォルダの中の、Block.txtの中身をコピペしてくださ
い。
慣れてきた頃だと思うので、
どんどん端折りますが、
今度はこれをHierarchyの
blockに適用します。
これでblockが消えるように
なるはずです。

35. ブロックを量産する
ブロックがひとつだけでは寂しいので、ブロックを沢山つくりましょう。
簡単なのは、Hierarchyに既に存在するblockを、コピーして貼り付け
る方法です。
Hierarchyのblockを選択して、[Command + C] > [Command +
Z]
もしくは、blockを右クリックして[Duplicate]を選択。
block1、block2…とどんどん増えていきます。
一見、何も増えてないように見えますが、
増えたものはblockの上に重なっているので、
InspectorからPositionの値を変更するか、
移動ツールを使って移動しましょう。

36. HIERARCHYを整頓する
さて、調子に乗って気持よくブロックを増やしまくっていると、
Hierarchyの項目がブロックまみれになってしまいました。
このままでも特に問題ありませんが、せっかくなので整頓しましょう。
[Create] > [Create Empty]で、空のゲームオブジェクトを作ります。
名前を、「Blocks」にでも変更しましょう。
そして、block全てを、Blocksにドラッグ&ドロップします。
空のオブジェクトとは
ブロックでもなければ、
ボールでも壁でもな
い、
本当になんでもない
ただの空気のような
存在です。
コンポーネントを追加
することで、モノに
なっていきます。

37. クリアと失敗を判定
さて、いよいよブロック崩しも完成してきましたが、
これだけでは、とても人に遊ばせられるゲームではありません。
ゲームのクリアとミス時の処理を追加しましょう。
・全てのブロックを壊したら「クリア！」
・ボールが下に落ちてしまったら「失敗…」
この2つを実装する処理を作ります。
まずは、Spritesフォルダ（画像フォルダ）
から、画面中央に、Successとfallの2つの画像を
設置しましょう。

38. クリアと失敗判定②
クリアと失敗を切り分けるための、「審判」を設置します。
空のオブジェクトを作成します。名前をJudgeにします。
これは先ほど同じ、空のオブジェクトですので、Hierarchyに置いただ
けでは、何の効果もありませんし、存在感もありません。
Judgeに審判としての役割を与えるため、スクリプトを用意します。
①ScriptsにC#でJudgeを作成
②Judge.ｔｘｔの内容をコピペ
③作成したC#のJudgeを、空のオブジェクトJudgeに適用します。

39. クリアと失敗判定
今回のJudgeプログラムの内容を日本語でザックリ説明すると、
最初に、成功の画像と失敗の画像を非表示に。
もし、ボールのy座標(縦位置)が、-1.4f(画面の一番下のライン)を下
回った場合は、失敗の画像を表示して、終了
もしくは、ブロックが全て消えてしまった場合は、成功の画面を表示
して終了
といった内容になります。
このプログラムでは、スクリプトに、
どれがボールで、
どれが成功の画像で、
どれがブロックで、
どれが失敗の画像なのか？
どれがなどを入力する必要があります。

40. クリアと失敗判定
スクリプトJudgeのコンポーネントを追加したJudgeを、
Inspector上で確認してみてください。
図のようになっていると思いますので、それぞれ、
Success_image, Failed_image, Ball_obj, Blocks_obj
を、それぞれ対応する項目に指定してあげてください。

41. レイヤーの設定
２Dのゲームは、基本的に一枚の絵を何層にも重ねてできていて、
レイヤーとは、その層のことになるのですが、
今のところ、何の設定もしていないので、例えばもし、このゲームの
Projectを保存して終了した場合、再度実行して、全てがこのまま
見え、プレイ出来るとは限りません。
ですので、最後にレイヤーの設定を行おうと思います。

42. レイヤーの設定②
UI、GAME、BGの３つのレイヤーを作成します。
並べ方も以下の通りとなります。

43. レイヤーの設定③
レイヤーの設定を行いましょう。
画面左上、
[Layers]＞[Edit Layers]
BG,GAME、UI
レイヤーを作成
前のﾍﾟｰｼﾞの図を元に、
各部品のインスペクタ上から、
Sorting Layerを選択。

44. 速度閾値の調整
レイヤーの設定が完了したら、ゲームを開始してみてください。
ほぼしっかりと遊ぶことが出来ると思いますが、
たまにプレイ中に、速度が遅くなってしまい、ボールが停止してしまう
事があると思います。これは、バグではなく、ボールがオブジェクトに
ぶつかった時、物理計算が成された結果なのです。
速度閾値については、説明が難しいので、細かい説明は割愛します
が、
設定の変更を行います。
メニューの[Edit] > [Project Setting] > [Physics Materials]を選択
Inspector内に、[Velocity Threshold]という項目があるため、こちら
を0に設定してください。
※0に設定すると、0.0001になりますが、これが正解です。

45. 完成！

46. オマケ
障害物を追加してみよう！
画像の、starや、 daikeiなどを設置して、ブロックと同じように
当たり判定を追加してみましょう。
C#スクリプトを追加して、配布しているstar.txtをスクリプトファイルに
書き写し、starにコンポーネントで適用してみましょう。
障害物として、星のオブジェクトが
動くようになりました。

47. まとめ
このように、障害物を一つ追加したりするだけで、全然違った面白さの
ゲームが出来上がったりします。
他にも、
・続きのステージを作ってみる
・残機制にする
・ブロックに耐久力をつける
・ボールの早さをランダムで変える
などの工夫で、もっと面白くすることが出来ると思います。
みなさんも、独自で色々と試してみましょう。