1 of 58

Unity�3Dボール転がしゲーム

IGDA琉球大学:玉那覇 圭泰

2 of 58

今回作成するゲーム

  • ボールを十字キーで操作してゴールを目指すゲーム!
  • ジャンプ台あり、ステージから落下したらやり直し。

3 of 58

Unityを起動しよう!

どちらのアイコンでも起動できます

4 of 58

プロジェクトの作成1

ここをクリック

5 of 58

プロジェクトの作成2

_

①バージョンを確かめて

②プロジェクト名を入れる

③作成!

6 of 58

ようこそUnity2020へ!

7 of 58

エディタ画面

[インスペクター]

選択しているオブジェクトの詳細情報を編集できる

[シーン]

3Dビューでオブジェクトを配置できる。

[ヒエラルキー]

シーンにあるオブジェクトの名前が表示される。

[プロジェクト]

画像・3Dモデル・スクリプト等のファイルがある。

8 of 58

Sceneの作成1

[シーンとは]

Unityでは画面の遷移をシーンで管理します。例えばスタート画面のシーンと、ゲーム画面のシーンは別で作ったりしますね!

Sceneディレクトリに入る

「+」を押してSceneを選択

9 of 58

Sceneの作成2

Sceneができたら名前を変えよう!

今日はこのシーンを編集していきます!

10 of 58

基本的なオブジェクトを追加しよう!

  • ヒエラルキーの「+」から「3D Object」→「Cube」を選択(キューブが出る)
  • 同じように、「3D Object」から「Sphere」も作成する。(ボールが出る)

11 of 58

Cubeを変形して床を作る1

ヒエラルキー、もしくはシーンウィンドウで作ったCubeを選択。

インスペクターウィンドウで大きさを調整します!

12 of 58

Cubeを変形して床を作る2

インスペクターの「Transform」の数値を以下のように変更!

※(位置)Position:0/-0.5/8

※(大きさ)Scale:10/1/20

ここ

13 of 58

Sceneの視点操作

オプジェクトができたところで、ちょっと視点を操作してみよう!

  • 十字キー:カメラを水平に動かすことができます。
  • 右ドラック(マウス):範囲選択
  • 左ドラック(マウス):その位置を中心に視点が回転する
  • 二本指(トラックパッド):水平移動(前後のみ)
  • option + 範囲選択:一定の座標を中心とした球形視点移動

ざっとこんなところですかね?

少し試してみてください!

14 of 58

Sphereをプレイヤーに!

  • Sphereを右クリックで選択。名前を「Player」に変更しよう!

15 of 58

重力の追加

「Player」には重力が必要です!

物理演算をつけてあげましょう!

“Player”を選択し、インスペクターウインドウの一番下にある「AddComponent」を選択し「Physics → Rigidbody」を追加。

これを押して「Physics → Rigidbody」

__

Rigidbodyが追加されます

16 of 58

ここで一旦画面を見てみる

画面中央の上部に再生ボタンがありますね!

このボタンを押すことでゲームを始めることができます!

今はボールに重力をつけただけなので、ボールが落ちていくだけですけどね。

停止する時も同じ場所の□ボタンを押してくださいね!

画面上部の再生ボタンをポチッ

17 of 58

再生時をわかりやすく

「再生中とそうでない時の違いが分かりづらい・・・」そんな時は設定を変えることで解決できます!

画面上部のメニューバーから「Unity」→ 「Preferences」を選択。

「Colors」→「Playmode tint」

18 of 58

セーブは大事!

⚠️ Unityは時々落ちることがあります!

セーブをしてないと、今までやった作業が全て無かったことに!

そんな事態を起こさないためにも、こまめにセーブしましょう。

・macでは「command + s」

・windowsでは「control(ctrl)+ s」

19 of 58

Playerを動かすスクリプト

プロジェクトから+を選択して「C# Script」でC#ファイルを作成します。

ファイル名は「PlayerMove」とでもしておきましょう!

20 of 58

PlayerMove.cs

ファイルができたら今度はスクリプトを書いていきます!

とは言っても今回はコピペするのがいいかも?

手打ちだと打ち間違いでエラーが出るかもですしね。

21 of 58

スクリプトには何が書いてあるのか

軽くスプリクトの内容を解説しておきましょう。

  • Start():ゲームが始まった時、一度だけ実行される
  • Update():常に実行される動作。1フレームに1回
  • Input.GetKey(キー名):キーが押されているかどうか
  • rig.AddForce(力のベクトル):力を加える。

つまりこのスクリプトは十字キーの上入力で Z 軸に10の力がかかる処理というわけです。

22 of 58

スクリプトを適用する

スクリプトを「Player」にドラック&ドロップで反映しよう!

反映できたなら、「Player」のインスペクターにスクリプト名が出てるはず!(さっき追加した重力の下)

再生ボタンを押して、十字キーの上入力が反応するか確かめよう!

__

____

23 of 58

