# layerbutton

ちょっとリッチなアニメーション付きボタンを作成

layerbutton p1,p2,p3,p4,p5,p6,p7,p8,p9,p10 {}

p1,p2 : レイヤーボタンのXYサイズ（ドット単位）
p3=0〜(0) : オプション値
p4=0〜(0) : グループID
p5=0〜(0) : SHOW_IN フレーム数
p6=0〜(0) : FOCUS_IN フレーム数
p7=0〜(0) : PRESS_IN フレーム数
p8=0〜(0) : SHOW_OUT フレーム数
p9=0〜(0) : FOCUS_OUT フレーム数
p10=0〜(0) : PRESS_OUT フレーム数

(プラグイン / モジュール : mod_layerbutton)

## 解説

    layerobj命令を利用して、ちょっとリッチなアニメーション付きボタンを比較的簡単に作成することができます。
    カレントポジションにレイヤーボタンオブジェクトを配置します。

    layerbutton命令末尾に{}を記述するという少し特殊な書き方でサブルーチンを指定します。
    {}で括られたサブルーチンの最後には必ず return を書いてください。

    {}内のサブルーチンが redraw 1 前に呼び出され、layerobjと同じようにシステム変数iparam,wparam,lparamが設定された状態で処理されます。
    lparam が objlayer_cmddraw のときに、layerbtn_stat にボタンの状態が代入され、layerbtn_cnt にその状態になってからのフレーム数が入ります。
    このボタン状態とフレーム数を利用して、ユーザーがボタンオブジェクトを描画することでアニメーションボタンの作成を実現します。

layerbtn_stat | 値 | 状態
LAYBTN_SHOW_IN | 2 | ボタンの表示を開始。
LAYBTN_FOCUS_IN | 4 | フォーカス状態。マウスを乗せたり、キー入力でフォーカスさせたとき。
LAYBTN_FOCUS_OUT | 8 | フォーカス状態解除。マウスをボタン外に移動させたり、キー入力で別のボタンにフォーカスを移動させたとき。
LAYBTN_PRESS_IN | 16 | ボタンを押し込んだ状態。ボタンをクリックしている間や、エンターキー等でボタンを決定したとき。
LAYBTN_PRESS_IN_SELECTED | 17 | ボタンが決定された瞬間のみ。 「決定された瞬間」とは、マウス/タッチの場合はボタンを押してさらにボタン範囲内で離した瞬間、キーボードの場合は押した瞬間です。 ※ laybtn_settings命令で設定を「ボタンを押した後に非表示(SHOW_OUT)処理させない」にしている場合にのみ呼び出されます。
LAYBTN_PRESS_OUT | 32 | ボタンを押し込んだ状態を解除。ボタンをクリックしたままマウスをボタン外に移動させたとき。
LAYBTN_SHOW_OUT | 64 | 非表示処理中の状態。ボタンが決定されたあと同一グループのすべてのボタンが非表示(SHOW_OUT)処理を開始する。
LAYBTN_SHOW_OUT_SELECTED | 65 | 非表示処理中の状態。ボタンが決定されたあと同一グループのすべてのボタンが非表示(SHOW_OUT)処理を開始する。 グループの中で決定されたボタンのみ_SELECTED状態となる。
LAYBTN_COMPLETE | 128 | グループ内のすべてのオブジェクトの非表示(SHOW_OUT)処理がすべて完了したとき。
LAYBTN_COMPLETE_SELECTED | 129 | グループ内のすべてのオブジェクトの非表示(SHOW_OUT)処理がすべて完了したとき。 グループの中で決定されたボタンのみ_SELECTED状態となる。

    デフォルトでマウス操作やキー入力によるフォーカス検知やボタン決定をサポートしています。

    p3 で layerobj と同じように任意の整数値をオプション値として保存することができます。
    オプション値は拡張システム変数 objlayer_option [objinfo(wparam,objlayer_info_option)] によって取り出せます。

    p4 にグループIDを設定すると、そのグループごとにボタン選択やフォーカス移動を分けることができます。
    また、グループIDの若い順に描画されるのでオブジェクトの重なる順番を制御できます。

    p5 〜 p10 にそれぞれの状態の表示にかけるフレーム数を指定します。

    laybtn_ease()関数を使うことで、layerbtn_cnt に連動したイージング値を簡単に取得できます。
    他にも、laybtn_mes命令や拡張システム変数 objlayer_axis_x, objlayer_axis_y, objlayer_size_x, objlayer_size_y, objlayer_axis_x2, objlayer_axis_y2, objlayer_option 等のボタンを描画するための便利な機能が使えます。
    (グループ全体を含む範囲やサイズ: objgroup_axis_x, objgroup_axis_y, objgroup_size_x, objgroup_size_y, objgroup_axis_x2, objgroup_axis_y2)
    やや特殊な用途に用いる layerbtn_mousex, layerbtn_mousey, layerbtn_clickx, layerbtn_clicky もあります。
    - layerbtn_mousex(y) : オブジェクト上を通過したカーソルの最後の座標。クリック/タッチ中はオブジェクト外の座標でも代入されます。
    - layerbtn_clickx(y) : オブジェクト上でクリック/タッチを開始した座標。クリック/タッチ中でない場合は -1 が代入されます。

    作成したlayerbuttonオブジェクトは通常、ボタンを押した後に非表示(SHOW_OUT)処理が行われることで自動的に削除されます。

    layerbuttonオブジェクトを強制的に削除したい場合は、laybtn_hide または clrobj を使用してください。
    また、objsel命令を使うことで layerbuttonオブジェクトにフォーカスを当てることができます。
    (objsel に -2 を指定すると、layerbuttonオブジェクトからフォーカスを除去することができるようにしています。)

    オブジェクトIDが必要な場合は、{}の直後の行でstatを参照してください。

    ゲームパッド等からの入力に対応するため layerbtn_stickVar 変数を用意しました。
    この変数に対して、stick 命令と同じ形式の値を毎フレーム代入することで、フォーカスの移動やボタンの決定を行えるようになります。
    (変数の内容は毎フレームの冒頭で自動的に 0 にリセットされます。)

    [命令の一部改造 : redraw, objsel]

