RPGツクールMVでアプリリリースを目指す開発室

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

ツクールMV製作品のブラウザ版投稿時の注意点をまとめました。
※情報は2018/1/20時点の内容です

---

【共通】
・ブラウザ版では暗号化機能を使用しない
・ファイル名は半角英数字の利用を推奨
・ゲームタイトルは変更しない
　以前のタイトルで作成したセーブの互換性が失われる


・バグ報告用にバージョン表記を推奨
　例.不具合については、タイトルに表示されるバージョンもお知らせ頂けると助かります


　参考：
　バージョン表記プラグイン（ペンギンの寝床様）
　http://woodpenguin.web.fc2.com/MV_Plugin/VersionSpecified.html

・動作が重たい場合は以下を参考に切り分けの対処をする

　参考：
　ツクールMVで作ったゲームが重くなったときの指針（人生詰んでるし死ぬ前にゲーム作ってみる様）
　http://ntgame.wpblog.jp/2017/10/23/post-1127/

---

【PLiCy】
・高速読み込み機能（コアスクリプトやプラグインの読み込みを高速化）でエラー/遅延が発生する場合は
　問題となるプラグインを特定して無効化するか、高速読み込みをオフにする

・「修正・追加分をアップデート」で意図した動作をしない場合は「全てのデータをアップデート」を実施する

・その他
　RPG Maker MV/RPGツクールMV製のゲームをブラウザで動かす際のトラブルシューティング
　https://plicy.net/ToolFAQ/RPGMakerMV

---

【RPGアツマール】
・仮想コントローラープラグインは使用しない
（アツマール側で実装されているため）
　http://uchuzine.x0.com/demo/

・ADから始まるファイル名は使用不可（例.AD_chara1.png）
　広告と判断され読み込みが排他される

・外部と通信を行う機能は使用不可
　（例.Twitter連携）

・m4aファイルにループがある場合は「ITUNSMPB」タグが必要
　参考：ループ付きOGG、M4Aファイルを作る（Pinklover様）
　http://material.pinklover.info/?eid=11

・その他
　ニコニコヘルプ RPGアツマール
　http://qa.nicovideo.jp/category/show/683

---

【ふりーむ】
・前バージョンのキャッシュが残っている場合、反映されないことがある
　以下のプラグインの導入を推奨

　データのキャッシュを阻止するプラグイン（くらむぼん様）
　https://tm.lucky-duet.com/viewtopic.php?f=5&t=1639

◆ピクチャの動作確認を効率化
プラグインを活用したピクチャ演出の動作確認方法です。
この方法を使うと作業の効率化が図れます。

■準備　
次のプラグインを導入する

・ピクチャのグラフィカルな位置調整プラグイン
　制作者：トリアコンタン様
　説明/ダウンロード先：
　https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/AdjustPictureGraphical.js

　プラグインマネージャーから当プラグインを有効にしたら、
　テストを行う前に「プロジェクトの保存」（Ctrl+S）を実行すること

■プラグインを活用した実践
1.ピクチャの表示を含めるように範囲選択して「テスト（Ctrl+R)」を実行


2.グリッド線が表示された状態でピクチャを動かすことができ、バーに座標が表示される


補足：
プラグインパラメータではグリッドのサイズと背景のマップIDを指定することができる

↓

◆スクリプトを活用したピクチャの管理

スクリプトの使い方とピクチャ管理の実践を兼ねて書きました。

---

◆準備
スクリプトで扱いやすくするため、ピクチャ素材の命名を変更する

　変更前：FES_bustup_material_1-1.png
　変更後の例：C_hero_1-1.png

・フォルダ内でファイルを探すときに「c」キーを押下するとターゲットできる
・エラー時にはファイル名で「hero」だと判断可能

---

◆スクリプトの記述例

■変数1番
　$gameVariables.value(1)

■変数1番に1を加算
　$gameVariables.setValue(1,$gameVariables.value(1)+1)

■動作する記述例
$gameScreen.showPicture(1,"C_hero_1-1", 0, 50, 50, 100, 100, 255, 0);
$gameScreen.showPicture(1,"C_hero_1-1",0,50,50,100,100,255,0);
$gameScreen.showPicture(1,'C_hero_1-1',0,50,50,100,100,255,0);
・文字列やファイルを指定する時に囲む「''」「""」はどちらでも可
・区切りの「,」の前後の半角スペースは任意（見易さのために半角スペースを入れることが多い）

$gameVariables.setValue(1,$gameVariables.value(1)+1)
・定義通りに変数の大文字小文字が記述されている

■動作しない記述の例
$gameScreen.showPicture(1,"C_hero_1-1.png", 0, 50, 50, 100, 100, 255, 0);
・拡張子「.png」が含まれている

$gameScreen.showPicture(1,"C_hero_1-1", 0, 50 50, 100, 100, 255, 0);
・区切りの「,」が抜けて不正な値になっている

$gameScreen.showPicture(1,C_hero_1-1, 0, 50 50, 100, 100, 255, 0);
・ファイル名が「''」か「""」で囲まれていない

$gameVariables.setValue(1,$gameVariables.Value(1)+1)
・大文字と小文字の取り違え　$gameVariables."V"alue

---

◆実践
ピクチャをスクリプトで扱う場合の記法

■ピクチャの表示
$gameScreen.showPicture(ピクチャ番号,"画像の名前",原点,x座標,y座標,幅の拡大率,高さの拡大率,不透明度,合成方法)

・ピクチャ番号：ピクチャ番号
・原点：0→左上、1→中央
・拡大率：100→100%
・不透明度：0〜255（0→透明、255→不透明）
・合成方法：0→通常、1→加算、2→乗算、3→スクリーン

例
$gameScreen.showPicture(1,"C_hero_1-1",0,50,100,100,100,255,0)


■ピクチャの移動
$gameScreen.movePicture(ピクチャ番号,原点,x座標,y座標,幅の拡大率,高さの拡大率,不透明度,合成方法,移動時間)
this.wait(ウェイト時間)
//「完了までウェイト」の場合は記載2行目を記載

例
$gameScreen.movePicture(2,0,150,200,120,130,255,0,60)
this.wait(60)


■ピクチャの回転
$gameScreen.rotatePicture(ピクチャ番号, 回転速度)

例
$gameScreen.rotatePicture(3,50)


■ピクチャの色調変更
$gameScreen.tintPicture(ピクチャ番号, [赤,緑,青,グレー], 変化時間)
this.wait(ウェイト時間);
//「完了までウェイト」の場合は記載2行目を記載

例
$gameScreen.tintPicture(4, [50,60,70,80], 60)
this.wait(60);


■ピクチャの消去
$gameScreen.erasePicture(ピクチャ番号)

例
$gameScreen.erasePicture(1)

---

◆応用：スクリプトで管理する
スクリプトはイベントコマンドでは指定できない項目に変数を利用できる

■ピクチャ番号に変数を指定
　表示時に変数に1を加算するイベントを組み合わせ、ピクチャ番号の重複を防ぐ（消去時は消去後に変数から1を減算する）

　[表示時]
　変数1番に1を加算。変数1番をピクチャ番号に指定、X：50、Y:50の座標にファイルAAAを表示
　◆スクリプト：$gameVariables.setValue(1,$gameVariables.value(1)+1)
　◆スクリプト：$gameScreen.showPicture($gameVariables.value(1),"ファイルAAA", 0, 50, 50, 100, 100, 255, 0);

　[消去時]
　変数1番のピクチャ番号を消去。変数1番から1減算
　◆スクリプト：$gameScreen.erasePicture($gameVariables.value(1))
　◆スクリプト：$gameVariables.setValue(1,$gameVariables.value(1)-1)

■座標x、yに変数を指定
　固定座標でピクチャを多用する：固定用の変数
　ランダムにピクチャを表示する場合：乱数を代入した変数

　ピクチャ番号1でX：変数2番、Y：変数3番の座標にファイルAAAを表示
　◆スクリプト：$gameScreen.showPicture(1,"ファイルAAA", 0, $gameVariables.value(2), $gameVariables.value(3), 100, 100, 255, 0);

■ピクチャを一瞬で指定した角度にする
$gameScreen.picture(ピクチャ番号)._angle = 角度;

例
　◆スクリプト：$gameScreen.showPicture(1,"C_hero_1-1", 0, 200, 200, 100, 100, 255, 0);
　◆スクリプト：$gameScreen.picture(1)._angle = 50;



■ピクチャを一瞬で指定した色調にする
$gameScreen.picture(ピクチャ番号)._tone = [赤,緑,青,グレー];

例
　◆スクリプト：$gameScreen.showPicture(1,"C_hero_1-1", 0, 200, 200, 100, 100, 255, 0);
　◆スクリプト：$gameScreen.picture(1)._tone = [-100,-150,-200, 50];


■ピクチャの回転速度を小数点以下で調整
$gameScreen.rotatePicture(ピクチャ番号, 回転速度)

例
　◆スクリプト：$gameScreen.showPicture(1,"C_hero_1-1", 0, 200, 200, 100, 100, 255, 0);
　◆スクリプト：$gameScreen.rotatePicture(1,0.5)

