Visual Studio CodeAdvent Calendar 2024

今から始めるRPGツクールの開発環境構築

Last updated at 2024-12-05Posted at 2024-12-05

はじめに

皆さん、RPGツクールをご存知ですか?
RPG制作ソフトであり、現在に至るまで複数のバージョンが発売されています。

RPGツクール2000
- 2000年発売
RPGツクールXP
- 2004年発売
- この頃からRubyを拡張したスクリプト言語RGSSを使用してゲームを制作可能
RPGツクールVX
- 2007年発売
RPGツクールVX Ace
- 2011年発売
RPGツクールMV
- 2015年発売
- この頃からスクリプト言語がRGSSからJavaScriptに変更
RPGツクールMZ
- 2020年発売

XP,VX,VX AceはRubyを拡張したスクリプト言語RGSS、MV以降のバージョンはJavaScriptを使用してゲームを制作できるのが特徴で、理論上あらゆるゲームを制作可能です。
MZはもちろん、2004年に発売された年期の入ったソフトであるツクールXPを使用したソフトも今なお発売、開発されています。

筆者もRPGツクールXPで作られたとあるゲームのMOD制作のために開発環境を構築しましたが、いくつか躓いた点がありました。
このページでは以下の4つの開発環境をWindowsで構築する方法について記載します。

RPGツクールの購入とインストール
Visual Studio Codeのインストール
Visual Studio CodeでRGSS(Ruby)を開発する環境の構築
- XP,VX,VX Aceの購入者向けの内容です
Visual Studio CodeでJavaScriptを開発する環境の構築
- MV,MZの購入者向けの内容です

想定読者

WindowsのPCを使用している人
RPGツクールに興味がある人
RPGツクールを持っているけど、プログラミング経験が無い人
RPGツクールでスクリプトを触っているけど、開発に苦労している人

RPGツクールを購入する

ツクールストアで購入してください。

購入したら以下のような内容のメールが届きます。

メール内にダウンロードリンクがありますのでそこからファイルをダウンロードしてください。
ダウンロードしたらexeファイルをダブルクリックで実行し、ツクール(とRTP)のインストールを進めてください。
セットアップが完了したらツクールを起動してメールにあるプロダクトキーを入力して認証を完了させてください。
セットアップの詳細は公式サイトにも書いてありますので、そちらも参照してください。

ちょっと高くない?

お値段は2024年11月時点でMV以降は税込み8000円以上、VX系は税込み6000円以上、XP以前も3080円であり安くは無いです。
お値段が気になる人、今すぐツクールが必要な訳では無い人はサマーセールを狙うと良いでしょう。
例年8月ごろに開催されており、ツクールXP,VX,VX Aceが90%OFFで購入できます。
他のツクールも大幅に値引きされていますのでこの機会に買うと良いでしょう。

参考：2024年のサマーセールのリンク

Steamで購入しちゃダメなの?

実はツクールはSteamでも購入可能です。
しかし、Steam版は英語版であり、XPとVXは日本語非対応となっております。
UIが英語になるのはまだいいとして、XPの場合は下の画像のように日本語が文字化けする問題があります。

データベースでアクターなどを編集することが実質不可能になりますので、日本語対応したツクールストア版を購入してください。

VX Ace以降は設定を変えれば日本語を使う事が可能ですが、他のツクールと同様にデフォルトで日本語対応しているツクールストア版を購入した方が良いでしょう。

ちなみに、Steam版のツクールXPは2024年2月に無料で配布されました。
今後も無料セールが来るか分かりませんが、もしセールが来たらツクールの触り心地を知る体験版だと割り切って購入するのも良いでしょう。

ソースコードエディタのインストール

Visual Studio Code(通称：VSCode)を使用します。
VSCodeはMicrosoft謹製のソースコードエディタであり、RGSS(Ruby)やJavaScriptを含むあらゆるコードのプログラミングを強力にサポートしてくれます。
こちらから無料でダウンロード可能です。

ダウンロードページは以下のようになっていますが、左のWindowsをクリックしてください。

exeファイルがダウンロードされますので実行し、インストールを進めてください。
全てデフォルト設定でインストールを進めて大丈夫なはずです。

Windows10より古いバージョンを使用している人

VSCodeの最新版はWindows10以前には非対応なので古いバージョンのVSCodeを使用する必要があります。
以下のサイトを参考に、古いバージョンのVSCodeをダウンロードしてください。
Windows8の場合はバージョン1.70.0なら動きます。

どうしてVSCodeが必要なの?

スクリプトを編集するだけならメモ帳でも可能です。
しかし、VSCodeには以下のような強力なサポート機能があり、プログラミングの効率化やコードの安全性の確保を実現可能です。

