8
13

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.

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

Last updated at Posted at 2017-09-16

はじめに

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

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

2017年9月16日(土)に「第44回しずおかアプリ部」にて、よりゲームらしくするための2回目のハンズオンを行いました。【しずおかアプリ部】活動ログ 第44回
今回は、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. ステージ配置
  2. 色を変える
  3. 動くボール
  4. ラケットを動かす
  5. 消えるブロック
  6. ブロックを手作業で並べる改造して

補足:【Unity】シーン表示上のシーンの向きに戸惑わない方法

第2部 ブロック崩しのチュートリアル(改造しながら学ぶ)

100分を想定している。ソースリストの入力は時間がかかるので、先にコピー&ペーストの方法を教えるのがよい。

  1. スコアの表示
  2. ゲームマネージャークラスを作る
  3. ブロックをスクリプトで配置
  4. 音を鳴らす

Unity_Playing.gif

第3部 自分なりに改造する

60分を想定している。第1部と第2部で出来ていない人はここで時間を調整する。

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

簡単なところ

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

プログラムが出来るなら

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

独学による改造案

ゲーム性

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

グラフィック/演出

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

操作性

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

ハイスコアランキング

  • TOP10のハイスコアを保持する
  • ユーザー入力を作る
  • ハイスコア一覧を作る

Unityあるあるトラブル

名前の英大文字小文字の間違い

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

MonoDevelopで貼り付けができない

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

Scene画面が思ってたような位置に戻せなくなる

Scene画面はアンドゥとリドゥがありませんし、位置の数値化も無いので慣れるしかありません。
【Unity】シーン表示上のシーンの向きに戸惑わない方法

どうにもならなくなった場合、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

プレイするのみなら、メニューの[File]>[Build & Run]を選択します。
アドレスが「localhost:50272/」なのでWEBサーバーが自動的に動作するようです。
Unity_WebGLRun.png

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

ゲーム投稿サイト unityroom

AndroidやiPhoneのスマホアプリとして公開するほどでもないし、WebGLビルドして公開するところがないかと検索したところ、「ゲーム投稿サイト unityroom」を見つけました。
【unity】unityroomに投稿する方法によれば、Twitterアカウントがあれば投稿できるようです。

GitHubに公開

WebGL投稿先としてGithubを使ってみる」を参考にGithubをあげました。

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

BGMと効果音は、Unityのサイトに昔からあるチュートリアル「はじめてのUnity 第3回 演出を強化しよう」(旧:Javascript) 」の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

MonoBehaviorクラス

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

Unityエンジンからゲームの実行状況に応じてメッセージが送信されると、 実装クラス内にあるメッセージと同じ名前の関数を実行します。
Unity_MonoBehavior.png

最後に

何でもそうだけど、自分の思い通りに組めるようになるには時間がかかる、チュートリアルはあくまできっかけにすぎない。
自分もMSX・FANのプログラムリストが1画面に収まる長さの「1画面プログラム」やマイコンBASICマガジンのプログラムリストを打ち込み改造しながらプログラムを学んだ。内容がゲームだったからこそ、学ぶモチベーションが保てたと思う。

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

参照

8
13
2

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
8
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?