【ティラノビルダー】ダイヤル錠の作成方法

ティラノビルダーでダイヤル錠の作成方法について解説します。

今回は、1～4の数字から選択できるようにします。

【追記】2024/02/05

0～9の数字から選択する場合の手順・コードについて追記しました。

①画像の追加

1.png

2.png

3.png

4.png

上記の画像を追加します。

これで、画像の追加は完了です。

【0～9の数字から選択する場合】

0.png～9.pngの画像を追加します。

②画像の追加

up.png

down.png

上記の画像をimageフォルダに追加します。

画面左上のプロジェクト名をクリックします。

imageフォルダをクリックします。

imageフォルダが開かれます。

画像を追加します。
これで、画像の追加は完了です。

③ラベルコンポーネントの配置

• dial

• turn

• check

• yes

• no

上記のラベルコンポーネントを配置します。

④iscriptコンポーネントの配置

iscriptコンポーネントを配置します。

下記のコードを貼り付けます。

f.dial1 = 1;
f.dial2 = 1;
f.dial3 = 1;
f.dial4 = 1;
f.dial = "" + f.dial1 + f.dial2 + f.dial3 + f.dial4;

【0～9の数字から選択する場合のコード】

f.dial1 = 0;
f.dial2 = 0;
f.dial3 = 0;
f.dial4 = 0;
f.dial = "" + f.dial1 + f.dial2 + f.dial3 + f.dial4;

⑤ティラノスクリプトコンポーネントの配置

ティラノスクリプトコンポーネントを配置します。

下記のコードを貼り付けます。

[image storage="default/1.png" layer="1" page="fore" visible="true" left="290" top="300" width="100" height="100" name="dial1"]
[image storage="default/1.png" layer="1" page="fore" visible="true" left="490" top="300" width="100" height="100" name="dial2"]
[image storage="default/1.png" layer="1" page="fore" visible="true" left="690" top="300" width="100" height="100" name="dial3"]
[image storage="default/1.png" layer="1" page="fore" visible="true" left="890" top="300" width="100" height="100" name="dial4"]

【0～9の数字から選択する場合のコード】

[image storage="default/0.png" layer="1" page="fore" visible="true" left="290" top="300" width="100" height="100" name="dial1"]
[image storage="default/0.png" layer="1" page="fore" visible="true" left="490" top="300" width="100" height="100" name="dial2"]
[image storage="default/0.png" layer="1" page="fore" visible="true" left="690" top="300" width="100" height="100" name="dial3"]
[image storage="default/0.png" layer="1" page="fore" visible="true" left="890" top="300" width="100" height="100" name="dial4"]

【コードの解説】

■ storage
(イメージ表示コンポーネントの項目:画像)
表示する画像を指定できます。
ティラノビルダー上で画像を追加した場合、defaultフォルダに配置されるので、1.pngを指定したい場合、default/1.pngと指定します。

■ left
(イメージ表示コンポーネントの項目:横位置)
画像の横位置を指定できます。

■ top
(イメージ表示コンポーネントの項目:縦位置)
画像の縦位置を指定できます。

■ width
(イメージ表示コンポーネントの項目:横幅)
画像の横幅を指定できます。

■ height
(イメージ表示コンポーネントの項目:高さ)
画像の縦幅を指定できます。

⑥ティラノスクリプトコンポーネントの配置

ティラノスクリプトコンポーネントを配置します。

下記のコードを貼り付けます。

