PictureAnimationプラグインを活用してピクチャの差分を表示する

ピクチャの表示（移動）で差分表示するのをやめよう！

ピクチャの差分の表示、どうやって実装していますか？
ツクールのコマンドだけで実装すると、こういった実装方法になるかなと思います。

しかし、ピクチャの表示コマンドから毎回表示する画像を選ぶのは非常に面倒です。

単純に表示を切り替えるだけならまだいいのですが、フェードして切り替えたい場合は番号を変更したピクチャを表示して、ピクチャの移動を使用して透明度を変更してと作業コストが何倍にも膨れ上がっていきます。

偉そうに言っていますが私は先日までこの方法で実装をしていました。

知り合いのゲーム制作者からトリアコンタンさんが作成した PictureAnimation プラグインを使用して簡単に差分を表示する方法を教えてもらったので本人の許可をもらって記事にさせていただきました。

PictureAnimation を使用した場合

次の３枚の画像を切り替える処理を PictureAnimation プラグインを使用して作ってみます。（最初の１枚と３枚目は同じ画像ですが、ファイル名が異なっています。）

実装済みの状態

このように「アニメーションの準備」コマンドの後に「ピクチャの表示コマンド」を呼び出し、その後は表示を切り替えたいタイミングに「アニメーションセル設定」を呼び出すだけです。

ファイルの構成

pictures フォルダの中にあるファイルの構成はこうなっています。
注意点としてファイル末尾の数字は「0」からはじめる必要があります。

動かすとこうなります

それぞれのコマンドの設定について

細かな設定をみていきましょう。

アニメーションの準備

セル数

アニメーションに使用するピクチャの枚数を設定します。
今回は3枚なので3にします。枚数にあわせて変更してください。

フレーム数

アニメーションさせる際の１フレーム当たりの表示フレーム（だと思います）
今回は差分表示なので設定の必要はないと思います。

セル配置方法

今回は「number (連番)」に設定します。
こうすることでばらばらの画像を１連のアニメーションとして認識してくれるようになります。

フェード時間

ピクチャが切り替わる際のフェード演出のフレーム数です。
フェードが不要な場合は「0」に設定します

アニメーションセル設定

ピクチャ番号

ピクチャの表示で設定したピクチャ番号を指定します

セル番号

変更したいセル番号を指定しますが、次の番号のピクチャを表示したい場合は「0」を指定します。

ウェイトの有無

切り替わる際に、フェード処理中はイベントの実行を待機します。

PictureAnimation 便利だね

PictureAnimation プラグインを使用して差分の表示をしてみましたがいかがでしたでしょうか。この機能を使えば立ち絵の表情変更なんかも簡単にできそうですね。

PictureAnimation という名前なのでアニメーションを使用しない制作者には縁がないものだと思っていたのですが、こんな便利な機能があるとは……。同じように本プラグインの有用性をご存じない方も多いと思いましたので共有させていただきました。

今回紹介したプラグインは下記リンクからダウンロードできますので、使ってみてくださいね。

https://github.com/triacontane/RPGMakerMV/blob/mz_master/PictureAnimation.js

補足　未使用ファイルを除外する

1枚目以外の画像がデプロイメント時の「未使用ファイルを除外する」で削除されてしまいます。 未使用ファイルを除外するオプションを使用する場合はExcludeMaterialGuard.js を併用して、素材が削除されないようにするか、使用しないコモンイベントなどに素材を指定するといいでしょう。

こちら plasma さんより補足いただきました。
ありがとうございます！

宣伝

RPGツクール公式より、幣サークルの開発した「Database Cleanup Tool」が販売されました。おかげさまで使用者には大変好評のようです！

https://x.com/tkool_dev/status/1707252543418663002?s=20

先日アップデートにより処理が重くなってしまう問題や、制御文字に関する機能が追加されています。売上は幣サークルの活動資金になりますので購入していただけると大変ありがたいです。

何卒よろしくお願いいたします。

記事を書いた人
shun

Gitの導入方法⓷　Git・GitHub・SourceTreeの設定・操作方法編

記事の概要

「Gitの導入方法②　SourceTreeの導入編」の続きで、この記事では「Git・GitHub・SourceTreeの設定・操作方法」をまとめています。

※Gitの導入方法②は最下部の「前の記事」で読めます。

ローカル環境にリモートリポジトリを作成する方法

インターネットを使用しないローカルPC、またはローカルネットワーク上のサーバーにリモートリポジトリを作成し管理する方法

リポジトリ：ファイルを管理する場所
リモートリポジトリ：サーバに配置して複数人で共有するためのリポジトリ

※「ローカル環境にリモートリポジトリを作成する方法」と
「リモートリポジトリに対してファイルを追加/更新する方法」に分けています

