概要
このページでは『アクションイベントプラグイン』について解説しています。
『アクションイベントプラグイン』は、ティラノスクリプトのゲームにアクションイベント(いわゆるQTE: Quick Time Event)を実装するプラグインです。「時間内に特定の場所をタップせよ!」「時間内に特定のキーボード入力をせよ!」という感じをイベントを発生させます。
ティラノスクリプトV520以降に対応します。
目次
アクションイベントプラグイン/toc
導入方法
プラグインのファイル構成は次の通りです。
Plain Text
コピー
qte
├ init.ks
├ qte.css
├ qte.js
└ readme.txt
qteフォルダをティラノスクリプトのプロジェクトフォルダのdata/others/plugin/下に配置します。その後、first.ks等に以下のタグを記述すれば準備OKです。
Plain Text
コピー
[plugin name="qte"]
プラグインを[plugin]タグで読む込むときに指定できるパラメータ
ありません。
タグリファレンス
プラグインを読み込むと、以下のタグが新しく使えるようになります。
[qte_tap] タップイベントの発生
[qte_tap_clear] タップボタンの削除
[qte_gauge] ゲージストップイベントの発生
[qte_command] キーボード入力イベントの発生
[qte_virtual_key] キーボード入力イベント用の仮想キーボードボタンの表示
[qte_tap] タップイベントの発生
概要
画面上に制限時間付きのボタンを表示し、プレイヤーにタップを要求する機能です。
ボタンの位置や大きさを自由に設定できます(left、top、widthパラメータで設定)。位置の設定を省略した場合、ゲーム画面または指定した領域内のランダムな位置に表示されます(area_left、area_top他)。この場合、ゲームをプレイするたびに異なる位置にボタンが表示されるため、プレイヤーは常に新しい体験ができます。
ボタンには任意の制限時間を設けることができます(time)。〈プレイヤーが時間内にボタンをタップできたときのイベント〉や〈タップできなかったときのイベント〉を個別に設定できます。たとえば、プレイヤーがボタンをタップできたときに特定のシナリオにジャンプしたり(tap_storage、tap_target)、JavaScriptの式を実行したり(tap_exp)、[s]や[wait]を解除して次のタグに進んだりするようにできます(tap_next)。
ボタンにはテキストを設定できます(text、text_colorなど)。また、テキストの代わりに画像を設定することもできます(storage、folder)。ボタンにテキストを使用する場合、残り時間を示すサークルを表示することもできます(circle、circle_colorなど)。
ボタンのフェードイン・フェードアウトの時間をミリ秒で設定できます(fadein、fadeout)。ボタン表示中の拡大アニメーションの有無を指定できます(zoom)。タップしたときのフェードアウト・拡大アニメーションの有無を指定できます(tap_zoom、tap_fadeout)。
一時変数にタップ結果に関する情報が格納されます。タップまでにかかった時間(ミリ秒)がtf.tap_timeに格納されます。タップボタンの中心からタップした位置までの距離(ピクセル)がtf.tap_offset_pxに、その距離を0~1の比で表したものがtf.tap_offset_ratioに格納されます。いずれも[iscript]や[eval]などからアクセス可能です。
パラメータ
基本
シナリオ進行
デザイン・アニメーション
サンプルコード
JavaScript
コピー
;[qte_tap] サンプルコード
最もシンプルな形でタップイベントを発生[p]
; タップイベントを発生
[qte_tap top="300" left="300" width="200" time="3000"]
[wait time="3000"]
タップした次点でタグ進行[p]
; tap_next="true"
; タップした次点で[wait]をキャンセルして次に進めるようにする
[qte_tap top="300" left="300" width="200" time="3000" tap_next="true"]
[wait time="3000"]
tap_expを使ってタップ回数をカウント[p]
; tap_expを使ってタップ回数を数える
[eval exp="f.tap_count = 0"]
[qte_tap top="300" left="300" time="2000" tap_exp="f.tap_count += 1"]
[qte_tap top="300" left="600" time="2000" tap_exp="f.tap_count += 1"]
[qte_tap top="300" left="900" time="2000" tap_exp="f.tap_count += 1"]
[wait time="2000"]
; [emb]を使ってタップ回数をメッセージとして表示
タップした回数 = [emb exp="f.tap_count"]
; [if]を使ってタップ回数に応じてメッセージを変更
[if exp="f.tap_count >= 3"]
[r]
すごい!
[endif]
[p]
タップできたかどうかでシナリオジャンプ[p]
; tap_target: タップしたときに飛ぶラベル
; timeout_target: タップできなかったときに飛ぶラベル
[qte_tap top="300" left="300" width="200" time="2000" tap_target="tap_ok" timeout_target="tap_ng"]
[s]
*tap_ok
タップしました[p]
@jump target="tap_after"
*tap_ng
タップしませんでした[p]
@jump target="tap_after"
*tap_after
画像を使う[p]
; graphic="tap.png"
; タップボタンに次の画像を使う: data/image/tap.png
[qte_tap left="640" top="300" width="200" graphic="tap.png" time="2000" tap_next="true"]
[wait time="2000"]
タップしたときに音を鳴らす[p]
; tap_se="piro.mp3"
; タップしたときに次の効果音を再生する: data/sound/piro.mp3
[qte_tap left="640" top="300" width="200" tap_se="piro.mp3" time="2000" tap_next="true"]
[wait time="2000"]
タップボタンをランダムな位置に発生させる[p]
[qte_tap width="150" time="3000"]
[qte_tap width="150" time="3000"]
[qte_tap width="150" time="3000"]
[qte_tap width="150" time="3000"]
[qte_tap width="150" time="3000"]
[qte_tap width="150" time="3000"]
[qte_tap width="150" time="3000"]
[wait time="3000"]
タップにかかった時間や中心からの距離を表示する[p]
[qte_tap top="300" left="300" width="150" time="2000" tap_next="true"]
[wait time="2000"]
タップまでかかった時間(ミリ秒) = [emb exp="tf.tap_time"][r]
中心からの距離(ピクセル) = [emb exp="tf.tap_offset_px"][p]
[s]
[qte_tap_clear] タップボタンの削除
概要
[qte_tap]で表示したタップボタンをすべて削除します。
パラメータ
[qte_gauge] ゲージストップイベントの発生
概要
左右に動くゲージ(バー)をタップで止める操作をプレイヤーに要求する機能です。
成功エリアの範囲は自由に設定できます(range_success)。たとえば“80-100”とすると、右側2割の領域が成功エリアとなります。なお、“100”を省略して“80-”のように指定することもできます。
動くゲージを成功エリア内で止めることができれば成功、成功エリア外で止めてしまうと失敗となります。成功したときや失敗したときに特定のシナリオにジャンプするような動作が可能です(success_storage、success_target他)。また、成功失敗によらずタップしてゲージを止めることで次のタグに進むような動作にもできます(auto_next)。
ゲージを止めた結果は一時変数に格納されます。tf.gauge_resultにはイベントの結果が格納されます。成功、失敗、時間切れの場合にそれぞれ“success”、“failure”、“timeout”が格納されます。また、tf.gauge_positionにはゲージの位置が0~100の整数で格納されます。これらの一時変数は[iscript]や[eval]、[emb]などのタグから利用可能です。
操作には制限時間を設けることができます(time)。制限時間内に成功できなかった場合に特定のシナリオに飛ぶような動きが可能です(timeout_storage、timeout_target)。さらに、あらかじめ作成しておいた[ptext]領域に残り時間を表示することもできます(time_ptext)。
[free]や[anim]などでゲージを個別に操作できます。name=“qte_gauge”を指定してください。
パラメータ
基本
シナリオ進行
デザイン・アニメーション
サンプルコード
JavaScript
コピー
; [qte_gauge] サンプルコード
最もシンプルな形でゲージストップイベントを発生[p]
; range_success="80-100"
; 80%~100%の領域を成功エリアとする
; success_target: 成功時に飛ぶラベル
; failure_target: 失敗時に飛ぶラベル
[qte_gauge range_success="80-100" success_target="gauge_ok" failure_target="gauge_ng" layer="1" left="400" top="400" width="500"]
[s]
*gauge_ok
成功![p]
@jump target="gauge_after"
*gauge_ng
失敗![p]
*gauge_after
; レイヤ1からゲージ画像を削除
[free layer="1" name="qte_gauge"]
次のタグに進むようにする[p]
; auto_next="true"
; 結果によらず次のタグに進むようにする
[qte_gauge auto_next="true" range_success="80-100" layer="1" left="400" top="400" width="500"]
[s]
[freeimage layer="1"]
成功位置をカスタマイズ[p]
; range_success="0-5, 45-55, 95-100"
; ・0~100の数値とハイフンを使って指定する("40-80"のように)
; ・ただし左端の0や右端の100は省略してもかまわない("80-"と指定するのは、"80-100"と指定するのと同じ意味)
; ・カンマ区切りで複数の成功エリアを作成できる
[qte_gauge auto_next="true" range_success="0-5, 45-55, 95-100" layer="1" left="400" top="400" width="500"]
[s]
[freeimage layer="1"]
ゲージを非表示にしてバーだけ表示+バーを左右に往復移動[p]
; anim_dir="alternate"
; バーが左右に往復移動する
; gauge_color="transparent"
; ゲージが透明になる
[qte_gauge anim_dir="alternate" gauge_color="transparent" range_success="80-" layer="1" left="400" top="400" width="500" auto_next="true"]
[s]
[freeimage layer="1"]
[cm]
背景に画像を表示[p]
; bg_image="gauge.jpg"
; data/image/gauge.jpg を背景画像に使う
; bg_success=""
; 成功エリアを透明にできる
; bg_failure=""
; 失敗エリアを透明にできる
; ※成功エリア、失敗エリアを透明にしないと画像が見えない
[qte_gauge bg_image="gauge.jpg" bg_success="" bg_failure="" anim_dir="alternate" gauge_color="transparent" range_success="80-" layer="1" left="400" top="400" width="500" auto_next="true"]
[s]
[freeimage layer="1"]
背景ではなくゲージに画像を使う[p]
; gauge_image="gauge.jpg"
; data/image/gauge.jpg をゲージ画像に使う
[qte_gauge gauge_image="gauge.jpg" anim_dir="alternate" range_success="80-" layer="1" left="400" top="400" width="500" auto_next="true"]
[s]
[freeimage layer="1"]
ゲージに画像を使う場合の画像の動き方を変えられる[p]
; gauge_image_type="move"
; ゲージ画像がバーに併せて動くようになる
[qte_gauge gauge_image="gauge.jpg" gauge_image_type="move" anim_dir="alternate" range_success="80-" layer="1" left="400" top="400" width="500" auto_next="true"]
[s]
[freeimage layer="1"]
ゲージをタテ向きにする[p]
[qte_gauge vertical="true" left="300" top="100" width="80" height="350" range_success="80-" layer="1" auto_next="true"]
[s]
[freeimage layer="1"]
枠線や余白の設定など[p]
; border="3px black, 6px white, 3px black"
; 枠線の太さと色を指定する
; カンマ区切りで複数指定(内側から)できる
; padding="10"
; 背景画像とゲージの間に余白を設けることができる
[qte_gauge auto_next="true" range_success="80-100" layer="1" left="400" top="400" width="500" bg_image="gauge.jpg" padding="10" border="3px black, 6px white, 3px black"]
[s]
[freeimage layer="1"]
一時変数で結果を参照する[p]
[qte_gauge auto_next="true" layer="1" left="400" top="400"]
[s]
[freeimage layer="1"]
結果 = [emb exp="tf.gauge_result"][r]
ゲージの位置 = [emb exp="tf.gauge_position"]%[p]
制限時間を設ける[p]
; テキスト領域を作成(name="limit"を指定)
[ptext name="limit" text="" x="10" y="10" layer="1" size="40" bold="bold"]
; time="3000"を指定して制限時間を3秒に設定
; time_ptext="limit"を指定して先ほど作った[ptext]領域に制限時間を表示
; timeout_targetで時間切れのときに飛ぶシナリオを指定
[qte_gauge layer="1" left="400" top="400" time="3000" time_ptext="limit" success_target="gauge2_ok" failure_target="gauge2_ng" timeout_target="gauge2_to"]
[s]
*gauge2_ok
成功![p]
@jump target="gauge2_after"
*gauge2_ng
失敗![p]
@jump target="gauge2_after"
*gauge2_to
時間切れ![p]
*gauge2_after
[s]
[qte_command] キーボード入力イベントの発生
概要
画面上にキーを表示し、プレイヤーに特定のキーボード入力を要求する機能です。
たとえば「Z」「X」「C」「↑」「↓」の順でのキーボード入力を要求するには、command="ZXC↑↓"と指定します。
lifeパラメータで入力ミスの許容回数を設定できます。“3”を指定すると3回まで入力ミスが許容され4回目の入力ミスで失敗に。“0”だと即座に失敗になります。失敗したときに特定のシナリオにジャンプするような動きが可能です(failure_storage、failure_target)。なお、“-1”を指定すると(デフォルト)何度入力ミスしても許容されるようになります。
このタグを使用すると、入力すべきキーが画面に表示されます(以下、目標キーと言います)。目標キーのデザインはカスタマイズ可能です。[glink]のデザインを適用したり(button他)、背景色や文字色を個別に設定したりできます(text_color、bg_colorなど)。-
入力には制限時間を設けることができます(time)。制限時間内に成功できなかった場合に特定のシナリオに飛ぶような動きが可能です(timeout_storage、timeout_target)。さらに、あらかじめ作成しておいた[ptext]領域に残り時間を表示することもできます(time_ptext)。
[free]や[anim]で目標キーを操作できます。全体を動かしたり削除したりする場合にはname=“qte_command”を指定します。各目標キーに対して個別にアニメーションを適用させる場合はname=“qte_command_key”を指定します。
なお、スマホやタブレットではキーボード入力ができません。[qte_virtual_key]で仮想ボタンを表示することで、スマホやタブレットなどでも仮想的にキーボード入力がでaきるようになります。
パラメータ
基本
シナリオ進行
デザイン・アニメーション
サンプルコード
JavaScript
コピー
; [qte_command] サンプルコード
*home
[freeimage layer="1"]
キーボードイベントを発生[p]
[qte_command command="ZXC" bg_color="black" active_bg_color="orange" layer="1" success_target="command_ok" failure_target="command_ng"]
[glink x="30" y="30" text="戻る" width="200" target="home" color="btn_03_white"]
[s]
*command_ok
[cm]
成功![p]
@jump target="command_after"
*command_ng
[cm]
失敗![p]
*command_after
[freeimage layer="1"]
デザインを変更[p]
[qte_command button="btn_01_red" active_button="btn_01_yellow" behind_button="btn_01_white" command="ZXC" layer="1" success_target="command2_ok" failure_target="command2_ng"]
[s]
*command2_ok
[cm]
成功![p]
@jump target="command2_after"
*command2_ng
[cm]
失敗![p]
*command2_after
[freeimage layer="1"]
制限時間を設ける[p]
[ptext name="limit" text="" x="10" y="10" layer="1" size="40" bold="bold"]
[qte_command time_ptext="limit" button="btn_01_red" active_button="btn_01_yellow" command="←Z↑C→→←X" layer="1" time="5000" success_target="command3_ok" failure_target="command3_ng" timeout_target="command3_to"]
[s]
*command3_ok
[cm]
成功![p]
@jump target="command3_after"
*command3_to
[cm]
時間切れ![p]
@jump target="command3_after"
*command3_ng
[cm]
失敗![p]
*command3_after
[freeimage layer="1"]
仮想キーボードボタンの作成[p]
[qte_command time_ptext="limit" button="btn_01_red" active_button="btn_01_yellow" behind_button="btn_01_white" command="←Z↑C→→←X" layer="1" success_target="command4_ok" failure_target="command4_ng"]
[qte_virtual_key key="←" left="310" top="100" button="btn_02_black" text_size="40" width="60"]
[qte_virtual_key key="↓" left="380" top="100" button="btn_02_black" text_size="40" width="60"]
[qte_virtual_key key="↑" left="380" top="20" button="btn_02_black" text_size="40" width="60"]
[qte_virtual_key key="→" left="450" top="100" button="btn_02_black" text_size="40" width="60"]
[qte_virtual_key key="Z" left="010" top="100" button="btn_02_black" text_size="40" width="60"]
[qte_virtual_key key="X" left="080" top="100" button="btn_02_black" text_size="40" width="60"]
[qte_virtual_key key="C" left="150" top="100" button="btn_02_black" text_size="40" width="60"]
[s]
[qte_virtual_key] 仮想キーボードボタンの表示
概要
キーボード入力イベント用の仮想キーボードボタンを表示します。(通常の文字入力に使えるボタンではありませんのでご注意ください)