AirNovel - スライドバー のバックアップソース(No.3)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• バックアップ を表示
• AirNovel - スライドバー へ行く。
  • 1 (2012-09-08 (土) 06:03:55)
  • 2 (2012-09-08 (土) 06:12:44)
  • 3 (2012-09-08 (土) 15:58:26)
  • 4 (2012-09-08 (土) 17:55:10)

*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]
  
  

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

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

** 使用した画像データサンプル [#gecdab70]
- slidebar_base : スライドバーの下地。当たり判定領域。
#ref(slidebar_base.png)

- slidebar_button : スライドバーのツマミ
#ref(slidebar_button.png)