文字の役割に応じて色やハイライトを付与してくれる(シンタックスハイライト)
文字の入力時、最終的に入力したい文字列を予測して候補を表示してくれる(インテリセンス)
不適切な文法や非推奨の関数の使用時などに警告を出してくれる(静的コード解析)

実際にVSCode(上)とメモ帳(下)で同じRubyのコードを開いても以下の画像のように見え方が大きく変わります。
文字の役割が明確で、不適切な個所に波線が引いてあるVSCodeの方が見やすいですね。

また、VSCodeではファイル単位だけでなく、ディレクトリ単位でも開けます。
ディレクトリ単位で開くとディレクトリ内のファイル一覧が表示されたり、ディレクトリ内のファイルの範囲で検索が出来たりして便利ですよ。

VSCodeを日本語化しよう

VSCodeには様々な機能を追加する拡張機能がいくつも存在します。
VSCodeのエディターは英語で日本語ではありませんが、Japanese Language Pack for Visual Studio Codeの拡張機能を導入すれば日本語化が可能です。

導入するにはまずは左の4つの四角形からなるアイコンか、Ctrl+Shift+Xで拡張機能のタブが開きます。

拡張機能の検索欄にJapanese Language Pack for Visual Studio Codeや日本語を入力し、インストールしてください。

これで環境構築は終わり?

ここまででRPGツクールとVSCodeのインストール方法は紹介しました。
VSCodeを使用する事でシンタックスハイライトが有効になり、プログラミングをしやすい環境がある程度整いました。
しかし、VSCodeは単体では静的コード解析はしてくれません。
RGSS(Ruby)に至ってはインテリセンスもなく、そもそも初期状態ではVSCodeからスクリプトを編集できません。
RubyやJavaScriptでがっつり開発したい場合はインテリセンスと静的コード解析もあるべきです。
なので、これ以降はこれらの問題を解決し、最高の開発環境を整える方法を紹介します。

RGSS(Ruby)の開発環境の構築

この段落はRPGツクールXP,VX,VX Aceを購入し、スクリプトも触りたい人向けの文章です。
それ以外の方は読み飛ばして大丈夫です。

Rubyのインストール

まずはRubyをインストールします。

上記のページにアクセスし、上の方にあるRuby+Devkit 【バージョン】 (x64)をダウンロードしてください。(2024年11月はバージョン3.3.6-2)

ダウンロードされたexeファイルを実行し、ライセンスに同意してインストールを進めてください。
全てデフォルト設定でインストールを進めて大丈夫なはずですが、インストール後に表示されるMSYS2のインストールは不要ですのでチェックボックスを外してください。

また、Rubyをインストールしたディレクトリを後ほど参照しますので覚えておいてください。

gemのインストール

Rubyにはgemという、簡単に言えば機能を追加するパッケージがいくつも存在します。
今回はインテリセンスを有効にするSolargraphと静的コード解析を有効にするRuboCopのgemを追加します。
まずはスタートメニューからコマンドプロンプトと検索し、これを開いてください。

そして、ruby -vと入力してください。
Rubyのバージョンが表示されればRubyのインストールが成功しており、gemのインストールが可能な状態です。

Solargraphのgemのインストール

Solargraphはインテリセンスを有効にし、下のように入力時に候補を表示してくれます。
コマンドプロンプトでgem install solargraphと入力してSolargraphをインストールしてください。

RuboCopのgemのインストール

RuboCopは静的コード解析を有効にしてくれます。
コマンドプロンプトでgem install rubocopと入力してRuboCopをインストールしてください。

拡張機能の導入

上記で導入したSolargraphとRuboCopをVSCodeで有効にし、インテリセンスと静的コード解析をさせ、VSCodeからツクールのスクリプトを編集可能にするために拡張機能を導入しましょう。
導入したい拡張機能は以下の3つです。
拡張機能の検索欄から名前を入力し、インストールしてください。

Ruby LSP

RuboCopをVSCodeで動かすために使います。

Ruby Solargraph

SolargraphをVSCodeで動かすために使います。

RGSS Script Editor

VSCodeからツクールのスクリプトを編集可能にするために使います。

VSCodeの設定の変更

拡張機能の導入だけではまだSolargraphとRuboCopは動きません。
VSCodeの設定をいくつか変更する必要があります。
左下の歯車アイコンから設定を選択肢、設定の検索でrubyと入力してください。

上記のようにrubyの設定が表示されるはずです。
以下の設定を変更してください。

Ruby Lsp: Formatter
- rubocopに変更
Ruby Lsp: Ruby Executable Path
- Rubyのbinのパスを入力する
- 例：c:\Ruby33-x64\bin
Solargraph: Command Path
- Solargraphのパスを入力する
- 例：C:\Ruby33-x64\bin\solargraph
Solargraph: Diagnostics
- trueに変更

