3.--素材配置-(ボタン)

提供: Light.vn wiki
移動: 案内検索

注:ページに不明瞭なところや誤字、追加して欲しい内容などありましたら
github, twitter, メールのどちらかを通じて気軽にご連絡ください。

ノベル製作時、ユーザーからの入力を貰い、何らかの形で対応する方法として
画像ボタンを利用する場合が多くあります。
このページはボタンの生成・利用に関してご説明します。



サンプル・スクリプト

先ず、以下のスクリプトをエディターにペーストしてみましょう:
(ボタンの利用法はいささか多様であるが故、サンプル・スクリプトが少し長くなります)

///////////////////////////////////////////////////////////////////////
栞 サンプル始め

クリア //以前生成された全てのリソースを解除
スクリプト textbox_sample.txt textbox_noautowait //ボタン文字は文字窓を必要

ボタン btn1 btn_sel.png 262 30 90 //表示のみ

ボタン btn2 btn_sel.png btn_sel@.png 262 100 90 //触ると変化

ボタン btn3 btn_sel.png btn_sel@.png btn_sel.png 262 170 90 //触ると変化+クリック時変化

ボタン基本資料 btn_sel.png btn_sel@.png btn_sel.png
~ボタン btn4 262 240 90 //ボタン基本資料を適応:使用素材の指定不要

"[待機 ボタン選択]
..ボタンがクリックされるまで待ちます。

~待機 ボタン選択 //ボタンが選択(クリック)されるまで待つ

アウト btn1, btn2, btn3, btn4

///////////////////////////////////////////////////////////////////////
//ボタンにコマンド追加 (クリック時発動)
//ボタンの最後に望むコマンドを付けると、クリック時に作動します
//(Light.vn内で使用可能な全てのコマンド適用可能)

ボタン基本資料 btn_sel.png btn_sel@.png btn_sel.png

ボタン btn1 262 30 90 "ふははははは! \w
~ボタン文字 btn1 r-mplus-1c-m.ttf 24  "クリック時台詞表示

~ボタン btn2 262 100 90 ジャンプ サンプル始め
~ボタン文字 btn2 r-mplus-1c-m.ttf 24  "クリック時「サンプル始め」栞ヘ

~ボタン btn3 262 170 90 ジャンプ tut_text.txt 
~ボタン文字 btn3 r-mplus-1c-m.ttf 24  "クリック時「tut_text.txt」へ

~ボタン btn4 btn_sel2.png btn_sel2@.png 262 240 90 背景音 eok.ogg 反復 
~ボタン文字 btn4 r-mplus-1c-m.ttf 24  "クリック時背景音再生

~//注:ボタン基本資料を宣言しても、btn4のように使用素材を特定すると
//特定された素材が使用されます。

"[ボタン コマンド]
..ボタンをクリックすると登録された
.コマンドがそれぞれ作動します。

~待機 ボタン選択


~//お疲れ様でした!

Light vn tut03.00.png

エディターの1行をクリックし、「F5」キーを押してみるとスクリプトのテストプレイが開始し、
(同じく「F5」キーを押す事でテストプレイは終了)
スクリプト行をクリックすると、その行までのスクリプト結果が左のプレビュー画面に反映されます。
簡単にプレイし、気軽にスクリプトを弄って見た後、以下の詳細説明を読む事をお勧めします。



:コマンド形式の [ ] は必須入力, ( ) はオプション(選択入力)を意味します。



ボタン

形式:ボタン [名前] (1.通常ファイル名) (2.タッチ時ファイル名) (3.クリック時ファイル名) [x座標] [y座標] [表示レイヤー] (カメラ無視) (クリック時作動コマンド)
エディターボタン:[ボタン 挿入]

:ボタン表示ファイルはプロジェクト経路の「Images」フォルダーから読み込みます

使用例 (即時表示):
ボタン btn1 btn_sel.png 262 30 90 //表示のみ

ボタン btn2 btn_sel.png btn_sel@.png 262 100 90 //触ると変化

ボタン btn3 btn_sel.png btn_sel@.png btn_sel.png 262 170 90 //触ると変化+クリック時変化  

ボタンは基本的に立ち絵と同じように、ボタン「名前」(使用素材名)[x座標] [y座標] [表示レイヤー] (カメラ無視)
の順に作成します。違うのは「指定できるイメージ画像の数」です。

ボタンは(1.通常表示画像) (2.タッチ時画像) (3.クリック時画像)まで指定できて、
必要であれば指定し、不必要であれば指定しなくても良いように出来ています。

使用例 (即時表示 - 通常画像のみ):
ボタン btn1 btn_sel.png 262 30 90 //表示のみ

btn_sel.png(1.通常表示画像)に該当します。
他に画像ファイルは指定していませんので表示のみをします。

使用例 (即時表示 - 通常画像、タッチ時画像):
ボタン btn2 btn_sel.png btn_sel@.png 262 100 90 //触ると変化

btn_sel.png btn_sel@.pngはそれぞれ
(1.通常表示画像) (2.タッチ時画像)に該当しますので、
普段はbtn_sel.png
タッチ時(触れる際)ボタンはbtn_sel@.pngに変わります。