Git Bashでリモートリポジトリを作成

リモートリポジトリにするフォルダを用意する

このフォルダは更新情報だけを保持するフォルダなので、作業用としては使用しないでください。

cdコマンドを使用し、リモートリポジトリにするフォルダに移動する

「Git Bash」を開き、以下のコマンドを実行してください。

• cd 'C:\Git\TestRepository'
  ※cdの後の部分を用意したフォルダのパスに変更してください。
  

git initコマンドでリモートリポジトリ作成

• git init --bare --shared=true
  

画像のようにフォルダ内にファイルが配置されていたらリモートリポジトリの作成は完了です。

リモートリポジトリに対してファイルを追加/更新する方法

作業フォルダにクローンする

作業用のフォルダを作成

SourceTreeにて先ほど作成したリモートリポジトリをクローンする

• 以下を入力し、最下部の「クローン」を選択
  ➀先ほど作成したリモートリポジトリ
  ②作業用のフォルダ
  ⓷クローンしたリポジトリの名前　※基本はそのままか、リモートリポジトリの名前
  

• 作業フォルダに「.git」フォルダが作成されればクローンは完了
  

コミットの操作方法

SourceTreeを使用したコミットの方法
コミット：作業フォルダの追加/更新ファイルをローカルリポジトリに登録

作業フォルダに追加/更新ファイルを配置

Indexにファイルを追加

ファイルステータスの画面に追加/更新ファイルが出てくるので、
「全てインデックスに追加」を選択し、「Indexにステージしたファイル」に移動

Indexに移動したファイルをコミット

コミットメッセージ(どういう変更/理由を記載)を入力し、「コミット」を選択

コミットしたバージョンが履歴に追加される

プッシュの操作方法

SourceTreeを使用したプッシュの方法
プッシュ：ローカルリポジトリに登録されたファイルをリモートリポジトリに登録

「プッシュ」タブを選択

• そのまま再度「プッシュ」を選択でOK
  

• プッシュ後、エラーが出ずにこの画面になればプッシュ完了
  

以上でローカル環境でリモートリポジトリを作成し、作業ファイルをリモートリポジトリに登録する方法は完了です。
インターネット上にファイルをアップしたくない場合に有効です。

以降はGitHubを使用したリポジトリを作成、クローンする方法を紹介します。

GitHubに新規のリポジトリを作成する方法

ここではRPGツクールのプロジェクトフォルダのバックアップを取ることを例として紹介します

GitHubのアカウントをSourceTreeに登録

「Remote」タブの「アカウントを追加」を選択

ホスティングアカウントを設定

画像と同じように設定し、「OAuthトークンを再読み込み」を選択

• 左下に「認証に成功」が出た後に「OK」を選択
  

• 「Remote」タブにGitHubのアカウントが表示されていればOK
  

GitHubにプライベートリポジトリを作成

• 「Create」タブにて画面のように設定し、「作成」を選択
  ➀ローカルの作業フォルダ
  ②任意のリポジトリ名を設定
  ⓷Git
  ④アカウント：GitHubのアカウント名
  ⑤所有者：GitHubのアカウント名
  ⑥説明：リポジトリの説明(任意)
  ⑦「Is Private」：チェックする　※自分と許可されたユーザーのみ閲覧可能
  

作業フォルダにRPGツクールのプロジェクトフォルダをリポジトリに登録

• 作業フォルダにRPGツクールのプロジェクトフォルダを移動し、コミット・プッシュをする。
  ※コミット・プッシュは「コミットの操作方法」「プッシュの操作方法」を参照
  ファイルの容量によってはプッシュに時間がかかります。
  

GitHubのリモートリポジトリを確認

• GitHubトップの「Repositories」タブを選択
  

• 作成したリモートリポジトリを選択
  

• コミット/プッシュしたフォルダが登録されていることを確認
  

• フォルダの中身もしっかりと登録されている
  

リポジトリのファイル(バックアップ)を取得

アーカイブの操作方法

リポジトリにコミットした状態のファイルを取得する方法
※バックアップを取得

• 取得したいコミットの履歴を右クリックし、「アーカイブ」を選択
  

• アーカイブファイルを出力するフォルダを確認し、「OK」を選択
  

• 出力したアーカイブファイルを解凍すると、選択した履歴のファイルが出てきます
  

以上がRPGツクールのプロジェクトフォルダをGitHubのリポジトリに登録、
バックアップを取得する方法でした。

SourceTreeでリポジトリをローカル環境に複製

既に存在するリモートリポジトリをローカル環境に複製する方法を紹介します。
例として、トリアコンタン様のRPGツクールMZ対応プラグインが置いてあるリモートリポジトリをクローンしてみます。

トリアコンタン様のGitHub

