1
0

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 PlayGround

Last updated at Posted at 2020-10-08

Unityバージョン 2019.4.1f1LTS

完成した動画ファイルはここに提出してください(S・N共通)
動画のファイル名は「201114Sakushi_〇〇〇〇(名前をローマ字で).mp4」とすること。
PCでキャプチャする以外に、画面をスマホで撮影して提出してもOK。
質問はTeamsのチャットで受けつけます。

#Unityの起動と作業の準備#
スクリーンショット (847).png
1:Windowsのツールバーからエクスプローラーアイコンをクリックする。

スクリーンショット (848).png
2:Cドライブに新しく「Unity」フォルダを作成する。

スクリーンショット (849).png
3:Unityを起動し、「新しいプロジェクトを作成」ウィンドウで「2D」アイコンをクリック後、プロジェクト名で「20201008Tutorial_名前(半角ローマ字)」を入力する。次に保存先で「C:\Unity」(先ほど作成したUnityフォルダのパス)を指定する(パスは右側の「・・・」アイコンから指定できる)。最後に「作成」ボタンをクリックする。

スクリーンショット (851).png
4:Unityのエディタ画面が表示される。

ワンポイントテクニック
1.png
もし画面のレイアウトが異なる場合は、右上の「Layout」メニューから「Dafault」を選択しよう。

#Unity PlayGroundのインストール#

スクリーンショット (852).png
5:エディタの「Asset Store」タブをクリックする。

スクリーンショット (855).png
6:検索ウィンドウで「Playground」と入力し、図のグラフィックをクリックする。

スクリーンショット (856).png
7:「Import」ボタンをクリックする。

スクリーンショット (857).png
8:図のようなダイアログが表示されたら、「Install/Upgrade」をクリックする。

スクリーンショット (859).png
9:デフォルトではすべてのチェックボックスにチェックがついている。ついていなければ「All」ボタンをクリック後、「Import」をクリックする。

スクリーンショット (860).png
10:図のように7個のフォルダが表示されたらインストール終了だ。

#サンプルゲームをプレイ#

スクリーンショット (862).png
11:エディタから「Scene」タブをクリックし、プロジェクトウィンドウのエクスプローラーから「Assets」→「Examples」→「Defender」を選択する。その後、「Defender」シーンファイルをダブルクリックする。

スクリーンショット (863).png
12:作業中に図のようなダイアログが表示されたら、「Save」をクリックしよう。

スクリーンショット (864).png
13:Defenderゲームのアセットが読み込まれる。エディタ画面上部の「再生」アイコンをクリックすると、ゲームが始まる。

スクリーンショット (865).png
14:[A][S]キーで砲台を左右に動かし、[SPACE]キーでビームをうって、隕石を撃破しよう。ひとしきり遊んだら「停止」アイコンをクリックし、ゲームを終了させよう。ゲームオーバーになった場合も、「停止」アイコン→「再生」アイコンを押せば再スタートできる。

スクリーンショット (866).png
15:続いて「Game」タブをクリックし、「Maximize On Play」ボタンをクリックしよう。

スクリーンショット (869).png
16:再び「再生」ボタンをクリックすると、拡大画面でゲームをプレイできる。

#錯視の制作に挑戦#

スクリーンショット (900).png
17:ゲームを終了後、「Edit」→「Preferences」を選択しよう。

スクリーンショット (902).png
18:メニューから「ColorS」→「Playmode tint」を選択し、カラーチャートから任意の色を選択する。選択したらウィンドウを閉じる(「保存する」などのボタンは存在しない)

スクリーンショット (881).png
19:ゲームを終了後、プロジェクトウィンドウのエクスプローラーで「Asset」を選択後、右クリック→「Create」→「Folder」を選択しよう。

スクリーンショット (882).png
20:新しくフォルダができるので「Tutorial」と入力する。

スクリーンショット (884).png
21:「Tutorial」フォルダをクリックし、メインメニューから「File」→「Save As」をクリックする。

スクリーンショット (885).png
22:ウィンドウで「Cドライブ>Uity>20201008Tutorial_(名前)>Assets>Tutorial」フォルダを選択する。

スクリーンショット (886).png
23:「Tutorial」とファイル名を入力し、保存する。

スクリーンショット (887).png
24:図のようにUnityのロゴマークのファイル(シーンファイル)が作成され、ファイル名が「Tutorial」になっていれば成功だ。

ワンポイントテクニック

