2015年11月23日月曜日

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

RPGツクールMVで使用可能な自作プラグイン「ピクチャのボタン化プラグイン」の紹介です。

Clickable picture plugin


プラグインの説明

RPGツクールMV

ピクチャをクリック(右クリックや長押し含む)すると、指定したコモンイベントが呼び出されるようになるプラグインコマンドを提供します。このプラグインを利用すれば、javascriptの知識がなくても誰でも簡単にクリックやタッチを主体にしたゲームを作れます。

注意!

一度関連づけたピクチャとコモンイベントはピクチャを消去しても有効です。ピクチャが存在しなければどこをクリックしても反応しませんが、同じ番号で再度、ピクチャの表示を行うと反応するようになります。

RPGMakerMV

When clicked picture, call common event.

スクリーンショット

パラメータ

プラグインマネージャーから指定するパラメータの説明です。

RPGツクールMV

  • 透明色を考慮 : クリックされた箇所が透明色だった場合は、クリックを無効にする。
  • ピクチャ番号の変数番号 : コモンイベント呼び出し時にピクチャ番号を格納するゲーム変数の番号

RPGMakerMV

  • TransparentConsideration : if click position is transparent, click is disabled.
  • GameVariablePictureNum : Game variable number that stores the picture number when common event called.

プラグインコマンド

イベントコマンド「プラグインコマンド」から実行。

RPGツクールMV

  • P_CALL_CE [ピクチャ番号] [コモンイベントID] [トリガー] : ピクチャがクリックされたときに呼び出されるコモンイベントを関連づけます。例:P_CALL_CE 1 1 1
  • P_CALL_CE_REMOVE [ピクチャ番号] : ピクチャとコモンイベントの関連づけを解除します。全てのトリガーが削除対象です。例:P_CALL_CE_REMOVE 1

トリガーは以下の通りです。(省略すると 1 になります)

  1. クリックした場合
  2. 右クリックした場合
  3. 長押しした場合
  4. マウスを重ねた場合
  5. マウスを離した場合

RPGMakerMV

  • P_CALL_CE [Picture number] [Common event ID] [Trigger] : When picture was clicked, assign common event id. ex : P_CALL_CE 1 1 1
  • P_CALL_CE_REMOVE [Picture number] : break relation from picture to common event. ex : P_CALL_CE_REMOVE 1

Triggers are As below(if omit, It is specified to 1)

  1. Left click
  2. Right click
  3. Long click
  4. Mouse over
  5. Mouse out

ダウンロード

プラグインファイルはGithubで公開しています。

ダウンロード(Download)

利用規約

当プラグインはMITライセンスのもとで公開されています。作者に無断で改変、再配布が可能で、利用形態(商用、18禁利用等)についても制限はありません。ただし、ヘッダのライセンス表示は残してください。

http://opensource.org/licenses/mit-license.php

更新履歴

  • 2015/11/23 トリガーとして「右クリック」や「長押し」を追加。透明色を考慮する設定を追加。コモンイベント呼び出し時に対象のピクチャ番号を指定してゲーム変数に格納する機能を追加。
  • 2015/11/14 初版

