【Unity】索引とまとめ：「はじめてのUnity」のブロック崩しを改造しながら学ぶ

# はじめに
2017年8月26日(土)に[モノリズム](http://monolizm.com/)が催す技術交流会の「[【しずおかアプリ部】活動ログ　第43回](http://qiita.com/monolizm/items/62a00e34892f143ea366)」にて、JunShimuraさんの「[[超初心者向け]Unityチュートリアル「はじめてのUnity」のブロック崩しと同等をC#で](http://qiita.com/JunShimura/items/cbb0db8087a5cc75735e) ::(1)ステージ配置～(6)ブロックを手作業で並べる)」のブログを使用して、1時間予定(実際75分)でハンズオンを行った。

Unityの基本的な操作と概念を覚えるのにちょうどよいレベルの内容であり書いたプログラムもわずか、説明内にもアニメーションがあって分かりやすかったので、参加した10人近くの方が全員作れたと思っている。
目的のものが出来たといっても、ボールに当たるとブロックが消えるところまでなのでゲーム性としては全くもって物足りない。今回、よりゲームらしくするために独自に資料を追加した。
資料：[oreilly ゲームストーミング 1章 ゲームとは何か(pdf)](https://www.oreilly.co.jp/pub/9784873115054/Gamestorming_sample01.pdf)

2017年9月16日(土)に「[第44回しずおかアプリ部](https://shizuoka-app.connpass.com/event/65509/)」にて、よりゲームらしくするための2回目のハンズオンを行いました。[【しずおかアプリ部】活動ログ　第44回](https://qiita.com/monolizm/items/7d8d37a7781bc423e249)
今回は、Unityあるあるトラブルもあって思っていたより時間がかかってしまいました。

# IT勉強会のセッション例
IT勉強会でUnity初心者向けセッションを行うのに、はじめてのUnityとして「ブロック崩しのチュートリアル」を行うのは丁度いい内容と思う。
お客さんがセッション内容を聴くのみだと人によりモチベーションが上がるだけで身に付かない、ハンズオン形式ならやり方は身につくし、分からないことは周りの人に教えてもらえるし(セッションする人以外にフォローできる人を用意するといい)、何より達成感が味わえる。

例 セッション内容とスケジュール

|時間|内容|
|:--|:--|
|13:00|会場準備/受付|
|13:25|開催・挨拶|
|13:30|第1部 ブロック崩しのチュートリアル|
|14:40|10分休憩|
|14:50|第2部 ブロック崩しのチュートリアル(改造しながら学ぶ)|
|16:10|10分休憩|
|16:20|第3部 自分なりに改造する|
|17:20|片付け|
|17:30|終了|

# 第1部 ブロック崩しのチュートリアル
80分を想定している。人数によっては多すぎるかも知れない。

1. [ステージ配置](http://qiita.com/JunShimura/items/cbb0db8087a5cc75735e)
2. [色を変える](http://qiita.com/JunShimura/items/1b2b4842e983022075de)
3. [動くボール](http://qiita.com/JunShimura/items/dfb2bdbbc328869f62ec)
4. [ラケットを動かす](http://qiita.com/JunShimura/items/5fac20966bba6b223427)
5. [消えるブロック](http://qiita.com/JunShimura/items/867179092a2a564bc88c)
6. [ブロックを手作業で並べる改造して](http://qiita.com/JunShimura/items/1f39e52414171c67bc71)

補足：[【Unity】シーン表示上のシーンの向きに戸惑わない方法](http://qiita.com/yaju/items/f4829daeedd685888ef7)

# 第2部 ブロック崩しのチュートリアル(改造しながら学ぶ)
100分を想定している。ソースリストの入力は時間がかかるので、先にコピー＆ペーストの方法を教えるのがよい。

1. [スコアの表示](http://qiita.com/yaju/items/615b31e9f17e310642d6)
2. [ゲームマネージャークラスを作る](http://qiita.com/yaju/items/5a3b46104f4f0a767c7f)
3. [ブロックをスクリプトで配置](http://qiita.com/yaju/items/5b54016c6574bc84c41d)
4. [音を鳴らす](http://qiita.com/yaju/items/32a6960a2e61267f8731)

![Unity_Playing.gif](https://qiita-image-store.s3.amazonaws.com/0/14053/4720dfd1-089f-5fe6-955c-5ee3a7107c14.gif)


# 第3部 自分なりに改造する
60分を想定している。第1部と第2部で出来ていない人はここで時間を調整する。

これまでに学んだことで、自分なりに改造する。
ゲームとしては出来てはいるが、何回もやっていると不満点が出てきます。

簡単なところ

* 壁やラケットの色を変える。
* 音を変える。
* ステージマップを変更して簡単にする

プログラムが出来るなら

* ボールが下の壁に1回当たったらゲームオーバーなのは難しすぎるので、3回でゲームオーバーになるようにする。
* ステージ数やゲームオーバーを3回にするなら残機数などの情報を表示する。

# 独学による改造案
## ゲーム性
* ミス3回までにする
* ダメージ性にする
* 壊れないブロックや障害物を作る
* ブロックの配置を変更する
* アイテムを作る
* ラケットやボールを複数にする
* 物理演算による重力などの影響を反映
* ジャイロセンサーと加速度センサーによる傾きと速度の影響を反映
* ラケットの形式を変える
* 対戦できるようにする(2分割、通信)

## グラフィック/演出
* ブロック、ラケット、ボールにテクスチャを付ける
* ブロックが壊れたアニメーションを付ける
* クリア後の演出をかっこよくする
* スタート画面とゲーム画面をシーンで分ける
* 設定画面を作る
* エンディング画面を作る
* 音を変更する
* 影を付ける

## 操作性
* マウスでのラケット移動
* タッチ操作でのラケット移動可能
* ジャイロセンサーと加速度センサーによる操作
* 2人で操作可能

## ハイスコアランキング
* TOP10のハイスコアを保持する
* ユーザー入力を作る
* ハイスコア一覧を作る

# Unityあるあるトラブル
## 名前の英大文字小文字の間違い
`Racket`が`racket`や、`BottomWall`が`Bottomwall`だったり、1部の時は動作で問題にならなかったものが2部でスクリプトで名前で判定に使ったりすることで思っていた動作がしなくなる。
オブジェクトの名前なら単純に変更で済むのですが、スクリプトで間違えた場合はファイル名とクラス名が一致しないと正常に動作しないので、ファイル名とクラス名が同一名になるように変更する。

## MonoDevelopで貼り付けができない
スクリプトのコピー＆ペーストする際に、MonoDevelopで貼り付けができない不具合があります。その場合、MonoDevelopを閉じ直せば貼り付けが出来るようになります。

## Scene画面が思ってたような位置に戻せなくなる
Scene画面はアンドゥとリドゥがありませんし、位置の数値化も無いので慣れるしかありません。
[【Unity】シーン表示上のシーンの向きに戸惑わない方法](http://qiita.com/yaju/items/f4829daeedd685888ef7)

どうにもならなくなった場合、Sceneビュータブの右クリックメニューの[Add Tab]-> [Scene]で、新たなSceneビューを作成します。問題の起こっているSceneビューは右クリックメニューの [Close Tab] で閉じてしまいましょう。

# WebGLビルドと公開
## WebGLビルド
メニューの[File]>[Build & Setting]を選択します。
`Add Open Scenes`ボタンをクリックすると「main」が表示されます。
`Platform`を「WebGL」を選択して、`Build And Run`ボタンをクリックします。
ビルド先のフォルダを指定します。ビルドには自PCでは20分程度かかりました。
※1回ビルドすればばその次は5分以内でビルドが完了します。

ビルドが完了するとブラウザ上に作成した「ブロック崩し」がプレイ出来ます。
![Unity_WebGLBuild.png](https://qiita-image-store.s3.amazonaws.com/0/14053/bc9d5029-c7d8-a052-b06b-c54675fe5975.png)

プレイするのみなら、メニューの[File]>[Build & Run]を選択します。
アドレスが「localhost:50272/」なのでWEBサーバーが自動的に動作するようです。
![Unity_WebGLRun.png](https://qiita-image-store.s3.amazonaws.com/0/14053/996084a9-9036-5e15-4767-3bcbff71ebb6.png)

うーむ、スコア情報の文字位置がぎりぎりでしたね。

## ゲーム投稿サイト unityroom
AndroidやiPhoneのスマホアプリとして公開するほどでもないし、WebGLビルドして公開するところがないかと検索したところ、「[ゲーム投稿サイト unityroom](https://unityroom.com/)」を見つけました。
[【unity】unityroomに投稿する方法](http://blog.naichilab.com/entry/how-to-upload-unityroom)によれば、Twitterアカウントがあれば投稿できるようです。

## GitHubに公開
「[WebGL投稿先としてGithubを使ってみる](http://for.hatenablog.jp/entry/2017/07/11/021333)」を参考にGithubをあげました。

下記サイトに公開しました。
https://yaju.github.io/WebGLBuild/Block/

BGMと効果音は、Unityのサイトに昔からあるチュートリアル「[はじめてのUnity 第3回 演出を強化しよう」(旧:Javascript) ](http://tutorial.unity3d.jp/archive/my-first-unity/03.html)」のsound.unitypackageファイルのものを使用しています。

【2021/10/18追記】 
BGMと効果音は、公式のチュートリアルのサイトが消えましたがインターネットアーカイブからダウンロードできました。
https://web.archive.org/web/20171002110307/http://tutorial.unity3d.jp/archive/my-first-unity/project/sound.unitypackage

# Unityのゲームシステムの仕組み
プログラムを学んだ人からすると、どのような仕組みでUnityシステムになっているか気になると思います。

## コンポーネント指向
ボールに物理演算を組み込むのにRigidbodyコンポーネントを追加するように、コンポーネント指向といった考え方で作られています。
https://www.slideshare.net/lucifuges/unityc
![unity_slide.png](https://qiita-image-store.s3.amazonaws.com/0/14053/db390719-be18-280e-78df-24589d75843a.png)

## MonoBehaviorクラス
スクリプトは、MonoBehaviorクラスを継承している。衝突時のスクリプトでOnCollisionEnterが突然でてくるが、MonoBehaviorクラスで定義されている。

Unityエンジンからゲームの実行状況に応じてメッセージが送信されると、 実装クラス内にあるメッセージと同じ名前の関数を実行します。 
![Unity_MonoBehavior.png](https://qiita-image-store.s3.amazonaws.com/0/14053/5fac3035-b3dc-d41d-1f4c-ac44e748e150.png)

# 最後に
何でもそうだけど、自分の思い通りに組めるようになるには時間がかかる、チュートリアルはあくまできっかけにすぎない。
自分も[MSX・FAN](https://ja.wikipedia.org/wiki/MSX%E3%83%BBFAN)のプログラムリストが1画面に収まる長さの「1画面プログラム」や[マイコンBASICマガジン](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%82%B3%E3%83%B3BASIC%E3%83%9E%E3%82%AC%E3%82%B8%E3%83%B3)のプログラムリストを打ち込み改造しながらプログラムを学んだ。内容がゲームだったからこそ、学ぶモチベーションが保てたと思う。

韓国のことわざに、「始まりは半分」というのがあります。
ものごとを新しくはじめるにはものすごくエネルギーがいるので、はじめただけで、もう半分まで来ているんだよ。という解釈です。

# 参照
* [UnityとBlenderハンズオン第7章](https://www.slideshare.net/yaju88/unityblender7)
* [UnityとBlenderハンズオン第8章](https://www.slideshare.net/yaju88/unityblender8)
* [UnityとBlenderハンズオン第9章](https://www.slideshare.net/yaju88/unityblender9)
* [UnityとBlenderハンズオン第10章](https://www.slideshare.net/yaju88/unityblender10-55356833)