スクリーンショット (888).png
Unityのシーンファイルは図のように、ハードディスクの「Assets>Tutorial」フォルダの中に保存されている。

スクリーンショット (892).png
25:エクスプローラーから「Assets>Images>GeometricShapes」を選択する。その後、Squareをシーンビューにドラッグ&ドロップする。

スクリーンショット (898).png
26:InspectorエリアのTransformでPositionを[X]=0、[Y]=0、[Z]=0にする。その後、Scaleを[X]=14、[Y]=10、[Z]=1にする。

スクリーンショット (913).png
27:Hierarchyでドラッグ&ドロップしたSquareを選択し、Inspectorエリアで名称を「BackGround」に変更する。

スクリーンショット (915).png
28:再びシーンビューにSquareをドラッグ&ドロップする。次にSquareを選択したまま、Inspectorエリアの「Color」からColorレーダーを開き、赤色を選択する。その後、Colorレーダーを閉じる。

スクリーンショット (916).png
29:Squareをクリック後、メニューバーの移動アイコンをクリックする。その後、Squareに表示される矢印をドラッグして中央に移動させる。この時、InspectorエリアのTransformで座標を[X]=0,[Y]=0、[Z]=0に指定しても良い。最後に「Order in Layer」の値を1にする。

スクリーンショット (918).png
30:同じくSquareをクリック後、InspectorエリアのTransformでScaleを[X]=3、[Y]=3,[Z]=1にする。メニューバーの「拡大・縮小」アイコンをクリックし、Squareをマウスで直接拡大縮小させてもいい。

スクリーンショット (920).png
31:最後にメニューバーの「回転」アイコンをクリックし、Squareの周囲に表示される円をマウスでドラッグすると、Squareの角度が変えられる。これまでと同じように、InspectorエリアのTransformでRotationの[Z]の値を変えても良い。最後に[Z]を0にしておこう。

スクリーンショット (923).png
32:はじめにHierarchyでSquareを選択しておく。その後、エクスプローラーから「Scripts」→「Movement」→「AutoRotate」を選択し、SquareのInspectorエリアにドラッグ&ドロップする。図のようにうまく配置されたら成功だ。

スクリーンショット (924).png
33:うまく配置できないときは、Inspectorエリアの「Add Component」をクリックし、検索ウィンドウで「Auto Rotate」と入力してもいい。

スクリーンショット (925).png
34:SquareにAutoRotateを設定すると、自動的にRigid body 2Dが設定される。ここで「Gravity Scale」を0にする。

スクリーンショット (926).png
35:ここで実行ボタンを押してみよう。Squareが回転すれば成功だ。

#Squareを自動回転させる#

スクリーンショット (928).png
36:続いてエクスプローラーから「Assets>Images>GeometricShapes」を選択する。その後、Circleをシーンビューにドラッグ&ドロップする。

スクリーンショット (929).png
37:同じようにCircleの色を黒に設定する。

スクリーンショット (932).png
38:Circleをクリックし、InspectorエリアのTransformでOrder in Layerを2にする。その後、Positionを[X]=2,[Y]=2,[Z]=0にする。最後にScaleを[X]=2,[Y]=2,[Z]=1にする。

スクリーンショット (934).png
39:HierarchyエリアのCircleをプロジェクトエリアにドラッグ&ドロップする。するとHierarchyエリアのCircleの文字が黒から青に変わる。これを「Prefabにする」と呼称する。

スクリーンショット (935).png
40:一度Prefabにしたオブジェクトは、同じ属性を保ったまま、スタンプのように大量生産できる。実際にプロジェクトエリアのCircle PrefabをHierarchyエリアに3回ドラッグ&ドロップしよう。

スクリーンショット (936).png
41:4つのCircleははじめ、位置が重なっている。そこでひとつずつ動かして、図のように配置する。それぞれの座標は下記の通り。
①[X]=2,[Y]=2,[Z]=0
②[X]=-2,[Y]=2,[Z]=0
③[X]=2,[Y]=-2,[Z]=0
④[X]=-2,[Y]=-2,[Z]=0

スクリーンショット (938).png
42:少しCircleが小さいので調整しよう。プロジェクトエリアからCircle Prefabをクリックする。その後、InspectorエリアからScaleを[X]=2.5,[Y]=2.5,[Z]=1にする。最後に元に戻るをクリックする。

スクリーンショット (939).png
43:これによって、一度にすべてのCircleの大きさを変えることができた。

