【ティラノビルダー】主人公の性別や髪形で、セリフを変化させる方法
主人公の性別や髪形で、セリフを変化させる方法について解説します。
①画像の準備
【性別の画像ボタン】
male_off.png/male_on.png
female_off.png/female_on.png
【髪形の画像ボタン】
hairstyle1_off.png/hairstyle1_on.png
hairstyle2_off.png/hairstyle2_on.png
hairstyle3_off.png/hairstyle3_on.png
hairstyle4_off.png/hairstyle4_on.png
hairstyle5_off.png/hairstyle5_on.png
hairstyle6_off.png/hairstyle6_on.png
性別・髪形の画像ボタンを、それぞれon/offを準備します。
②画像の配置
画面左側のプロジェクト名をクリックします。
プロジェクトフォルダが開かれるので、imageフォルダをクリックします。
imageフォルダが開かれました。
フォルダを新規作成します。
今回は、フォルダ名をentryとしました。
先程作成したentryフォルダに画像を配置します。
これで、画像の配置は完了です。
③シナリオの追加
シナリオを追加し、今回はシナリオ名をscene2とします。
これでシナリオの追加は完了です。
④ティラノスクリプトコンポーネントの配置
ティラノスクリプトコンポーネントを配置します。
下記のコードを貼り付けます。
[nolog]
性別・髪形を選択してください。
[button graphic="entry/male_off.png" target="*sex" name="entry,male" x="80" y="100" fix="true" exp="f.sex = 'male'"]
[button graphic="entry/female_off.png" target="*sex" name="entry,female" x="280" y="100" fix="true" exp="f.sex = 'female'"]
[button graphic="entry/hairstyle1_off.png" target="*hairstyle" name="entry,hairstyle1" x="80" y="200" fix="true" exp="tf.hairstyle = 1"]
[button graphic="entry/hairstyle2_off.png" target="*hairstyle" name="entry,hairstyle2" x="280" y="200" fix="true" exp="tf.hairstyle = 2"]
[button graphic="entry/hairstyle3_off.png" target="*hairstyle" name="entry,hairstyle3" x="480" y="200" fix="true" exp="tf.hairstyle = 3"]
[button graphic="entry/hairstyle4_off.png" target="*hairstyle" name="entry,hairstyle4" x="680" y="200" fix="true" exp="tf.hairstyle = 4"]
[button graphic="entry/hairstyle5_off.png" target="*hairstyle" name="entry,hairstyle5" x="880" y="200" fix="true" exp="tf.hairstyle = 5"]
[button graphic="entry/hairstyle6_off.png" target="*hairstyle" name="entry,hairstyle6" x="1080" y="200" fix="true" exp="tf.hairstyle = 6"]
*entry
[glink color="black" target="*check" size="20" text="決定" x="497" y="300" width="200" height=""]
[s]
*sex
[iscript]
if ( f.sex == 'male') {
$(".male").attr("src","./data/image/entry/male_on.png");
$(".female").attr("src","./data/image/entry/female_off.png");
}else{
$(".male").attr("src","./data/image/entry/male_off.png");
$(".female").attr("src","./data/image/entry/female_on.png");
}
[endscript]
[return]
*hairstyle
[iscript]
if ( f.hairstyle == undefined) {
$('.hairstyle' + tf.hairstyle).attr("src",'./data/image/entry/hairstyle' + tf.hairstyle + '_on.png');
f.hairstyle = tf.hairstyle;
}else if( f.hairstyle != tf.hairstyle ) {
$('.hairstyle' + tf.hairstyle).attr("src",'./data/image/entry/hairstyle' + tf.hairstyle + '_on.png');
$('.hairstyle' + f.hairstyle).attr("src",'./data/image/entry/hairstyle' + f.hairstyle + '_off.png');
f.hairstyle = tf.hairstyle;
}
[endscript]
[return]
*check
[if exp="f.sex == undefined && f.hairstyle == undefined"]
性別・髪形を選択してください
[jump target="*entry"]
[elsif exp="f.sex == undefined"]
性別を選択してください
[jump target="*entry"]
[elsif exp="f.hairstyle == undefined"]
髪型を選択してください
[jump target="*entry"]
[endif]
性別・髪形を確定しますか？
[glink color="black" target="*yes" size="20" text="はい" x="314" y="300" width="200" height=""]
[glink color="black" target="*no" size="20" text="いいえ" x="680" y="300" width="200" height=""]
[s]
*yes
[clearfix name="entry"]
[endnolog]
[jump storage="scene2.ks"]
*no
性別・髪形を選択してください。
[jump target="*entry"]【コードの解説】
glinkと書かれているコードが分岐ボタンに該当します。
■ color
カラー
■ size
サイズ
■ text
テキスト
■ x
横位置
■ y
縦位置
■ width
横幅
■ height
縦幅
⑤scene2の編集
先頭のテキストコンポーネントの入力モードは何もしないにします。
【パターン①】
[if exp="f.sex == 'male'"]
男性のセリフ
[elsif exp="f.sex == 'female'"]
女性のセリフ
[endif]【パターン②】
[if exp="f.hairstyle == 1"]
髪形1のセリフ
[elsif exp="f.hairstyle == 2"]
髪形2のセリフ
[elsif exp="f.hairstyle == 3"]
髪形3のセリフ
[elsif exp="f.hairstyle == 4"]
髪形4のセリフ
[elsif exp="f.hairstyle == 5"]
髪形5のセリフ
[elsif exp="f.hairstyle == 6"]
髪形6のセリフ
[endif]【パターン③】
[if exp="f.sex == 'male' && f.hairstyle == 1"]
男性・髪形1のセリフ
[elsif exp="f.sex == 'female' && f.hairstyle == 1"]
女性・髪形1のセリフ
[else]
それ以外のセリフ
[endif]これで、主人公の性別や髪形で、セリフを変化させる手順は完了です。
以上で解説を終わります。おつかれさまでした。