※中華まんが温まるくらいの速度で回ります

---

謝辞：
ピクチャをスクリプトで扱おう！（パラドレ様）
https://goo.gl/wT6KwK
https://goo.gl/XXFJWj

◆イベントデバッグプラグイン、Developer Toolsを活用したエラー調査
エラー発生時に問題解決を図るための手法について、備忘録かねて記事にしました。

■準備
　次のプラグインを導入する

・イベントデバッグプラグイン
　制作者：トリアコンタン様
　説明/ダウンロード先：
　https://triacontane.blogspot.jp/2017/01/blog-post.html

・デバッグ機能詰め合わせ
　制作者：かめお (Kamesoft)様
　説明/ダウンロード先：
　http://ytomy.sakura.ne.jp/tkool/rpgtech/tech_mv/develop/debug_util.html

■プラグインを活用した実践

ここから目的に応じて読み分けてください。
基礎知識として�@�Aを知っておけばデバッグ効率が上がります。
エラー時の対応力をつけたい方は�Bまたは�Cまで読み進めください。

1.テストプレイモードで起動し、F7キーを押下
2.イベントの実行を一時停止して、一つずつイベントを実行（ステップ実行）

※画像をクリックすると別ウィンドウで表示

　画像の場合、次の�@〜�Dが実行される

　�@SEの演奏
　�A移動ルートの設定
　�B移動ルートの設定
　�CSEの演奏
　�D場所移動

F11キー/Enter/左クリック：イベントを1つずつ進める。コモンイベントが含まれる場合も同じ
F10キー：イベントを1つずつ進める。コモンイベントが含まれる場合は一括実行する
F6キー：ステップ実行を終了して通常の処理を行う
F9キー：マップ画面にいる場合、デバッグ画面を開く（スイッチ、変数を操作できる）

デバッグ機能詰め合わせプラグインでF9キーを拡張しているため、アイテムやアクターなど各種条件を変えながら試すことができる



3.エラーが発生するとDeveloper Toolsに赤字で表示される


　�Dでは行き先のマップを指定後に削除したため、行き場がなくエラーが発生

　GET file:///<ゲームファイルの場所>/data/Map003.json

　[メッセージから読み取れる内容]
　・Map003.jsonが見つからないためのエラー発生
　・4回とも同原因によるエラー（4回発生しているのはリトライを繰り返した結果と推測）

　この時点で次の対処が考えられる
　・Map003.json（MAPID3）が存在するか確認
　・イベントの移動先をMAPID3以外に指定する

　※ここではより細かく調べるため4に進む（普通は必要ない）

4.エラーの折りたたみ箇所を展開すると詳細なプロセスが表示される



net::ERR_FILE_NOT_FOUND
DataManager.loadDataFile　　//a
DataManager.loadMapData　　//b
SceneManager.changeScene　　//c
SceneManager.changeScene　　//c
SceneManager.updateMain　　//d
SceneManager.update　　//e

net::ERR_FILE_NOT_FOUND
DataManager.loadDataFile　　//a

net::ERR_FILE_NOT_FOUND
DataManager.loadDataFile　　//a

net::ERR_FILE_NOT_FOUND
DataManager.loadDataFile　　//a

5.4のa行とe行が何を指しているか名称から推測する

DataManager.loadDataFile　　//a　データのロード
DataManager.loadMapData　　//b　MAPデータのロード
SceneManager.changeScene　　//c　画面切り替え処理
SceneManager.changeScene　　//c　画面切り替え処理
SceneManager.updateMain　　//d　画面切り替えの更新処理
SceneManager.update　　//e　画面切り替えの更新処理

より詳細な部分はコアスクリプトを参照することで調べることができる
参照先は右側に「コアスクリプト名:コアスクリプトの行」として表示されている

aの場合はコアスクリプトrpg_managers.jsの93行目の処理を表す

---

DataManager.loadDataFile = function(name, src) {
var xhr = new XMLHttpRequest();
var url = 'data/' + src;
xhr.open('GET', url);
xhr.overrideMimeType('application/json');
xhr.onload = function() {
if (xhr.status < 400) {
window[name] = JSON.parse(xhr.responseText);
DataManager.onLoad(window[name]);
}
};
xhr.onerror = this._mapLoader || function() {
DataManager._errorUrl = DataManager._errorUrl || url;
};
window[name] = null;
xhr.send();//★93行目
};

---

eの場合はコアスクリプトrpg_managers.jsの1907行目の処理を表す

---

SceneManager.update = function() {
try {
this.tickStart();
if (Utils.isMobileSafari()) {
this.updateInputData();
}
this.updateManagers();//★1907行目
this.updateMain();
this.tickEnd();
} catch (e) {
this.catchException(e);
}
};

