Unity projectをVSCodeとGit Graphで簡単にバージョン管理する
VRChatとかをきかっけにUnityを触り始めた人たちにGitをおすすめしたかった。いきなりGitコマンド覚えるのは大変なので多くのUnityユーザーが使っているVSCodeでGitの操作をする流れをメモ。Git Graphという拡張機能を使うと↑みたいに変更履歴が見やすくておすすめという話が本記事のハイライト。
GitやGitHubの便利さ
色々便利なのだけど例えば以下の場合に役立つと思う。
- 作ってる最中に失敗して時間を巻き戻したくなったとき
- 何かを追加する前にうまくいってた状態をとっておきたいとき
- お友達と一緒に作品を作りたいとき
- 急にパソコンが壊れて新しいパソコンで作り直す必要があるとき
要はGitでファイルの変更履歴をバージョンとして記録して、GitHubでオンライン上に公開できることが便利だと思う。 詳しくは下記記事がわかりやすくまとめられていると思います。
VSCodeのインストール
VSCodeは主にUnityで扱うスクリプトを編集するソフト。追加機能がたくさんあって便利にカスタマイズできる。今回はGit関連の機能について紹介。
下記リンクからVSCodeをダウンロード、インストールする。
下記記事の手順で設定をするとUnity上でシェーダーとかスクリプトをダブルクリックしたときVSCodeで開くようにできる。記事ではOSがUbuntuだけどWindows版Unityでも一緒。多分WindowsだとExternal Script Editorを選択するときBrowseで探さなくてもVSCodeが選択肢に出てくるはず。
VSCodeは色々便利にカスタマイズできるので「VSCode Unity」とかで検索するとおすすめの構成とか記事が見つかると思う。
Git for Windowsのインストール
VSCodeを起動すると左側に枝分かれしたGitのマークが表示される。クリックするとGitが入ってないよと言われるのでDownload Git for Windowsをクリック。
Standalone Installerをダウンロード、インストールする。
追記(2022/06/28): お友達のTiryohさんからインストール時におすすめの設定について記事にしていただきました。
リモートリポジトリの作成
ローカルのGitで記録した変更履歴をオンライン上に保存するため、保存先になるリモートリポジトリを作成する。ここで作成したリモートリポジトリにUnity projectがそのまま保存されることになる。リモートリポジトリを作れるサービスは色々あるけど今回はGitHubを使う。
GitHubアカウントを持っていない場合はGitHubトップページ右上のSign upボタンからアカウント登録。IDやパスワード、メールアドレスを登録して届いたメールを認証したりする。
アカウントができたら右上の+ボタンをクリック、New repositoryを選択。
Repository nameに作成するUnity projectと同じ名前を入力する。今回は適当にunity_testという名前にした。Publicを選択するとオンライン上で人様からも見えるようになる。Privateは自分だけ見れるようにできる。
Add .gitignoreの項目でUnityを選択しておく。.gitignoreとはGitで変更履歴を残さないファイルを書いておくリスト。文字通りGitが無視(ignore)するリスト。特にGitHubリポジトリを公開する場合は有料のアセットとかもアップロードしているとまずいのでこのリストに書き足したりする必要がある。
例えばVRChatの場合Assets内のVRCSDKというフォルダはリポジトリに保存しなくていいので.gitignoreに/Assets/VRCSDK*と書いておく。特にUnityはVRCSDKというフォルダとセットでVRCSDK.metaというファイルが生成されるので末尾に*とつけておくとVRCSDKで始まる全てのファイルを無視できる。
最後にCreate repositoryをクリックしてリモートリポジトリの完成。さっき作った.gitignoreだけがある状態。
ローカルリポジトリの初回設定
オンライン上にアップする先のリモートリポジトリができたので今度はパソコン上で作業するためのローカルリポジトリを作成する。今回は2種類の方法を紹介。
- 方法1: 初めてリモートリポジトリにアップする場合
- 先ほどの手順で空のリモートリポジトリを作成してUnity projectをアップロードする場合
- 方法2: リモートリポジトリをローカルにcloneする
- すでに誰かがGitHub上で公開しているUnity projectをパソコンにダウンロードする場合
方法1: 初めてリモートリポジトリにアップする場合
ローカルリポジトリの作成
リモートリポジトリと同じ名前でUnity projectを作成してProjectのフォルダをVSCodeで開く。開き方はなんでもいいけど例えばウィンドウ左上に表示されているFileからOpen Folderを選択すれば開くフォルダが選べる。
開くとファイルの作者を信用するかどうか出ると思うのでYes。己を信じろ。
画面左のGitアイコンを選択してInitialize repositoryをクリック。これでこのフォルダ内にあるファイルがGitで管理されるようになる。
ローカルリポジトリにリモートリポジトリを登録
ローカルリポジトリのファイルをリモートリポジトリにアップロードできるように登録する。…マークをクリックしてRemote/Add Remote...をクリック。
Add remote from GitHubをクリック。
GitHubへのsign inを求められるのでAllowするとブラウザが起動したりしてYesとかOKとか押してすべてを受け入れる。
登録したGitHubアカウントで作成したリポジトリ一覧が出てくるので今回使用するリポジトリを選択する。
リモートネームを求められるのでoriginと入力。
Checkout toをクリック。
origin/mainを選択。
これでリモートリポジトリの状態がローカルリポジトリに反映された。ファイル一覧を見るとUnity projectで生成されたファイルの他にリモートリポジトリで作成した.gitignoreがローカルリポジトリにダウンロードされていることがわかる。
方法2: リモートリポジトリをローカルにcloneする
作成したリモートリポジトリをパソコンにダウンロードする。ちなみにこの作業のことをcloneするという。
VSCodeを起動すると左側に何かが枝分かれしたようなGitのアイコンがあるのでこれをクリック。Clone Repositoryをクリックすると画面上部にClone from GitHubが表示されるのでこれをクリック。ブラウザが起動してGitHubのログインを求められたりするので色々ぽちぽちして進める。
ログインするとcloneできるいろんなリモートリポジトリが表示されるので先ほど作成したものを選択する。一番上が検索欄になってるのでみつからないときはユーザー名やリポジトリ名を入力して絞り込むことができる。選択すると保存場所を聞かれるので好きなところに置く。
cloneできると右下にOpenボタンが表示されるのでクリックすると先ほどcloneしたリポジトリのあるフォルダをVSCodeで開くことができる。
Git Graphのインストール
Gitで記録した変更履歴がばーっと一覧で見れる便利な拡張機能。左の欠けたWindowsみたいなアイコンをクリックして左上の検索欄にgit graphを入力。Git Graphを選択してinstallボタンをクリック。
installできるとGitの画面に小さなGit Graphのアイコンが表示されるのでクリック。まだ最初の記録しかないけどGitで記録した履歴が見れる。
ユーザー名とメールアドレス登録
GitHubにアップロードするためにGitHubに登録したユーザー名とメールアドレスを登録する。Git Graphの画面を開いて右上の歯車マークをクリック。
Add user detailsをクリックしてNameとEmailを入力。
Gitで変更履歴を記録する
Add: 記録対象の追加
addコマンドは変更履歴を記録するファイルを追加する操作。addしないファイルは変更があっても記録されない。新しく追加されたファイルや前回の記録から変更があるファイルの一覧がChangesに表示されるのでプラスボタンをクリックすることでaddできる。
Changes横にあるプラスボタンで全てのファイルをAddできる。
ちなみによく見ると.gitignoreに記述されているファイルはこのChangesに表示されていないことがわかる。記録したくないファイルは.gitignoreに書いておけばうっかりAddすることがなくなる。
Commit: 変更履歴の作成
Source controlの横にあるチェックマークをクリック。
画面上部の入力欄にcommit messageを入力する。commit messageは変更履歴と一緒に残せるメモみたいなもの。「写真を追加した」とか「バグを修正」とかわかりやすいメッセージを書いておくと後から復旧させる時とか便利。今回はとりあえずUnity projectの初回生成されたファイルたちを追加するので「Add project files」とか書いてみた。わかりづらいのでよろしくないmessage。
Git Graphを見ると先ほど入力したmessageとともにcommitが表示されている。origin/mainはリモートリポジトリの最新のcommit。ただのmainはローカルリポジトリの最新のcommit。ローカルリポジトリで新しいcommitを作成した直後なのでリモートリポジトリよりローカルリポジトリのcommitが一歩進んでいる状態。
Push: commitをリモートリポジトリにアップロード
作成したcommitをオンライン上にあるリモートリポジトリへアップロードする。...をクリック後に表示されるPushをクリック。ちなみに左側に表示されているSync Changesを押してもOK。
Git Graphを見るとリモートリポジトリとローカルリポジトリの最新バージョンが同じcommitになったのでorigin/mainとmainが一つに表示されている。
GitHubのリモートリポジトリがあるページを見てみるとaddしたファイルたちが表示されていることがわかる。リポジトリページの開き方はログインして右上にある自分のアイコンをクリックしてプルダウンメニューに表示されたYour repositoriesをクリックすればリポジトリ一覧が表示される。
Fetch: リモートリポジトリの更新情報を取得
例えばお友達と共同で開発してる場合、お友達がpushした内容を自分のローカルリポジトリで確認したい時があると思う。そんなときは...をクリック後に表示されるFetchをクリック。
すると今度はリモートリポジトリ(origin/main)がローカルリポジトリ(main)より一歩進んだ状態になっていることがわかる。
Pull: リモートリポジトリの更新内容をローカルリポジトリに反映
Fetchによってリモートリポジトリが更新されていることがわかったので更新内容をパソコンで確認するためにローカルリポジトリに更新内容を反映させる。...をクリック後に表示されるPullをクリック。
リモートリポジトリ(origin/main)の内容にローカルリポジトリ(main)の内容が追いついたのでそれぞれが一つに表示されている。
ちなみにお友達はUnityのSceneに球体を追加してAdd、Commit、PushをしてるのでこちらもPull後にSceneを開くと球体が追加されていることがわかる。
Create branch: 変更履歴を分岐させる
Unity projectに新しく変更を追加したいけど今までの記録もすぐ復元できる状態にしておきたいときはbranch機能が便利。文字通り変更履歴を枝分かれさせることができる。branchの便利さについては下記記事が参考になります。
Git Graphに表示されているcommitを右クリックしてCreate branch。
作成するbranchに名前をつける。今回はsceneに立方体を追加しようと思うのでadd_cubeと名付けてみた。
Git Graphにも表示されている。まだ新しいcommitとか作ってないのでmainと同じバージョン。
Checkout: branchの切り替え
main branchから先ほど作成したadd_cube branchに移動する。checkoutとはbranch間を移動することをいう。移動したいブランチ名の上で右クリックしてからCheckout Branchをクリック。
mainからadd_cubeにbranchを乗り換えられた。乗り越えられたことはadd_cubeが太字で表示されていることでわかる。
乗り換えたbranchでcommitを作ってみる。まずはsceneに立方体を追加。
編集したsceneファイルをadd、commit、pushした。add_cube branchが一歩前に進んだ状態になった。
試しにcheckout前のmain branchに戻ってみる。mainの上で右クリックしてCheckout Branch。
今度はmainが太字になっていることを確認。
main branchの最新バージョンではまだ立方体が追加されていないので球体のみの状態であることがわかる。
Merge: 別branchの更新内容をmain branchに統合
add_cube branchで追加した立方体がいい感じだったのでメインで使っているmain branchに統合させたい。add_cube branchを右クリックしてMerge into current branchをクリック。
Yes mergeをクリック。
Git Graphではadd_cubeのグラフがmainと合流していることがわかる。
sceneに立方体が追加されていることも無事確認。add_cubeの変更がmainに反映されていることがわかる。
pushしてリモートブランチにも反映。
ちなみにこのMergeという作業はGitHub上でも行うことができる。「GitHub プルリクエスト」とかで検索すると色々出てくると思う。
Gitコマンドの実行方法
世の中のGitに関する情報はコマンドで操作する手法が多いので最後にコマンドの実行画面について紹介。Git Graphのウィンドウ右上にターミナルのアイコンがあるのでクリックすると下にコマンドの入力画面が表示される。何か調べてコマンドが紹介されていたらここにコピペしてみて。
いかがだったでしょうかというやつ
雑だけどGitとVSCodeを使ってUnity projectの変更履歴を保存、GitHub上で公開するまでの手順を紹介した。GitHubはタスク管理したり共同開発するお友達とやりとりしたりするための便利機能があるので色々見てみてほしい。以前書いたGitHubでタスク管理する方法についてはこちら。