56 件のコメント:

  1. 九条エミリア2015年12月8日 6:39

    P_CALL_CE 93 111 1
    この様な記述の方法で正しく動きますか?

    返信削除
  2. そのはずです。ですがちょうど先日、バグ報告を頂いて修正しましたのでもしエラーが発生している場合は、再ダウンロードをお願いします。お手数をおかけします。

    返信削除
  3. Hi Triacontano, your plugin looks great! Just what i was looking for.
    I wish I could use it but i do not even know where to place the pictures >.<
    Will you upload a demo for noob-persons like me?

    I'm from Brasil, just knew little of english by gaming... Hope you understand my message...
    Congratz by your enforces, keep going! /o/

    PS: I tried to use a translator but it confuses me more. @.@

    返信削除
    返信
    1. Solved. Needed to create a picture folder... D:

      削除
    2. Hi Guilherme. Thank you for using my plugin. I am glad hear to your solve :)

      削除
    3. Me again again @.@2016年1月5日 7:40

      I'm back. With another issue.
      I could not make 'animations' above 'pictures' layer.
      Tried to mix with Galenmereth plugin 'TDDP_BindPictureToMap.js'
      But got some error screen. =[
      A print of console: http://prntscr.com/9m5py2
      Topic of Galenmereth plugin: http://forums.rpgmakerweb.com/index.php?/topic/46776-bind-pictures-to-map/page-3

      Ps: I signed as Ushi. o/

      削除
    4. The Problem is I know. There is a possibility to improve After latest version (1.1.3) downloaded. Might resolve. Could you please try this. :)

      削除
    5. Yeeeeey! It works!
      When my demo been done I'll send you see! /o/
      See you soon! Very thanks! You're the best! *-*

      削除
    6. Glad!!

      I am looking forward to it :)

      削除
  4. こちらのプラグインをお借りして「ゲームを終了する」ボタンを作ることは可能でしょうか?
    タイトル画面に移動してゲームを終了させるのではなく、ボタンを押すとゲームが終了するようにしたいのですが…
    クリックをするとイベントが発生するボタンやセーブボタンはできそうなのですが、ゲーム終了ボタンはできるのでしょうか?

    プラグイン自体についての質問と少しずれてしまい申し訳ありません。
    可能であればご教示いただければ幸いです。

    返信削除
    返信
    1. こんにちは。
      コモンイベント内でイベントコマンドのスクリプト「SceneManager.terminate();」を実行すればゲーム終了になります。ですがブラウザ上で直接起動するゲームやスマホアプリに変換したゲームでは、動作しない(何も起こらない)と思いますのでご注意ください。

      削除
  5. はじめまして。
    こちらの素晴らしいプラグインお借りさせて頂いてます。

    質問があるのですが、ボタン画像を用意してマウスオーバーとマウスアウトのプラグインコマンドを設定しました。
    設定内容は、マウスが重なっている時は画像の色調が変わり、マウスが離れると画像の色調が元に戻るという感じです。
    コモンイベントにはイベントコマンドのピクチャの色調変更を使用していて、フレームは1、完了までウェイトのチェックは外しています。

    本題は、似たような処理のボタンを隣に複数並べてその上をマウスで高速に動かすと、色調が変わらなかったり、
    変わった色調が元に戻らないという事が頻発しまいます。
    マウスをゆっくり動かせばしっかり動作するのですが…。

    こちらの設定の仕方が悪いのか、そういった仕様のものなのか判断が出来ないため、ご返答頂ければ嬉しいです。

    返信削除
    返信
    1. こんにちは。プラグインのご利用ありがとうございます!

      想定する仕様としては、かりに高速で動かしてもただしく色調が切り替わる(コモンイベントが実行される)ことを想定しています。
      なので、原因を調査してみます。

      削除
    2. ご回答ありがとうございます。
      よろしくお願いします。

      申し訳ないのですが、もう一つ問題が…。

      ボタン画像をゲーム画面端に表示させ、マウスを画像に触れたまま画面外へ移動させると、マウスアウトのコモンイベントが実行されないようでした。

      削除
    3. 現象を確認しました。ポインタが画面外に出てしまうと座標が計測できなくなってしまうので、うまく対応できるかどうか検討してみます。

      削除
    4. >本題は、似たような処理のボタンを隣に複数並べてその上をマウスで高速に動かすと、色調が変わらなかったり、
      >変わった色調が元に戻らないという事が頻発しまいます。

      こちらは修正増した。(Ver1.3.4)

      >ボタン画像をゲーム画面端に表示させ、マウスを画像に触れたまま画面外へ移動させると、マウスアウトのコモンイベントが実行されないようでした。

      こちらについてはマウスが画面外に出たことを正しく検知できないので、一旦保留とさせてください。

      削除
    5. 修正の方、確認致しました。
      バッチリ動作してます!

      >こちらについてはマウスが画面外に出たことを正しく検知できないので、一旦保留とさせてください。

      今回の修正で非常に満足できております。
      お忙しい所、複数件のご要望に応えて頂いて本当にありがとうございました!

      削除
  6. こんにちは、画像の重ね合わせの小さな問題。
    2つの画像は重畳されている場合、下の画像は、クリックのために上の画像に優先します。
    補正することができますか?
    あなたはより多くの情報が必要な場合は、私はビデオに例を作ることができます。
    _________________________________
    Hello, a small problem of superimposition of images.
    When two images are superposed, the image below has priority over the image above for the click.
    Possible to correct?
    If you need more information, I can make an example on video.

    返信削除
    返信
    1. Hi. Thank you for using my plugin.
      Fixed problem maybe. please check it.(ver1.3.5)

      プラグインのご利用ありがとうございます。
      修正しましたので、動作をご確認ください。(ver1.3.5)

      削除
    2. 私の友人こんにちは。
      はい、あなたは問題を修正しました。
      あなたの助けとあなたの仕事をありがとうございました。
      幸運。
      ______________________________________
      Hello my friends.
      Yes, you have corrected the problem.
      Thank you for your help and your work.
      Good continuation.

      削除
  7. こんにちは。
    こちらのプラグインを使用させていただいて、製作過程で不具合のような現象があったためご報告させていただきます。

    画像のマウスオーバーの際に効果音を鳴らすように設定したのですが、初めに画像に触れた時だけ効果音が連続で発生します。
    二度目以降のマウスの接触は普通に動作するのですが。
    新規プロジェクトでも同じ結果でした。

    ちなみに使用した効果音はデフォルト素材の Switch1 です。
    動作確認に必要かもしれないので、一応書いておきます。

    返信削除
    返信
    1. こんにちは。プラグインのご利用ありがとうございます。
      こちらで当該効果音を使って検証してみましたが、現象を再現できませんでした。
      以下のような前提で実行していますが、間違いないでしょうか?

      ・プラグインコマンド
      P_CALL_CE 1 1 4

      ・コモンイベント「1」に効果音Switch1を鳴らすイベント

      ・ピクチャ番号「1」にピクチャを表示して、マウスを重ねる

      削除
    2. お疲れ様です。
      すみません、こちらの説明ミスでした。

      厳密にはピクチャ1番のボタン画像を表示した後、コモンイベントに 『ピクチャの表示』のイベントコマンドで ピクチャ1番のボタン画像を別のボタン画像に変更して、効果音を鳴らす、といったものです。

      上記の実行内容だと効果音が2連続で鳴るという現象が起こります。

      お手数ですが再度ご確認お願いできますでしょうか。

      削除
    3. 自己解決したのでご報告させていただきます。

      別のボタン画像に差し替えて効果音を鳴らす際、現在表示されているボタン画像のピクチャ番号以外を指定すれば、効果音が連続で鳴るという現象は起こらないようです。

      ピクチャ番号を増やしてしまうというデメリットがありますが、挙動としては問題ないのでこの方法で行こうと思います。
      ありがとうございました。

      削除
    4. お疲れさまです。
      上記対応について了解しました。
      この度はお手数をお掛けしました。

      削除
  8. @triacontane
    おはようございます。
    あなたがイメージの数を増やすことができ、あなたのプログラムが表示することができます。
    私は特別メニューのためのプラグインを使用し、私が追加したときに、特定の画像が消えるようです。

    私のゲームのための完璧なスクリプトのため事前にありがとうございます。
    ________________________________________________________________

    Hello .
    Could you increase the number of possible images ?, of your script can display.
    I use your plugin for special menu, and it seems certain image disappears when he has several.
    This is a menu with many given.
    Thank you in advance for your perfect script for my game.

    返信削除
    返信
    1. How to increase max numbers of pictures?
      Use this :)

      https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/PictureVariableSetting.js

      削除
  9. お疲れ様です。

    こちらのプラグインを使用させて、お試しのイベントを作っていたところ、


    ・プラグインコマンド P_CALL_CE 3 301 1

    ・ウェイト 1フレーム

    ・P_CALL_CE 4 302 1

    を一つのイベント内で上記の順番で実行すると、どうもピクチャ3のコモンイベント301が呼び出されず、下のピクチャ4で呼び出すはずのコモンイベント302が呼び出されているようです(確認ずみ)。
    こちらのバグについて、少々検証をお願いできませんでしょうか。

    返信削除
    返信
    1. 追記:バージョンは最新の1.3.5で、プラグインの数値はデフォルトを維持しています。

      削除
    2. こんにちは。
      プラグインのご利用ありがとうございます。

      こちらで同一のプラグインコマンドで検証しましたが、現象を再現できませんでした。
      ピクチャの表示状態によって発生する可能性がありますので、
      下記の仕様をもとに二つのピクチャの表示状態をご確認ください。

      当プラグインでは、プラグインコマンドを実行した時点ではコモンイベントは呼び出されず、ピクチャをクリックしたときにコモンイベントが呼ばれる仕様になっています。
      ピクチャが重なっている部分をクリックした場合、ピクチャ番号が大きい方(画面上でも前面に表示される)のコモンイベントが呼ばれます。
      ピクチャの不透明度を0に設定して透明表示していても、存在するものと見なされます。

      削除
    3. 解答ありがとうございました!
      原因は調べてみたら非常に単純で、

      プラグインの設定がデフォルトのまま=透明な箇所もスイッチとして判定されている=上位層のピクチャのタッチ判定が有効な状態になっていて、単により上層部のピクチャをスイッチとして認識していただけでした。

      透明箇所をスイッチと認識しない設定に変更して、問題解決しました。ご迷惑をおかけしました。

      削除
  10. とろろいも2016年7月10日 23:47

    初めまして、とろろいもです。ピクチャのボタン化プラグインをDLして使っています。
    1つ質問がありますが、ピクチャをクリックするとクリックした
    ピクチャと同じ場所に他の絵に変わる仕組みは出来るのでしょうか?

    返信削除
    返信
    1. はじめまして。プラグインのご利用ありがとうございます!
      ピクチャをクリックした際に実行されるコモンイベントで、「ピクチャの表示」を実行して表示しているピクチャを別のものに差し替えてください。

      削除
    2. とろろいも2016年7月11日 11:58

      ピクチャの表示の実行で仕組みを作ることが出来ました。
      どうもありがとうございます。

      削除
  11. Hi.
    Small problem if using zoom.
    Is it possible to make the functional zoom with your plugin?
    tank you friend
    https://github.com/MaskedRpg/JS/blob/master/mv/MBS_MapZoom.js

    http://forums.rpgmakerweb.com/index.php?/topic/48267-mbs-map-zoom/

    ____________________________________________________________
    こんにちは。
    ズームを使用している場合、小さな問題。
    それはあなたのプラグインで機能的なズームを行うことは可能ですか?
    ありがとう、友よ。
    私はこの1つを使用します。

    返信削除
    返信
    1. Hi. friend.
      I support map zoom if latest version.

      https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/PictureCallCommon.js

      削除
  12. はじめましてトリアコンタンさん、プラグイン楽しく使わせて頂いてます。
    実はさば缶さんのバフォーマンス改善プラグイン、Saba_Performance.js(recycleCanvas)が非常に有効でPCが落ちなくなったのですが
    ピクチャのボタン化プラグインが Cannot read property 'getImageData' of undefined で使えなくなりガックリしていました。
    どちらも外せない素晴らしいものなので何か解決法があればお教えください、よろしくお願いします。

    返信削除
    返信
    1. こんにちは!
      プラグインのご利用ありがとうございます!
      現象を確認したいので、Saba_Performance.jsの取得元URLを教えて頂いてもよろしいでしょうか?

      削除
    2. お返事有難うございます、こちらのさば缶さんブログからDL出来ます。
      http://petitrare.com/blog/
      https://github.com/sabakan03/mv/blob/master/Project/js/plugins/Saba_Performance.js
      よろしくお願いします。

      削除
    3. 遅くなりましたが、対応が完了しました。
      さば缶さまのパフォーマンスプラグインの再ダウンロードをお願いいたします。
      なお、現時点ではパフォーマンスプラグインは1.3.2以降では動作しない可能性がありますのでご注意ください。

      削除
    4. こんばんはトリアコンタンさん、動きました凄いです!なかば諦めかけていたので感激です!有難うございました!(#^.^#)
      朝晩冷えて来たので体調崩されぬよう気を付けて下さいね、失礼します。

      削除
  13. はじめまして。
    素敵なプラグインをありがとうございます。

    こちらのプラグインを使って自作メニューを作ったんですが、マウスではうまくいったもののキーボード操作のときの処理がうまくいきません。
    キーボードでメニューを開くとまずはじめにアイテムコマンドの色調が変わったピクチャを表示し、
    下を入力するとアイテムコマンドの色調が元に戻りスキルコマンドの色調が変わったピクチャを表示するという風にしたいんですがうまくできません。

    コモン1に変数1が0のときアイテム画面のピクチャ、変数1が1のときスキル画面のピクチャ、もし決定を押すと変数の値でそのシーンを呼び出す、
    コモン2を並列処理にしてコモン1を呼び出し、条件分岐→スクリプトでInput.isTriggeredでキー入力を判定し、
    下を押すと変数が1加算し上を押すと1減算され、条件にあったら各シーンが呼び出されるという風にしてるんですがこのやり方では間違っているのでしょうか?

    お手数おかけいたしますが、なにかアドバイスしていただけると嬉しいです。

    返信削除
    返信
    1. はじめまして! プラグインのご利用ありがとうございます!
      見たところ問題なさそうですがスクリプトは「Input.isTriggered()」になっているでしょうか?
      JSでは半角カッコを後ろに付けないと正しく関数が動作しないのでご注意ください。

      削除
  14. こんばんわ、昨日は試行錯誤を繰り返しなんとか自作メニューが完成しました。
    原因はヘタなイベントの組み方が原因でした。お騒がせして申し訳ないです。

    ですが新たな問題が2つ発生しました。

    1つは、マウスでカーソルを動かして決定でシーンに移行し、シーン内でカーソルを動かした後メニューに戻ると、
    カーソルが当たっていないのにシーン移行前のピクチャの色調が変わったまま表示されます。
    もう一度そのピクチャにカーソルを当ててやらないと元の色調に戻らないのでかなり不格好です。
    どうにかしてメニューに戻ったときカーソルが当たってない場合は色調が変わらないようにしたいんですがいい方法はありますでしょうか?

    もう1つは、ロードするとメニュー画面が表示されたまま始まります。
    これに関しても何か対処法はありますでしょうか。

    返信削除
    返信
    1. 1つ目について、シーンに移動する前に画面をフェードアウトして、ピクチャの色調を戻す方法でどうでしょうか?

      2つ目について、マップを使った自作メニューという仕様上、対策は難しいかもしれません。セーブ画面に移行する前に、画面をフェードアウトしてメニュー用のピクチャを消去する方法なら対応できるかもしれませんが、ご希望通りの動作になるかはなんともいえません。

      削除
    2. なるほど、そうすればよかったんですね。
      トリアコンタンさんのアドバイスをもとに、いくつか試行錯誤して納得いくまで調整してみます。
      アドバイスありがとうございました!これからも応援しています。

      削除
  15. はじめまして!
    ピクチャボタン化プラグイン重宝させていただいています!
    このプラグインのおかげで、過去に作ったゲームをandroid向けにリメイクすることができました!
    android向けに制作するのにとても便利で、また新しいゲームの制作にとりかかりました。
    と、思った矢先、androidで動かした際にピクチャの色調変更が反映されずにベタ色にされてしまいました。
    イマイチ原因が分からず、困っています。
    これを正常に表示するためのプラグインを作っていただくことは可能でしょうか?
    色数分画像を持つとデータ量も多くなり色々と問題が出てくるため、何とか色調変更で対応したいと思っています。
    やろうとしていることは、キャラメイクで髪の色を変更するという操作になります。
    プラグインの機能としては

    ・androidで動作させた場合にも色調変更を正常に反映させる

    ということになります。
    無茶な要望で申し訳ありませんが、ご検討よろしくお願いします。

    原因になっているかは不明ですが、apk作成ツールはツクールMV推奨の方法で行っています。
    ツールを変えればもしかしたら大丈夫だったりするのかもしれませんが・・・。

    返信削除
    返信
    1. はじめまして! プラグインのご利用ありがとうございます!

      申し訳ないのですが、apkでの動作については特有の問題が多い、また再現環境、開発環境も手元にないので調査、対応するのが難しい状況です。
      Web版のAndroid端末で再現する問題であれば調査することは可能です。恐縮ですがよろしくお願いいたします。

      削除
    2. こんにちは!
      そうですよね・・・。
      androidは色々と問題が多くて苦戦しています。
      Web用のものをandroidで見た場合は普通に表示されるので、やはりapkの問題みたいです。
      どうやら画像のRGB値を増減するのではなく、設定した色情報で上書きしてしまっているように見えます。
      データがかさんでしまいますが、画像を用意して対処することにします!

      いくつも要望を出して恐縮ではありますが、
      セーブロード画面に好きなデータを表示させるようなものは作れないでしょうか?
      変数、キャラクター名、アイテム名など、IDを入力しておくとその名称などが表示されるようなものです。
      セーブデータの表示系のプラグインはいくつか拝見したのですが、自分が想定しているものが再現できず・・・。
      機能としては
      ・xywhを入力して自由にレイアウトが組める(枠の並びやサイズも決めれるとありがたいです。)
      ・データベースのIDを入力して、任意のデータを表示できる(キャラや変数の値など)
       行間や配置なども設定できるとありがたいです。
      ・あらかじめ表示する文字列を追加できる(可能であれば)
      例えば、
      「1月1日 晴れ Kohei HP50 1月5日までにやくそうを5個集める」
      のような、セーブデータを見ただけで状況が分かるようにするのが目的となります。

      お忙しいところ申し訳ありませんが、ご検討いただけると幸いです。

      削除
    3. お疲れさまです。
      新規プラグインのリクエストについては、ツクールのフォーラム「http://tm.lucky-duet.com/」にて受け付けています。
      ここにあげたものについては定期的に確認して、可能なものから対応していますのでよろしくお願いします。

      削除
    4. お世話になります。
      プラグインのリクエストに投稿しましたので、
      ご検討いただけると幸いです。

      削除
  16. Hi there! Thank you very much for making this plug-in.
    I was wondering if it is possible to create a conditional branch like this (using the plugin that you created):

    if [mouse hovers over image]
    then [show picture 2]
    if [else]
    then [show picture 1]

    I am not much of a programmer, so I'm not sure how it would work or what I would input in the condition areas. I know in conditional branches you can call Script Commands, but this plugin uses Plugin Commands.

    Thank you in advance (sorry I don't speak Japanese, I hope this is able to translate over well).

    返信削除
    返信
    1. Hi. Thanks for using my plug-in. :)

      I support [mouse hovers over image] Script if you update latest version.
      Using script(conditional branches) [$gameScreen.isPointerInnerPicture([PictureID]);]

      https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/PictureCallCommon.js

      削除
  17. ツクマテでも同じ質問をさせていただきましたが一応こちらでも書き込んでおこうと思います。
    Iphoneを使ってブラウザでゲームをプレイした際にこのプラグインを有効化することは可能でしょうか、
    現状指先を使ったタッチでは反応しませんのでよければ何かアドバイスをいただけないでしょうか?

    追記
    他の方がこちらのスクリプトを使用して作ったゲームをIphoneでプレイした際には反応したみたなのですが
    自分の作品では他のスクリプトをoffにしても指タッチでは反応しません。
    もしよろしければ指タッチに必要な工程があればお願いします。

    返信削除
    返信
    1. こんばんは。
      ツクマテの方の投稿を先に確認したため、そちらに回答しました。
      よろしくお願いします。

      削除
  18. is possible to setPictureCallCommon with a custom function and not commonEvent ?
    EX: $gameScreen.setPictureCallCommon(pictureId, Myfunction(), trigger);
    thanks

    返信削除

注: コメントを投稿できるのは、このブログのメンバーだけです。