This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

サークルタイマープラグイン

Last updated at 2021-01-27Posted at 2021-01-27

#概要

Canvas要素のContext-2Dで円形のタイマーを表示するプラグイン。
パラメーターが色々あるので _README.txt やこの説明記事を読みながら使用してください。

このプラグインを追加すると以下のタグが使用できるようになります。

[set_circle_timer]
[ctrl_circle_timer]
[make_circle_timer]

#プラグインの読み込み

解凍したフォルダを ./data/others/plugin/ に配置してください。

その後、任意の場所に [plugin name='circle_timer'] と記述することでプラグインの読み込みは完了です。
なお pluginタグで指定できるパラメーターは name属性のみです。

#タグリファレンス

##[set_circle_timer]

###概要

サークルタイマーを作成、起動します。
サークルタイマーは一度に複数作成・起動することが出来ますが、name属性は一意のものを指定してください。また起動しているタイマーが多すぎると動作が重くなるので注意してください。

###パラメーター説明

####name【必須】

サークルタイマーの名前を指定してください。この名前は一意のものでなければいけません。

・例

[set_circle_timer name="test1"]
[set_circle_timer name="test2"]

####fix

true / false を指定してください。
サークルタイマーをFIXレイヤーに表示する際はtrueにしてください。

ここで注意として、clearfixタグでFIXレイヤーのタイマーを削除した場合も、ctrl_circle_timerタグでタイマーを削除してください。

[set_circle_timer name="test" fix="true"]
[l]

[clearfix]
[ctrl_circle_timer name="test" content="clear"]

####time

サークルタイマーの最大時間をﾐﾘ秒で指定してください。
デフォルトは3000 [ms]。

[set_circle_timer name="test" time="10000"]

####start_time

サークルタイマー起動時、開始する時間を指定することが出来ます。
デフォルトは 0 [ms]。

; 1000 [ms] 時点から開始
[set_circle_timer name="test" time="10000" start_time="1000"]

####storage / target

タイマーが最大時間到達時ジャンプするシナリオファイルないしラベルを指定することが出来ます。

[set_circle_timer name="test" storage="scene1.ks" target="label"]

####left / top

left属性は表示する円の中心座標の横位置、top属性は表示する円の中心座標の縦位置を指定出来ます。

[set_circle_timer name="test" left="100" top="100"]

####scale

表示する円の大きさを倍率で指定します。
1 を指定すると円が画面いっぱいに表示されます。
デフォルトは 1 です。

[set_circle_timer name="test" left="640" top="320" scale="0.75"]

####front_color / back_color

frong_colorは表示する円前面の色、back_colorは円後面の色を指定出来ます。
色は 0xRRGGBB 形式で指定出来ます。

; 3000 [ms]かけて灰色の領域が広がっていく・青色の領域がなくなっていく
[set_circle_timer name="test" front_color="blue" back_color="0x808080"]

####stroke_color

表示する円・線の枠線の色を指定出来ます。
枠線を表示させない時は none と指定してください。
デフォルトは none。

[set_circle_timer name="test" stroke_color="black"]

####stroke_width

表示する円・線の枠線の幅を指定出来ます。
stroke_color属性で none を指定している場合は反映されません。

[set_circle_timer name="test" stroke_color="black" stroke_width="5"]

####end_p / end_color

end_p属性はパーセントを指定。end_color属性は色を指定。

例えば 80% と指定した場合、タイマーが 80 [%] 進んだところで円前面の色を end_color属性で指定した色に変化させることが出来ます。

残り時間が僅かの時に円前面の色を青から赤に変化させる演出が可能になりま。

色を変化させない時は、end_color属性に none を指定してください。
デフォルトは none です。

[set_circle_timer name="test" front_color="blue" back_color="gray" end_color="red" end_p="75%"]

####start

true / false を指定。
true を指定すると、タイマー表示後すぐにタイマーを起動します。
false を指定すると、タイマー表示後、ctrl_circle_timerタグのcontent属性に start を指定しない限りタイマーは起動しません。
デフォルトは true。