[button graphic="up.png" target="*turn" name="dial" x="290" y="100" width="100" height="100" fix="true" exp="f.select = 'dial1',f.turn = 'up'"]
[button graphic="up.png" target="*turn" name="dial" x="490" y="100" width="100" height="100" fix="true" exp="f.select = 'dial2',f.turn = 'up'"]
[button graphic="up.png" target="*turn" name="dial" x="690" y="100" width="100" height="100" fix="true" exp="f.select = 'dial3',f.turn = 'up'"]
[button graphic="up.png" target="*turn" name="dial" x="890" y="100" width="100" height="100" fix="true" exp="f.select = 'dial4',f.turn = 'up'"]
[button graphic="down.png" target="*turn" name="dial" x="290" y="200" width="100" height="100" fix="true" exp="f.select = 'dial1',f.turn = 'down'"]
[button graphic="down.png" target="*turn" name="dial" x="490" y="200" width="100" height="100" fix="true" exp="f.select = 'dial2',f.turn = 'down'"]
[button graphic="down.png" target="*turn" name="dial" x="690" y="200" width="100" height="100" fix="true" exp="f.select = 'dial3',f.turn = 'down'"]
[button graphic="down.png" target="*turn" name="dial" x="890" y="200" width="100" height="100" fix="true" exp="f.select = 'dial4',f.turn = 'down'"]

【コードの解説】

■ graphic
(画像ボタンコンポーネントの項目:ボタン画像)
画像ボタンに使用する画像を指定できます。

■ x
(画像ボタンコンポーネントの項目:横位置)
画像ボタンの横位置を指定できます。

■ y
(画像ボタンコンポーネントの項目:縦位置)
画像ボタンの縦位置を指定できます。

■ width
(画像ボタンコンポーネントの項目:横幅)
画像ボタンの横幅を指定できます。

■ height
(画像ボタンコンポーネントの項目:縦幅)
画像ボタンの縦幅を指定できます。

⑦画像ボタンコンポーネントの配置

画像ボタンコンポーネントを配置します。
ターゲットでラベルcheckを指定します。

⑧停止コンポーネントの配置

停止コンポーネントを配置します。

⑨ティラノスクリプトコンポーネントの配置

ティラノスクリプトコンポーネントを配置します。

下記のコードを貼り付けます。

[iscript]
if (f.turn == 'up') {
f[f.select] = (f[f.select] % 4) + 1;
} else if (f.turn == 'down') {
f[f.select] = (f[f.select] + 2) % 4 + 1;
}
let current_number = f[f.select];
$('.' + f.select).attr("src","data/fgimage/default/" + current_number + ".png");
[endscript]
[return]

【0～9の数字から選択する場合のコード】

[iscript]
if (f.turn == 'up') {
f[f.select] = (f[f.select] + 1) % 10;
} else if (f.turn == 'down') {
f[f.select] = (f[f.select] + 10 - 1) % 10;
}
let current_number = f[f.select];
$('.' + f.select).attr("src", "data/fgimage/default/" + current_number + ".png");
[endscript]
[return]

⑩ティラノスクリプトコンポーネントの配置

ティラノスクリプトコンポーネントを配置します。

下記のコードを貼り付けます。

[clearstack]
[freeimage layer="1"]
[clearfix name="dial"]
[cm]

⑪iscriptコンポーネントの配置

iscriptコンポーネントを配置します。

下記のコードを貼り付けます。

f.dial = "" + f.dial1 + f.dial2 + f.dial3 + f.dial4;

⑫ティラノスクリプトコンポーネントの配置

ティラノスクリプトコンポーネントを配置します。

下記のコードを貼り付けます。

[if exp="f.dial == '1234'"]
[jump target="*yes"]
[else]
[jump target="*no"]
[endif]

【コードの解説】

上記のコードは、
正解の数字、
正解の場合の移動先、
不正解の場合の移動先を指定しています。

今回、
正解の数字は1234で、
正解の場合の移動先をラベルyes、
不正解の場合の移動先をラベルnoに指定しています。

ラベルを指定する際、必ずラベル名の先頭に*(アスタリスク)を付けます。

⑬ラベルyesの編集

お好みでコンポーネントを配置してください。

⑭ラベルnoの編集

お好みでコンポーネントを配置してください。

これで、ダイヤル錠の作成手順は完了です。
以上で解説を終わります。おつかれさまでした。