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]
 
 
 
 ;//--------------------------------------------------------------
 ;/// スライドバーのツマミ位置更新
 ;//--------------------------------------------------------------
 *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]
▲ ▼

使用例（複数） †

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

使用例（レイヤー一杯使って動作を軽量化） †

  • [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]
▲ ▼

使用例（マクロ化） †

  • 引数多いのは勘弁
 ;//--------------------------------------------------------------
 ;/**
 ; * スライドバーをセットアップ
 ; *
 ; * @param[ in ] base_layer   : [必須]ベース画像用txtレイヤー名（他と共用不可）
 ; * @param[ in ] button_layer : [必須]ツマミ画像用txtレイヤー名（他と共用不可）
 ; * @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]
   
   ; ボタン画像を設定
   [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
       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
       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レイヤー名（他と共用不可）
 ; */
 ;//--------------------------------------------------------------
 [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 ] align        : [必須] どちらの方向へスライドバーがあるか[left : 右から左, right : 左から右, top : 下から上, bottom : 上から下]
 ; * @param[ in ] var          : [必須]使用する一時変数名
 ; */
 ;//--------------------------------------------------------------
 [macro name="SlidebarUpdate"]
   [let name="tmp:pos" text="0"]
   
   [slidebar_pos layer="&mp:base_layer" name="tmp:pos"]
   ; レイヤー自体を移動させる。
   [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'"]
 [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"]
 
 [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"]
 
 [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"]
   [return]
▲ ▼

やってること †

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

何か †

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

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

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