【ティラノビルダー】ソーシャルゲーム風のホーム画面の作成方法

【ティラノビルダー】ソーシャルゲーム風のホーム画面の作成方法　サンプル動画 pic.twitter.com/uxnaWrqjca

— サイバーノーツ (@Cyber_Noughts) July 17, 2022

今回は、ソーシャルゲーム風のホーム画面を作成します。

• キャラクターの立ち絵・スチルが表示される

• プレイヤー側で好きな立ち絵・スチルに変更できる

• セリフが流れる

• ストーリーに移動するための分岐ボタンが表示される

以上の機能を実装します。

【使用素材】

立ち絵素材　わたおきば – ゲームや動画、SNSのアイコン、TRPG等に無料で使用可能の立ち絵素材を公開しています。

わたおきば様の立ち絵を使用させていただきました。

【準備】

シナリオを新規作成し、シナリオ名をep1とします。

①画像の配置

プロジェクト一覧画面からフォルダのアイコンをクリックし、作業中のプロジェクトのフォルダを開きます。

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

画像を配置するフォルダを新規作成します。

画像を配置します。

これで、画像の配置は完了です。

②キャラクターの追加

「プロジェクト」→「キャラクター管理」をクリックし、キャラクター管理画面を開きます。

今回はキャラクター名をakaneとしました。
キャラクターの画像を登録します。

これで、キャラクターの追加は完了です。

③scene1の編集

全体の画像です。

(1) 背景・立ち絵の初期設定

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

if ( sf.bg == undefined ) {
sf.bg = 'bg_base.png';
}
if ( sf.face == undefined ) {
sf.face = 'chara/1/a.png';
}

コードを貼り付けます。

【デフォルトの背景】
bg_base.png
【デフォルトの立ち絵】
chara/1/a.png

デフォルトの背景・立ち絵を変更したい場合は、
bg_base.png・chara/1/a.pngを変更します。

(2) 背景の表示

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

[bg storage="&sf.bg" time="1000" method="crossfade"]

コードを貼り付けます。

(3) キャラクターの表示

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

[chara_show name="akane" time="1000" wait="true"  storage="&sf.face"   width="400"  height="1100"  top="100"]

コードを貼り付けます。

(4) ボタンの表示

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

[button graphic="home/bg_base.png" target="*bg" x="860"  y="30" width="80" height="60" fix="true" exp="sf.bg = 'bg_base.png'" name="home"]
[button graphic="home/room.png"    target="*bg" x="960"  y="30" width="80" height="60" fix="true" exp="sf.bg = 'room.jpg'"    name="home"]
[button graphic="home/rouka.png"   target="*bg" x="1060" y="30" width="80" height="60" fix="true" exp="sf.bg = 'rouka.jpg'"   name="home"]
[button graphic="home/title.png"   target="*bg" x="1160" y="30" width="80" height="60" fix="true" exp="sf.bg = 'title.jpg'"   name="home"]

[button graphic="home/a.png" target="*face" x="850"  y="130" width="100" height="100" fix="true" exp="sf.face = 'chara/1/a.png'" name="home"]
[button graphic="home/b.png" target="*face" x="950"  y="130" width="100" height="100" fix="true" exp="sf.face = 'chara/1/b.png'" name="home"]
[button graphic="home/c.png" target="*face" x="1050" y="130" width="100" height="100" fix="true" exp="sf.face = 'chara/1/c.png'" name="home"]
[button graphic="home/d.png" target="*face" x="1150" y="130" width="100" height="100" fix="true" exp="sf.face = 'chara/1/d.png'" name="home"]
[button graphic="home/e.png" target="*face" x="850"  y="250" width="100" height="100" fix="true" exp="sf.face = 'chara/1/e.png'" name="home"]
[button graphic="home/f.png" target="*face" x="950"  y="250" width="100" height="100" fix="true" exp="sf.face = 'chara/1/f.png'" name="home"]
[button graphic="home/g.png" target="*face" x="1050" y="250" width="100" height="100" fix="true" exp="sf.face = 'chara/1/g.png'" name="home"]
[button graphic="home/h.png" target="*face" x="1150" y="250" width="100" height="100" fix="true" exp="sf.face = 'chara/1/h.png'" name="home"]

コードを貼り付けます。

【画像の位置】
x：横位置
y：縦位置

【画像の大きさ】
width：横幅
height：縦幅

(5) 背景・立ち絵の変更

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

*bg

[bg storage="&sf.bg" time="500"]

[return]

[s]

*face

[chara_mod name="akane" storage="&sf.face" time="300" cross="false"]

[return]

コードを貼り付けます。

(6) ボタンの消去

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

[clearfix name="home"]

コードを貼り付けます。

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