---

　[分かること]
　・4回とも同じエラー（4回中3回はDataManager.loadDataFileが終点）
　・1回目の処理だけSceneManager.updateまで進んでいるのはリソース読み込みと平行してMAP切り替えの描画処理を行っているから
（しかし移動先のMAPが見つからないので画面が暗転した状態で停止）

リンクをクリックすることで該当箇所を表示することもできる
Developer Toolsの機能なので、Google Chromeでブラウザプレイ中ならF12キー押下、テストプレイ中ならF8キー押下で呼び出し可能

---

エラー発生時はエラーメッセージを読むこと、読んでわからない場合は再現方法を確立させ然るべき相手に相談することが基本だと思います。
再現性が低いトラブルの場合や自己解決する力を養いたい時（解決速度を上げたいとき）はこのような手法で調べることも視野に入れてみてはいかがでしょうか。

以上、備忘録かねた内容が制作のお役に立てれば幸いです。

◆補足
スクリプトエラーはこのように表示してくれました。


ファイル指定で「.png」まで含めたことが原因

◆ツクールMV　キー入力判定について
PCとモバイルの両対応を意識して、タッチ操作の制御まわりについて調べた覚書です。
実用的な部分ではイベントコマンドのスクリプトで何を記載すればどのように制御できるかが分かりました。

■PC or モバイルの判定
・UtilsクラスのUtils.isMobileDevice()で判定している
　rpg_core.js内をCtrl+Fで「@class Utils」で検索

コアスクリプト：
Utils.isMobileDevice = function() {
var r = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
return !!navigator.userAgent.match(r);
};

■キー入力時の定義
・キー入力に対する反応はrpg_core.jsのInputクラスで定義
　rpg_core.js内をCtrl+Fで「@class Input」で検索

・名前と実際のボタンの対応についてはInput.keyMapperで定義
　rpg_core.js内をCtrl+Fで「@property keyMapper」で検索
　（rpg_core.js v1.5.0では2996行目）

---

keyMapper
9: 'tab', // tab
13: 'ok', // enter
16: 'shift', // shift
17: 'control', // control
18: 'control', // alt
27: 'escape', // escape
32: 'ok', // space
33: 'pageup', // pageup
34: 'pagedown', // pagedown
37: 'left', // left arrow
38: 'up', // up arrow
39: 'right', // right arrow
40: 'down', // down arrow
45: 'escape', // insert
81: 'pageup', // Q
87: 'pagedown', // W
88: 'escape', // X
90: 'ok', // Z
96: 'escape', // numpad 0
98: 'down', // numpad 2
100: 'left', // numpad 4
102: 'right', // numpad 6
104: 'up', // numpad 8
120: 'debug' // F9
　※番号部分はキーボード入力時のキーコードに対応
　　キーコード一覧
　　http://faq.creasus.net/04/0131/CharCode.html

　※''囲みの部分はツクールMVのスクリプトやjs内の記述に対応している
　※//以降は具体的にどのキーなのかを記載したメモ

　ツクールやJavascriptでは''の内容で指定できることがわかる

【決定（'ok'）判定の例】
　マウス：左クリック
　キーボード：Enter、Z、Space
　コントローラー：A、1ボタン

---

■タッチ入力に対する定義
・タッチ入力に対する反応はrpg_core.jsのTouchInputクラスで定義
　rpg_core.js内をCtrl+Fで「@class TouchInput」で検索

・タッチ入力の待機時間
以下の値を書き換えることで変更可能（初期値は24フレーム）

TouchInput.keyRepeatWait = 24;

・タッチ入力の更新間隔
以下の値を書き換えることで変更可能（初期値は6フレーム）

TouchInput.keyRepeatInterval = 6;

---

◆スクリプトで扱うことができる記述
スクリプトに先の''内の名称（以下「キー名」）を組み合わせて次のようなことが利用できます。
※ここでのスクリプトは、条件分岐と組み合わせて使うことが多そうです



Input.isPressed(キー名)
　現在キーが押されているかどうかをチェック
　イベントコマンド『条件分岐ボタン[キー名]が押されている』と同じ

コアスクリプトの記述：
Input.isPressed = function(keyName) {
if (this._isEscapeCompatible(keyName) && this.isPressed('escape')) {
return true;
} else {
return !!this._currentState[keyName];
}
};

Input.isTriggered(キー名)
　キーが押された瞬間をチェック

コアスクリプトの記述：
Input.isTriggered = function(keyName) {
if (this._isEscapeCompatible(keyName) && this.isTriggered('escape')) {
return true;
} else {
return this._latestButton === keyName && this._pressedTime === 0;
}
};

