AirNovel - スライドバー

AirNovel - スライドバー †

• 調整ツマミ
• 公式サンプルのようなcssではなく、pluginとAirNovelスクリプトで実現

適当に作ってみました。上手く動作しなかったらごめんなさい。
自由に改変してください。

公式サンプルのを参考にした方がいいかもしれません。

スライドバー用のスクリプト †

SlidebarTag.as

• ビルド方法等はAirNovel - プラグイン参照。

[add_slidebar]タグ †

 /**
  * スライドバーを追加する
  * 
  * @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]タグ †

 /**
  * スライドバーを削除する
  * 
  * @note [del_slidebar]
  *    layer : [必須]  スライドバーを判定するレイヤー
  */

[slidebar_pos]タグ †

 /**
  * スライドバーの座標を取得する
  * 
  * @note [slidebar_pos]
  *    layer : [必須]  スライドバーを判定するレイヤー
  *    name : [必須]  保存変数名
  */

[slidebar_percent]タグ †

 /**
  * スライドバーのパーセンテージを取得する
  * 
  * @note [slidebar_percent]
  *    layer : [必須]  スライドバーを判定するレイヤー
  *    name : [必須]  保存変数名
  */

使用例（マクロ込み） †

• 引数多いのは勘弁

 ;//--------------------------------------------------------------
 ;/**
 ; * スライドバーをセットアップ
 ; *
 ; * @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   : [必須]ボタン画像
 ; */
 ;//--------------------------------------------------------------
 [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]
   
   ; ベース画像を設定（この表示エリアで当たり判定が取られる）
   [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"]
   [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'"]
   [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'"]
 [endmacro]
 
 
 ;//--------------------------------------------------------------
 ;/**
 ; * スライドバーを削除
 ; *
 ; * @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   : [必須]ベース画像用grpレイヤー名（他と共用不可）
 ; * @param[ in ] button_layer : [必須]ツマミ画像用grpレイヤー名（他と共用不可）
 ; * @param[ in ] align        : [必須] どちらの方向へスライドバーがあるか[left : 右から左, right : 左から右, top : 下から上, bottom : 上から下]
 ; * @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" 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]

 ; 必要なレイヤーの生成
 [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"]
 
 ; 初期設定
 ; 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
   [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]

やってること †

• プラグインで、指定レイヤーのクリックされているマウス座標をリアルタイムに取得しています。[add_slidebar]
• AirNovelスクリプトでループを回してマウス座標を取得[slidebar_pos]。その場所にツマミを表示。

何か †

• ベース、ツマミは固定画像のみになります。([button enabled=false]）

使用した画像データサンプル †

• slidebar_base : スライドバーの下地。当たり判定領域。
  

• slidebar_button : スライドバーのツマミ