ピクチャのボタン化プラグインの使い方 【ツクールMV プラグイン解説】

ミサト
あーっ、答えはこっちかぁ……

リンカ
先輩、こないだもそれ間違えてましたよー

ゲバマン
なにやってるでゲバか?

ミサト
あっ、ゲバくん。これかい?
これは「なぞ解きRPG 魔導師と黒ニャンコのビズ」。
今流行のスマホゲームだよ。

リンカ
問題が出てきて、画面をタッチすると回答が選べて、
正解すると攻撃できたりするんですよね

ミサト
そういえば、ツクールMVもタッチ対応しているんだよね。
画面上に何かを表示させて、タッチすると何か
行動できたりするような機能は
実装できないのかな?

ゲバマン
そういうのがやりたいのであれば、『トリアコンタン』さんのプラグイン「ピクチャのボタン化プラグイン」を使えば色々とできるゲバ。せっかくだから、今日はピクチャのボタン化プラグインを教えてやるゲバー。

ピクチャのボタン化プラグインとは?

ピクチャのボタン化プラグインはRPGツクールMVの創作支援情報やツクールMV向けのプラグイン配布を行っている、『トリアコンタン』さんが作成したプラグインです。

参照:Delusional Field(トリアコンタンさんのブログ)

RPGツクールMV上に表示させたイラストをタッチすることで、イベントを発生するような機能を実装することができるプラグインになっています。プラグインは作者さんブログの同プラグイン紹介ページ他、RGC・ツクマテといったツクール系支援コミュニティにてダウンロードすることができます。

参照:ピクチャのボタン化プラグイン(Delusional Field)
参照:ピクチャのボタン化プラグイン(RGC)
参照:ピクチャのボタン化プラグイン(ツクマテ)

ピクチャのボタン化プラグインでできること

表示させたイラストをタッチすることでイベントを呼び出すことができるような機能を作成することができるため、表示される画像や呼び出すイベント次第で様々なイベントを作成することができます。

例えば、『◯』『?』といった画像を用意すれば、簡易的な二択クイズを作成することもできるでしょう。アクションRPGなどであれば、セーブと書かれたイラストを常に表示させ、タッチだけでセーブを呼びさせる機能なども作成できます。

画像との組み合わせ次第で、様々なショートカット機能、ミニゲームの導入へ繋げられる可能性があります。

ピクチャのボタン化プラグインを導入するために必要なもの

では、ピクチャのボタン化プラグインを導入するためにはどのようなものが必要になってくるのでしょうか。プラグイン導入のためには以下のものが必要となります。

  • プラグイン本体(上記参照サイトでダウンロードできるPictureCallCommon.js)
  • ツクール上に表示させるイラスト
  • タッチした時に発動するイベントを設定したコモンイベント(ツクール上で作成)

自分で用意しなければいけないものは、プラグインデータ本体、ツクール上に表示させるイラストのみです。タッチした時に発動するイベントはRPGツクールMVのデータベース(キャラクターの能力やモンスターの能力値を決めたりする機能)にある『コモンイベント』機能を使用し、作成していきます。

ピクチャのボタン化プラグインの使い方

ピクチャのボタン化プラグインはプラグイン管理画面で『PicturecallCammon』をONにし、プラグインを有効化します。
そして、指定された記述を『プラグインコマンド』で実行させるイベントを作成することで、表示させたイラストとコモンイベントが結びつきます。
(詳細は後述の『テストイベントを作ってみよう』を参照)

プラグイン独自の記述

プラグインの記述は大きく分けて2種類あります。

画像とイベントを結びつける記述

* P_CALL_CE [ピクチャ番号] [コモンイベントID] [トリガー]:
* ピクチャがクリックされたときに呼び出されるコモンイベントを関連づけます。
*  トリガーは以下の通りです。(省略すると 1 になります)
*  1 : クリックした場合
*  2 : 右クリックした場合
*  3 : 長押しした場合
*  4 : マウスを重ねた場合
*  5 : マウスを放した場合
ピクチャのボタン化プラグイン(Delusional Field)より引用

イベントエディターの実行内容で『プラグインコマンド』を使用し、

【P_CALL_CE [ピクチャ番号] [コモンイベントID] [トリガー]:】

という記述を実行させると、指定されたピクチャ番号で表示したイラストを
クリックした場合に、特定のコモンイベントを実行させることができます。

例えば、ピクチャの表示を使って『ピクチャ番号:1』で表示させた画像を
右クリックした時に、コモンイベント0001を発動させたい場合のイベントを作る場合。

  • P_CALL_CE→そのまま
  • ピクチャ番号→1
  • コモンイベントID→0001
  • トリガー→2 (2 : 右クリックした場合という定義より)

上記を記述に置き換えて実行することでイベントの結びつけができるので、
イベントエディターの実行内容『プラグインコマンド』を使って、

【P_CALL_CE [ピクチャ番号] [コモンイベントID] [トリガー]:】

【P_CALL_CE 1 0001 2:】

上記の記述を実行すると、ピクチャ1で右クリックすると、
コモンイベント0001が発動するようになります。

画像とイベントの結びを解除する記述

* P_CALL_CE_REMOVE [ピクチャ番号] :
* ピクチャとコモンイベントの関連づけを解除します。
* 全てのトリガーが削除対象です。
ピクチャのボタン化プラグイン(Delusional Field)より引用

イラストタッチした時にイベントが発生しないようにするためには、上記の記述沿ったものをイベントエディターの実行内容『プラグインコマンド』にて実行する必要があります。

記述方法は【P_CALL_CE_REMOVE [ピクチャ番号] :】という形式ですので、
『P_CALL_CE_REMOVE』 はそのまま、『ピクチャ番号』だけ変更しましょう。

例えば、上記で例示した『P_CALL_CE 1 0001 2:』という記述で結びつけた場合。
ピクチャ番号は『1』になりますので、解除するための記述は

P_CALL_CE_REMOVE [ピクチャ番号] :

P_CALL_CE_REMOVE 1 :

となるので、イベントエディターの実行内容『プラグインコマンド』で
【P_CALL_CE_REMOVE 1 :】を実行すればよいのです。

ピクチャのボタン化プラグインを使ったテストイベントを作ってみよう

ミサト
書き方とかがあるのはわかったけど……
いまいちピンとこないなー
ゲバマン
それなら、使うよりも慣れろ……!
簡単なテストイベントを作ってみるゲバ。
リンカ
そうですね!
ゲバマン
サンプルイベントとして、画面上にセーブショートカット
機能を搭載できるイベントを作ってみるゲバ。
仕様はこんな感じゲバ!
  • 設定用犬キャラに話しかけると画面にセーブボタンを表示できるようになる
  • セーブボタンをクリックするとセーブ画面が出る
  • 設定用犬キャラに話しかけるとボタンを消すこともできる
  • 他のプラグインは極力使わない
step1.プラグインを有効にしよう

プラグインを有効にするためには、ダウンロードしたプラグインデータを
ゲームプロジェクト内の『plugins』フォルダに入れ、RPGツクール上で
有効化して上げる必要があります。

1.
RPGツクールMVを開き、『ゲーム』→『フォルダを開く』を押し、
ゲームプロジェクトフォルダを開きます。

pictbottom012

2.
ゲームプロジェクトフォルダ内にあるフォルダ『js』の中にある『plugins』フォルダにダウンロードしておいたプラグインデータ『PictureCallCommon.js』を入れます。

pictbottom015

3.
ツクールMV画面に戻り、『ツール』→『プラグイン管理』を押します。

pictbottom006

4.
プラグイン画面管理の空白部分をクリックし、今回使用するプラグインを追加します。
クリックし、『基本設定』ウィンドウが出てきたら、名前欄を『PicturecallCommon』、
状態をONにし、『OK』を押します、

pictbottom007

リンカ
今回のプラグインは『PicturecallCommon』という
名前のプラグインだから、名前を
『PicturecallCommon』にするんですね!

5.
プラグイン管理画面に『PicturecallCommon』が状態『ON』で追加されていることを確認し、『OK』を押します。

pictbottom008

