HOME » » » » HERE

[Unity]と[Visual Studio Code]の連携! | 【ゆにすち! - 入門編】(part.010)

access_time

update

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

こんにちわ、横浜すみっこクリエイターととです。
『UnityでSTEAM販売を目指す!』略して『ゆにすち!』の【入門編】です!
この【入門編】では、3Dゲーム開発プラットフォームである[Unity]の導入と、その基本操作を学習していきます。

今回は、前回導入した[Unity]と[Visual Studio Code](以下、「VSCode」といいます)を連携させるための作業をしていきます。

『ゆにすち!』シリーズ

このシリーズでは『UnityでSTEAM販売を目指す!』略して『ゆにすち!』と銘打ち、プログラムもモデリングも企画も販売も何から何までぜ~んぶド素人のととが、PCゲームを考え、制作して、販売するまでの風景を履歴として残していくものです。短い連載を重ねる形で発信していければと良いな、と思っております。
この【入門編】では、3Dゲーム開発プラットフォームである[Unity]の導入・基本操作を学んでいきます。

この記事のポイント!

  • [Unity]の環境設定からデフォルトエディターを指定する!
  • 「Debugger for Unity」を導入する!
  • 「Debugger for Unity」を動かすには、[.Net Code SDK]が必要!
  • デバッグ用の設定ファイルを生成しておく必要がある!
  • [Unity]と[VSCode]はブレイクポイント連動できる!

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

まずは[Unity]側の設定で、スクリプトを編集するエディターの指定をします。

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

メニューの編集環境設定をクリックします。

ゆにすち(外部エディターを設定します)

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

これでスクリプトエディターを[VSCode]に変更することができました。

デバッグパッケージの導入

下準備

直接の設定ではないのですが、作業の効率化と効果の確認のために、先に[Unity]でオブジェクトを作成しておきます。

ゆにすち(C#スクリプトを作成します)

《プロジェクトウィンドウ》で右クリックして、コンテキストメニューから作成C♯ スクリプトをクリックします。

ゆにすち(TestScriptにリネームします)

《プロジェクトウィンドウ》に新たに作成されたスクリプトを「TestScript」にリネームしておきます
*名前に深い意味はありません。わかりやすくするためだけなので、そのままでもかまいません。

ゆにすち(キューブオブジェクトを作成します)

次に《ヒエラルキーウィンドウ》に「キューブ」オブジェクトを作成します。
*こちらも特にキューブであることに特段の意味はありません。

先ほど作成した「TestScript」を《プロジェクトウィンドウ》から《シーンビュー》のキューブにドラッグ&ドロップします。

ゆにすち(コンポーネントにスクリプトが追加されました)

これで、キューブにスクリプトがコンポーネントとして追加されました。《インスペクターウィンドウ》にもコンポーネントが追加されていることが分かります。

ゆにすち(TestScriptをダブルクリックします)

《ヒエラルキーウィンドウ》の「TestScript」をダブルクリックします。すると連携させておいた[Visual Studio Code]が開くます。

これで下準備はOKです。

Debugger for Unityの導入

次の操作は[VSCode]に移ります。

ゆにすち(拡張機能をクリックします)

左のアクティビティバーの拡張機能ボタンをクリックします。

ゆにすち(「debugger for unity」で検索します)

左カラムに拡張機能が一覧で表示されます。もともと[VSCode]に付属してきた「C#」と、前回追加した「Japanese Language Pack for Visual Studio Code」が一覧に表示されています。

上の検索窓に〔debugger for unity〕と入力して検索します。

ゆにすち(「Debugger for Unity」をクリックします)

適用中のパッケージ一覧から、検索結果一覧に変わりますので、〔Debugger for Unity〕をクリックします。
2つ同じ名前のパッケージがあるのでご注意ください。
配布元が「Unity Technologies」になっている方、Previewの文字がない方が今回導入したい方です。

ゆにすち(インストールします)

メイン側にその詳細が表示されるので、Installをクリックします。

.NET Core SDKのインストール

ゆにすち(「Get the .NET Core SDK」をクリックします)

環境に依るのかもしれませんが、私の環境では[VSCode]の右下に上図のような警告が発現しました。先ほどインストールしたパッケージに必要なアプリケーションが不足していることを表しています。

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.

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

ゆにすち(「開く」クリックします)

外部サイトを開いてよいかの確認ダイアログが表示されるので、開くをクリックします。

ゆにすち(「Install for Windows」をクリックします)

ウェブブラウザーでMicrosoft「.NET SDK for Visual Studio Code」のダウンロードページが表示されます。Install for Windowsをクリックします。
*それぞれの環境に合わせてください。

ゆにすち(「保存」をクリックします)

お使いのブラウザーに準じて保存してください。

ゆにすち(保存されました)

保存したdotnet-sdk-5.0.203-win-x64.exeを開きます。
後ろの数字はお使いの環境や時期によって異なります。

ゆにすち(「インストール」をクリックします)

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

ゆにすち(「閉じる」をクリックします)

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

これで、[VSCode]の警告が出なくなったはずです。

デバッグの準備

準備ばっかりで疲れてきましたが、もう一息です。[VSCode]に戻ります。

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

左のアクティビティバーの実行とデバッグボタンをクリックします。

ゆにすち(「launch.jsonファイルを作成します」をクリックします)

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

ゆにすち(「Unity Debugger」をクリックします)

《環境の選択》が開くので〔Unity Debugger〕をクリックします。

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

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

ゆにすち(タブから閉じます)

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

デバッグ実行([VSCode]側)

いよいよデバッグ実行させてみます。

分かりやすいように、「TestScript」を書き替えます。 *もし、[VSCode]で「TestScript」が開いていない場合、[Unity]の《プロジェクトウィンドウ》の「TestScript」をダブルクリックします。

ゆにすち(追記してブレイクポイントを設定します)

16行目に
transform.posizion += transform.forward * 1f * Time.deltaTime;
を書き足します。
*今は意味が分からなくてもよいです。時間とともに+Z方向移動を意味します。

また、エディターのガター部分(行番号の左)をクリックすることで、ブレイクポイント(その行に来るとプログラムを止めるマーク)を配置します。今回は、追記した行(16行目)に置きます。

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

上図のようにデバッグの開始をクリックすることで、デバッグモードが実行されます。

これで、[VSCode]側のはデバッグスタンバイ状態にできました。ステータスバーがオレンジ色になっている状態を指します。

デバッグ実行([Unity]側)

ゆにすち(「Enable debugging fotr this session」をクリックします)

[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.

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

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

デバッグ中は[Unity]の画面を移動できなくなるので、任意の位置に移動させたのち、再生ボタンをクリックします。

ゆにすち(ブレイクポイントで止まります)

[VSCode]では、ブレイクポイントを置いた行でプログラムが一時停止しているのがわかります。

継続ボタンをクリックするか、F5キーを押すことで停止していたプログラムが走り出し、再びブレイクポイントで一時停止します。 [Unity]側では、「キューブ」が+Z方向に少しずつ移動しているのが見て取れるかと思います。

これで、[VSCode]と[Unity]を連携させ、ブレイクポイントで止めることができるようになりました。

まとめ

今回は、[Unity]と[VSCode]を連携させ、デフォルトエディターの設定と、ブレイクポイントの連動をさせることができました。かなり長丁場になりましたが、得られた結果は地味です。。。(必要なことですが)

次回予告

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

コメント