## サンプル

    #include "mod_layerbutton.hsp"

    celload dir_tv+"btn_hard.png", -1;celid_auto
    cel_id = stat
    celdiv cel_id, 80, 24
    log = ""
    pos 10, 50
    layerbutton 180,60, cel_id, 0, 30,20,8, 15,10,4 {
    	if lparam == objlayer_cmddraw {
    		color 0,0,0 : objcolor 255,255,255
    		font msgothic, 18, 1
    		mes_zurasi = 0,0
    		// ボタン状態で分岐
    		switch layerbtn_stat
    		case LAYBTN_SHOW_IN
    			pos objlayer_axis_x-laybtn_ease(200, 0), objlayer_axis_y
    			gmode 3,,,255 : celput cel_id, 0, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    			mes_zurasi = -laybtn_ease(200, 0), 0
    			swbreak
    		case LAYBTN_FOCUS_IN
    			pos objlayer_axis_x, objlayer_axis_y
    			gmode 3,,,256 : celput cel_id, 0, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    			pos objlayer_axis_x, objlayer_axis_y
    			gmode 3,,,laybtn_ease(0,256) : celput cel_id, 1, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    			swbreak
    		case LAYBTN_FOCUS_OUT
    			pos objlayer_axis_x, objlayer_axis_y
    			gmode 3,,,256 : celput cel_id, 0, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    			pos objlayer_axis_x, objlayer_axis_y
    			gmode 3,,,laybtn_ease(256,0) : celput cel_id, 1, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    			swbreak
    		case LAYBTN_PRESS_IN
    			if layerbtn_cnt == 0 : log += "LAYBTN_PRESS_IN (cnt=0)" +"\n"
    			pos objlayer_axis_x, objlayer_axis_y
    			gmode 3,,,256 : celput cel_id, 2, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    			mes_zurasi = 0,3
    			swbreak
    		case LAYBTN_PRESS_OUT
    			pos objlayer_axis_x, objlayer_axis_y
    			gmode 3,,,256 : celput cel_id, 2, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    			mes_zurasi = 0,3
    			swbreak
    		case LAYBTN_SHOW_OUT
    		case LAYBTN_SHOW_OUT_SELECTED
    			pos objlayer_axis_x-laybtn_ease(0, 200, tien/2), objlayer_axis_y
    			if layerbtn_stat & LAYBTN_SELECTED {
    				if layerbtn_cnt == 0 : log += "LAYBTN_SHOW_OUT_SELECTED (cnt=0)" +"\n"
    				gmode 3,,,256 : celput cel_id, 2, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    				mes_zurasi = -laybtn_ease(0, 200, tien/2), 3
    			} else {
    				gmode 3,,,256 : celput cel_id, 0, 1.0*objlayer_size_x/80, 1.0*objlayer_size_y/24
    				mes_zurasi = -laybtn_ease(0, 200, tien/2), 0
    			}
    			swbreak
    		case LAYBTN_COMPLETE
    		case LAYBTN_COMPLETE_SELECTED
    			if layerbtn_stat & LAYBTN_SELECTED {
    				log += "LAYBTN_COMPLETE_SELECTED" +"\n"
    			}
    			return
    			swbreak
    		swend
    		laybtn_mes "ボタン id="+objlayer_option,4, 1,1, mes_zurasi(0),mes_zurasi(1)

    	}else : if lparam == objlayer_cmdterm {
    		if layerbtn_stat == LAYBTN_GROUP_DELETED {
    			log += "objlayer_cmdterm : グループの削除完了" +"\n"
    		}
    	}
    	return
    }
    repeat
    	redraw 0 : color 255,255,255 : boxf : color : pos 0,0 : font msgothic,16
    	mes log
    	redraw 1
    	await 1000/60
    loop

## 関連項目

laybtn_settings | layerbuttonオブジェクトの動作を設定する | (mod_layerbutton)
laybtn_mes | layerbuttonサブルーチン内用テキスト表示 | (mod_layerbutton)
laybtn_ease | layerbuttonサブルーチン内用イージング値の取得 | (mod_layerbutton)
laybtn_hide | layerbuttonの指定グループを非表示(SHOW_OUT)処理にして削除する | (mod_layerbutton)
laybtn_length | layerbutton指定グループ内のオブジェクト数を取得 | (mod_layerbutton)
laybtn_enable | layerbuttonの指定グループのオブジェクトに有効・無効の設定をする | (mod_layerbutton)
laybtn_width | layerbuttonオブジェクトのサイズや位置を変更する | (mod_layerbutton)
laybtn_focus | layerbuttonの指定グループ内の指定オブジェクトにフォーカスを移動させる | (mod_layerbutton)
laybtn_stick | layerbuttonサブルーチン内用キー入力情報取得 | (mod_layerbutton)
laybtn_ezcel | layerbuttonのcelputを利用した簡単描画 | (mod_layerbutton)
laybtn_ezbox | layerbuttonの角丸長方形塗りつぶしによる簡単描画 | (mod_layerbutton)
laybtn_ezfrm | layerbuttonの角丸長方形枠線による簡単描画 | (mod_layerbutton)
laybtn_boxfb | laybtn_ezbox,laybtn_ezfrmの角丸長方形をサイズ指定で塗りつぶしまたはボーダー描画 | (mod_layerbutton)
laybtn_hitarea | layerbuttonオブジェクトのタッチ範囲を変更して設定する | (mod_layerbutton)
layerbtn_stat | layerbuttonのボタン状態が代入される | (mod_layerbutton)
layerbtn_cnt | layerbuttonのボタン状態が変更されてからの経過フレーム数 | (mod_layerbutton)

## サンプル逆引き (15)

01 demo.hsp | title "layerbutton demo" log = "" HSP3Dish.js用フォルダ設定 in..
02 demo-stateflow.hsp | title "layerbutton stateflow" log = "" fps2 = 0 HSP3Dis..
03 sample_minimal-ezbox.hsp | #include "hsp3dish.as" #include "mod_layerbutton.hsp" l..
04 sample_minimal-ezcel.hsp | #include "hsp3dish.as" #include "mod_layerbutton.hsp" c..
05 sample_laybtn_ease.hsp | #include "mod_layerbutton.hsp" ボタン作成 pos 10,100 repeat ..
06 sample_settings.hsp | #include "mod_layerbutton.hsp" gosub *create_button_hid..
07 sample_vpad-jujikey.hsp | #include "hsp3dish.as" #include "mod_layerbutton.hsp" #..
08 sample_vpad-jujikey-noimg.hsp | #include "hsp3dish.as" #include "mod_layerbutton.hsp" #..
09 sample_vpad-analog.hsp | #include "hsp3dish.as" #include "mod_layerbutton.hsp" #..
10 sample_shooting.hsp | title "バーチャルパッド用サンプル シューティング" randomize HSP3Dish.js用データ..
11 sample_vpadmod.hsp | #include "hsp3dish.as" #include "mod_layerbutton-vpad.h..
12 sample_keybdmod.hsp | title "mod_layerbutton-keybd サンプル" HSP3Dish.js用データフォルダ設..
13 sample_emesmod.hsp | title "mod_layerbutton-emes サンプル" HSP3Dish.js用データフォルダ設定..
14 sample_ezfrm.hsp | #include "mod_layerbutton.hsp" #include "mod_layerbutto..
15 sample_RPG.hsp | title "RPGサンプル" -- 必要モジュール読み込み -- #include "mod_layerbu..

## 情報

プラグイン / モジュール | mod_layerbutton
バージョン | 1.3
作成日 | 2026/1/7
著作者 | MIZUSHIKI
URL | https://suwa.pupu.jp/HSP/index.html
備考 | layerobj命令を利用して、ちょっとリッチなアニメーション付きボタンを比較的簡単に作成することができます。
タイプ | 拡張命令
グループ | オブジェクト制御命令
対応環境 | ・Windows 版 HSP