Input.isRepeated(キー名)
　キーが押されたかどうか、またはキーの繰り返しが発生したかどうかをチェック

コアスクリプトの記述：
Input.isRepeated = function(keyName) {
if (this._isEscapeCompatible(keyName) && this.isRepeated('escape')) {
return true;
} else {
return (this._latestButton === keyName &&
(this._pressedTime === 0 ||
(this._pressedTime >= this.keyRepeatWait &&
this._pressedTime % this.keyRepeatInterval === 0)));
}
};

Input.isLongPressed(キー名)
　キーが押されたままであるかどうかをチェック

コアスクリプトの記述：
Input.isLongPressed = function(keyName) {
if (this._isEscapeCompatible(keyName) && this.isLongPressed('escape')) {
return true;
} else {
return (this._latestButton === keyName &&
this._pressedTime >= this.keyRepeatWait);
}
};

TouchInput.isPressed()
　マウスの左クリックまたはタッチが現在押されているかをチェック
　()内にキー名は不要
　決定キーと同様の判定で使いやすい

コアスクリプトの記述：
TouchInput.isPressed = function() {
return this._mousePressed || this._screenPressed;
};

TouchInput.isTriggered()
　マウスの左クリックまたはタッチが押された瞬間をチェック
　()内にキー名は不要
　並列処理向け

コアスクリプトの記述：
TouchInput.isTriggered = function() {
return this._triggered;
};

TouchInput.isRepeated()
　マウスの左クリックまたはタッチが押されたままかをチェック
　()内にキー名は不要
　長押し判定

コアスクリプトの記述：
TouchInput.isRepeated = function() {
return (this.isPressed() &&
(this._triggered ||
(this._pressedTime >= this.keyRepeatWait &&
this._pressedTime % this.keyRepeatInterval === 0)));
};

TouchInput.isCancelled()
　マウスの右クリックが押された瞬間をチェック
　()内にキー名は不要
　並列処理向け

コアスクリプトの記述：
TouchInput.isCancelled = function() {
return this._cancelled;
};

TouchInput.isMoved()
　マウスまたは指が移動したかをチェック
　()内にキー名は不要
　並列処理向け

コアスクリプトの記述：
TouchInput.isMoved = function() {
return this._moved;
};

TouchInput.isReleased()
　マウスの左クリックまたはタッチが離されているかチェック
　()内にキー名は不要
　並列処理向け

コアスクリプトの記述：
TouchInput.isReleased = function() {
return this._released;
};

---

◆実践
条件分岐のスクリプトに記述して実行するイベントを組みました。
このような組み方が一番分かりやすいと思います。


※画像をクリックすると別ウィンドウで表示


また瞬間的な判定のものに対しては並列処理で組む必要があります。


文字では分かり辛い内容も、実際にイベントを組むと理解が進みます。
参考にする場合はぜひ実践することをお勧めします。

◆応用

タッチ操作の機能を拡張するプラグインを見てみました。

　ピクチャのボタン化プラグイン
　制作者：トリアコンタン様
　https://triacontane.blogspot.jp/2015/11/blog-post_23.html

以下では「ピクチャタッチ状態からのコモンイベント呼び出し予約を追加定義」するという構文の中でTouchInput.isPressed() 、現在左クリックかタッチされている状態か参照していることが読み取れます。

Sprite_Picture.prototype.updatePointer = function() {
var strokeNum = $gameScreen.getPicturePid(this._pictureId);
if (strokeNum > 0) {
this.opacity = TouchInput.isPressed() ? 255 : 0;
this.x = TouchInput.x;
this.y = TouchInput.y;
this.anchor.x = 0.5;
this.anchor.y = 0.5;
}
};

PC/モバイル両対応としてメニューや機能を自作する場合やプラグインを制作する場合にもTouchInput.isPressed()が使われるのだと思います。

まとめ
・Input.is〜系はキー/コントローラー入力の制御に用いる
・TouchInput.is〜系はタッチ入力/マウス入力の制御に用いる（モバイル想定）
・〜isTriggered、〜isCancelled系は並列処理で扱う

以上、ご参考まで。

謝辞：
マウスイベント、キーイベント検知についてのまとめ / ツクールMV小技・Tips集
（RPGツクールVXAce & MVスクリプトwikiとプラグイン様）
http://rpgmaker-script-wiki.xyz/mousekeyevent_kowazamv.php

キー入力判定のいろいろ
（スマイル工房 ブログ室様）
http://blog.livedoor.jp/trb_surasura/archives/13728522.html