【教學/示範】TyranoBuilder - 讓玩家輸入文字/名字 - Space of NingNing

【教學/示範】TyranoBuilder - 讓玩家輸入文字/名字

我 相 信 讓 玩 家 自 己 自 訂 名 字 在 任 何 遊 戲 裡 都 是 蠻 重 要 的 功 能 而 TyranoBuilder 輸 入 文 字 的 功 能 又 比 較 複 雜 一 點 所 以 今 天 這 篇 文 章 就 是 關 於 TyranoBuilder 的 文 字 輸 入 拉

    首 先 呢 是 關 於 這 個 問 題

    如 何 在 TyranoBuilder 裡 讓 玩 家 輸 入 名 字 呢?

    要 實 現 這 個 功 能 你 主 要 需 要 下 面 這 幾 個 按 鈕 :

    Input Box 

    Stop

    Commit Input

    Image Button

    Page Break 和 Label



    下 面 這 是 我 的 整 個 輸 入 名 字 的 功 能 看 起 來 的 樣 子

    ◆  所 以 呢 首 先 你 需 要 一 個 Label 在 最 上 方 ( 我 叫 他 start 但 名 字 是 甚 麼 都 可 以 )

    ◇ Remove Text / Remove Image 不 一 定 要 放 , 他 們 的 功 能 就 是 刪 除 之 前 的 所 有 圖 片 / 文 字

    Show Text - 顯 示 對 話 框

    Text-輸 入 文 字 ( 這 裡 我 寫 了 "  請 輸 入 你 的 名 字 !  " 但 你 想 寫 其 他 字 也 都 是 可 以 的 ) 

     然 後 你 需 要 一 個 Input Box  

    這 裡 輸 入 的 Variable 需 要 提 前 在 Variables Manager 裡 定 義
    Image Button 在 這 裡 是 用 來 確 認 接 受 玩 家 輸 入 的 文 字 的

    ◆ 在 這 個 Image Button 後 你 可 以 加 入 Stop 來 讓 對 話 停 下 來 - 這 樣 劇 情 才 不 會 在 玩 家 輸 入 名 字 的 同 時 繼 續 前 進 

    ◇ Stop 後 面 需 要 一 個 Label -  Image Button 的 目 標 位 置 就 是 這 個 Label 

    ◆ 在 新 的 Label 裡 你 需 要 在 第 一 行 加 入 Commit Input 這 樣 之 後 才 能 夠 讀 取 玩 家 之 前 在 Input Box 裡 輸 入 的 Variable 數 據

    ◇ 然 後 使 用 Page Break 可 以 讓 Input Box 的 輸 入 框 消 失  ( 也 可 以 使 用 Remove Image 來 讓 Input Box 消 失 )

    ◆ 在 讓 Input Box 消 失 後 如 果 要 確 認 玩 家 成 功 輸 入 了 名 字 你 可 以 就 用 這 段 [emb exp="f.name"]! 字 測 試

    所 以 先 放 一 個 Text 按 鈕 然 後 在 裡 面 打 上 讓 任 何 字 加 上 [emb exp="f.name"]! 

    範 例Hi, [emb exp="f.name"]![p]

    如 果 你 要 讓 說 話 的 人 顯 示 玩 家 剛 剛 打 的 名 字 你 使 用 &[f.name]

    範 例 : #&[f.name]


    其 他 參 考:

    官 網 的 教 學

    接 下 來 是


    如 何 讓 TyranoBuilder 的 輸 入 框 更 好 看 ?

    你 需 要 先 準 備 一 個 輸 入 框

    這 是 我 隨 便 弄 出 來 的 ( 點 醜 www ) :



    這 就 是 之 後 輸 入 框 的 樣 子


    如 果 要 讓 下 面 的 對 話 框 消 失 的 話 可 以 放 一 個 Remove Text 在 Input Box 前 面



    當 你 把 對 話 框 加 到 你 的 TyranoBuilder 專 案 後 你 可 以 使 用 Show Image 把 對 話 框 放 到 場 景 裡 然 後 使 用 Positioning Tool 或 是 直 接 調 整 X / Y Position 來 把 圖 片 放 到 正 確 的 位 置 

    然 後 打 開 你 的 css 檔 案 

    --> TyranoBuilder\myproject\ 你 的 專 案 名 字 \tyrano

    ( 正 常 來 說 要 在 這 個 位 置 )

    在 css 檔 案 裡 加 入 下 面 這 串 代 碼 ( 在 哪 裡 加 入 都 可 以 重 點 是 要 出 現 在 css 檔 案 裡 面 ):

    input {
        text-align: center;
        background-color:#FBFBFB;
        border: 0px solid;
        height:40px;
        width:70px;
    }
    input:focus{
        outline:none;
        border: 0px solid;
    }

    text-align = 文 字 的 位 置 center 就 是 中 間 的 意 思

    background-color = Input Box 的 背 景 顏 色 , 建 議 使 用 跟 你 的 一 樣 的 顏 色 但 用 其 他 顏 色 也  是 可 以 的

    border =  邊 框 ( 數 字 px 是 邊 框 的 大 小 / solid = 邊 框 樣 式 是 實 線 )

    Height 和 width 老 實 說 沒 有 很 重 要 ( 你 可 以 在 TyranoBuilder  裡 面 更 改 )

    點 擊 這 裡 可 以 觀 看 我 剛 剛 迅 速 做 出 來 的 預 覽


    在 離 開 之 前 如 果 覺 得 這 個 文 章 還 不錯  的 話 幫 我 拍 個手 吧 ~!


    Next Post Previous Post
    1 Comments
    • 匿名
      匿名 6/24/2022 6:40 下午

      非常感謝!

    Add Comment
    comment url