https://github.com/triacontane/RPGMakerMV

クローン

• GitHubのURL、クローンしたいフォルダを設定し、「クローン」を選択
  

• クローン先のフォルダに各ファイルがそのまま配置されている
  

以上が既存のリモートリポジトリをローカル環境に複製する方法です。

最後に

本来GitHubでは複数人で開発・管理する為の機能(ブランチやマージやプルリクエスト)が色々あるのですが、とりあえず今回は自分の勉強も兼ねて導入から最低限個人でGit、GitHub、SourceTreeを使用する方法をまとめてみました。

あまり用語等を理解していなくても説明・画像の通りに設定/操作すれば出来るようになっていると思います。
もっと詳しく知りたい方は以下の参考サイトを参照してください。
https://and-engineer.com/articles/Yt4s9BAAACEA700C

また別の機会に開発者用のGitの記事を書こうと思います。

Gitの導入方法②　SourceTreeの導入編

記事の概要

「Gitの導入方法➀　Gitの導入、GitHubのアカウント登録方法編」の続きで、この記事では「SourceTreeの導入」をまとめています。

※Gitの導入方法➀は最下部の「前の記事」で読めます。

SourceTreeの導入

Gitのみではコマンドを使用してファイルのバージョンを管理するのですが、
SourceTreeを使用することによって基本的にコマンド無しで操作できるようになります。

SourceTreeの公式サイトからダウンロード

https://www.atlassian.com/ja/software/sourcetree

この画面が出た場合は一番上を選択

Bitbucketアカウントとの紐づけ画面

• 今回関係ないので「SKIP」を選択
  

一緒にダウンロードするものを選ぶ画面

• 「Mercurial」のチェックを外し「次へ」を選択
  

ユーザ名、メールアドレス設定画面

• Gitで設定したユーザ名、メールアドレスが入力されているはずなので、
  そのまま「次へ」を選択
  ※入力されていない場合はGitのユーザ名、メールアドレスの設定が出来ていないので「Gitの導入方法➀　Gitの導入、GitHubのアカウント登録方法編」の「Gitの初期設定」を参照してください。
  

SSHキーの読み込み画面

• SSHキーを読み込みますかは「いいえ」を選択するとインストール完了
  

「SourceTreeの導入」は以上で完了

「Gitの導入方法⓷　Git・GitHub・SourceTreeの設定・操作方法編」に続きます。
※最下部の「次の記事」を選択してください。

Gitの導入方法➀　Gitの導入、GitHubのアカウント登録方法編

記事の概要

個人でGitをバックアップ機能として使用、または既存のリポジトリをローカル環境に複製する方法をまとめました。

三つの記事に分けており、この記事ではGit/GitHubの導入方法を記載しています。

Gitの導入

文字通りGitを使うのに絶対導入が必要
超簡単に言うとファイルを管理するもの

Gitの公式サイトからダウンロードし、インストール

https://gitforwindows.org/

ライセンスの説明

• 「Next」を選択
  
  
  ※詳しいライセンスの説明は以下を参考
  https://gimo.jp/glossary/details/gpl_license.html

インストールフォルダの設定

• インストールしたいフォルダを入力し「Next」を選択
  

インストールするコンポーネントの設定

• 今回は既定のチェックで十分なので「Next」を選択
  

スタートメニューのフォルダ名の設定

• 特にこだわりがなければGitのまま「Next」を選択
  

Gitで使用するエディターの設定

• 今回やりたいことには関係ないので既定のまま「Next」を選択
  

初期ブランチ名の設定

• 新しいリポジトリの最初のブランチ名。そのまま「Next」を選択
  

環境変数 PATHの設定

• 真ん中の推奨にするとGitコマンドをコマンドプロンプトやPowerShellから実行できる模様。今回は別に使いませんが、そのまま「Next」を選択
  

Gitで使用するSSHの設定

• 今回SSHは使用しないので関係ありませんが、そのまま「Next」を選択
  

HTTPSの接続設定

• 通常はGit内の証明書ライブラリを使用するようなので、そのまま「Next」を選択
  

改行コードの設定

• チェックアウト、コミット時の文字コードの設定。そのまま「Next」を選択
  

Git Bashで使用するターミナルエミュレータの設定

• 既定のMinTTYを使用。そのまま「Next」を選択
  

プルコマンド時の動作設定

• 既定のままで「Next」を選択
  

Git接続の際のパスワード認証機能の設定

• 認証情報を保存する設定。そのまま「Next」を選択
  

追加オプションの設定

• 既定のファイルシステムのキャッシュのみにチェックで「Next」を選択
  

試験的なオプションの設定

• 今回関係ないのでそのままチェック無しで「Install」を選択
  

インストール完了後