他の方向の操作も付け足す

残りの方向のキー入力取得コードを追加するとこんな感じ。

これで四方向に動かせるようになったかな?

ゲームを再生して確認してみよう!

24 of 58

カメラが見づらい・・・

この視点のカメラだとゲームがやりづらい・・・

「Player」を追ってくれるカメラを作ろう!

ボールが見えない

25 of 58

カメラの下準備1

まずはヒエラルキーに「CreateEnpty」を作成します。

作り方はお馴染みの「+ボタン」→「CreateEnpty」ですね!

名前は「CameraParent」に変えておきましょう!

名前変更後

26 of 58

カメラの下準備2

「CameraParent」に「Main Camera」をドラック&ドロップします。

ちゃんと移せたら右のスクショのように表示が変わるはず!

これで二つは親子構造になり、カメラは「CameraParent」についていく形になります。

「Main Camera」の設定も以下のように変更しましょう!(ヒエラルキーでカメラを選択し、インスペクターで変更できます。)

Position(位置):0, 3, -3

Rotation(角度):20, 0, 0

__

__

27 of 58

Playerを追いかけるスクリプト

プロジェクトに「C# Script」を作成してください。作り方は、+を押して、「C# Script」を選択ですね!

名前は「CameraMove」に変更しましょう!

ファイルを開いて、中身を右のように変更します。

28 of 58

「CameraMove」を適用

スクリプトを作成したら、あとは反映させるだけ!

ドラック&ドロップで「CameraParent」に適用しましょう!

最後にインスペクターのPlayerの部分に、「Player」を設定して終了!

これで基本的な機能は完成です!

__

ここを押して選択

29 of 58

ジャンプ台を作ろう

まずはオブジェクトを用意します。

作り方はヒエラルキーから+で「3D Object」→「Cube」でしたね!

キューブが作れたら名前を「JumpCube」に変更して、インスペクターでPositionを 0,-4,0 にしましょう!

__

30 of 58

ジャンプ台に色をつける

プロジェクトで「Material」を作成します!名前は「JumpColor」とでもしておきましょう。

インスペクターで好きな色に変更し、「JumpCube」にドラック&ドロップ!

色は反映されましたか?

ここで色を変更

31 of 58

ジャンプ台の設定

ジャンプ台の当たり判定を変更します。

「JumpCube」のインスペクターに「BoxCollider」という欄があるので、その中の「is Trigger」にチェックをつけよう!

ここにチェック

32 of 58

ジャンプ台のスクリプト

スクリプトファイルは、プロジェクトから + →「C# Script」でしたね!

中身を書き換えたら、「JumpCube」にドラック&ドロップ!再生ボタンを押して確認してみよう!

OntriggerEnter(Collider other)

これが衝突した時に実行されるこコードになります。

33 of 58

ジャンプ台を量産する

ジャンプ台を量産する方法は簡単!

①ヒエラルキーの「JumpCube」をプロジェクトにドラック&ドロップ

②プロジェクトにできた「JumpCube」をシーンにドラック&ドロップ

以上!

これでジャンプし放題ですね!

ちなみに、①の動作で作られる「JampCube」をプレハブと言います。

ドラック&ドロップ

ドラック&ドロップ

34 of 58

今まで作ったものを組み合わせると?

今までに「床」「プレイヤー」「ジャンプ台」を作ってきました。

そうです・・・

ゲームの素材はそろったと言ってもいいですね!

大きさ、角度、位置をいい感じに変更して、簡単なステージを作ってみましょう!

35 of 58

落ちたら終わり

ステージは作れるようになりましたが、現状落ちたらそれで終わり・・・

いちいち停止して再生してを繰り返すのも面倒ですね!

ということで、

リトライ機能を作りましょう!

36 of 58

リトライ機能の準備

まずはシーンを登録します。

画面上部のメニューバーから「File」→「BuildSetting」を選択、出てきたタブの「AddOpenScenes」を押すと登録が完了します!

タブを閉じるときは❌でいいですよ!

__

登録完了

37 of 58

リトライのスクリプト

今回は新しくファイルは作りません!「PlayerMove」にコードを追記します!

追記したコードは、10m落下すると登録したシーンを読み込む動作を行います。

SceneManager.LoadScene()がシーンの読み込みをするよ!

これで面倒な再起動とはおさらばだ!

ここから二行

この一行

38 of 58

Lightingの修正

メニューバーの「Window」から「Rendering」→「Lighting」を選択

Lightingウィンドウが現れたらインスペクターにドラック&ドロップ!

そうすると、インスペクターの上にLightingタブができるはず!

タブの中にある「Generate Lighting」を一回クリックすると、ライトが自動調整されます!

ちょっと時間がかかるかも?

39 of 58

ゲームクリアがしたい

今のままだと終点までたどり着いても落ちてやり直しのループしかできませんね。

このままでは味気ないのでゴールを作りましょう!

ということで、新しいシーンを作成します。