使用例 (即時表示 - 通常画像、タッチ時画像、クリック時画像):
ボタン btn3 btn_sel.png btn_sel@.png btn_sel.png 262 170 90 //触ると変化+クリック時変化  

btn_sel.png btn_sel@.png btn_sel.pngはそれぞれ
(1.通常表示画像) (2.タッチ時画像) (3.クリック時画像)に該当しますので、
ボタンはタッチ時btn_sel@.pngに、
クリック時一瞬btn_sel.pngに変わります。



待機 ボタン選択とは)
ユーザーが画面に表示中のボタンをクリックするまでLight.vnが待機状態に入ります。
ボタンが選択されるまでスクリプト進行を一時停止させたい場合
(ボタンを選択肢として利用している状況等)に使用することをお勧めします。



ボタン基本資料

形式:ボタン基本資料 [1.通常表示画像] [2.タッチ時画像] [3.クリック時画像] (タッチ時効果音) (クリック時効果音)

:ボタン画像はプロジェクト経路の「Images」フォルダーから読み込みます
:効果音はプロジェクト経路の「SFX」フォルダーから読み込みます

ボタン基本資料はボタン生成時のデフォルトリソースを指定します。
なので、ボタン基本資料の宣言後、生成される全てのボタンは使用画像を直接指定しない限り
ボタン基本資料によって宣言されたリソースを使用します。

同じ素材を使用するボタンを同時にいくつか生成する際に等使うことをお勧めします。

使用例 (即時表示):
ボタン基本資料 btn_sel.png btn_sel@.png btn_sel.png
ボタン btn4 262 240 90 //ボタン基本資料を適応:使用素材の指定不要

btn4は(1.通常表示画像) (2.タッチ時画像) (3.クリック時画像)の内、
何も指定していませんのでボタン基本資料に宣言された
通常表示画像: btn_sel.png, タッチ時画像: btn_sel@.png, クリック時画像: btn_sel.png
が適用されて生成されます。

注: これはつまり、ボタン基本資料を宣言していても、ボタンの使用リソースを生成時
指定すると、指定されたリソースが優先され、使用されることになります。

注: ボタン基本資料は宣言された後、宣言されたスクリプトでのみ有効です。
つまり、宣言後他のスクリプト等にジャンプすると無効になります。



ボタンに文字を表示

形式:ボタン文字 [対象ボタン] [フォント名] [フォントサイズ] "(表示文章)

使用例:
ボタン btn3 btn_sel.png btn_sel@.png btn_sel.png 262 170 90
ボタン文字 btn3 r-mplus-1c-m.ttf 24 "ははは!

生成されたbtn3にははは!という文章を付けます。

注: ボタン文字は文章を対象ボタンの中央に表示します。



ボタンにコマンドを付ける

Light vn tut03.00.png

ボタンをクリックすると、特定のコマンドが作動されるようにする事が出来ます。
単純にボタン生成時、望むコマンドを最後に置く事で充分です。

注: ボタンのクリック時作動コマンドとして付けられるコマンドの類に制限は無く、
Light.vn上で使用可能な全てのコマンドを付ける事が可能であります。

使用例(台詞表示):
ボタン btn1 262 30 90 "ふははははは! \w
~ボタン文字 btn1 "クリック時台詞表示

btn1をクリックするとコマンド"ふははははは! \wが作動し、
台詞を表示した後ユーザー入力を待機します。
(テキストに関する詳細内容はこちら)

使用例(ジャンプ:現在スクリプトの特定栞へ):
~ボタン btn2 262 100 90 ジャンプ サンプル始め
~ボタン文字 btn2 "クリック時「サンプル始め」栞ヘ

btn2をクリックするとコマンドジャンプ サンプル始めが作動し、
現在スクリプトの「サンプル始め」と言う栞にジャンプします。

使用例(ジャンプ:他のスクリプトへ):
~ボタン btn3 262 170 90 ジャンプ tut_text.txt 
~ボタン文字 btn3 "クリック時「tut_text.txt」へ

btn3をクリックするとコマンドジャンプ tut_text.txtが作動し、
tut_text.txtスクリプトにジャンプします。

使用例(背景音再生):
~ボタン btn4 btn_sel2.png btn_sel2@.png 262 240 90 背景音 eok.ogg 反復 
~ボタン文字 btn4 "クリック時背景音再生

btn4をクリックするとコマンド背景音 eok.ogg 反復が作動し、
背景音再生が始まります。

幾つかの例を挙げてみましたが、
こんな風に、Light.vnで使用可能な全てのコマンドを自由にボタンに付ける事が出来ます。



ボタンタッチ時のコマンド作動

形式:ボタンタッチ時 [対象] [作動コマンド]

使用例:
ボタンタッチ時 jump_txt スクリプト textbox_sample.txt btnTouch1 

対象:jump_txtにタッチ時、コマンド:スクリプト textbox_sample.txt btnTouch1作動

:クリック時コマンドと同じく、Light.vn上で使用可能な全てのコマンドを利用可能。



ボタン活性領域

形式:ボタン活性領域

使用例:
ボタン活性領域

このスクリプトの読み込み中にはこのスクリプトで作られたボタンのみ活性化



>次:「4. 演出」へすすむ