空想曲線

吉里吉里2/KAG3、ティラノスクリプトでのゲーム製作に使えるフリー素材、スクリプトサンプル、プラグインを配布しています。

ティラノスクリプト:ptextで一部の文字だけに装飾をつける方法  

2018-03-21
2018-03-21
cm0
tb0

ティラノスクリプトで ptext タグを使用しているときに

「ここの文字だけ色を変えたい」
「ここの文字だけサイズを変えたい」

と思ったことはありませんか?
すこしだけスクリプトを追加することで実装が可能です。

ちなみに作例はこちら。
ptext装飾サンプル1

今回はこれを一緒に作っていきましょう、というのがお題です。
スクリプトが苦手でも手順通りにやれば絶対にできますので

( ゚д゚)b < いっしょにデコろうぜ!



textパラメータに記述する文字列を変数に入れる


text に記述する文字列を直書きすると横長のスクリプトになってしまうため
今回は変数に入れておくことにします。変数名は f.text で。

f.text = 'デコりたい文字列';

つぎに、この《デコりたい文字列》を html の span タグで囲みます。
f.text = '<span>' + 'デコりたい文字列' + '</span>';

これが基本の形となります。



ptextタグを書く


ptextのパラメータについての説明は省略します。
使いかたが分からないひとはリファレンスをじっくり読みましょう。

[ layopt layer="0" visible="true" ]
[ ptext layer="0" x="100" y="300" text="&'普通のテキスト' + f.text + '普通のテキスト'" ]

text パラメータに先ほどの変数を入れ込みます。
頭の「&」はパラメータの値に変数を使用するときにつけるお約束です。

また、記述するときは下記の3点に注意してください。

・文字列はシングルクォーテーションで囲む
・変数は何も囲まない
・文字列と文字列、文字列と変数、変数と変数をつなぐときは「+」を使う

これを実行するとこうなります。
ptext装飾サンプル2

( ゚д゚)< なんも変わってなくね?

f.text の内容は「デコりたい文字列」という文字列を span で囲っただけです。
span タグは何もしないので、今の状態だとデコりたい文字列はそのまま表示されます。
それでは、ここに文字のスタイルを設定していきましょう。



文字のスタイルを設定する


f.text = '<span style="color:#E16871">' + 'デコりたい文字列' + '</span>';

span タグに文字色を変更するスタイルを追加しました。
ここではstyle="color:#E16871"がそれにあたります。

実行すると以下のようになります。文字の色が変わりました。
ptext装飾サンプル3

せっかくなので文字の大きさも変えてみましょう。
f.text = '<span style="color:#E16871;font-size:60px">' + 'デコりたい文字列' + '</span>';

フォントサイズを60pxに設定しました。実行すると以下のようになります。
ptext装飾サンプル4



擬似クラスをつくる


毎回スタイルをひとつずつ書くのはめんどくさいと思うので
文字のスタイルを設定した擬似クラスを作って呼び出すことにします。

自分で css ファイルを作って loadcss タグで読み込ませてもいいですし
量が少なければ tyrano.css に追記しても構わないと思います。
クラス名は ptext_deco にしておきます。

.ptext_deco {
color: #E16871; // フォントの色
font-size: 60px; // フォントサイズ
}

これを使用するときは以下のように書きます。
style の部分が class になっていることに注意してください。
f.text = '<span class="ptext_deco">' + 'デコりたい文字列' + '</span>';

ptext タグの書きかたは同じなので省略します。



デコりたい文字列が変数の場合


f.text = '<span class="ptext_deco">' + 'デコりたい文字列' + '</span>';

これだと「デコりたい文字列」という単語しかデコれないので修正しましょう。
[ iscript ]
f.name = 'ああああ'; // デコりたい文字列
f.text = '<span class="ptext_deco">' + f.name + '</span>';
[ endscript ]

[ layopt layer="0" visible="true" ]
[ ptext layer="0" x="100" y="300" text="&'勇者' + f.text + 'のレベルが上がった'" ]

実行すると以下のようになります。
ptext装飾サンプル5



デコりたい文字列が2つ以上ある場合


text の中にデコりたい文字列が複数ある場合は以下のように書きます。
併せて jQuery から css にアクセスするやり方も書いておきます。


[ iscript ]
f.text1 = 'デコ文字1';
f.text2 = 'デコ文字2';
f.deco1 = '<span class="ptext_deco1">' + f.deco_text1 + '</span>';
f.deco2 = '<span class="ptext_deco2">' + f.deco_text2 + '</span>';
[ endscript ]

[ ptext text="&'普通のテキスト' + f.deco1 + '普通のテキスト' + f.deco2" ]

[ iscript ]

$(".ptext_deco1").css("color", "#BAF400");
$(".ptext_deco2").css("color", "#E16871");

[ endscript ]

実行結果は以下のとおりです。
ptext装飾サンプル6

( ゚д゚)ノ < おつかれさまでした。楽しいティラノライフを!



関連記事

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://kopacurve.blog33.fc2.com/tb.php/477-e6a20701
この記事にトラックバックする(FC2ブログユーザー)

Author

Recent

Category

Link

Comment

Mailform

Twitter