【ティラノスクリプト】メッセージ枠をCSSで装飾

ティラノスクリプトでオリジナルのメッセージ枠を作りたい時は画像を用意することが多いと思いますが、CSSを使って自由度高くデザインしてみるのもオススメです。

CSSを配置する

ティラノスクリプトでCSSを扱う方法はいろいろありますが、自分は専用のCSSファイルを配置して呼び出すのが好みです。
今回はdata/othersフォルダにcssフォルダを作って、そこにcssファイルを置きます。
テキストファイルの拡張子をcssに変更すればOKです。

cssファイルの作成

今回はUI.cssという名前にします。

CSSの読み込み

メッセージ枠を表示させる前に[loadcss]タグを呼び出すだけです。

[loadcss file="./data/others/css/UI.css"]
;メッセージウィンドウの設定
[position layer="message0" left=0 top=500 width=1200 height=200 visible=true]

scene1.ksのメッセージウィンドウの設定直前に呼び出しました。

CSSでメッセージ枠のclassを設定する

[glink]タグなんかはcolorがそのままhtmlのclassになるみたいですが、メッセージ枠は設定できなさそうなので、要素のclass名を調べます。
htmlソースを見ればすぐわかりますが、メッセージのデモでclass名を書いてくれていました。

メッセージ・高度テクニック-動作デモ- ティラノスクリプト｜スマホ対応のノベルゲームエンジン。無料

.message_outerというのがメッセージのclass名のようです。
なので先程作成したUI.cssに以下を追加します。

.message_outer {
    background: #bd0ea5;
    border-radius: 20px;
    border: outset 4px #e1e1e1;
}

背景色・枠線・枠の角丸を設定しました。
これでメッセージ枠が変更されるでしょうか……。

変更したメッセージ枠

確かにborder-radiusとborderは設定されていますが、background（背景色）が適用されていません。
背景色はティラノスクリプトの[position]タグの設定が優先されてしまうようです。（何も設定しなくてもデフォルトで黒背景になってる）
でも、グラデーション色などを設定したいときはcssで設定したいです。
cssにはプロパティの優先度を上げる書き方があります。

.message_outer {
    background: #bd0ea5!important;
    border-radius: 20px;
    border: outset 4px #e1e1e1;
}

backgroundに!important属性を追加しました。これで反映されるか見てみましょう。

!important属性を追加

無事、背景色が切り替わりました。
これを利用することで、いろんな背景色が設定できます。

.message_outer {
    background: linear-gradient(to right, #bd0ea5, #4fb1f3)!important;
    border-radius: 20px;
    border: outset 4px #e1e1e1;
}

グラデーション背景

.message_outer {
    background-color: #f0f0f0!important;
    background-image: linear-gradient(to right, transparent 1px, #ccc 2px, transparent 3px),
                      linear-gradient(to bottom, transparent 1px, #ccc 2px, transparent 3px)!important;
    background-size: 10px 10px!important;
    background-repeat: repeat!important;
    border-radius: 20px;
    border: outset 4px #e1e1e1;
  }

パターン背景

使い所は難しいですが、@keyframesを使ってメッセージ枠をアニメーションさせることも一応可能です。

cssを駆使して、独自のメッセージ枠をデザインしてみてください！