![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
*AirNovel - スライドバー [#h05cb844] - 調整ツマミ - 公式サンプルのようなcssではなく、pluginとAirNovelスクリプトで実現 適当に作ってみました。上手く動作しなかったらごめんなさい。 自由に改変してください。 公式サンプルのを参考にした方がいいかもしれません。 ---- #contents ** スライドバー用のスクリプト [#a95dd6d9] #ref(SlidebarTag.as) - ビルド方法等は[[AirNovel - プラグイン]]参照。 *** [add_slidebar]タグ [#e75c2fb6] /** * スライドバーを追加する * * @note [add_slidebar] * layer : [必須] スライドバーを判定するレイヤー * align : [必須] どちらの方向へスライドバーがあるか[left : 右から左, right : 左から右, top : 下から上, bottom : 上から下] * left : [alignがleft, rightの場合は必須] スライドバーの領域左端 * right : [alignがleft, rightの場合は必須] スライドバーの領域右端 * top : [alignがtop, bototmの場合は必須] スライドバーの領域上端 * bottom: [alignがtop, bototmの場合は必須] スライドバーの領域下端 * default : [defaultかdefault_pどちらか必須]デフォルトの座標 * default_p : [defaultかdefault_pどちらか必須]デフォルトのパーセンテージ[0~100] * page : レイヤーのどちらのページを使うか[fore, back] */ *** [del_slidebar]タグ [#g17b7392] /** * スライドバーを削除する * * @note [del_slidebar] * layer : [必須] スライドバーを判定するレイヤー */ *** [slidebar_pos]タグ [#t41a6b10] /** * スライドバーの座標を取得する * * @note [slidebar_pos] * layer : [必須] スライドバーを判定するレイヤー * name : [必須] 保存変数名 */ *** [slidebar_percent]タグ [#e6d829ab] /** * スライドバーのパーセンテージを取得する * * @note [slidebar_percent] * layer : [必須] スライドバーを判定するレイヤー * name : [必須] 保存変数名 */ ** 使用例 [#r18c6333] ; プラグインのロード [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] ** 使用例（複数） [#r1244e5b] ; プラグインのロード [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] ** 使用例（レイヤー一杯使って動作を軽量化） [#t3e2b02c] - [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"] [event key="enter_frame" call=true label=*SlidebarButtonUpdate global=true frame=1] [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] ** 使用例（マクロ化） [#ud2a95fd] ** 使用例（マクロ込み） [#ud2a95fd] - 引数多いのは勘弁 ;//-------------------------------------------------------------- ;/** ; * スライドバーをセットアップ ; * ; * @param[ in ] base_layer : [必須]ベース画像用txtレイヤー名（他と共用不可） ; * @param[ in ] button_layer : [必須]ツマミ画像用txtレイヤー名（他と共用不可） ; * @param[ in ] base_layer : [必須]ベース画像用grpレイヤー名（他と共用不可） ; * @param[ in ] button_layer : [必須]ツマミ画像用grpレイヤー名（他と共用不可） ; * @param[ in ] align : [必須] どちらの方向へスライドバーがあるか[left : 右から左, right : 左から右, top : 下から上, bottom : 上から下] ; * @param[ in ] left : [alignがleft, rightの場合は必須] スライドバーの領域左端 ; * @param[ in ] right : [alignがleft, rightの場合は必須] スライドバーの領域右端 ; * @param[ in ] top : [alignがtop, bototmの場合は必須] スライドバーの領域上端 ; * @param[ in ] bottom : [alignがtop, bototmの場合は必須] スライドバーの領域下端 ; * @param[ in ] default : [defaultかdefault_pどちらか必須]デフォルトの座標 ; * @param[ in ] default_p : [defaultかdefault_pどちらか必須]デフォルトのパーセンテージ[0~100] ; * @param[ in ] base_center : [必須]ベース画像の配置左右センター ; * @param[ in ] base_middle : [必須]ベース画像の配置上下センター ; * @param[ in ] base_pic : [必須]ベース画像 ; * @param[ in ] button_pic : [必須]ボタン画像 ; * @param[ in ] var : [必須]使用する一時変数名 ; */ ;//-------------------------------------------------------------- [macro name="SlidebarSetup"] ; [plugin] スライドバーの設定 [add_slidebar * layer="&mp:base_layer" page=fore] [lay layer="&mp:base_layer" visible=true b_alpha=0] [lay layer="&mp:button_layer" page=fore visible=true b_alpha=0] ; ベース画像を設定（この表示エリアで当たり判定が取られる） [button layer="&mp:base_layer" page=fore pic="&mp:base_pic" center="&mp:base_center" middle="&mp:base_middle" enabled=false] [lay layer="&mp:base_layer" page=fore join=true fn="&mp:base_pic" center="&mp:base_center" middle="&mp:base_middle"] ; ボタン画像を設定 [let name="tmp:pos" text="0"] [slidebar_pos layer="&mp:base_layer" name="tmp:pos"] [button layer="&mp:button_layer" page=fore join=true pic="&mp:button_pic" center="&tmp:pos" middle="&mp:base_middle" enabled=false [lay layer="&mp:button_layer" page=fore join=true fn="&mp:button_pic" center="&tmp:pos" middle="&mp:base_middle" cond="mp:align == 'left' || mp:align == 'right'"] [button layer="&mp:button_layer" page=fore join=true pic="&mp:button_pic" center="&mp:base_center" middle="&tmp:pos" enabled=false [lay layer="&mp:button_layer" page=fore join=true fn="&mp:button_pic" center="&mp:base_center" middle="&tmp:pos" cond="mp:align == 'top' || mp:align == 'bottom'"] ; 初期位置を保存しておく [let name="&mp:var" text="&tmp:pos"] [endmacro] ;//-------------------------------------------------------------- ;/** ; * スライドバーを削除 ; * ; * @param[ in ] base_layer : [必須]ベース画像用txtレイヤー名（他と共用不可） ; * @param[ in ] button_layer : [必須]ツマミ画像用txtレイヤー名（他と共用不可） ; * @param[ in ] base_layer : [必須]ベース画像用grpレイヤー名（他と共用不可） ; * @param[ in ] button_layer : [必須]ツマミ画像用grpレイヤー名（他と共用不可） ; */ ;//-------------------------------------------------------------- [macro name="SlidebarFinish"] [del_slidebar layer="&mp:base_layer" page=fore] [clear_lay layer="&mp:base_layer"] [clear_lay layer="&mp:button_layer"] [endmacro] ;//-------------------------------------------------------------- ;/** ; * スライドバーを更新 ; * ; * @param[ in ] base_layer : [必須]ベース画像用txtレイヤー名（他と共用不可） ; * @param[ in ] button_layer : [必須]ツマミ画像用txtレイヤー名（他と共用不可） ; * @param[ in ] base_layer : [必須]ベース画像用grpレイヤー名（他と共用不可） ; * @param[ in ] button_layer : [必須]ツマミ画像用grpレイヤー名（他と共用不可） ; * @param[ in ] align : [必須] どちらの方向へスライドバーがあるか[left : 右から左, right : 左から右, top : 下から上, bottom : 上から下] ; * @param[ in ] var : [必須]使用する一時変数名 ; * @param[ in ] center : [alignがtop, bottomの場合は必須]画像の配置左右センター ; * @param[ in ] middle : [alignがleft, rightの場合は必須]画像の配置上下センター ; * @param[ in ] var : 使用する一時変数名 ; * @param[ in ] var_num : varの変数の中身 ; */ ;//-------------------------------------------------------------- [macro name="SlidebarUpdate"] [let name="tmp:pos" text="0"] [let name="tmp:last_pos" text="-1"] [let name="tmp:last_pos" text="&mp:var_num" cond="mp:var_num != null"] [slidebar_pos layer="&mp:base_layer" name="tmp:pos"] ; 前回から変更が無ければ何もしない（処理負荷対策） [let name="&mp:var" text="&tmp:pos"] [return cond="(tmp:pos - tmp:last_pos) == 0"] ; レイヤー自体を移動させる。 [lay layer="&mp:button_layer" left="&tmp:pos - mp:var" cond="mp:align == 'left' || mp:align == 'right'"] [lay layer="&mp:button_layer" top="&tmp:pos - mp:var" cond="mp:align == 'top' || mp:align == 'bottom'"] [lay layer="&mp:button_layer" center="&tmp:pos" middle="&mp:middle" cond="mp:align == 'left' || mp:align == 'right'"] [lay layer="&mp:button_layer" center="&mp:center" middle="&tmp:pos" cond="mp:align == 'top' || mp:align == 'bottom'"] [endmacro] ; スライドバー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"] ; 必要なレイヤーの生成 [add_lay layer="option_bgm_slidebar_base" class="grp"] [add_lay layer="option_bgm_slidebar_button" class="grp"] [add_lay layer="option_se_slidebar_base" class="grp"] [add_lay layer="option_se_slidebar_button" class="grp"] [add_lay layer="option_text_speed_slidebar_base" class="grp"] [add_lay layer="option_text_speed_slidebar_button" class="grp"] [add_lay layer="option_automode_speed_slidebar_base" class="grp"] [add_lay layer="option_automode_speed_slidebar_button" class="grp"] [add_lay layer="option_window_alpha_slidebar_base" class="grp"] [add_lay layer="option_window_alpha_slidebar_button" class="grp"] [SlidebarSetup base_layer="option_slidebar_base" button_layer="option_slidebar_button" align="right" left=850 right=1150 default_p=100 base_center=1000 base_middle=300 base_pic="slidebar_base" button_pic="slidebar_button" var="tmp:option_slidebar1"] [SlidebarSetup base_layer="option_slidebar_base2" button_layer="option_slidebar_button2" align="right" left=850 right=1150 default_p=100 base_center=1000 base_middle=500 base_pic="slidebar_base" button_pic="slidebar_button" var="tmp:option_slidebar2"] ; 初期設定 ; BGM [SlidebarSetup base_layer="option_bgm_slidebar_base" button_layer="option_bgm_slidebar_button" align="right" left=100 right=400 default_p=100 base_center=250 base_middle=100 base_pic="slidebar_base" button_pic="slidebar_button"] ; SE [SlidebarSetup base_layer="option_se_slidebar_base" button_layer="option_se_slidebar_button" align="right" left=100 right=400 default_p=100 base_center=250 base_middle=200 base_pic="slidebar_base" button_pic="slidebar_button"] ; TextSpeed [SlidebarSetup base_layer="option_text_speed_slidebar_base" button_layer="option_text_speed_slidebar_button" align="right" left=100 right=400 default_p=100 base_center=250 base_middle=300 base_pic="slidebar_base" button_pic="slidebar_button"] ; AutomodeSpeed [SlidebarSetup base_layer="option_automode_speed_slidebar_base" button_layer="option_automode_speed_slidebar_button" align="right" left=100 right=400 default_p=100 base_center=250 base_middle=400 base_pic="slidebar_base" button_pic="slidebar_button"] ; WindowAlpha [SlidebarSetup base_layer="option_window_alpha_slidebar_base" button_layer="option_window_alpha_slidebar_button" align="right" left=100 right=400 default_p=100 base_center=250 base_middle=500 base_pic="slidebar_base" button_pic="slidebar_button"] ; 更新用のイベント生成 [event key="enter_frame" call=true label=*SlidebarButtonUpdate global=true frame=1] [s] ;//-------------------------------------------------------------- ;/// スライドバーのツマミ位置更新 ;//-------------------------------------------------------------- *SlidebarButtonUpdate [SlidebarUpdate base_layer="option_slidebar_base" button_layer="option_slidebar_button" align="right" var="&tmp:option_slidebar1"] [SlidebarUpdate base_layer="option_slidebar_base2" button_layer="option_slidebar_button2" align="right" var="&tmp:option_slidebar2"] [let name="tmp:percent" text="0"] ; BGM [SlidebarUpdate base_layer="option_bgm_slidebar_base" button_layer="option_bgm_slidebar_button" align="right" middle=100 var="tmp:option_bgm_slidebar_pos" var_num="&tmp:option_bgm_slidebar_pos"] ; パーセンテージの取得 [slidebar_percent layer="option_bgm_slidebar_base" name="tmp:percent"] ; ここで設定を行う ; [let name="hogehoge" text="&tmp:percent"] ; SE [SlidebarUpdate base_layer="option_se_slidebar_base" button_layer="option_se_slidebar_button" align="right" middle=200 var="tmp:option_se_slidebar_pos" var_num="&tmp:option_se_slidebar_pos"] ; TextSpeed [SlidebarUpdate base_layer="option_text_speed_slidebar_base" button_layer="option_text_speed_slidebar_button" align="right" middle=300 var="tmp:option_text_speed_slidebar_pos" var_num="&tmp:option_text_speed_slidebar_pos"] ; AutomodeSpeed [SlidebarUpdate base_layer="option_automode_speed_slidebar_base" button_layer="option_automode_speed_slidebar_button" align="right" middle=400 var="tmp:option_automode_speed_slidebar_pos" var_num="&tmp:option_automode_speed_slidebar_pos"] ; WindowAlpha [SlidebarUpdate base_layer="option_window_alpha_slidebar_base" button_layer="option_window_alpha_slidebar_button" align="right" middle=500 var="tmp:option_window_alpha_slidebar_pos" var_num="&tmp:option_window_alpha_slidebar_pos"] [return] ** やってること [#leb16e59] - プラグインで、指定レイヤーのクリックされているマウス座標をリアルタイムに取得しています。[add_slidebar] - AirNovelスクリプトでループを回してマウス座標を取得[slidebar_pos]。その場所にツマミを表示。 ** 何か [#c0cd5dfd] - ベース、ツマミは固定画像のみになります。([button enabled=false]） ** 使用した画像データサンプル [#gecdab70] - 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.035 sec. |
|