• 「Launch Git Bash」にチェックを入れ、
  「View Release Notes」のチェックを外し「Finish」を選択
  ※開かれたGit Bashは次の初期設定で使用します。
  

Gitの初期設定

「Git Bash」にて初期設定を行います。
先ほどのインストール時に開いていない場合は
Gitをインストールしたフォルダにある「git-bash.exe」、又は
スタートメニューの「Git」⇒「Git Bash」を実行して「GitBash」を開く

gitbashにて以下を設定します。

ユーザ名設定

• git config --global user.name 設定するユーザ名
  (例)
• git config --global user.name "Tarou"
  

メールアドレス設定

• git config --global user.email 設定するメールアドレス
  (例)
• git config --global user.email Tarou@gmail.com
  

確認方法

以下のコマンドを入力し、user.nameとuser.emailが入力した通りになっていればOK

• git config --list
  

GitHubの導入

GitHubを導入することにより、管理されているファイルをグラフィカルに操作・見ることができます。
※他にも色々な機能がありますが、今回は省きます。

GitHub公式サイトにアクセスし、アカウントを作成

https://github.com/

アクセス後、右上にある「Sigh up」を選択

GitHubアカウントの各設定を入力

• 以下を参考にして入力し、最下部の「Create account」を選択
  ➀メールアドレス
  ②パスワード
  ⓷ユーザネーム
  ④アップデートした際のメールを受け取るかどうか。「y」か「n」を入力
  ⑤人間認証。同じマークがある画像を二回選んだらOK
  

GitHubローンチコードを入力

• 8桁のローンチコードがメールで送られてくる。
  ※画像では隠していますが、赤枠の中に8桁のローンチコードがあります。
  

• 8桁のローンチコードを入力。
  

GitHubのヘルプ

• 何人で開発するか、教える側・教えられる側なのかの設定。
  とりあえず画像の通り「Just me」と「Student」で「Continue」を選択
  

「Git/GitHubの導入」は以上で完了

「Gitの導入方法②　SourceTreeの導入」に続きます。
※最下部の「次の記事」を選択してください。

【ルイコでもわかる】二週目開始処理のつくりかた

はじめに

お久しぶりです。気を抜くとすぐに一月経ってしまいますね。
4月は全く更新できなかったので5月はあと2回くらいは更新したいなと思ってます。

今回はプラグインを使わずにスクリプトを1行（条件分岐と合わせると2行）書くだけで簡単に二週目を開始する処理を作っていきます。

まずは実際に作ってみたものを動画にしたのでご覧ください。

つくりかた

作り方は非常に簡単です。

セーブ画面を開く前に次のスクリプトを記述。

$gameTemp.toTitle = true;

条件分岐：スクリプトに次のスクリプトを記述するだけです。

$gameTemp.toTitle

ちなみにですが toTitle の部分は条件分岐とスクリプトで一致していればどんな名前でも大丈夫です（他の変数名に被らない限り）

実際に使用する際には、動画でお見せしたようにセーブ後に確認のメッセージがあったほうが親切だと思います。それらの処理が追記されたものが次の画像です。

簡単ですね。

セーブの表示にクリアデータなどと追記できるプラグインなどを活用するとよりわかりやすくなるのではないでしょうか。

なぜこうなるのか

通常、イベントコマンド「セーブ画面を開く」を使用してセーブを行った場合、ロードをすると直後のイベントコマンドから実行されることになります。その為、「セーブ画面を開く」と「タイトル画面に戻す」を続けた場合、ロードしてもすぐにタイトルに戻ってしまいます。

$gameTemp という変数は一時的な保存先として使用されることを想定したグローバル変数です。例えばマウスクリックしたときの目的地等に使用されています。ちなみにですが Temp というのは Temporary の略で「一時的」という意味の英単語です。

$gameTemp は ニューゲームとロードゲームの際に初期化されます。
最初の一回はセーブの前に $gameTemp.toTitle を true にしているため条件分岐の中の処理を通過することができますが、一度タイトルに戻りゲームをロードしたときには $gameTemp.toTitle は初期化され false となっているため条件分岐の中の処理がされることはありません。
（正確には toTitle は undefined になっています）

おわりに

今回は趣向を変えて開発TIPSの紹介でした。
同じ処理をつくる場合でも様々なアプローチがあります。このやり方が絶対に正しいという事はありませんので、色々試してみるといいのではないかと思います。

もし、この処理はどう作ればいいんだろうという質問がありましたらコメントをお願いします。試しに作ってみて記事にするかもしれません。（必ず返答できるかはわかりません、時間もかかりますので急ぎの場合は他のコミュニティで質問してください）

次回は VSCode と Text2Frame を導入して開発効率を上げることをテーマにした記事の作成を予定しています。