【ティラノスクリプト備忘録】メッセージ枠・名前欄をCSSで作る時につまづいた点
名前欄が空欄の時に非表示にする、などつまづきポイントのメモです。
１｜前置き
■作成に当たり拝見した記事
■できたもの
メッセージ枠と名前欄をCSSで装飾する作業に勝利した（①名前がある場合に名前欄の枠表示、②名前がある場合に最低の横幅を設定、③名前が空欄の場合非表示） pic.twitter.com/HenLihRI78
— Kamivukuro (@Kamivukuro_tira) October 10, 2024
■コード
cssファイル
tyrano.cssなどの末尾に書き足すか、cssファイルを自作して読み込む。
/* 中略 */
/* 名前欄のcss */
.chara_name_area {
top: 470px; /* y座標のお守り。シナリオファイル側の設定で値を変える。 */
left: 200px; /* x座標のお守り。シナリオファイル側の設定で値を変える。 */
min-width: 5em; /* 名前欄がある場合の最低幅 */
height: 1.05em; /* 高さ */
background: linear-gradient(to top,rgba(0, 255, 191, 0.5) 65%,transparent 65%); /* 名前欄の背景。今回はマーカー風 */
padding: 5px 0.6em ; /* 余白 */
color: #fff; /* 文字の色 */
transform: skewX(-5deg); /* ナナメにする */
-webkit-text-stroke:1px var(--custom-color-black); /* 文字の縁取りその１ */
text-shadow:
2px 0px var(--custom-color-black),2px 1px var(--custom-color-black),2px -1px var(--custom-color-black),
-2px 0px var(--custom-color-black),-2px 1px var(--custom-color-black),-2px -1px var(--custom-color-black),
0px 2px var(--custom-color-black),1px 2px var(--custom-color-black),-1px 2px var(--custom-color-black),
0px -2px var(--custom-color-black),1px -2px var(--custom-color-black),-1px -2px var(--custom-color-black),
4px 2px var(--custom-color-black),4px 3px var(--custom-color-black),4px 1px var(--custom-color-black),
0px 2px var(--custom-color-black),0px 3px var(--custom-color-black),0px 1px var(--custom-color-black),
2px 4px var(--custom-color-black),1px 4px var(--custom-color-black),3px 4px var(--custom-color-black),
2px 0px var(--custom-color-black),1px 0px var(--custom-color-black),3px 0px var(--custom-color-black)
; /* 文字の縁取りその２ */
}
/* 名前が空欄の場合に名前欄のフレームを非表示 */
.chara_name_area:empty{
padding: 0px; /* 余白を失くす */
min-width: 0px; /* 横幅の最低値を0にする */
}
/* var(--custom-color-black)は心の目で#000などに置き替えてください */
/* メッセージ枠のcss */
/* message0のスタイル */
.message0_fore > .message_outer{
background: linear-gradient(to right,
rgba(255,255,255,0),
rgba(255, 255, 255,0.7) 1%) !important; /* 背景色。左端をぼかすためグラデ */
border-top: 2px solid var(--custom-color-black); /* 上の枠線 */
border-bottom: 2px solid var(--custom-color-black); /* 下の枠線 */
transform: skewX(-5deg); /* ナナメにする */
}
/* message1のスタイル */
.message1_fore > .message_outer {
background: linear-gradient(to right,rgba(255, 255, 255,0.7) 50%,transparent) !important; /* 背景色。右側をぼかすためグラデ */
}first.ksとか
メッセージフレーム、名前欄などの基本的な設定をする。
ほぼサンプルファイルを書き換えただけで珍しいことはしてないです。
;中略
;画面競定---
;メッセージウィンドウ1の設定
[position layer="message0" left=230 top=525 width=1300 height=160 page=fore visible=true]
;メッセージの下をぼかすためにブラー効果を入れる
[position_filter layer="message0" blur="10"]
;文字が表示される領域を調整
[position layer=message0 page=fore margint="5" marginl="40" marginr="400" marginb="5"]
;メッセージ2個め、やってることは同じなので省略
[position layer="message1" left="0" top="120" width="1280" height="160" page="fore" visible="false" ]
[position layer=message1 margint="0" marginl="160" marginr="10" marginb="10"]
[position_filter layer="message1" blur="10"]
;キャラクターの名前が表示される文字領域
[ptext name="chara_name_area" face="cp_re" layer="message0" color="0xffffff" x=245 y=473 size=36 bold=false]
;上記で定義した領域がキャラクターの名前表示であることを宣言（これがないと#の部分でエラーになります）
[chara_config ptext="chara_name_area"]■前提：名前欄とメッセージ枠をCSSで作る基本の型
下記クラスのcssを記述する
・名前欄：chara_name_area
・メッセージ枠：message_outer
cssファイル
/* 名前欄のcss */
.chara_name_area {
/* この中に見た目を記述 */
}
/* メッセージ枠のcss */
.message_outer{
/* この中に見た目を記述 */
}２｜つまづきポイント
■その１：名前欄の横幅最低値を設定する
名前の文字数が短い場合に一定の横幅を確保してくれて、
名前が長いとその分デフォルトの横幅から伸びるようにしたい。
【解決策】min-widthを使う
横幅をwidthで設定せず、min-widthで横幅の最低値のみ設定する。
と、文字数に合わせて上述のように横幅が変わる。
/* 名前欄のcss */
.chara_name_area {
min-width: 5em; /* 名前欄の最低幅を５文字にする（emだと文字数で指定できるので楽） */
padding: 5px 0.6em ; /* いい感じの余白を確保する。 */
}■その２：名前が空欄の場合に名前欄を消す
cssで名前欄の幅・色・余白などを設定すると、
下記のように、名前が空欄の場合に名前欄の装飾が残る。
シナリオファイル
#
誰だ！？ゲーム上
そのままでも良いが、こんな感じで、
名前が空欄の場合に名前欄の装飾が消えるようにしたい。
【解決策】疑似クラスemptyを使う
疑似クラスemptyを使うと、
中身が無い時、つまり名前が空欄の時のスタイルを設定できる。
よって、名前が無い時に横幅がゼロ、余白がゼロなど、
.chara_name_area{}内で設定した装飾を適宜消す。
/* 名前欄のcss */
.chara_name_area {
/* 名前が何かしらある場合のスタイル */
}
/* 名前が空欄の場合に名前欄の装飾を消す */
.chara_name_area:empty{
/* 上の.chara_name_area{}で設定した装飾を消そう */
padding: 0px; /* 余白を失くす */
min-width: 0px; /* 横幅の最低値を0にする */
/* 枠線を設定している場合はborderをnoneにするなど、適宜装飾を消す */
}今回は余白（padding）消して横幅（width）ゼロにするだけだから
一個一個消したけど、
装飾それぞれの値をゼロ／noneにしていくよりは、
display:noneで丸ごと非表示にする方が速そう。
■その３：複数のメッセージ枠それぞれに別々のcssを適用する
message0とmessage1など複数のメッセージ枠を使い、
別々の見た目にしたい場合、
/* メッセージ枠のcss */
.message_outer{
/* この中に見た目を記述 */
}で記述すると、message0にもmesssage1にも同じ見た目が指定される。
よって、
message0とmessage1それぞれを別個に指定してcssを書く必要がある。
【解決策】結合子「>」を使う
結合子「>」で親要素に直下の子要素を指定できる。
message_outerの親要素がmessageX_foreなので、
（[X]にはmessageレイヤーの番号が入る）
親要素とセットでクラス名（セレクタ）を指定する。
※「fore」は表ページのforeっぽそう。
/* メッセージ枠のcss */
/* message0のスタイル */
.message0_fore > .message_outer{
/* message0のメッセージ枠の装飾をここに記述 */
}
/* message1のスタイル */
.message1_fore > .message_outer {
/* message1のメッセージ枠の装飾をここに記述 */
}cssを記述する時に使ってるmessage_outerについて、
デバックコンソールで見てみると、
message0であれば、
message0_foreの直下にmessage_outerがあり、
messageXについて、
「messageX > message_outer」で構成されていることが分かる。
■そのほか（!important指定）
上記css内で!importantを使っているものが何か所かあるが、
ティラノのタグで設定できる部分（メッセージ枠の背景色など）は、
タグの値が優先されるため、
（タグを何も設定してなくても、タグのデフォルト値が適用される）
css側で設定したい場合は、
!importantという魔法の呪文を入れないと適用されない。
先行の記事でも述べられている事項なので詳細は省きます。
背景色はティラノスクリプトの[position]タグの設定が優先されてしまうようです。（何も設定しなくてもデフォルトで黒背景になってる）
■おまけ：キャラごとに名前の色を変える
キャラの定義をする[chara_new]タグだが、
color=""で名前の文字色をキャラ特有の色に変えられるので、
合わせて活用するといいかも。
;このゲームで登場するキャラクターを宣言
;chara_newのcolorで名前欄の文字色を変える
;akane
[chara_new name="akane" storage="chara/akane/normal.png" jname="あかね" color="0xffbed3" ]
ホントは
「キャラごとに名前欄の背景色（図中では青緑色の箇所）を変えて～！」
と思ったけど、難しそうなので終。
（CSSじゃなくて、画像で作るとかなら凄いプラグインあるみたい。）
他、何かあり次第加筆・修正予定。
この記事が気に入ったらサポートをしてみませんか？