以上で、今回使用するプラグインを有効化しました。

step2.ボタンをクリックした時に出るイベントを作る
ゲバマン
今回はボタンをクリックした時に
『セーブ画面を開く』ような動作をイベントで作るゲバ。
ミサト
セーブ画面を呼び出すイベント処理は、デフォルトであったよね?
リンカ
はい。ツクールMVでは実行内容のひとつに、
『セーブ画面画面を開く』があるので、
コマンド一つで簡単にイベント処理が作成できます。

ボタンをクリックした時に出るイベントは、『コモンイベント』という、
複数のマップで呼び出すイベントを作成する場合などに
使用する機能を使って作成していきます。

早速、コモンイベントを使ってクリックされた時のイベントを作っていきましょう。

1.
ツクールMVの画面より、『ツール』→『データベース』を押してデータベースを開く。

pictbottom005

2.
『データベース』画面左側にある『コモンイベント』ボタンをクリックし、
コモンイベント編集画面を開く。

pictbottom001

3.
未使用のコモンイベント欄を使い、今回使用するイベントを作成していきます。
今回は『0001』欄に『セーブ呼び出し』というイベント名で作成を行っていきます。

pictbottom002

ゲバマン
イベントの設置場所はコモンイベントであれば何番でもよいゲバ。
ただし、番号は後で使用するので、メモっておくゲバよ。

4.
使用するコモンイベントの実行内容を記述していきます。
今回はセーブ画面を呼び出すだけですので、
『シーン制御』にある『セーブ画面を開く』を押しましょう。

pictbottom003

5.
実行内容に『セーブ画面を開く』が追加されていることを確認し、
『OK』を押してコモンイベントを保存します。

pictbottom004

以上で、ボタンクリックした時のイベント設定は終了です。

step3.システムを有効化するキャラを作る
ゲバマン
今回はシステムを有効化してくれるキャラに話しかけて
『はい』を選ぶとボタンが表示され、機能がON。
『いいえ』を選ぶとボタンが消え、機能がOFFされる設定にするゲバ。
ミサト
それなら、画面が見づらい人は機能をOFFにすればよくなるね!

今回は設定用の犬キャラクターを使って、
機能のON・OFFをプレイヤーが自由に選べるような設定を
作成していきます。

セーブ用のボタンは『save.png』という画像を利用します。
事前にsaveという名前のpng画像をご用意下さい。
(ない場合は下記画像を右クリック→保存してご利用下さい)

save

1.
ボタンとして使用する画像をゲームフォルダ内に入れます。
ツクール画面の『ゲーム』→『フォルダを開く』を押し、
ゲームプロジェクト内の『img』→『pictures』フォルダ内へ
画像データ『save.png』を入れましょう。

pictbottom018

2.
マップ上に犬のキャラを配置します。
画像を犬、イベント実行内容に
イベントコマンド『メッセージ』→『文章の表示』を使って、
「セーブショートカットボタンを表示する?」という
会話文章を作成します。

pictbottom009

3.
選択肢を作ります。
イベントコマンド『選択肢の表示』をクリックし、
はい・いいえの2択を作成します。

pictbottom010

4.
『はいのとき』の下にイベント処理を追加し、
有効化したい時の処理を作成していきます。

まずはじめに、画像を表示させます。
イベントコマンド『ピクチャ』→『ピクチャの表示』を押し、
番号『1』、画像『save』にしてOKを押します。

pictbottom019

リンカ
このコマンドで、『セーブ』という画像を
画面上に表示させるんですね!

5.
イベントコマンド『プラグインコマンド』と
プラグイン独自の記述の
【P_CALL_CE [ピクチャ番号] [コモンイベントID] [トリガー]:】
を使って、画像とコモンイベントを結びつけていきます。

今回は

  • コモンイベント『0001』→step2の3
  • ピクチャ番号『1』→step3の4

です。

また、クリックさえすればセーブ画面が開けるようにするので、
トリガーは『1』と記述していきます(省略でも1になるので、記述無しでもOK)

【P_CALL_CE [ピクチャ番号] [コモンイベントID] [トリガー]:】

ピクチャ番号:1
コモンイベントID :0001
トリガー:1

となります。
そのため、

【P_CALL_CE 1 0001 1:】
をイベントコマンド『プラグインコマンド』で実行させます。

イベントコマンドより『上級』→『プラグインコマンド』を選び、
【P_CALL_CE 1 0001 1:】と記述しましょう。

pictbottom022

6.
『いいえのとき』の下にイベントを追加し、
いいえを選んだ場合に、機能を停止させる仕組みを作ります。

まずは画像を消します。
イベントコマンド『ピクチャ』→『ピクチャの消去』を押し、
ピクチャ1を記述してOKを押します。

pictbottom023

リンカ
今回はピクチャ表示でピクチャ番号『1』に
ボタン画像を表示させたから、ピクチャの消去で
番号1にすると、ピクチャ番号1の画像が消えるんですね

7.
イベントコマンド『プラグインコマンド』と
プラグイン独自の記述の
【P_CALL_CE_REMOVE [ピクチャ番号] :】
を使って、ピクチャ番号とイベントの結びつけを完全に削除します。

今回はピクチャ番号1と結びつけを行ったため、

  • ピクチャ番号:1

となります。

そのため、

【P_CALL_CE_REMOVE 1 :】
をイベントコマンド『プラグインコマンド』で実行させます。

イベントコマンドより『上級』→『プラグインコマンド』を選び、
【P_CALL_CE_REMOVE 1 :】と記述しましょう。

pictbottom025

以上で、処理は終了です。
まとめるとこんな感じになります。

pictbottom026

こんな感じになります
ゲバマン
実際に動かしてみるとこんな感じになるゲバよ。

pictbottom-test-001

ゲバマン
マップ上にいる設定キャラに話しかけるゲバ
ミサト
step3で作成したキャラだね!

pictbottom-test-002

ミサト
選択肢を『はい』にすると機能がオン!

pictbottom-test-003

ゲバマン
画像が表示されるゲバ
リンカ
セーブを押してみますね!

pictbottom-test-004

ミサト
セーブ画面が動いたよ!
ゲバマン
最後に、機能停止ゲバ。いいえを選ぶゲバよ。

pictbottom-test-005

pictbottom-test-006

ミサト
ボタンが画面が消えたね!
リンカ
ボタンがあった場所をクリックしても、
セーブ画面は出てこないですね!
ゲバマン
無事、簡易セーブボタン機能が完成ゲバ!
お疲れゲバー!

ピクチャのボタン化プラグインの応用

ピクチャのボタン化プラグインは応用すれば様々な
システムを作成することも可能です。

いくつか商業ゲームで事例を見ていきましょう。

タッチによる反応の変化

love

FFやラブライブなど、最近のスマホゲームでは
立ち絵へのタッチを繰り返すことによって、
会話や反応が変わるような仕組みがあるゲームもあります。

参照:ラブライブ!スクールアイドルフェスティバル ? スクフェス

自動イベントと変数処理、条件分岐を使えば
簡易的なものが作れます。

pictbottom027

タッチした反応によってキャラクターの個性を出したり、
友好度の変化(触りすぎると下がるなど)を搭載すると
RPGのシステムにうまく反映させていくこともできます。

やってることは2つだけです。
↓内部処理(クリックで拡大可能)↓

pictbottom030

pictbottom031

パターンを多数作成することで、
キャラクターの反応を楽しむような作品も作れるでしょう。

クイズ回答を画像に使うクイズゲーム

キャラクター画像ではなく、『クイズジャンル』や『回答』を
ボタンとして表示させ、回答をクリックした時の変数と、
問題の正解変数を一致させれば、クイズなども作成可能です。

参照:クイズRPG 魔法使いと黒猫のウィズ

ADVや脱出ゲームなどに使う

また、写真や画像を細分化して配置してあげることで、
脱出ゲームなども作成可能かもしれません。

色々な商業作品の仕組みを上手く活用すると、
より個性的なゲーム制作に繋がることでしょう。

