Zenn
🔄

Argonを使ってRoblox StudioとVS Codeを同期する

2024/07/20に公開
ゲーム開発
VS Code 拡張機能
Roblox
argon
tech

今日はRoblox StudioというRobloxゲームの開発プラットフォームをVS Codeと同期できる便利なプラグインArgonの簡単なセットアップ方法をまとめ、実際にRoblox StudioとVS Codeを同期する手順を説明していこうと思います！

https://create.roblox.com/

Argon

公式ドキュメントに記載の通り、Roblox Studioを外部エディタやバージョン管理ツールなどと同期できるプラグインです。

What is Argon?
It's a feature-full tool that allows use of external editors, version control systems, automated workflows and help manage both small and huge projects. It's made for professional users as well as for beginners!

Roblox Studio上のエディタではできることが限られており、バージョン管理も基本的にできません。そこでこのArgonを使って、Roblox Studioと自身のエディタを同期すれば、コーディングが快適になり、またバージョン管理もできるメリットがあります。

また、既存のエディタで使用したいという開発者にとっても非常に便利なプラグインになっています。

Argonのインストール

今回はVS Codeで同期する方法を紹介します。

ArgonはRoblox StudioとVS Codeの両方にありますが、インストールはVS Codeからのみで大丈夫です。VS Codeからインストールすれば自動でRoblox Studio側にも追加されるためです。
手順も簡単で、VS CodeのエクステンションからArgonを検索して以下のものをインストールするだけです。

VS Codeでインストールが完了すれば、Roblox Studio側で以下のようにArgonがインストールされているかと思います。

VS Code側での初期設定

次に、VS Code側で同期するディレクトリや設定ファイルを用意します。

手順は公式ドキュメントの内容で進めます。

https://argon.wiki/docs/getting-started/new-project#project-initialization

  1. 任意のプロジェクトディレクトリ（私の場合は'Argon'）を作成してVS Codeで開きます。

  2. cmd(winは cntl)+shft+PでVS Codeのメニューを開き、以下の'Argon: Open Menu`を選択します。

  1. 'Init'を選択します。

  1. その後のproject name、project template、project optionsはデフォルトの設定で進めます。


project name


project template


project options

  1. 完了するとプロジェクトディレクトリに以下のディレクトリとdefault.project.jsonなどが作成されます。また、default.project.jsonに以下のような内容が記載されているのも確認できます。

なお、default.project.jsonではRoblox StudioとVS Codeのディレクトリのマッピングなどを設定しています。詳細はドキュメントから確認できます。

https://argon.wiki/api/project#project-file

Roblox StudioとVS Codeを同期する

  1. VS Code側で、cmd(winは cntl)+shft+PでVS Codeのメニューを開き、'Argon: Open Menu`を開いて以下の'Serveを選択します。

  1. 設定ファイルの選択に移るので、先ほど作成されたdefault.project.jsonを選択します。

  1. 'serve options'はそのままの設定で進みます。

これでVS Code側がServerとしてlocalhost:8000でServeした状態になります。

  1. 次はRoblox Studio側でConnectします。Roblox StudioのPLUGINタブからArgonを選択すると以下のようなメッセージが表示されるので、'Connect'を選択します。

  1. 以下のように'Synced'と表示されれば接続成功です。

同期確認

これでRoblox StudioとVS Codeはリアルタイムで同期されたので、双方向の動機状態を確認してみましょう。

現時点でRoblox StudioとVS CodeのいずれのServerScriptServiceにもファイルがないことを確認してください。


Roblox Studio


VS Code

Roblox Studio → VS Codeの同期を確認

  1. Roblox Studio側のServerScriptService横にある+マークをおし、'Script'を選択してください。以下のようなスクリプトファイルが作成されると思います。

  1. VS Code側でServerScriptServiceを確認してください。以下のようにScript.server.luauというファイル名でRoblox Studioのスクリプトと同じ内容のファイルが作成されているのが確認できます。

VS Code → Roblox Studioの同期を確認

  1. VS Code側で、先ほど作成されたScript.server.luauを以下のように編集して保存します。

  1. Roblox Studio側でServerScriptService/Scriptを確認し、以下のように変更内容が同期されているのが確認できます。

以上で、Argonを使ってRoblox StudioとVS Codeが同期できたので、スクリプトはVS Codeでコーディングできるようになりました。

まとめ

Argonというプラグインを使ってRoblox StudioとVS Codeを同期していきました。

ドキュメントを参考に慣れるとproject.jsonをカスタマイズしてより高度な同期設定などもできるので、ぜひご活用ください！

Discussion