layerbutton

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

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

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

解説

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

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

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

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

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 等のボタンを描画するための便利な機能が使えます。
やや特殊な用途に用いる 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

関連項目

サンプル逆引き (13)

情報