ご挨拶、及び「DataBaseEditor」進捗状況➀

ご挨拶

初めまして、ツール開発担当のShickです。
高校時代の同級生であるshunから誘われた流れで本サークルに参加することになりました。

今は「DataBaseEditor」の開発に着手しており、それが終わったらRPGツクールでの制作や別のツールの開発等を行っていこうと思っています。
※自分は絵とか文章は全く書けません！

DataBaseEditorの再構築について

ツールの作り直しについて、ちょっとだけ技術的な話を含めてお話しします。

今年の4月中旬あたりまで「Javascript」の「jQuery」というライブラリを使用して開発を進めていたのですが、それを止めて「React」という流行りのライブラリとそのUIライブラリである「MUI」を使用して作り直すことになりました。
以下に各ライブラリの利点・変更した理由等を記載します。

Reactの主な利点

• コンポーネントベース(部品毎に分割)で開発が出来、管理・改修がやりやすい
• 画面を再描画する際に、変更された箇所だけ処理される為パフォーマンスが良い
• 画面で使用しているデータが変更された際に、自動で再描画してくれる機能がある
  ⇒通常はコードを細かく書いて制御することになるので開発が大変・バグが出やすい

MUIの利点

• 一からコンポーネントやレイアウトを作る必要がない
• 機能の拡張、レイアウトの変更が容易

まとめ

• 開発の工数を抑えて管理もしやすくなる
• 「DataBaseEditor」を一度リリースした後も機能を拡張しやすくなる
• 別のツールを開発する際にも経験が生きて将来性もある

ツールの機能について

「DataBaseEditor」はRPGツクールMV・MZのデータファイルに対して直接編集を行うツールであり、機能としては現状以下を考えております。

データ編集の機能(右クリックメニューの機能)

• データリスト内で直接データの名前を変更する機能
• 新規のデータを挿入
• 既存のデータを削除(複数選択削除可能)
• 既存のデータを指定した位置に移動(複数選択移動可能)
• 上記データ編集に対しての「IDの置き換え処理」
  ⇒イベント等で使用しているデータのIDも自動的に置き換えする機能

操作に関する機能

• データ編集機能の各種ショートカット機能
• Undo・Redo機能　※ExcelにあるCtrl+zとCtrl+yと同じ感じ

現段階での画面のサンプル

※色等は現段階では仮置きで作っています。

進捗状況

全体的な進捗としては現状20～30%程度かなと思っています。
「操作に関する機能」がまだ未着手で、何より「IDの置き換え処理」がどれぐらいの期間でできるかの見込みがたっていません。

最後に

「DataBaseEditor」に関しての記事が大分空いてしまい申し訳ありません！
再構築する際に色々詰まってしまい、進捗が上がらず記事が書けませんでした。
少しずつですが「React」の書き方に慣れてきており、これからはもう少し定期的に進捗を報告できると思います。

これからも本サークルを何卒よろしくお願いいたします。

開発環境を整える VSCode と Text2Frame のご紹介

はじめに

シナリオを執筆する際、ツクールのエディタに直接記述している方とテキストエディタで文章を書いてから後でエディタにコピペする方、大きく分けてこの二通りの作り方があると思います。

今回は先にテキストエディタで記述している方に向けて便利なツールを紹介する記事となっています。

導入するツール（プラグイン）は 2 つ 「Text2Frame」と「Visual Studio Code」です。それぞれのリンクを張っておきます。

• Text2Frame
  https://github.com/yktsr/Text2Frame-MV

• Visual Studio Code
  https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Text2Frame

外部のファイルに記述したテキストをツクールのエディタに読み込んでくれるプラグインです。専用のタグを記述することでメッセージ以外のコマンドも読み込むことができます。

言葉だけでは分かりづらいので実際に使用しているところを動画に撮影しました。

便利ですね！だけどタグを打ち込むのが面倒くさい！と思った方も多いハズ
そこで Visual Studio Code （以下 VSCode）の出番となるわけです。

Visual Studio Code

プラグインの開発からデバッグ、ツクールのプラグイン開発に関わらずありとあらゆる分野で活用されているプログラマー向けのコードエディタですが、高機能なメモ帳としても活用できます。

今回は高機能なメモ帳として活用していくための機能を少し紹介したいと思います。

どんなことができるのか

すごい使い方をしている人では藤井太洋さんというSF作家さん。
こちらの方は小説執筆用にかなりカスタマイズをして使用されているみたいです。

https://twitter.com/t_trace/status/1536875267615993856?s=20&t=xBBG4mY6NwklXkAOEFyvzA

関連記事
https://forest.watch.impress.co.jp/docs/review/1417878.html
https://logmi.jp/tech/articles/325715

ここまでのことをするには VSCode の拡張方法を詳しく知る必要がありますし、自分もそのあたりのことは詳しくありませんので紹介するに留めさせていただきますが、こんなこともできるんだ！という可能性を感じていただければなと思います。
（ツクールのシナリオの記述がしやすくなる拡張、誰か作ってくれないかなぁ）

入力補完（コードスニペット）

VSCode の強力な機能として入力補完を行うコードスニペットを独自に定義することができることです。コードスニペット？なんのことやらという感じだと思いますが一般的にはスニペットとは断片という意味で、辞書登録機能のようなものです。

辞書登録と違うのは完全に入力して変換をするというわけではなく、一部の文字を入力するだけで、補完される候補として提案してくれるということです。

これも言葉では伝わりづらいため動画にしました。

また、あくまでVSCodeのワークスペース（ツクールのプロジェクトみたいなもの）にしか影響が無いということです。これによってゲームのプロジェクトごとに固有の設定をすることが可能です。

たとえば登場するキャラクターはゲームによって異なってきます。
プロジェクト固有のプラグインやコモンイベントを呼び出すこともあるでしょう。

それを辞書登録してしまうと、他のプロジェクトでゲームを作るときに邪魔になります。
個別のプロジェクトごとに設定できたほうが都合がいいわけです。

コードスニペットの定義方法

.vscode フォルダの中に任意の名前で拡張子 .code-snippets というファイルを置きます。中身は次のように記述します。

{
	"unique name":{
		"prefix": "namebox",
		"body": "<Name:$1>",
		"description": "名前欄の指定"
	},
}

• unique name
  任意の文字列です。スニペットを識別するために被らない名前である必要があります。

• prefix
  ここに記述された文字列を入力した際に、候補として提案されるようになります。

• body
  ここの内容が、スニペットを選択した際にエディタに記述されます。

• description
  スニペットの説明です

説明されただけでは分かりづらいと思いますので、コードスニペットの定義ファイルを含め、Text2Frame の設定も行っているプロジェクトを配布します。試しに使ってみてください。

.vscode というフォルダがある場所を、VSCode で開くだけでOKです。
インストール方法などは特に難しいことは無いと思いますので割愛します。わからなかったら調べてみてくださいね。

ゲーム開発する上で VSCode は様々な事に活用することができます。
今回は Text2Frame との連携についてでしたが、以前記事にした git と連携することも可能です。開発環境を整える第一歩として VSCode の導入はいかがでしょうか。

それではよいツクールライフを！