スクリーンショット (941).png
44:続いてSquareの大きさも調整しよう。HierarchyからSquareを選択し、InspectorエリアのPositionでScaleを[X]=4,[Y]=4,[Z]=1にする。

スクリーンショット (954-2).png
45:ここで再生ボタンを押してみよう。Squareが右回転すれば成功だ。

スクリーンショット (944).png
46:ここまでできたら、メインメニューから「File」→「Save」で上書き保存しておこう。

#Unity PlayGroundの改造#

スクリーンショット (945).png
47:このようにスクリプトはシーンビュー上のオブジェクトに設定されて、さまざまな効果をもたらす。スクリプトはアイコンをクリックすると、Inspectorエリアに内容が表示される。Unity Playgroundsには、ゲーム制作に役立つさまざまなスクリプトが用意されている。

スクリーンショット (948).png
48:用意されているもの以外にも、スクリプトは自作したり、外部から加えることができる。サーバ上に用意されている「OnKeyPress_Rotate.cs」をPCにコピーし、プロジェクトエリアにドラッグ&ドロップしよう。

※スクリプト出展:「楽しく学ぶ Unity2D超入門講座」(森 巧尚著/マイナビ出版)

スクリーンショット (950).png
49:HierarchyでSquareを選択後、InspectorエリアのAutoRotateのチェックボックスを外す。これによって、Squareに対してAutoRotateの効果が働かなくなる(実行しても回転しなくなる)。

スクリーンショット (951).png
50:続いてOnKeyPress_Rotate.csをSquareのInspectorエリアにドラッグ&ドロップしよう。

スクリーンショット (952).png
51:うまくドラッグ&ドロップできなければ、Add Componentから検索ウィンドウでファイル名を入力して設定しても良い。

スクリーンショット (953).png
52:図のように設定できればOKだ。再生ボタンをクリックしてみよう。

スクリーンショット (954).png
53:今度はキーボードの左右キーで回転をコントロールできる。AutoRotateの時と比べてみよう。

スクリーンショット (955).png
54:AutoRotateと同じように、OnKeyPress_Rotate.csの内容もクリックして確認できる。OnKeyPress_Rotate.csはテキストファイルなので、メモ張などで開いて記述できる。

スクリーンショット (956).png
55:これで今回のプログラムは完成だ。メインメニューから「File」→「Save」で上書き保存しておこう。

#動画ファイルにキャプチャ#

スクリーンショット (957).png
56:Unityの動画画面はWindows10上で動画ファイルにキャプチャできる。はじめにキーボード上の「Win」キー+[G]を押そう。その後、録画ボタン(画面上の赤丸で囲ったボタン)をクリックする。

スクリーンショット (960).png
57:録画がスタートするので、Unityで再生ボタンをクリックする。

スクリーンショット (959).png
58:録画を終了するときは、「Capture Status」の停止ボタンをクリックする。

スクリーンショット (961).png
59:図のような表示が出れば録画終了だ。

スクリーンショット (962).png
60:録画ファイルは「Cドライブ>ビデオ>キャプチャ」フォルダに保存されている。

スクリーンショット (964).png
61:録画ファイルをダブルクリックすると、動画プレイヤーが起動してファイルが再生される。

スクリーンショット (978).png
62:ファイル名を「20201009Tutorial_名前.mp4」に修正する。このとき、名前は半角ローマ字にすること。ひらがやな漢字などは使ってはいけない。

スクリーンショット (966).png
63:録画ファイルをGoogleDriveの指定されたフォルダにアップロードする。今後、授業では原則としてこのように、成果物を動画ファイルとして提出していく。

スクリーンショット (967).png
64:動画ファイルがアップロードできれば成功だ。

#Unityの終了とデータの保存#

スクリーンショット (970).png
65:最後に作業データの保存方法について確認する。はじめにメインメニューから「File」→「Exit」でUnityを終了する。

スクリーンショット (971).png
66:Cドライブから「Unity」フォルダを開く。

スクリーンショット (972).png
67:「20201008Tutorial_名前」フォルダを開く。

スクリーンショット (975).png
68:AssetsとProject Settingsフォルダ以外を削除する。間違わないように注意。

スクリーンショット (976).png
69:「20201008Tutorial_名前」フォルダを閉じる。

スクリーンショット (977).png
70:「20201008Tutorial_名前」フォルダをUSBドライブなどにカット&ペーストする。PC内に自分の作業フォルダを残さないように注意。

1
0
0

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?