memo

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

glinkタグを使ってみた

ティラノスクリプトで使える機能「glink(グラフィカルリンク)」。最大の特徴は画像を使わずにグラフィカルなボタンを表示できるところ。スマホゲームなんかだと少しでも容量削っていきたいのでこれは便利ですね。

基本的なことは公式のタグリファレンスを参照してください。

f:id:onigirimgmg:20160803182344j:plain

glinkタグを使って選択肢を表示させてみました。初期状態で用意されているボタンの色は上から【black gray white orange red blue rosy green pink】の9色です。左は文字色をblackに、右はwhiteにしています。これだけでも結構なバリエーションですね。ちなみに文字の色は0xRRGGBBで自由に指定できます。

[glink target="j1" text="選択肢1" size=20 width=200 x=195 y=100 color=black font_color=white]

色を替えたい、もっと装飾したいという場合はtyranoフォルダ内のtyrano.cssをいじれば可能です。当たり前ですがcssの知識が必要になってくるので、慣れてきたら挑戦してみたいです。

f:id:onigirimgmg:20160803190832j:plain

ボタンの大きさも自由に変えられます。上はwidth=20にしたもの(偶然縦書きになりました)、下はwidthとheightを300にしたものです。初期状態だとテキストは中央上揃えになるみたい。

 

glinkには画像も使用できます。それじゃあbutton(グラフィカルボタン)と変わらないんじゃないの?と思われるかもしれませんが、glinkはベースになる画像を一つ用意するだけで中のテキストは自由に変えられるという特徴があります。選択肢の数だけ画像を用意するのは大変なのでこれは有効な方法ですね。

今回使ったベース画像はこちら。

f:id:onigirimgmg:20160803183132p:plain

f:id:onigirimgmg:20160803183142p:plain

下はカーソルが選択肢の上に乗ったときに表示する画像です。個人的な意見ですがボタンや選択肢はカーソルが乗ったときにわかりやすいよう色が変わる方が良いと思っています。音が鳴ればさらに良いですね。(glinkでも音を鳴らせます)

f:id:onigirimgmg:20160803183729j:plain

表示してみました。選択肢1にカーソルが乗っている状態です。

[glink target="j1" text="選択肢1" size=20 width=200 x=348 y=150 graphic="button_base.png" enterimg="button_base2.png" font_color=black]

画像を使うとこんな選択肢にもできます。

f:id:onigirimgmg:20160803184014j:plain

使用したベース画像はこちら。両端が透明になっています。画像を使うと透明度も自由になるので表現の幅が広がりますね。

f:id:onigirimgmg:20160803184113p:plain

f:id:onigirimgmg:20160803184121p:plain

 今回記事内で使用したボタンのベース画像はご自由にお使いください。使うときは必ずimageフォルダに入れること。他のフォルダだと認識しません。

 

・glinkの疑問点

ボタン自体の大きさがスクリプト内で記述したwidth、heightと一致しないのはなぜ?マージンの関係かな?位置合わせとボタンの画像制作時にとても不便なのでなんとかしたい。今は表示させたあとに大きさを測っている。

 →参考になりそうな記事を見つけました。感謝。

[glink]の配置が面倒くさいです( ;∀;) – めも調

[glink]のwidth=ボタンサイズとなるよう自動計算する – めも調

やっぱりcssいじらないとだめなのねー。box-sizingって聞いたことなかったんですが、css3の要素だったんですね。全然辿りつけなかったや……。