RuboCopの設定ファイルの作成

編集したいスクリプトの上位に存在する適当なディレクトリ(迷ったらゲームプロジェクトのフォルダ直下)に.rubocop.ymlファイルをこの名前で作成してください。(先頭の.を省略したりしない)
作成したらファイルを以下の内容にしてください。

.rubocop.yml

# rubocopの設定ファイル。
# ここでは無効化する設定を書いてある。

# グローバル変数を許可する。
Style/GlobalVars:
  Enabled: false

# ファイル冒頭にマジックコメントが無くても気にしない。
Style/FrozenStringLiteralComment:
  Enabled: false

# 数字 < 0じゃなくて、数字.negative?とかを使わせるルール。数字は等号不等号で比較する方が見やすい人が多そうなのでルールを無効化しておく。
Style/NumericPredicate:
  Enabled: false

# 文字列結合の好みは人によるかと。高速化を目指すならこの設定を有効にする。
Style/StringConcatenation:
  Enabled: false

# シングルクォーテーションが使える文字列はこれを使わせるようにするルール。ダブルクォーテーションでも良いと思うので切っておく。
Style/StringLiterals:
  Enabled: false

# 文字列の配列は普通に書かせる。
Style/WordArray:
  Enabled: false

# eachよりforの方が分かりやすい場面も多いはず。
Style/For:
  Enabled: false

# switch文の記法。
Style/ConditionalAssignment:
  Enabled: false

# if文が見にくくなりそう。
Style/GuardClause:
  Enabled: false

# 値はreturnを付けて返したい派なので切っておく。
Style/RedundantReturn:
  Enabled: false

# ファイル名は気にしない。
Naming/FileName:
  Enabled: false

# クラス名は気にしない。
Naming/ClassAndModuleCamelCase:
  Enabled: false

# 変数名は気にしない。
Naming/VariableName:
  Enabled: false

# x,yみたいな引数も使いたい時があるので引数の文字数は気にしない
Naming/MethodParameterName:
  Enabled: false
  
# クラスの長さは気にしない。
Metrics/ClassLength:
  Enabled: false

# 関数の長さは気にしない。
Metrics/MethodLength:
  Enabled: false

# コードの複雑度は気にしない。
Metrics/CyclomaticComplexity:
  Enabled: false

# コードの複雑度は気にしない。
Metrics/PerceivedComplexity:
  Enabled: false

# abcサイズ超過は気にしない。
Metrics/AbcSize:
  Enabled: false

# ネストの深さ。直しやすい箇所が多そうなので設定を有効にしても良いかも。
Metrics/BlockNesting:
  Enabled: false

これはRuboCopの設定ファイルです。
デフォルトのRuboCopはルールが厳し過ぎるので、上記のようにルールを緩くします。
必要に応じてこちらも参考にして、無効化するルールを追加しても良いでしょう。

VSCodeからRGSSのスクリプトを編集可能にする

以下の作業を行ってください。

VSCodeからゲームプロジェクトのフォルダを開く
左のサイドバーからRGSSのアイコンを選択
Extracts Scriptsを実行

こうする事でScriptsフォルダが作られ、この中にツクールのスクリプトが作られます。
Data/Scripts.rxdataはScriptsフォルダのスクリプトを参照するコードに置き換わり、Scriptsフォルダのスクリプトを編集すればゲームに反映されるようになります。
なお、スクリプトを作成するフォルダを設定から変える事も可能です。
例えばModフォルダの中のMod_Scriptsにスクリプトを作って欲しい時、Rgss Script Editor › External: Scripts Folderの設定を./Mod/Mod_Scriptsに変更してください。

SolargraphとRuboCopの動作を確認

上部のツールバーから表示>問題を選択して問題タブを表示させてください。
ここまでの設定に問題が無ければ問題タブにRuboCopの警告が表示されるはずです。

文字の入力時にもSolargraphが動作してくれているはずです。
これにてRGSS(Ruby)の開発環境の構築は完了です！

JavaScriptの開発環境の構築

この段落はRPGツクールMV,MZを購入し、スクリプトも触りたい人向けの文章です。
それ以外の方は読み飛ばして大丈夫です。

Node.jsのインストール

まずはNode.jsをインストールします。

上記のページにアクセスし、LTS版Node.jsをダウンロードしてください。

ダウンロードされたファイルを実行し、ライセンスに同意してインストールを進めてください。
全てデフォルト設定でインストールを進めて大丈夫です。

npmの初期化

