【ティラノスクリプト】名前入力画面にラジオボタンを追加する

名前入力画面にラジオボタンを追加します。

【参考記事・使用素材】

memo

日野谷様のを記事を参考にし、記事内の素材を使用させていただきました。

①[html]タグの追加

[html]

<div class="radio_area">
    <input type="radio" id="1" name="question" value="男" checked><label for="1">男</label>
    <input type="radio" id="2" name="question" value="女"><label for="2">女</label>
</div>

[endhtml]

[html]タグを追加します。

今回は、name属性にquestion、
value属性にそれぞれ男・女と指定しました。

②ラベルokの編集

f.question = $('input:radio[name="question"]:checked').val();

ラベルokを編集します。

ラジオボタンの値を取得し、変数f.questionに代入します。

これで、名前入力画面にラジオボタンを追加する手順は完了です。

③全体のコード

[clearfix]
[cm]

[loadcss file="data/scenario/style.css"]

[bg storage="name_entry_bg.png" time=0]

[layopt layer=0 visible=true]
[image storage="name_entry.png" layer=0 x=440 y=120 time=0]

*name_entry
[ptext layer=0 text="あなたの名前を入力してください<br>※最大4文字まで" x=0 y=220 size=24 color="white" name="name_entry" width=1280 align=center time=0]

[edit name="f.player_name" left=540 top=350 maxchars=4]

[html]

<div class="radio_area">
    <input type="radio" id="1" name="question" value="男" checked><label for="1">男</label>
    <input type="radio" id="2" name="question" value="女"><label for="2">女</label>
</div>

[endhtml]

[iscript]
if (f.player_name == undefined) {
	$(".text_box").val("太郎")
} else {
	$(".text_box").val(f.player_name)
};

$(".text_box").focus(function() {
	$(this).select()
})
[endscript]

[button graphic="reset.png" target="*reset" name="name_entry,name_entry_button" x=480 y=550 fix=true]
[button graphic="ok.png" target="*ok" name="name_entry,name_entry_button" x=650 y=550 fix=true]

[s]

*reset
[iscript]
$(".text_box").val("太郎");
[endscript]
[return]

*ok
[iscript]
if ($(".text_box").val().match(/^[ 　\r\n\t]*$/)) {
	TG.kag.ftag.startTag("return",{})
} else {
	f.question = $('input:radio[name="question"]:checked').val();
	TG.kag.ftag.startTag("jump",{target: "*commit"})
}
[endscript]

*commit
[commit name="f.player_name"]

[free layer=0 name="name_entry"]
[clearfix]
[clearstack]

[cm]

[iscript]
tf.name_entry_text = "あなたの名前は【" + f.player_name + "】でよろしいですか？";
tf.name_entry_radio = "性別：" + f.question;
[endscript]

[ptext layer=0 text="&tf.name_entry_text" x=0 y=280 size=24 color="white" name="name_entry" width=1280 align=center time=0]

[ptext layer=0 text="&tf.name_entry_radio" x=0 y=380 size=24 color="white" name="name_entry" width=1280 align=center time=0]

[button graphic="reset.png" target="*retry" name="name_entry,name_entry_button" x=480 y=550]
[button graphic="ok.png" target="*name_entry_ok" name="name_entry,name_entry_button" x=650 y=550]
[s]

*retry
[free layer=0 name="name_entry"]
[cm]
[jump target="*name_entry"]

*name_entry_ok
[freeimage layer=0]
[cm]

[jump storage="scene1.ks"]

以上で解説を終わります。おつかれさまでした。