【教學/示範】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
    You are seeing this message because ad or script blocking software is interfering with this page.
    Disable any ad or script blocking software, then reload this page.