ティラノスクリプト:名前欄のテキストに縁を付ける(その他装飾も可能)

醍醐くんの飯活!!の時テキストには縁を付けていましたが、名前欄のテキストには縁を付けていませんでした。今思えば別にいっか!って感じで付けてなかったのかも知れませんが、もしかしたら付ける方法が分からなかった可能性もあると思ったので今回記事に纏めようと思います。

ちなみに本文に縁を付けたい方はこちらの方法を参照してみてください。↓

方法について

結論から言いますと、tyrano.cssというCSSファイルの中にchara_name_areaというクラスの設定を追加するといったイメージになります。
CSS?クラス?なんじゃそりゃ??って方は一応一文字がCSSとクラスについて解説している記事もありますのでそちらをご覧ください(余計に混乱したらすみません)

chara_name_areaとは

chara_name_areaとは、ティラノスクリプトでゲームを作ろう!と思った方なら恐らく序盤の序盤に見かけるであろう、デフォルトゲームの中に書いてあるこの文言を見ればお分かりの事と思います。↓

;上記で定義した領域がキャラクターの名前表示であることを宣言(これがないと#の部分でエラーになります)
[chara_config ptext="chara_name_area"]

ここで何を設定しているかというと、キャラのコンフィグに使用するptextの名前(CSSで言えばクラスってことになるのかな?)です。

つまりウインドウの名前欄の所に表示されるものに関してが、このchara_name_areaに詰め込まれることになるわけですね。今後はこのchara_name_areaの中にキャラクターの名前などを収納していきます。

補足ですが
[chara_ptext name='女の子']と
#女の子
は同じ意味になります。#は短縮形ということですね。

tyrano.cssを編集

前置きが長くなりましたが、早速名前に縁などを付けていきましょう。

myprojects → 自分が作るゲーム名のフォルダ → tyrano → tyrano.css

tyrano.cssを開きましょう。開き方が分からない?そんな時はこれまた便利なエディタをご紹介しています。↓

で、ファイルを開くとこんな感じの記述があると思います。

@import url("./css/reset.css");
@import url("./css/font.css");
@import url("./css/animate.css");
@import url("./css/glink.css");

/* レイヤ
--------------------------------------*/
html {
    touch-action: none;
    user-select: none;
}

/* レイヤ
————————————–*/
の上あたりでもいいのでいくつか改行し、こんな感じで記述しましょう。↓

@import url("./css/reset.css");
@import url("./css/font.css");
@import url("./css/animate.css");
@import url("./css/glink.css");

/* 追加の分
--------------------------------------*/
.chara_name_area {
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
        -1px 1px 0 #FFF, 1px -1px 0 #FFF,
        0px 1px 0 #FFF, 0-1px 0 #FFF,
        -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/* レイヤ
--------------------------------------*/
html {
    touch-action: none;
    user-select: none;
}

追加したコードについてですが、CSSでの記載方法で短縮形を使ってあります。

とりあえず上とか下とか右とか左にとか斜めとかに白い影を付けることによっていい感じに縁っぽく見せかけています。遠目からしか見ないし、文字もそんなにデカデカと表示するわけではないのでこれで安定するかと思います。
縁の色を変更させたい場合は#FFFの部分を自分の理想のカラーコードに置き換えてください。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

その他の装飾

その他の装飾として、CSSで文字の装飾についてを検索するとどういったものが用意されているのか分かると思います。↓

ダサいですが例として、斜体にすることもフォントによっては可能です(そのフォントに斜体が用意されていればできるのかな?)

/* 追加の分
--------------------------------------*/
.chara_name_area {
    font-style: italic;
}

CSSでは文字に装飾できるものとそうでないものがありますので、全部が全部使えるかと言うとそうではないですが、名前欄もいろいろと装飾することができるということですね。

余談ですが最初だけフェードインさせることも出来ました(笑)

/* 追加の分
--------------------------------------*/
.chara_name_area {
    animation: fadein 3s ease-out forwards;
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
タイトルとURLをコピーしました