シーン作成は一番最初にやりましたね!

プロジェクトの+から「Scene」です!

40 of 58

新しい世界ができたところで

そもそもこのシーンを何に使うのかというと、ゲームクリア後のリザルト画面的なものとして使います。

ゴールした後に、ゲームクリアと表示させたいわけですね!

そういうわけなので、名前は「Clear」とでもしておきましょう!

「Clear」をダブルクリックしてシーンに入ると初期の何もない世界があるはず!

移動中にメッセージが出てくるかもしれません。そいつは「Save」を押せば大丈夫!

41 of 58

文字を書く1

まずはゲームクリアの文字を書きます!

ヒエラルキーの+から「UI」→「Text」を選択、そしてシーンウィンドウのタブを「Game」に変更します。(見やすくなったね!)

__

ここいらの三つが増えてるはず

ゲームタブ

「Text」の初期表示

42 of 58

文字を書く2

ここまできたらあとは簡単!

ヒエラルキーの「Text」をクリックしてインスペクターにあるNew Textの文字を書き換えるだけ!

文字の色やサイズを調整してもいいね!

文字サイズを28以上にしたい時は「Rect Transform」をいじるといいよ!

書き換える

色変更

真ん中寄せ

文字サイズ

43 of 58

シーンの登録

このシーンも登録しておこう!

メニューバーの「File」→「Build Settings」ですね!

44 of 58

クリアキューブを作る

ゲームクリアの画面はできました。次はゴールを作ろう!

シーンを「Main」に戻してゴールの位置にキューブを置きます。名前は「ClearCube」とでもしておきましょう。

残りはスクリプトを除いてジャンプ台と同じですね!

色つけ、当たり判定の設定を済ませてしまいましょう!

_

45 of 58

クリアキューブのスクリプト

新しくスクリプトファイルを作成。

名前は「ClearCube」としましょう。

中身を書き換えたらドラック&ドロップでキューブにくっつけます。

再生ボタンを押してゴールにたどり着いた時、無事に画面が切り替われば成功!

46 of 58

タイムアタックも出来たらいいな

折角なのでタイムアタックも出来たらいいよね!

タイマーもつけましょう!

47 of 58

タイマーを作る

タイマー用のテキストを作ります。

ヒエラルキーから「UI」→「Text」で作成し、「Canvas」名前を「Timer」とし、「Text」は「TimeText」などに変更しましょう。

作り終わったら「Timer」のインスペクターで「UI Scale Mode」を右のように変更してカメラ内に自動で写るように設定しましょう。

「Time Text」のインスペクターで、位置を右図のように調整しゲーム画面を確認。

左上にテキストが表示されているならOKです!

________

48 of 58

タイマーのスクリプト1

新しくスクリプトファイルを作成し、名前を「Timer」としましょう。

タイマーのスクリプトはこんな感じ。

このスクリプトを「TimeText」にドラック&ドロップしてください。

再生するとタイマーが追加されているはず!

49 of 58

タイマーのスクリプト2

「Clear」のシーンに移動し、「Canvas」に「Text」を二つ追加します。

それぞれ「ClearTime」「Time」に名前を変更して、右のスクショのように位置を整えます。

「Time」にはかかった時間を表示します。

クリアタイム

New Text

50 of 58

タイマーのスクリプト3

「Time」はカウントした値を表示するのでスクリプトが必要です。

いつものごとくスクリプトを作って名を「ClearTimeViewer」としましょう。

書き換えたら、「Time」にドラック&ドロップ!

51 of 58

再生ボタンを押して確かめよう

「main」のシーンに戻って再生ボタンを押してみよう!

クリアした時にタイムが出ていれば成功!

52 of 58

これで完成! かと思いきや

現在Unity内でしか起動しないこのゲーム。誰でも遊べるようにアプリ化しよう!

まずはURLからアイコンをダウンロードしてください。

https://drive.google.com/drive/u/1/folders/0B6DGs0A7N_YQR3FhY0twcGFtMHc

53 of 58

アイコンをUnityに入れる

ドラック&ドロップでプロジェクトに挿入しよう!

54 of 58

アイコンを設定

メニューバーの「File」→「Build Settings」を開いて「Player Settings…」を押し、編集タブを開きます。

55 of 58

アイコンを設定2

「Project Settings」内の「Default lcon」→「select」を選択。

「Select Texture2D」で先ほどダウンロードしたアイコンを選択します。

設定し終わったら❌で戻ります。

56 of 58

ビルド

  • 最後にビルドして完成です!

ここでビルド

57 of 58

さらなる工夫を!

さて、ボール転がしの基本的なことはこれで終了ですが、まだまだこのゲームは改良の余地がありますね!

・アセットを使ってオブジェクトを豪華に

・接触したら死ぬなど、新しいオブジェクトを作る

・新マップの開発

などなど

思いついたアイディアを自分で実装してみましょう

58 of 58

お疲れ様でした!