次にnpm(Node Package Manager)の初期化を行います。
まずはスタートメニューからコマンドプロンプトと検索し、これを開いてください。

そして、node -vと入力してください。
Node.jsのバージョンが表示されればNode.jsのインストールが成功しており、使用が可能な状態です。

次にコマンドプロンプトのcdコマンドで編集したいスクリプトの上位に存在する適当なディレクトリ(迷ったらゲームプロジェクトのフォルダ直下)に移動してください。

例：cd "C:\Users\TD12734\Documents\RPGTkool\RPGMV\Project1"

移動したらコマンドプロンプトでnpm initを実行してください。
色々と聞かれますがEnter連打で大丈夫です。

ESLintパッケージのインストール

Node.jsには機能を追加するパッケージがいくつも存在します。
今回は静的コード解析を有効にするESLintのパッケージを追加します。

コマンドプロンプトでnpm install eslintと入力してESLintをインストールしてください。

最後にnpx eslint --initを実行してESLintを初期化してください。
こちらも色々と聞かれますがEnter連打で大丈夫です。
npmとESLintの初期化に成功していたら、以下の画像のようにcdコマンドで移動したディレクトリに以下の4つの物が作られているはずです。

eslint.config.mjs
package.json
package-lock.json
node_modules

eslint.config.mjsはESLintの設定ファイルです。
デフォルトのルールではグローバル変数周りの警告がうるさいので、以下のように編集してください。(rulesを追加しています)

eslint.config.mjs

import globals from "globals";
import pluginJs from "@eslint/js";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  {rules: {
    "no-undef": "off",
    "no-unused-vars": "off"
  }}
];

必要に応じてこちらも参考にして、無効化するルールを追加しても良いでしょう。

拡張機能の導入

上記で導入したESLintをVSCodeで有効にし、静的コード解析をさせるために拡張機能を導入しましょう。
導入したい拡張機能はESLintです。

拡張機能の検索欄から名前を入力し、インストールしてください。
Rubyとは異なり、VSCode側の設定変更は不要です。

動作を確認

VSCodeからゲームプロジェクトを開く

VSCodeからゲームプロジェクトを開きましょう。
こうすることでゲームプロジェクト内のファイル一覧が表示されたり、ゲームプロジェクトの範囲で検索が出来たりして便利です。

ESLintの動作を確認

上部のツールバーから表示>問題を選択して問題タブを表示させてください。
ここまでの設定に問題が無ければ問題タブにESLintの警告が表示されるはずです。

これにてJavaScriptの開発環境の構築は完了です！
MV以降はスクリプトが外部に露出してjsディレクトリに存在しますので、VX Ace以前のようなコピペやファイル読み込み処理は不要です。

まとめ

ツクールストアでツクールを購入してインストール
Visual Studio Code(通称：VSCode)をインストール(1回のみ)
VSCodeを日本語化する拡張機能を導入(推奨、1回のみ)
ツクールに応じて以下の作業をする
- RGSSのセットアップ(RPGツクールXP,VX,VX Aceの場合)
  1. Rubyをインストール(1回のみ)
  2. gem install solargraphの実行(1回のみ)
  3. gem install rubocopの実行(1回のみ)
  4. Ruby LSP、Ruby Solargraph、RGSS Script Editorの拡張機能を導入(1回のみ)
  5. VSCodeの設定の変更(詳細は上記を参照、1回のみ)
  6. .rubocop.ymlファイルを作成(詳細は上記を参照)
  7. VSCodeでサイドバーからRGSSのアイコンを選択してExtracts Scriptsを実行(プロジェクトごとに1回のみ)
- JavaScriptのセットアップ(RPGツクールMV,MZの場合)
  1. Node.jsをインストール(1回のみ)
  2. ゲームプロジェクトのディレクトリでnpm init
  3. ゲームプロジェクトのディレクトリでnpm install eslint
  4. ゲームプロジェクトのディレクトリでnpx eslint --init
  5. ゲームプロジェクトのディレクトリに作られたeslint.config.mjsを書き換え(詳細は上記を参照、推奨)
  6. ESLintの拡張機能の導入(1回のみ)

おわりに

Steam版ツクールが日本語非対応だった罠に引っ掛かったり、VSCodeでインテリセンスや静的コード解析を有効にするのに結構苦労したので環境構築手順を記事にしました。
この記事通りにセットアップすればツクールの開発環境を簡単に構築できるはずです。

また、静的コード解析の警告に従えばプログラミングの経験が豊富でなくとも自ずと良いコードが書けるようになるでしょう。
警告文を検索すれば何が問題であるか理解でき、知識も深まる事でしょう。(ESLintでは親切にもリンクが付いています)

それでは、良きツクールライフをお過ごしください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up