Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,18 @@ export default defineConfig({
},
],
},
{
label: "ゲーム制作",
link: "/textbook/game/unity/tutorial",
icon: "puzzle",
items: [
{
label: "Unity で玉転がしゲーム作るコース",
autogenerate: { directory: "textbook/game/unity" },
},
],
},

]),
starlightScrollToTop({
threshold: 500,
Expand Down
63 changes: 63 additions & 0 deletions src/content/docs/textbook/game/unity/00--tutorial.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
---
title: Unityとは何か
slug: textbook/game/unity/tutorial
sidebar:
order: 0
---

import { Aside, Steps, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components'
import SyscatComment from "@/components/SyscatComment.astro"
import V_play3 from "./_videos/play-3.avif";

## 1. Unityの世界へようこそ!

皆さん、改めてこんにちは!
Unityの環境構築は無事に完了していますでしょうか?
もしまだ準備ができていないという方がいれば、[こちら](/setups/unity-6.0/)を参考に構築をお願いします。

<SyscatComment type="SPARKLES">
長時間のインストール、本当にお疲れ様でした!<br/>
ここからは、Unityを使ってゲーム制作の基礎を学んでいきましょう!
</SyscatComment>

### Unityとはなんだろう?

まずは、「Unityとは一体どのようなものなのか」についてお話ししていきますね。

「Unity = ゲームを作るためのソフト」というイメージを持っている方が多いかと思います。ただ、「ゲームエンジン」や「プラットフォーム」といった専門用語をいきなり使われても、少し難しく感じてしまいますよね。

Unityを一言で表すと、 **「誰でも3Dゲームやアプリを作ることができる、魔法の道具箱」** です。

本来、ゲームを一つ作るためには、重力が計算されて物が落ちる仕組みや、光の当たり方の計算など、非常に高度な数学やプログラミングの知識が必要でした。しかし、Unityはそうした複雑な仕組みをあらかじめ用意してくれています。

そのため、私たちは **「どんな面白いゲームにしようかな?」というアイデアを形にすることに集中できる** のです!



<Aside type="tip" title="Unityはこんなところで使われています">

- **世界中で愛されている作品**
皆さんがよく知っている『ポケモンGO』や『原神』、『Among Us』といった有名なゲームもUnityで開発されています。

- **ゲーム以外の分野でも活躍**
映画のアニメーション制作をはじめ、建物の完成予想図を歩き回るシミュレーション、VRChatのようなメタバース空間のツール制作など、幅広い分野で活用されています。

</Aside>

### 最終的に完成する作品はこちら!

この章のカリキュラムをすべて終えると、次のような「玉転がしゲーム」が完成します。
実際に自分の手で動くゲームを作る楽しさを、ぜひ体験してください!

<img src={V_play3.src} alt="完成イメージ" />

<Aside type="note" title="これからやること">
1. Unityの基本操作(画面の見方)を覚える
2. 3Dオブジェクト(床や玉)を配置する
3. プログラミング(C#)で玉を動かす
4. アイテム(コイン)やUI(スコア)を作る
</Aside>

準備はいいですか?それでは、さっそくUnityのプロジェクトを立ち上げていきましょう!


42 changes: 42 additions & 0 deletions src/content/docs/textbook/game/unity/01--create-project.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
title: Unityでプロジェクトを作ってみよう
slug: textbook/game/unity/create-project
sidebar:
order: 1
---

import { Aside, Steps, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components'
import SyscatComment from "@/components/SyscatComment.astro"

それでは、実際にゲームを作るための「プロジェクト」を作成しましょう。

<Steps>

1. #### Unity Hubを開く
Unity Hubを起動し、画面右上の **新しいプロジェクト** ボタンをクリックします。
![](./_images/newProject.webp)

2. #### テンプレートと名前を設定する
プロジェクトの設定画面が開いたら、以下の3つの項目を確認・設定してください。
![](./_images/projectSetting.webp)

- **テンプレート**: 真ん中のリストから **3D (URP) Universal 3D** を選択します。
- **プロジェクト名**: 右側の名前欄(My Project)をダブルクリックし、**Rolling Ball** に書き換えます。
- **保存先**: 任意の場所を指定します。

<Aside type="caution" title="おすすめの保存先">
保存場所はどこでも良いですが、自分のユーザーフォルダ(Users/ユーザー名)の直下に **UnityProjects** という名前のフォルダを作って、そこにまとめて保存するのが管理しやすくておすすめです。
</Aside>

3. #### プロジェクトを作成する
設定ができたら、右下の **「プロジェクトを作成」** ボタンをクリックしましょう。

![](./_images/projectList.webp)

Unityエディタが立ち上がり、プロジェクト一覧の先頭に **Rolling Ball** が表示されていれば準備完了です!

</Steps>

---

次は、立ち上がったUnityの画面をどのように操作するのか、**エディタの見方**について学んでいきましょう!
162 changes: 162 additions & 0 deletions src/content/docs/textbook/game/unity/02--editor-tutorial.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
title: Unityエディタの画面構成を知ろう
slug: textbook/game/unity/editor-tutorial
sidebar:
order: 2
---

import { Aside, Steps, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components'
import SyscatComment from "@/components/SyscatComment.astro"

早速作ったプロジェクトを開いてみましょう!

<SyscatComment type="SLEEPING">
PC やネットワークの速度によっては時間を要するから、おやつでも食べてゆっくり待ってね。
</SyscatComment>

![](./_images/Unity_edit.webp)

プロジェクトが開けたらこんな感じの画面になっていると思います。

<Aside type="caution" title="画面のレイアウトが違うときは?">
![](./_images/unityLayout.webp)

もし画像とレイアウトが違う場合は、画面右上の **[Window] > [Layouts]** (または右上のプルダウン)から **Default** を選択すると元に戻ります。
</Aside>

<SyscatComment>
Unityの操作に慣れてきたら、自分の使いやすいようにレイアウトをカスタマイズして見てね
</SyscatComment>
レイアウトが確認できたら①から順にどんなことができるか確認していきましょう。


### 1. Hierarchy Window(ヒエラルキーウィンドウ)


**シーン内のリストを確認できる**

![](./_images/UnityEdit-1.webp)

**詳細**
シーン内に配置されているすべての「ゲームオブジェクト(Player、床、ライトなど)」がリスト形式で表示されます。

**主な機能**
- オブジェクトの新規作成(右クリック > 3D Object > Cube など)。
- オブジェクトの親子関係(グループ化)の管理。
- 名前の変更や、表示・非表示の切り替え。


### 2. Scene View / Game View(ビューの切り替え)

<Steps>
1. **Scene View(シーンビュー)で作業する**

![](./_images/UnityEdit-2.webp)

**詳細**
オブジェクトの位置や大きさ、角度などを変更して開発者視点で見れる場所です。

**主な機能**
- マウス操作での視点移動(右クリックで回転、ホイールでズーム)。
- オブジェクトの移動(Wキー)、回転(Eキー)、拡大縮小(Rキー)。
- 配置のバランス確認。

2. **Game View(ゲームビュー)で確認する**

![](./_images/UnityEdit-game.webp)

**詳細**
ゲームを実行したときに、カメラが映している映像が表示されます。

**主な機能**
- 再生ボタン(▶): ゲームを動かしてテストプレイをする。
- プレイヤーの操作感や、UI(スコアなど)の見え方を確認する。

<SyscatComment>
それぞれ確認ができたら、作業しやすいように View は Scene View に戻しておきましょう!
</SyscatComment>
</Steps>

### 3. Inspector Window(インスペクターウィンドウ)


**オブジェクトの詳細を設定できます**

![](./_images/UnityEdit-3.webp)

**詳細**
ヒエラルキーやシーンで選択したオブジェクトの、具体的な数値や機能が表示されます。

**主な機能**
- **Transform**: 座標(Position)、角度(Rotation)、大きさ(Scale)の数値入力。
- **Component の追加**: 重力をつける「Rigidbody」や、自作の「スクリプト」を合体させる。
- 色の変更や、物理特性の調整。


### 4. Project Window(プロジェクトウィンドウ)


**素材(アセット)を管理できます**

![](./_images/UnityEdit-4.webp)

**詳細**
パソコン内のフォルダと同じ役割です。まだステージに出していない「予備の素材」もここに保管されます。

**主な機能**
- スクリプト(プログラム)や画像、音声データの管理。
- **Prefab(プレハブ)**: 1度作ったオブジェクトを「再利用可能な部品」として保存する。
- 素材のインポート。


### Unityの基本の考え方

Unityでゲームを作る上で最も大切な、3つの中心的な考え方を学びましょう。

<Steps>

1. **全ては「GameObject(ゲームオブジェクト)」から始まる**

ゲーム内に存在するあらゆるものは、全て**GameObject**という名前の器(うつわ)だと考えます。

<Aside type="note" title="GameObjectの種類">
- **実体があるもの**: キャラクター、道具、地形、壁など。
- **目に見えないもの**: カメラ、照明(ライト)、音など。
</Aside>

作っただけの GameObject は基本的に「空っぽ」の状態で、自分では何もすることができません。

2. **「Component(コンポーネント)」を合体させて個性を出す**

空っぽの GameObject に、**Component** という部品(機能)を入れることで、そのオブジェクトに特徴や振る舞いを持たせます。

**役割**: 性質(重さ、色、形)や、行動(落下する、プログラムで動く)を決定します。

<Aside type="tip" title="Componentの例">
- **Rigidbody**: これを入れると「物理法則」が働き、重力で落下したり衝突したりできるようになります。
- **Material**: オブジェクトに「色」や「質感」という見た目の情報を与えます。
- **イメージ**: 「GameObject」という空のロボットに、「Component」という**AIやプログラム**を装着することで、初めて「やることがわかった!」と動き出すようなイメージです。
</Aside>

3. **「Scene(シーン)」という舞台に配置する**

作ったキャラクターや地形を並べる空間を **Scene** と呼びます。

- **役割**: 制作するゲームの「1つのレベル(ステージ)」や「場面」に相当します。
- **作業**: ヒエラルキーにあるオブジェクトを、このシーンという舞台に配置していくことでゲームの世界が完成します。
- **メリット**: 同じ振る舞いをする敵やコインを、何度も1から作ることなくコピーして配置できるので非常に便利です。

</Steps>

### 考え方のまとめ

Unityでの開発は、基本的に以下のサイクルで進んでいきます。

- **Project**(倉庫)から素材(Asset)を取り出す。
- **GameObject**を作り、**Component**(部品)を合体させて中身を作る。
- **Scene**(舞台)に並べて、ゲームの世界を組み立てる.


---

読んで覚えるより触って覚える方が100倍効果的なので、ここからは実際に手を動かしていきましょう!
98 changes: 98 additions & 0 deletions src/content/docs/textbook/game/unity/03--create-stage.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
---
title: ステージを作ってみよう
slug: textbook/game/unity/create-stage
sidebar:
order: 3
---

import { Aside, Steps, Tabs, TabItem, LinkCard } from '@astrojs/starlight/components'
import SyscatComment from "@/components/SyscatComment.astro"

それでは早速ステージを作っていきましょう!

### 1. 「GameObject」を作ってみよう

<Steps>
1. **オブジェクトの作成**

![](./_images/create-object.webp)

メニューバーから **GameObject > 3D Object > Cube** を選択して四角の箱を作ります。

2. **作成の確認**

![](./_images/cubeMade.webp)

選択できたらこのように Scene View の真ん中に箱と矢印が表示されるはずです。また、Hierarchy Window にも「Cube」が追加されていますね。この箱を今からステージの床にしていきます。
</Steps>

### 2. 「Cube」の場所やサイズを変えてみよう

<Steps>
1. **Transformの設定**

Cube の **Inspector** 欄にある **Transform** の各項目(Position, Rotation, Scale)に、直接数字を打ち込んで大きさを変えてみましょう!

![](./_images/cubeTransform.webp)

2. **3つの基本設定項目を確認しよう**
- **Position(位置)**: オブジェクトが世界のどこに居るかを示す「座標」です。
- **Rotation(回転)**: オブジェクトがどの方向を向いているかを示す「角度」です。
- **Scale(尺度)**: オブジェクトの「大きさ」です。

**3Dの方向を決める「XYZ軸」**
Unityの3D空間は、以下の3つの軸で構成されています。

| 軸 | Scene Viewの色 | 役割(Positionの場合) |
| :--- | :--- | :--- |
| **X軸** | **赤** | **横**(左右)の動き |
| **Y軸** | **緑** | **縦**(上下)の動き |
| **Z軸** | **青** | **奥行き**(前後)の動き |

<Aside type="caution" title="便利なショートカット">
エディタ左上のアイコン(またはキーボードの **W / E / R**)を切り替えることで、Scene画面上の矢印を直接マウスでドラッグして操作することも可能です。
- **Wキー**: 移動(Position)
- **Eキー**: 回転(Rotation)
- **Rキー**: 拡縮(Scale)
</Aside>

3. **値を設定する**

それでは、値を下の画像のように設定してください。
![](./_images/cubeTransform.webp)
</Steps>

### 3. 「Cube」に色をつけてみよう

<Steps>
1. **マテリアルの作成**

オブジェクトを好きな色に変えてみましょう!
![](./_images/create-material.webp)

メニューバーから **Assets > Create > Material** を選択してマテリアルを制作します。

2. **名前の変更**

![](./_images/materialMade.webp)

制作できたら Project Window に「New Material」ができていると思います。これをオブジェクトにつけることで色や材質を変えられます。

<Aside type="caution" title="名前の付け方">
マテリアルが増えると見分けがつかなくなるので、名前部分をクリックして「Stage-1」など分かりやすい名前に変えてあげましょう。
</Aside>

3. **色の設定(Base Map)**

![](./_images/colorpalette.webp)

Inspector Window の **Base Map**(または Albedo)の横にある白い四角をクリックします。カラーパレットが出るので、好きな色に設定してみましょう。

4. **オブジェクトに適用する**

設定ができたら、Project Window からマテリアルを、Scene 上の **Cube に直接ドラッグ&ドロップ** します。

![](./_images/paintCube.webp)

色が変わりましたね!オブジェクトが好きな色になるだけで愛着が湧きますね。
</Steps>
Loading