先日、ティラノスクリプトの glink をカスタマイズする方法をお伝えしましたが、この時は画像データを使ってボタンを作成していました。
今回は、画像データなしでカッコいい感じのボタンを作る方法を紹介します。必要なのは、ティラノスクリプトの知識とCSSの知識だけ。
私の制作したゲーム、NARCIST COMPLEX のタイトル画面の「START」「LOAD」「EXTRA」のボタンも、glinkとCSSだけで実装しています。
（このサイトは動画の貼り付けができないので、実際にゲーム画面を見るか、私のXの動画を見るか、心の目で見てください。）
なお、ここで紹介しているコードは、すべてコピペ自由ですので、お好きに使ってください。
まずは glink の話
[glink color="custom_btn" text="EXTRA" size=40 width=500 x=700 y=560]
; もしくは
; [glink name="custom_btn" color="" text="EXTRA" size=40 width=500 x=700 y=560]
glink は、いつも通りな感じで書いていきます。
今回、「”custom_btn”」という名前のオリジナルのglinkクラスを作ろうと思うので、glinkのパラメーターに color="custom_btn" もしくは name="custom_btn" color=""と書いています。
（colorパラメータはデフォルトで”black”が指定されているので、それを無視するために下の行の例では color="" と書いています。……とまぁややこしいことは考えたくないって方は、とりあえず上の行の例の通り color="custom_btn"と書いておけば大丈夫です。同じ意味なので。）
実際は target を指定したり、クリック時などのSEもここで指定していますが、今回は簡略化のため省略しています。widthをCSS側で指定することもできますが、glinkはどこでも使える柔軟性が魅力なので、個人的にはCSS側ではなくglink側で設定するのが好みです。
特に難しいことはしていません。見慣れたglinkかと思います。
これを、好きなksファイルに書いてください。
※ゲーム画面の背景が黒の場合を想定して作っているので、ゲーム画面の背景は黒にしておくことをおすすめします。
次に CSS の話
以前にお話しした通り、ティラノスクリプトにおいて、glinkに関するcssは、tyrano/css/glink.css に書かれています。
今回はこのファイルの一番最後に、オリジナルのglinkクラス「”custom_btn”」を書いていきましょう。
まずは、ベースのスタイル。
.custom_btn {
position: relative;
padding: 0.1em 1em;
box-sizing: border-box;
color: black;
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
1px 1px 0 white;
background-image: linear-gradient(
90deg,
rgba(18, 18, 18, 0) 0%,
rgba(18, 18, 18, 0.9) 50%,
rgba(18, 18, 18, 0) 100%
);
transition: 0.2s ease-out;
}
一体何を書いたのか、ひとつひとつ見ていきます。
position: relative;
これは、要素の位置を相対的に設定するためのプロパティです。……と言っても、ピンとこないですよね。私もこれ、噛み砕いて説明できる気がしないので、今回は「ふ〜ん」で読み飛ばして大丈夫です。
padding: 0.1em 1em;
paddingは内側の余白という意味です。今回は上下に0.1文字分、左右に1文字分の余白を設けます。私は、余白はemで指定するのが好みなのでそうしていますが、pxで指定してもOKです。
box-sizing: border-box;
以前もお話しした通り、box-sizing: border-box; は「widthとかを指定しやすくするおまじない」くらいの認識で大丈夫です。
color: black;
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
color: black;で文字色を黒と指定しています。さらに、text-shadow: 〜 で文字に白の縁をつけています。「先に黒色で文字を書いて、あとから白で縁取った」というイメージですね。「text-shadow」というくらいなので「影」のようなふんわりとぼかしたイメージを持つかもしれませんが、
text-shadow: -1px -1px 「「「0」」」 white /* ほら！ここ！0って書いてるよ！！*/
この、「0」という指定をしたおかげで、ぼかしにならず、まるで縁のような見た目になります。もしこれを、5pxとかにすれば、それだけぼかしがかかります。
background-image: linear-gradient( 90deg, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.9) 50%, rgba(18, 18, 18, 0) 100% );
ここで、背景を指定しています。今回は、中心部分が不透明度90%の黒、端に向かうほど透明な感じの背景になるようにしています。
試しに、ゲーム画面を白にしてみたらこうなりました。この方がわかりやすいかな。
linear-gradient は説明が難しいので、気になる人は調べてみてください。
以前に紹介したglinkでは背景画像をglink側で設定していましたが、このように、CSS側で背景を描くこともできます。
また、ここで画像へのパスを指定すれば、背景に画像を使うこともできます。
background-image: url("../img/btn_img.png"); /* こんな感じ */
私も最近は、CSS側で画像を指定しています。その方が楽だな〜と思います。
transition: 0.2s ease-out;
これは、この要素に関するアニメーションを0.2秒かけて行うという指定です。もし「10s」とかにしたら、10秒かけてアニメーションを行うゆっくりな感じになりますし、「0s」にしたら即座に切り替わる感じになります。私は、ふわっと感を演出するために0.2sを指定することが多いです。お好みで調整しよう。
次に、カーソルを合わせた時の動きのCSSを書きます。
.custom_btn:hover { /* :hover で、カーソルを合わせたときのスタイルを指定できる */
color: white;
text-shadow: 0px 0px 5px white;
}
文字の色を白にしつつ、5px分の文字の影ぼかしを入れています。どちらも、すでに上で説明したプロパティですね。これによって、まるで文字がピカッと光るような演出にすることができます。
この時点で、一度ゲームのプレビューを行ってみてください。すでに、結構いい感じのボタンが出来上がっていると思います。
ではさらに、流れ星みたいにアンダーバーがピッと走る演出を追加していきます。
.custom_btn::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1.2px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), white);
transition: width 0.3s;
}
afterと呼ばれる要素を追加します。「custom_btnに付け足しする要素」くらいの認識で大丈夫です。
これもひとつひとつ見ていきます。
content: "";
今回の例だとピンとこないと思いますが、contentでは付け足し文字などを指定できます。例えば、「ゲームでアイテムリストを作りたい！そのとき、アイテム名の最後に丸を入れたいけど、毎回丸を書くの面倒臭い！」って時に便利です。content: "●";みたいな感じで指定できます。今回は特にそういうのないので、””としておきます。
position: absolute;
bottom: 0;
left: 0;
position: absolute;は、要素を親要素に対して絶対的な位置に配置するためのCSSプロパティです。これを踏まえて、bottom: 0; left: 0; と指定することで、「custom_btnの左下から描き始めてね」と指定できます。
position: absolute; の恩恵はCSSに慣れてくるとわかってくるので、今は「ほへ〜」くらいの認識で大丈夫です。
width: 0;
height: 1.2px;
今回は、カーソルを合わせた時にだけアンダーバーを表示したいので、この時点では width: 0; としています。
background: linear-gradient(to right, rgba(0, 0, 0, 0), white);
backdroundと書いているのでイメージしづらいかもしれませんが。ここでは、アンダーバー全体の色を指定しています。「左端が完全に透明の黒、右端が不透明な白」というグラデーションになっています。
transition: width 0.3s;
transitionは先ほども扱いましたが、今回は width を指定しています。この場合、「widthに関するアニメーションは、0.3秒かけて行ってね」という意味になります。
アンダーバーが出現するアニメーションをもっとゆっくりにしたい場合は、この数値をもっと大きくしてみてください。
そして最後に、カーソルを合わせたときのCSSを書きましょう。
.custom_btn:hover::after {
width: 100%;
}
先ほど、width: 0;と書いたので、今度はカーソルを合わせた時にwidthが100%にまでグッと伸びるようにしました。
以上で、必要なCSSは紹介し終えました！
最後に、今回書いたCSSをまとめておきます。
.custom_btn {
position: relative;
padding: 0.1em 1em;
box-sizing: border-box;
color: black;
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
1px 1px 0 white;
background-image: linear-gradient(
90deg,
rgba(18, 18, 18, 0) 0%,
rgba(18, 18, 18, 0.9) 50%,
rgba(18, 18, 18, 0) 100%
);
transition: 0.2s ease-out;
}
.custom_btn:hover { /* :hover で、カーソルを合わせたときのスタイルを指定できる */
color: white;
text-shadow: 0px 0px 5px white;
}
.custom_btn::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1.2px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), white);
transition: width 0.3s;
}
.custom_btn:hover::after {
width: 100%;
}
これを tyrano/css/glink.cssの最後に書き、glinkも書いた上で、ゲームをプレビューしてみてください。キラッと光る感じのボタンが出来上がっているはず！
こういうCSSってどうやって思いつくのか
最後に、おまけ話。
CSSをゼロから書くの難しいです。ぶっちゃけ、私は無理です。
しかし、すでにあるCSSをいじることなら、ケッコー簡単にできます。例えば、上で紹介したCSSの文字色を白じゃなくて赤にしたらどうなるかな〜とか。これなら、CSS初心者でも試せるかと思います。
上で紹介したglink&CSSは黒背景のゲームで使うことを想定しているので、一部詰めが甘いところがあります。そこを直して、白やピンク背景のゲームで使うならどうするか？などを考えてみるのもお勧めです。
私も、すでに存在するglinkのCSSをいろいろいじって発見を繰り返し、上で紹介したスタイルを生み出しました。ティラノスクリプトのglinkにはすでに個性的で面白いスタイルがたくさん入っているので、これをいろいろいじって、いろんな発見をしてください。楽しいよ( ˙ㅂ˙)b