memo

ゲーム制作やデザインについての個人的メモ

【ティラノスクリプト】[glink]について

7yen.hateblo.jp

以前こういう記事を書きましたが、しばらく使ってみて色々できることがわかったので改めて記録しておこうと思います。

[glink]について

[glink](公式タグリファレンス)

http://tyrano.jp/home/tag#glink

画像を使わずにグラフィカルなボタンを表示させることができます。同じような機能を持つ[button]と比較して、次のような特徴があります。

  • 表示中は強制的にシナリオ進行が停止する
  • ジャンプ後は自動的に[cm]タグが実行されボタンは消失する

クリック後にボタンを残しておくことはできないため、常時表示させておく必要のあるボタン(システムボタン等)には向きません。

基本の使い方

サンプルコード

[glink color="red" target="*glink_target" text="選択肢1" size=20 x=100 y=100]

実行結果

f:id:onigirimgmg:20170218230418j:plain

オリジナルのボタンを使う

標準で用意されているボタンの他に、cssをカスタマイズしてオリジナルのボタンを表示させることもできます。"css ボタン"等で検索すると参考になるコードがたくさん見つかるので試してみてください。

準備

tyrano.css(下の方に追加する)

.mybutton {
color: #fff;
background-color: #eb6100;
border:2px solid #5d310d;
border-radius: 10px;
}

サンプルコード

[glink color="mybutton" target="*glink_click" text="オリジナルの[glink]ボタン" size=20 x=100 y=100]

【ポイント】colorのパラーメータにcssで記述したボタンのクラス名を書く

実行結果

f:id:onigirimgmg:20170218230929j:plain

widthパラメータについて

width(横幅)は、指定した値にpadding(余白)が加算されたサイズになります。つまり、指定したサイズより少し大きく表示されてしまいます。

f:id:onigirimgmg:20170218231131j:plain

指定通りのサイズで表示したい場合は、tyrano.cssを変更する必要があります。

準備

tyrano.css(183行目付近)

.glink_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);
box-sizing: border-box;
}

赤字が追加部分です。

参考:box-sizing-CSS3リファレンス

サンプルコード

[glink color="red" target="*glink_target" text="width=400の[glink]ボタン" size=20 width=400 x=100 y=100]

実行結果

f:id:onigirimgmg:20170218231547j:plain

指定通りのサイズになりました。

ボタンを中央に表示する(transformを使う)

x(横位置)を指定せずに画面の中央にボタンを表示する方法です。計算が不要なので、ボタンのサイズに変更があった場合にも対応できます。

サンプルコード

[glink color="red" target="*glink_target" text="中央に表示する" size=20 width=400 name="glink_center" y=100]
[iscript]
$(".glink_center").css("left","50%");
$(".glink_center").css("transform","translateX(-50%)");
[endscript]

 【ポイント】赤字の部分は同じ名前にしてください。jQueryCSSを直接操作しています。

実行結果

f:id:onigirimgmg:20170218231926j:plain

解説

leftプロパティで画面に対して50%(半分)の位置に表示した後、transform関数のtranslateXでボタンの横幅の半分の距離をマイナス方向に移動しています。これでちょうど画面の中央にボタンを表示させることができます。

参考:transform-CSS3リファレンス

備考

[glink]は初期状態で左右に2pxのマージンが取られているので、正確にはど真ん中に表示されているわけではありません。2px右にずれています。ほんの少しの差ですが、気になる方は以下の部分を修正してください。

tyrano.css(183行目付近)

.glink_button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;(削除)
margin: 0;(追加)
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);
}