ひよっこ blog

ゲーム制作について、作ったものや思ったことをつらつら書いていく予定

glinkを変更して画像ボタンに

glinkとは?

ティラノスクリプトで使える、簡単にちょっと飾られたボタンを使用するためのタグです。
選択肢を作る際、いちいち画像に文字を埋め込むと大量の画像が必要になってくるし、
かといって文字だけだと飾り気がなさすぎるため、使って損はないでしょう。

[glink target="j01" text="窓から出る" size=36 width="349" y=116]
[glink target="j02" text="出ない" size=36 width="349" y=219]
のようにすると、下の画像のような表示になります。

f:id:hiyohiyokko:20160129114122j:plain

これはこれでいいのですが、ゲームの雰囲気に合わせたいので、
cssで作られているであろう下の部分を、画像に差し替えたいと思います。

glinkの定義はどこだ!

と思い、glinkでgrep検索しました。

色々引っかかるとは思いますが、kag.tag.jsが怪しいので中を見てみると、

の記述が近くにあります。

次は、buttonでgrep検索です。
大量に色々引っかかるのですが、cssに絞るとそこまででもありません。
tyrano.cssを見ると、.button .black という物があり、試しに消してみたりすると、
連動していることが分かりました。

.buttonで変更する点

元々は下のようになっていると思います。
淵の処理とか(丸くしたり)、文字とボタンの余白を調整しているのが分かりますね。

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

なので、バッサリと淵の処理はカットし、
paddingが画像と文字の大きさに合うように調整しました。

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: 22px 0px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.blackで変更する点

元々は下のようになっていると思います。
文字色だったりグラデーションを変更しているのが分かりますね。

.black {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}

.black:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
	background: -moz-linear-gradient(top,  #444,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
	color: #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
	background: -moz-linear-gradient(top,  #000,  #444);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}


なので、ここに用意した画像を入れればいいという訳です。
画像は面倒だったのでtyrano.cssと同じフォルダに入れてあります。

.black {
	color: #d7d7d7;
	background:url(btn_frame.png) no-repeat left top;
}

.black:hover {
	background:url(btn_framer.png) no-repeat left top;
}
.black:active {
	background:url(btn_frame.png) no-repeat left top;
}

結果!

f:id:hiyohiyokko:20160129114044j:plain

想定通りの結果になりました!

実際は画像の置き場所ちゃんとしたり、
そもそもcssの定義も上書きしないほうが良いとは思いますが、
とりあえず良しとしましょう。