【Roblox】VS Codeでの開発環境構築(aftman + Rojo + Wally)【Cursor対応】
前書き
こんにちは!ambrでRoblox開発をしているhoshino(Facebook)です!
以前、「WebエンジニアからRobloxクリエイターになる」というタイトルで、Roblox開発とWeb開発の類似点をご紹介したかと思います!
前回の記事では概念的な紹介が多く細かなところまで説明できなかったため、本記事では、Roblox StudioとVisual Studio Codeを連携して、かつ快適にコーディングができる環境を構築するための方法について解説します。
本記事の主な対象者は以下の方となります。
- Roblox開発でのコーディングをVisual Studio Codeで行いたい方
なお、Robloxに全く触れたことがなければ、先に公式のチュートリアルを眺めてからの方がより理解が深まるかもしれません。
全部やる時間が取れない場合、Creating Your First Experienceだけでも見ておくことをおすすめします。
上記に当てはまらない人も、ちょっとでも気になった方はぜひご覧いただけますと幸いですm(_ _)m
本題に入る前に
本記事の方法はあくまで私が採用している方法にすぎません。
外部エディタを使う方法には、他にもArgonを使うやり方や、(まだ早期プレビューではありますが)Studio Script Syncを使うやり方なども存在します。
是非、自分にあった方法を見つけていただければと思います。
本題: Roblox開発をVisual Studio Codeで行う
本題です。本章ではまず初めに、導入する各種ツールについてご紹介します。その後、各種ツールの導入方法について、実際にプロジェクトと連携させながら解説します。
なお、Roblox Studio及びVisual Studio Code自体やそのインストール方法については、本記事においては既知の事項とし特に説明しません。
導入する各種ツールの説明
-
- ツールチェインマネージャーです。各種ツールのインストールに使います。
-
- Roblox Studioからソースコードを切り出して管理するためのツールです。
-
- パッケージマネージャーです。各種ライブラリのインストールに用います。
-
- Visual Studio Codeの拡張機能です。Roblox開発で用いるLuauの整形に用います。
-
- Language Serverです。コード補完などが強化されます。
手順
1. aftmanのインストール
まずはaftmanのインストールです。
リリースページから使っているOSに合わせた最新のファイルをダウンロードして、aftman
ファイルのあるディレクトリで以下のコマンドを叩きましょう。
./aftman self-install
これで、aftmanのインストールは完了です。
早速、Rojoを入れて最低限の環境構築をしてみましょう!
2. Rojoのインストール
まずは作業用ディレクトリを作りましょう。本記事ではtemp
という名前で作成しました。
作ったら、先の作業のことも考慮し、Visual Studio Codeでそのディレクトリを開きましょう。
開いたらVisual Studio Codeの内蔵ターミナルを起動し、以下のコマンドを叩いてください。
(内蔵ターミナルを開いた直後であれば作業用ディレクトリの中にいるはずですが、もし違うところにいる場合は作業用ディレクトリに移動してください。)
aftman init
aftman add rojo-rbx/rojo
aftman install
うまく行った場合、フォルダ内にaftman.tomlという名前のファイルが生成されているはずです。
aftman.tomlには、以下のような内容が記載されています。
# This file lists tools managed by Aftman, a cross-platform toolchain manager.
# For more information, see https://github.com/LPGhatguy/aftman
# To add a new tool, add an entry to this table.
[tools]
rojo = "rojo-rbx/rojo@7.4.4"
# rojo = "rojo-rbx/rojo@6.2.0"
上記を確認したら、次はVisual Studio Codeに以下の拡張を入れましょう。
Rojo - Roblox Studio Sync
rojo
コマンドを叩かなくても、Ctrl (Cmd) + Shift + P
からいくつかの処理を呼び出せるようになります。
ここまででVisual Studio Code側の作業は一旦終わりです。
実際に同期する前に、Roblox Studio側にもプラグインをインストールしましょう。
方法はいくつかありますが、ここではRoblox公式が提供しているCreator Store経由でのインストール方法をご紹介します。
こちらのページに移動し、「Try in Studio」をクリックしましょう。
Roblox Studioがインストールされていれば起動し、プラグインがインストールされるはずです。
Roblox Studioでアイコンが出ていればインストールできています。
3. Rojoによるスクリプト同期
さて、ここまででRojoのインストールは終わったので、実際にスクリプトを同期してみましょう!
(なお、Rojoを使ってRoblox Studioの外部に切り出せるのはスクリプトだけではないのですが、本記事ではスクリプトにのみ焦点を絞って解説します。)
まずは、Roblox Studioを起動し「新規バーチャル空間」をクリックして新しいバーチャル空間を作成し、特に編集せずにそのままRobloxに保存しましょう。
このバーチャル空間が同期対象となります。
次に、Visual Studio側の同期設定をしましょう。
先ほど作成した作業用ディレクトリ(本記事ではtemp
)をVisual Studio Codeで開きます。
開いたら、Ctrl(Cmd) + Shift + P
を同時に押し、出てきた入力欄にRojoと打つと、「Rojo: Open Menu」という候補が出てくるのでクリックします。
そしたら、一覧から「Create One Now」をクリックしましょう。
すると、テンプレートのプロジェクトが生成されるはずです。
その中のdefault.project.jsonが何を同期するかを制御しているファイルです。もちろんそのまま使ってもいいのですが、今回は以下の条件を満たすように少し書き換えてみましょう。
- Roblox Studio側の主要なサービス配下に対し、Visual Studio Code側の同名のフォルダ配下が同期するようにする
- スクリプト以外を同期しない
書き換えたものが以下になります。
{
"name": "temp",
"servePort": 34872,
"tree": {
"$className": "DataModel",
"ReplicatedStorage": {
"$className": "ReplicatedStorage",
"$ignoreUnknownInstances": true,
"$path": "src/ReplicatedStorage",
"Packages": {
"$path": "Packages"
}
},
"ReplicatedFirst": {
"$className": "ReplicatedFirst",
"$ignoreUnknownInstances": true,
"$path": "src/ReplicatedFirst"
},
"ServerScriptService": {
"$className": "ServerScriptService",
"$path": "src/ServerScriptService"
},
"ServerStorage": {
"$className": "ServerStorage",
"$ignoreUnknownInstances": true,
"$path": "src/ServerStorage"
},
"StarterPlayer": {
"$className": "StarterPlayer",
"StarterCharacterScripts": {
"$className": "StarterCharacterScripts",
"$path": "src/StarterCharacterScripts"
},
"StarterPlayerScripts": {
"$className": "StarterPlayerScripts",
"$path": "src/StarterPlayerScripts"
}
}
}
}
なお、細かな構文はRojo公式をご参照いただければと思いますが、以下については特記しておきます。
src下のディレクトリ構成も、default.project.jsonに併せて以下のように変えましょう。
この後Wallyを導入することも考慮し、ついでにsrcと同階層にPackagesフォルダも作っておきましょう。
├─Packages
└─src
├─ReplicatedFirst
├─ReplicatedStorage
├─ServerScriptService
├─ServerStorage
├─StarterCharacterScripts
└─StarterPlayerScripts
ここまでできたら、一旦同期を試してみましょう。
Ctrl(Cmd) + Shift + P
→ 「Rojo: Open Menu」から、「▷ default.project.json」を選びましょう。
すると、Visual Studio Code側(Rojo側)が同期待機状態になります。
次に、Roblox Studio側で、Rojoの設定画面から「Connect」を押しましょう。押すとAcceptするか確認されるので、Acceptしましょう。
なお、Rojoの設定画面がない場合は、プラグインタブから表示しましょう。
同期がうまく行っていることを確認するために、Visual Studio CodeのServerScriptServiceフォルダに、以下の中身の「test.server.luau」というスクリプトをおいて試してみましょう。
print("Hello🍉")
Roblox Studioを開くと、ExplorerウィンドウのServerScriptService配下に以下の画像のようにScript(サーバースクリプト)が配置されていることが確認できます。
Roblox Studioでテスト実行して、出力にHello🍉と表示されれば同期が成功しています!
重要な留意事項
補足
「test.server.luau」は同期されたRoblox Studio上では「test」という名前のScriptになっているかと思います。
この変換はファイル名によって規則的に行われます。
特に以下の3つは早めに覚えておくと便利です。
- 「文字列.server.luau」 → Script(サーバースクリプト)
- 「文字列.client.luau」 → LocalScript
- 「文字列.luau」 → ModuleScript
参考:公式ドキュメント
4. Wallyのインストールとライブラリの導入
さて、Rojoの導入が終わり、スクリプトの同期が可能になりました。
外部エディタを使えるようになったメリットの1つとして、ライブラリの管理がパッケージマネージャでできるようになることが挙げられます。
ここでは、例としてRobloxにOption型(補足:関数型言語でよく見るSome of 'a | None
のことです)を導入するSleitnick氏のライブラリの同期をゴールとして進めてみましょう。
まずは、先ほど導入したaftmanを使ってWallyをインストール & 初期化しましょう。
作業ディレクトリで以下を叩きましょう。
aftman add UpliftGames/wally
aftman install
wally init
うまく行った場合、以下のようなwally.toml
が生成されているはずです。
[package]
name = "hoshino/temp"
version = "0.1.0"
registry = "https://github.com/UpliftGames/wally-index"
realm = "shared"
[dependencies]
[dependencies]
に、上述のOption型のライブラリをインストールするための設定を追加しましょう。
なお、Wallyを使って自作パッケージを公開するわけではないので[package]
は未編集で良いですが、private = trueを追加しておくと万が一の誤publishを防げます。
[package]
name = "hoshino/temp"
version = "0.1.0"
registry = "https://github.com/UpliftGames/wally-index"
realm = "shared"
private = true
[dependencies]
Option = "sleitnick/option@1.0.5"
最後に、作業ディレクトリで以下を叩くと、先ほど用意したPackageフォルダにライブラリがインストールされます。
wally install
ここまでうまく行っていれば、別のスクリプトから以下で呼び出せるようになっています。
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Option = require(ReplicatedStorage.Packages.Option)
5.Visual Studio Code拡張機能のインストール
最後に、いくつかの拡張機能を追加しましょう。今回は私が使っているフォーマッタとLanguage Serverを入れてみます。
インストールが終わったら、
Ctrl(Cmd) + Shift + P
を同時に押した後、出てきた入力欄にLuauと打つと、「Luau: Regenerate Rojo Sourcemap」という候補が出てくるのでクリックします。
これで、Luau Language Serverの導入は完了です。
フォーマッタについては、他に競合する拡張機能が入っていなければ問題なく動きます。
後はお好みで保存時の自動整形などの設定をしましょう!
後書き
お疲れ様でした!ここまで読んでいただきありがとうございます!
ここまでで、Roblox開発におけるコーディングをVisual Studio Codeで快適に行うための設定が無事完了しているはずです!
この記事が少しでもお役に立てますと幸いです。
Discussion