[set_circle_timer name="test" start="false"]
[l]
[ctrl_circle_timer name="test" content="start"]

####clear

true / false を指定。
true を指定すると、最大時間到達後に表示しているタイマーを瞬時に消去します。
false を指定すると、最大時間に到達しても表示しているタイマーをそのまま表示します。
ctrl_circle_timerタグの content属性に delete を指定することで削除できます。
デフォルトはtrue。

[set_circle_timer name="test" clear="false" target="label"]
[s]

*label
[l]
[ctrl_circle_timer name="test" content="delete"]

####zindex

レイヤー内のサークルタイマーの重なりを指定出来ます。
デフォルトは 999

##[ctrl_circle_timer]

###概要

set_circle_timerで作成したサークルタイマーを操作出来ます。

###パラメーター説明

####name【必須】

操作対象のタイマーの name をを指定してください。

####content

操作内容を指定します。
指定できる操作内容は以下の通りです。

#####・time

interval_time属性、max_time属性を操作する場合はcontent属性にtimeを指定してください。

[set_circle_timer name="test" time="10000"]

[l]

; 経過時間を 0 に戻す
[ctrl_circle_timer content="time" interval_time="0"]

#####・stop

タイマーを一時停止します。

[set_circle_timer name="test"]
[l]
[ctrl_circle_timer name="test" content="stop"]

#####・start

一時停止中のタイマーを起動・再起動します。

[set_circle_timer name="test" start="false"]
[l]
[ctrl_circle_timer name="test" content="start"]
[l]
[ctrl_circle_timer name="test" content="stop"]

#####・clear

タイマーを停止・削除します。
タイマーが起動中の時に指定してください。

[set_circle_timer name="test"]
[l]
[ctrl_circle_timer name="test" content="clear"]

#####・delete

タイマーを削除します。
タイマーが停止中の時に指定してください。

[set_circle_timer name="test" target="label" clear="false"]
[l]
[ctrl_circle_timer name="test" content="stop"]
[l]
[ctrl_circle_timer name="test" content="delete"]
[s]

*label
[l]
[ctrl_circle_timer name="test" content="delete"]

####interval_time

content属性に time を指定時に指定可能。
タイマーの経過時間を任意の時間に操作出来ます。

[set_circle_timer name="test" time="10000" start_time="0"]
[l]
[ctrl_circle_timer name="test" content="time" interval_time="9000"]

####max_time

content属性に time を指定時に指定可能。
タイマーの最大時間を操作出来ます。

[set_circle_timer name="test" time="50000" start_time="0"]
[l]
[ctrl_circle_timer name="test" content="time" max_time="10000"]

##[make_circle_timer]

###概要

make.ks に記述してください。
これを記述すると、セーブデータをロード時、セーブデータにサークルタイマーの起動が確認されると自動的に復帰されます。

#_SAMPLE.ks

*start

[plugin name="circle_timer"]

[layopt layer="message0" visible="false"]
[layopt layer="0" visible="true"]
[bg storage="room.jpg"]

[set_circle_timer name="test" time="10000" start_time="1000" start="false" clear="false" target="end" left="100" top="50" rad="40" fade_in="true" front_color="skyblue" stroke_color="black" stroke_width="0.5" end_color="red" end_p="80%"]

*timer
[l]
[ctrl_circle_timer name="test" content="start"]
[l]
[ctrl_circle_timer name="test" content="stop"]
[jump target="timer"]

*end
[eval exp="console.log('end')"]
[l]
[ctrl_circle_timer name="test" content="delete"]
[jump target="start"]
[s]

#履歴

日付	編集内容
2020/06/03	実験版リリース
2020/07/08	β版リリース
2020/07/14	canvas系パラメーター追加
2020/07/14	画面比率対応（canvas系・radパラメーを廃止・scaleを追加）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up