AirNovel - スライドバー †

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

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

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

▲ ▼

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

fileSlidebarTag.as
▲ ▼

[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 : [必須]  保存変数名
  */
▲ ▼

使用例 †

 
 ; プラグインのロード
 [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]
▲ ▼

使用例（マクロ込み） †
  • 引数多いのは勘弁 
 ;//--------------------------------------------------------------
 ;/// スライドバーのツマミ位置更新
 ;/**
 ; * スライドバーをセットアップ
 ; *
 ; * @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   : [必須]ボタン画像
 ; */
 ;//--------------------------------------------------------------
 *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]
 [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]
 
   [trans layer="option_slidebar_button"]
   [wt]
   [clear_lay layer="option_slidebar_button" page=back]
   [return]
 
 
 
 ;//--------------------------------------------------------------
 ;/// スライドバーの更新
 ;/**
 ; * スライドバーを削除
 ; *
 ; * @param[ in ] base_layer   : [必須]ベース画像用grpレイヤー名（他と共用不可）
 ; * @param[ in ] button_layer : [必須]ツマミ画像用grpレイヤー名（他と共用不可）
 ; */
 ;//--------------------------------------------------------------
 *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]
▲ ▼

使用例（複数） †

 
 ; プラグインのロード
 [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]
 
 
 
 [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の変数の中身
 ; */
 ;//--------------------------------------------------------------
 *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]
 [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"]
▲ ▼

使用例（レイヤー一杯使って動作を軽量化） †
  • [button]で再配置するのではなく、レイヤー自体を[lay left=]等で移動させる。 
     ; プラグインのロード
 [loadplugin fn="SlidebarTag" join=true]
   [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"]
 
 ; スライドバーのツマミ座標保存
 [let name="tmp:slidebar_pos1" text="0"]
 [let name="tmp:slidebar_pos2" text="0"]
 ; 初期設定
 ; 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"]
 
 ; スライドバー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"]
 ; 更新用のイベント生成
 [event key="enter_frame" call=true label=*SlidebarButtonUpdate global=true frame=1]
 
 ; [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"]
   ; 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"]
   [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"]
   ; 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]
 
 
 
 ;//--------------------------------------------------------------
 ;/// スライドバーの更新
 ;//--------------------------------------------------------------
 *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]
▲ ▼

やってること †

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

何か †

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

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

  • slidebar_base : スライドバーの下地。当たり判定領域。
    slidebar_base.png
  • slidebar_button : スライドバーのツマミ
    slidebar_button.png
    ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS