![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
*AirNovel - スライドバー [#e46959a9] - 調整ツマミ - 公式サンプルのようなcssではなく、pluginとAirNovelスクリプトで実現 適当に作ってみました。上手く動作しなかったらごめんなさい。 自由に改変してください。 公式サンプルのを参考にした方がいいかもしれません。 ---- #contents ** スライドバー用のスクリプト [#a35ef0c4] #ref(SlidebarTag.as) ** 使用例 [#pf8a0178] ; プラグインのロード [loadplugin fn="SlidebarTag" join=true] ; スライドバーのツマミ座標保存 [let name="tmp:slidebar_pos1" text="0"] ; スライドバー1つにつき、1つのベースレイヤーを作る [add_lay layer="option_slidebar_base" class="txt"] ; スライドバーのツマミレイヤー [add_lay layer="option_slidebar_button" class="txt"] ; [plugin] スライドバーの設定 [add_slidebar layer="option_slidebar_base" align="right" page=fore left=850 right=1150 default_p=100] [lay layer="option_slidebar_base" visible=true b_alpha=0] [lay layer="option_slidebar_button" page=fore visible=true b_alpha=0] [lay layer="option_slidebar_button" page=back visible=true b_alpha=0] ; ベース画像を設定（この表示エリアで当たり判定が取られる） [button layer="option_slidebar_base" page=fore pic="slidebar_base" left=850 middle=300 enabled=false] [call label=*SlidebarUpdate] ; ループを回す *OptionLoop [call label=*SlidebarUpdate] [call label=*OptionLoop] [s] ;//-------------------------------------------------------------- ;/// スライドバーのツマミ位置更新 ;//-------------------------------------------------------------- *SlidebarButtonUpdate ; backページに設定後、差し替え [let name="tmp:percent" text="0"] [slidebar_pos layer="option_slidebar_base" name="tmp:slidebar_pos1"] [slidebar_percent layer="option_slidebar_base" name="tmp:percent"] ; ここで設定を行う ; [let name="hogehoge" text="&tmp:percent"] [button layer="option_slidebar_button" page=back join=true pic="slidebar_button" center="&tmp:slidebar_pos1" middle="300" enabled=false] [trans layer="option_slidebar_button"] [wt] [clear_lay layer="option_slidebar_button" page=back] [return] ;//-------------------------------------------------------------- ;/// スライドバーの更新 ;//-------------------------------------------------------------- *SlidebarUpdate [let name="tmp:pos1" text="0"] ; ボタン位置取得 [slidebar_pos layer="option_slidebar_base" name="tmp:pos1"] ; 座標値に変更が入った時のみ更新する（そうしないと、スライドバー以外が正常に動かない） [let name="tmp:update" text="&tmp:pos1 != tmp:slidebar_pos1"] [call label=*SlidebarButtonUpdate cond="tmp:update == true"] ; 空ループになるので、更新がない場合はwaitを挟む [wait time=16 cond="tmp:update == false"] [return] ** 使用例（複数） [#q2c611e0] ; プラグインのロード [loadplugin fn="SlidebarTag" join=true] ; スライドバーのツマミ座標保存 [let name="tmp:slidebar_pos1" text="0"] [let name="tmp:slidebar_pos2" text="0"] ; スライドバー1つにつき、1つのベースレイヤーを作る [add_lay layer="option_slidebar_base" class="txt"] [add_lay layer="option_slidebar_base2" class="txt"] ; スライドバーのツマミレイヤー [add_lay layer="option_slidebar_button" class="txt"] ; [plugin] スライドバーの設定 [add_slidebar layer="option_slidebar_base" align="right" page=fore left=850 right=1150 default_p=100] [add_slidebar layer="option_slidebar_base2" align="right" page=fore left=850 right=1150 default_p=100] [lay layer="option_slidebar_base" visible=true b_alpha=0] [lay layer="option_slidebar_base2" visible=true b_alpha=0] [lay layer="option_slidebar_button" page=fore visible=true b_alpha=0] [lay layer="option_slidebar_button" page=back visible=true b_alpha=0] ; ベース画像を設定（この表示エリアで当たり判定が取られる） [button layer="option_slidebar_base" page=fore pic="slidebar_base" left=850 middle=300 enabled=false] [button layer="option_slidebar_base2" page=fore pic="slidebar_base" left=850 middle=500 enabled=false] [call label=*SlidebarUpdate] ; ループを回す *OptionLoop [call label=*SlidebarUpdate] [call label=*OptionLoop] [s] ;//-------------------------------------------------------------- ;/// スライドバーのツマミ位置更新 ;//-------------------------------------------------------------- *SlidebarButtonUpdate ; backページに設定後、差し替え [let name="tmp:percent" text="0"] [slidebar_pos layer="option_slidebar_base" name="tmp:slidebar_pos1"] [slidebar_percent layer="option_slidebar_base" name="tmp:percent"] ; ここで設定を行う ; [let name="hogehoge" text="&tmp:percent"] [button layer="option_slidebar_button" page=back join=true pic="slidebar_button" center="&tmp:slidebar_pos1" middle="300" enabled=false] [slidebar_pos layer="option_slidebar_base2" name="tmp:slidebar_pos2"] [slidebar_percent layer="option_slidebar_base2" name="tmp:percent"] ; ここで設定を行う ; [let name="hogehoge" text="&tmp:percent"] [button layer="option_slidebar_button" page=back join=true pic="slidebar_button" center="&tmp:slidebar_pos2" middle="500" enabled=false] [trans layer="option_slidebar_button"] [wt] [clear_lay layer="option_slidebar_button" page=back] [return] ;//-------------------------------------------------------------- ;/// スライドバーの更新 ;//-------------------------------------------------------------- *SlidebarUpdate [let name="tmp:pos1" text="0"] [let name="tmp:pos2" text="0"] ; ボタン位置取得 [slidebar_pos layer="option_slidebar_base" name="tmp:pos1"] [slidebar_pos layer="option_slidebar_base2" name="tmp:pos2"] ; 座標値に変更が入った時のみ更新する（そうしないと、スライドバー以外が正常に動かない） [let name="tmp:update" text="&tmp:pos1 != tmp:slidebar_pos1 || tmp:pos2 != tmp:slidebar_pos2"] [call label=*SlidebarButtonUpdate cond="tmp:update == true"] ; 空ループになるので、更新がない場合はwaitを挟む [wait time=16 cond="tmp:update == false"] [return] ** 使用例（レイヤー一杯使って動作を軽量化） [#t5b8b68e] - [button]で再配置するのではなく、レイヤー自体を[lay left=]等で移動させる。 ; プラグインのロード [loadplugin fn="SlidebarTag" join=true] ; スライドバーのツマミ座標保存 [let name="tmp:slidebar_pos1" text="0"] [let name="tmp:slidebar_pos2" text="0"] ; スライドバー1つにつき、1つのベースレイヤーを作る [add_lay layer="option_slidebar_base" class="txt"] [add_lay layer="option_slidebar_base2" class="txt"] ; スライドバー1つにつき、ツマミレイヤーを作る [add_lay layer="option_slidebar_button" class="txt"] [add_lay layer="option_slidebar_button2" class="txt"] ; [plugin] スライドバーの設定 [add_slidebar layer="option_slidebar_base" align="right" page=fore left=850 right=1150 default_p=100] [add_slidebar layer="option_slidebar_base2" align="right" page=fore left=850 right=1150 default_p=100] [lay layer="option_slidebar_base" visible=true b_alpha=0] [lay layer="option_slidebar_base2" visible=true b_alpha=0] [lay layer="option_slidebar_button" page=fore visible=true b_alpha=0] [lay layer="option_slidebar_button2" page=fore visible=true b_alpha=0] ; ベース画像を設定（この表示エリアで当たり判定が取られる） [button layer="option_slidebar_base" page=fore pic="slidebar_base" left=850 middle=300 enabled=false] [button layer="option_slidebar_base2" page=fore pic="slidebar_base" left=850 middle=500 enabled=false] ; ボタン画像を設定 [let name="tmp:pos" text="0"] [slidebar_pos layer="option_slidebar_base" name="tmp:pos"] [button layer="option_slidebar_button" page=fore join=true pic="slidebar_button" center="&tmp:pos" middle="300" enabled=false] [let name="tmp:slidebar_pos1" text="&tmp:pos"] [slidebar_pos layer="option_slidebar_base2" name="tmp:pos"] [button layer="option_slidebar_button2" page=fore join=true pic="slidebar_button" center="&tmp:pos" middle="500" enabled=false] [let name="tmp:slidebar_pos2" text="&tmp:pos"] ; ループを回す *OptionLoop [call label=*SlidebarUpdate] [call label=*OptionLoop] [s] ;//-------------------------------------------------------------- ;/// スライドバーのツマミ位置更新 ;//-------------------------------------------------------------- *SlidebarButtonUpdate ; 初期位置と現在位置を見て移動させる [let name="tmp:percent" text="0"] [let name="tmp:pos" text="0"] [slidebar_pos layer="option_slidebar_base" name="tmp:pos"] [slidebar_percent layer="option_slidebar_base" name="tmp:percent"] ; ここで設定を行う ; [let name="hogehoge" text="&tmp:percent"] [lay layer="option_slidebar_button" left="&tmp:pos - tmp:slidebar_pos1"] [slidebar_pos layer="option_slidebar_base2" name="tmp:pos"] [slidebar_percent layer="option_slidebar_base2" name="tmp:percent"] ; ここで設定を行う ; [let name="hogehoge" text="&tmp:percent"] [lay layer="option_slidebar_button2" left="&tmp:pos - tmp:slidebar_pos2"] [return] ;//-------------------------------------------------------------- ;/// スライドバーの更新 ;//-------------------------------------------------------------- *SlidebarUpdate [let name="tmp:pos1" text="0"] [let name="tmp:pos2" text="0"] ; ボタン位置取得 [slidebar_pos layer="option_slidebar_base" name="tmp:pos1"] [slidebar_pos layer="option_slidebar_base2" name="tmp:pos2"] ; 座標値に変更が入った時のみ更新する（そうしないと、スライドバー以外が正常に動かない） [let name="tmp:update" text="&tmp:pos1 != tmp:slidebar_pos1 || tmp:pos2 != tmp:slidebar_pos2"] [call label=*SlidebarButtonUpdate cond="tmp:update == true"] ; 空ループになるので、更新がない場合はwaitを挟む [wait time=16 cond="tmp:update == false"] [return] ** やってること [#g11ff619] - プラグインで、指定レイヤーのクリックされているマウス座標をリアルタイムに取得しています。[add_slidebar] - AirNovelスクリプトでループを回してマウス座標を取得[slidebar_pos]。その場所にツマミを表示。 - ループ部分は[event key=enter_frame]でいいかも。 ** 何か [#w7bfd631] - ベース、ツマミは固定画像のみになります。([button enabled=false]） ** 使用した画像データサンプル [#xe350f98] - slidebar_base : スライドバーの下地。当たり判定領域。 #ref(slidebar_base.png) - slidebar_button : スライドバーのツマミ #ref(slidebar_button.png) |
|
|
Modified by com04.
Powered by PukiWiki Plus! 1.4.7plus-u2-eucjp. HTML convert time to 0.006 sec. |
|