HOME » » » » HERE

ゆにすち準備編(この画像は、https://www.pakutaso.com/さまから借用しています)

こんにちわ、横浜すみっこクリエイターととです。

Unityでゲームを制作して販売するまでの軌跡を描くゆにすち!準備編です!

今回は、これまでに導入したUnityVisual Studio Code(以下、「VSCode」といいます)を連携させていきます。連携をさせることでブレイクポイントを設定できるようになり、一行ごとにコードを進めることができるようになります。

ゆにすち!シリーズとは

このシリーズではUnityでSTEAM販売を目指す!略してゆにすち!と銘打ち、モデリングもプログラミングも企画も販売も何から何までぜ~んぶド素人のととが、PCゲームを考え、制作して、販売するまでの風景を履歴として残していくものです。

この準備編では、3Dゲーム開発プラットフォームであるUnityの導入など、ゲーム制作の開発環境を整えていきます。

この記事のポイント!

  • UnityVSCodeを連携させることで、ステップ実行が可能になる!
  • 連携するには、拡張機能「C#」「Debugger for Unity」を導入する必要がある!
  • 「Debugger for Unity」を動かすには、.Net Core SDKが必要!
  • Unityの環境設定からデフォルトエディターをVSCodeに指定する!
  • デバッグ用の設定ファイルを作成する!

VSCodeの準備

2つのパッケージをインストール

VSCodeUnityのコーディングエディターとして連携させるには、少なくとも次の2つの拡張機能(パッケージ)を導入する必要があります。

  • C#
  • Degubbger for Unity

まずはこれらを導入していきます。

パッケージ「C#」の導入

ゆにすち(拡張機能マークをクリックします) 「拡張機能」を開く

画面左のアクティビティバーの window(拡張機能)をクリックします。

ゆにすち(「c#」で検索します) 検索窓からc#を検索

表示されたサイドバーの上部、拡張機能の検索窓にc#と入力してEnterを押して検索します。

ゆにすち(パッケージ「c#」をクリックします) パッケージ「C#」の詳細を表示

インストール済みパッケージ一覧から、検索結果一覧に変わりますので、c#をクリックします。

ゆにすち(「インストール」をクリックします) パッケージ「C#」のインストール

エディター領域にパッケージの詳細が表示されるので、インストールをクリックします。

パッケージ「Debugger for Unity」の導入

ゆにすち(「c#」で検索します。このとき「Preview」ではない方を選択してください。) 2つあって紛らわしいが、「Preview」がない方を選ぶ

同様の手順で「Debugger for Unity」を検索してインストールします。

注意したいのが、2つ同じ名前のパッケージが存在することです。配布元が「Unity Technorogies」の方、Previewの文字がない方を選択してください。

The .NET Core SDK cannot be located. .NET Core debugging will not be enabled. Make sure the .NET Core SDK is installed and is on the path.


.NETコアSDKが見つからないため、.NETコアデバッグを有効にできません。.NETコアSDKがインストールされていて、パスが正しいかご確認ください

環境によるのかもしれませんが、私の環境では画面右下に上のような警告が発現しました。必要なアプリケーションが足りていないようです。

ゆにすち(「Get the .NET Core SDK」をクリックします) .NET Core SDKが見つからない

Get .NET Core SDKをクリックします。

ゆにすち(「Install for Windows」をクリックします) Microsoftのページから.NET Core SDKをダウンロード

ウェブブラウザーでMicrosoft「.NET SDK for Visual Studio Code」のダウンロードページが表示されます。Install for Windowsをクリックします。

それぞれの環境に合わせてください。
ゆにすち(保存されました) インストーラーのダウンロード完了

保存したdotnet-sdk-5.0.401-win-x64.exeを開きます。

環境や時期によって、インストーラーの名称は異なります。
ゆにすち(「インストール」をクリックします) .NET Core SDKインストーラーウィザード

Microsoft .NET SDK 5.0.401 (x64)インストーラーウィザードが開くので、インストールをクリックします。

ゆにすち(「閉じる」をクリックします) .NET Core SDKのインストール完了

インストールが成功しましたと表示されていることを確認して、閉じるをクリックします。

これでVSCodeの警告がでなくなったと思います。

デバッグ用設定ファイルの生成

ゆにすち(「実行とデバッグ」をクリックします) 「実行とデバッグ」を開く

画面左のアクティビティバーのplay_arrow(実行とデバッグ)をクリックします。

ゆにすち(「launch.jsonファイルを作成します」をクリックします) 実行とデバッグ

サイドバーが上の図のような状態になると思いますので、launch.jsonファイルを作成します。をクリックします。

作業場所となるフォルダーを指定していない場合は、フォルダーを指定してから上記作業をしてください。通常は、Unityのプロジェクト直下にフォルダーを指定します。
ゆにすち(「Unity Debugger」をクリックします) コマンドパレット

コマンドパレット環境の選択が開くのでUnity Debuggerをクリックします。

ゆにすち(デバッグ用ファイルが生成されました) デバッグ用の設定ファイル

デバッグ用の設定ファイルが自動生成されました。

ゆにすち(タブを閉じます) タブでファイルを閉じる

このファイルはもう使用しないので、タブのcloseで閉じてしまって構いません。

ここまででVSCodeの準備は完了です。

Unityの準備

スクリプト編集用のエディターを設定

つづいてUnityの準備をします。スクリプトを編集するためのエディターを指定します。

Unity Hubから前回作成したプロジェクトを開きます。

ゆにすち(環境設定を開きます) 「環境設定」を開く

Unityが起動したら、メニューの編集 > 環境設定をクリックします。

ゆにすち(「外部エディター」を〔VSCode〕に設定します) Preferences > 外部ツール

Preferencesダイアログが開くので、左カラムの外部ツールを選択し、外部のスクリプトエディターのプルダウンからVisual Studio Codeに変更します。

これでUnityVSCodeの連携準備が完了しました。

連携の確認

確認用のスクリプトファイルの作成

VSCodeUnityともに設定が完了したので、連携できているか確認してみましょう。

ゆにすち(「C#スクリプト」を作成します) 「Assets」内を右クリックしてコンテキストメニューを表示

Unityのプロジェクトウィンドウの「Assets」内で右クリックして、作成 > C# スクリプトをクリックします。

Unityの画面構成については、あらためて紹介します。
ゆにすち(スクリプトをカメラにドラッグ&ドロップします) スクリプトを「Main Camera」に追加

作成された「NewBehaviourScript.cs」をプロジェクトウィンドウからシーンビューの「カメラのマーク」にドラッグ&ドロップします。

ゆにすち(「Main Camera」にスクリプトが追加されまし) インスペクターウィンドウに追加された「NewBehaviourScript」

これで「Main Camera」にスクリプトが追加されました。インスペクターウィンドウからも追加されていることがわかります。

スクリプトへの追記 と ブレイクポイントの配置

プロジェクトウィンドウの「NewBehaviourScript.cs」をダブルクリックすると、連携させておいたVSCodeが開きます。

ゆにすち(追記してブレイクポイントを設定します) 「NewBehaviourScript.cs」の編集画面

16行目に、次の一文を書き足します。

Debug.Log("Hello World!");
今は意味が分からなくて大丈夫です。

また、エディター領域のガター部分(行番号の左)をクリックすることで、ブレイクポイントを配置します。

ブレイクポイントとは、その行に来るとプログラムを一時停止してくれる機能のことです。今回は、追記した行(16行目)に置きます。

コンソールウィンドウの表示

今回の確認では、Unityのコンソールウィンドウに文字列を表示させます。

ゆにすち(「コンソール」のクリックします) コンソールウィンドウの表示手順

Unityのメニューのウィンドウ > 一般 > コンソールをクリックします。

ゆにすち(《コンソールウィンドウ》が表示されました) コンソールウィンドウ

プロジェクトウィンドウと同じ並びにタブ表示でコンソールウィンドウが表示されたので、そのまま表示しておきます。

デバッグ状態になるとUnityの画面は移動ができなくなるので、VSCodeの画面と重ならない位置に移動させておきましょう。

デバッグの実行

ようやくすべての準備が整いましたので、デバッグ実行させてみましょう。

ゆにすち(デバッグモードが実行されます) デバッグモード中

上の図のように、サイドバーが「実行とデバッグ」になっている状態で、「Unity Editor」左横のplay_arrowをクリックすることで、デバッグモードが実行されます。

これでVSCode側はデバッグスタンバイ状態になりました。ステータスバーがオレンジ色になっている状態がデバッグモード中であることを表しています。

ゆにすち(〔Enable debugging for this session〕をクリックします) C# Debugger Attatchedダイアログ

VSCodeをデバッグモードにした状態で、Unityに移動すると、C# Debugger Attatchedダイアログが表示されたと思います。

You're trying to attach a debugger, but Debug Mode is switched off in your Project.
When Unity is in Debug Mode, C# performance is reduced, but you can attach a debugger.
Switching to Debug Mode also recompiles and reloads all scripts.
You can enable Debug Mode temporarily for this Editor session, switch it on for all projects unit further notice, or cancel attatching the debugger.
If you switch it on for all projects, you can change it later in the "Code Optimization on Startup" setting in the Preferences window.
Enable debugging for this session
Enable debugging for all projects
Cancel


デバッガーを接続しようとしていますが、このプロジェクトではデバッグモードがオフになっています。
Unityがデバッグモードの場合、C#のパフォーマンスは低下しますが、デバッガーを接続できます。
デバッグモードに切り替えると、すべてのスクリプトが再コンパイルおよび再ロードされます。
このエディターセッションでデバッグモードを一時的に有効にしたり、すべてのプロジェクトユニットの通知のためにオンに切り替えたり、デバッガーの接続をキャンセルしたりできます。
すべてのプロジェクトでオンにした場合は、後で[設定]ウィンドウの[起動時のコードの最適化]設定で変更できます。
このセッションのデバッグを有効にする
すべてのプロジェクトのデバッグを有効にする
キャンセル

これはUnityのデバッグモードが無効になっているため、一時的に有効にする / 常時有効にするかを聞かれています。今回は、一時的に有効にするのでEnable debugging for this sessionをクリックします。

ゆにすち(「再生」をクリックします) 再生ボタン

Unity上部のツールバー中央付近にあるplay_arrow(再生)をクリックします。

ゆにすち(ブレイクポイントで停止します) デバッグ状態のUnityVSCodeの画面

VSCodeでは、ブレイクポイントを置いた行(16行目)でスクリプトが一時停止しているのがわかります。

VSCodekeyboard_capslock(継続)をクリックすると、

③ブレイクポイントで停止していたスクリプトが再び走り始めて、デバッグログをUnityのコンソールウィンドウに出力されました。

これでUnityVSCodeが連携し、ブレイクポイントでの停止とコードを一行ずつ実行するステップ実行ができるようになりました。

まとめ

今回は、UnityVSCodeを連携させ、デフォルトエディターの設定と、ブレイクポイントの連動をさせることができました。

次回予告

Next time on... Visual Studio Code のコード補完の有効化!

次回はVSCodeに表示され続ける「Some projects habe trouble...」の通知を消して、コード補完を有効にします!
では、今回はこの辺で。

コメント