mar
▲一部の会話にADV・脱出ゲームのような要素を取り入れているアクションアドベンチャーゲーム『マーヴェラス』。脱出ゲームの調べる仕組みと見下ろしアクションRPGを組み合わせた作品だ

参照:マーヴェラス ~もうひとつの宝島~(wii U バーチャルコンソール)

まとめ

スマホ対応になったツクールMV。
タッチ操作の多いバーチャルコンソールでは、
うまく動作と連動するボタンを配置してあげるだけでも
大きく操作性の向上に繋がる可能性を秘めています。

ピクチャのボタン化プラグインは
気軽な設定と大きな拡張性を持つプラグインです。

プラグイン導入の入門にも最適なプラグインですので
あなたの作品の向上に繋がるようなことができないか、
試してみてはいかがでしょうか?

*本記事は『PictureCallCommon.js Version1.1.2を元に作成しております』
*作成画像はRPGツクールMVを利用し作成しております。
 RPGツクールMV→(c)2015 KADOKAWA CORPORATION./YOJI OJIMA

RGC オリジナルゲーム制作支援記事 一覧

スポンサードリンク

コメント

  1. しぶ より:

    すばらしい解説ですね。
    ボタンを生かしたモンスターファームのような
    シミュレーションゲーム(育成ADV)
    を作ってみたいと思います。

    • RPGゲームツクールコミュ@管理人 RPGゲームツクールコミュ@管理人 より:

      しぶさん>>
      感想ありがとうございます。
      プラグイン導入でよく困惑して諦めることとか自分であったので、
      少しでもプラグイン導入できる参考になるようであれば嬉しいです。

      ツクールMVはADVにも役立つプラグイン多いので、
      ADVなんかも増えていくかもしれないですね。
      ぜひ、完成したらしぶさんの教えて下さい♪

  2. ミジンコ以下 より:

    すみません、設定キャラを置かずに、ゲーム開始直後に別途左クリック
    (TouchInput.isTriggered();)で動作するメニュー全体を
    表示非表示で切り替えるボタンを設置したいのですが上手くいきません

    トリガーの自動実行でやってみると表示はするけどループから抜け出せず、
    ループ回避に2ページ目に空のEVページを置くと今度はクリックしても今度はメニューが表示できないです

    • ミジンコ以下 より:

      ちょっとだけ自己解決しました、
      イベントの一時消去をはさむ事で上手く動作した・・・かもです!

      • RPGゲームツクールコミュ@管理人 RPGゲームツクールコミュ@管理人 より:

        ご質問ありがとうございます。メニューボタンというのが
        ちょっとイメージできなかったので、クリックでメニュー開閉ができないようにする
        というイメージで回答致します。
        (スクリプト詳しくないので、ちょっと違うor適切な回答ではないかも知れません)

        1.自動実行でボタン操作用のスイッチ(仮にスイッチ1)をON
        2.データベースのコモンイベントでスイッチ1をトリガーに並列処理を作成
        3.条件分岐で(TouchInput.isTriggered();)を使い条件式を作る

        ピクチャボタン化プラグインを設定したいのであれば、1のスイッチ操作を
        ボタン化プラグインでボタンに割り当てればいいと思いますし、
        オリジナルメニューを消すのであれば、3の条件分岐内でメニュー用の画像とか
        表示消せばできるのかなぁ……と。

        細かく検証してないので、違ったりしたら申し訳ないです。

        • ミジンコ以下 より:

          返信ありがとうございます
          挙動のイメージとしましては
          https://i.imgur.com/vmyZp1K.gif
          というのを作ってみたかったのですが、今の私にはちょっと難しいようです。

          でも、ツクールコミュ@管理人様も紹介されている
          ・装備に設定されたスキルを習得するプラグイン
          ・パッシブスキルを実装するプラグイン

          がとても面白そうなので
          これらのプラグインを使ってまずは1本短編作品を作ろうかと思います!

          • 匿名 より:

            スイッチとかで、画像のONOFF設定をするのはダメなのでしょうか?

  3. […] ピクチャのボタン化プラグインの使い方 【ツクールMV プラグイン解説】 […]

コメントをどうぞ

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください