空想曲線

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

ティラノスクリプト:ptext文字装飾プラグイン  

ptext タグで表示する文字列に装飾をつけるプラグインです。
プラグイン機能が使用できるティラノスクリプトでご利用ください。
ptext装飾プラグイン_サンプル画像



導入方法


1.ptext_deco フォルダを plugin フォルダ内に配置します
2.first.ks の最初のほうに[ plugin name="ptext_deco" ]と書きます



つかいかた


ptext タグの name 属性に使用したい文字装飾のクラス名を書きます。
たとえば破線の赤(.dotted_red)を使用したいときは以下のように記述します。

[ ptext layer="0" x="0" y="0" name="dotted_red" text="任意の文字列" ]

装飾の種類については同梱の「文字装飾一覧.txt」とサンプル画像をごらんください。



プラグインのダウンロード


最新版は v100 です(ファイルの末尾がバージョン番号となっています)
ご利用の際は《素材利用規約》をご確認くださいますよう お願いいたします。

ptext装飾プラグインv100をダウンロード



更新履歴


2018.04.12 v100公開

ティラノスクリプト: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

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



フリー素材:メッセージウィンドウ素材 その22  

2018-03-16
2018-03-16
cm0
tb0

ゲームや動画などにお使いいただけるフリー素材です。
画面サイズ 960×640px での使用を想定して制作しています。
西洋ファンタジー向きのデザインですが好きに使っていただければ幸いです。
メッセージウィンドウ素材22サンプル



収録内容


カラーバリエーションは6色。
テキスト表示部分のみで名前枠などはありません。
メッセージウィンドウ素材22カラーバリエーション



素材のダウンロード


ご利用の際は《素材利用規約》をご確認くださいますよう お願いいたします

メッセージウィンドウ素材その22をダウンロード


フリー素材:メッセージウィンドウ素材 その21  

2018-02-17
2018-02-17
cm0
tb0

メッセージウィンドウとシステムボタン、選択肢ボタンのセット素材です。
画面サイズ 960×640px を基準に作成しています。
メッセージウィンドウ素材その21サンプル



カラーバリエーション


赤、黄、緑、青、紫の5パターンを収録しています。
メッセージウィンドウ素材その21カラーバリエーション



収録内容


  • メッセージウィンドウ(940×185px)
  • 選択肢ボタン(480×45px) ※通常、ホバー、クリックの3種
  • システムボタン12種 ※通常、ホバーの2種


システムボタンのカラーは共通となっています



素材のダウンロード


ご利用の際は《素材利用規約》をご確認下さいますようお願いいたします。

メッセージウィンドウ素材その21をダウンロード(zipファイル約76KB)


ティラノスクリプト:テーマ一括変換プラグイン その6  

テーマ一括変換プラグインその6_サンプル
ティラノスクリプト v440 以降でご利用いただけるプラグインです。
システム画面まわりのデザインを丸ごと入れ替えることができます。



動作サンプル


実際にティラノスクリプトに組み込んだものをサンプルとしてアップしています。
PCからでもスマートフォンからでもご覧いただけます(Chrome推奨)。

リンク:テーマ一括変換プラグイン動作サンプルのページヘ移動する



プラグインの適用範囲


  • メニュー画面
  • コンフィグ画面
  • セーブ画面
  • ロード画面
  • バックログ画面
  • メッセージウィンドウ
  • ロールボタン
  • glink タグの color パラメータ

以上8項目のデザインを変更します。



サンプル画像


※クリックで原寸大表示
テーマ一括変換プラグインその6_サンプル_メッセージウィンドウテーマ一括変換プラグインその6_サンプル_メニュー画面
テーマ一括変換プラグインその6_サンプル_セーブ画面テーマ一括変換プラグインその6_サンプル_コンフィグ画面



プラグインの導入方法


下記のテキストリンクからどうぞ

リンク:「ティラノスクリプト テーマ一括変換プラグインの導入方法」の記事を読む



プラグインのダウンロード


最新版は v100 です(ファイルの末尾がバージョン番号となっています)
ご利用の際は《素材利用規約》をご確認くださいますよう お願いいたします。

テーマ一括変換プラグインその6をダウンロード(zipファイル約450KB)



更新履歴


2018.02.17
 v100公開

フリー素材:メッセージウィンドウ素材 その20  

2018-02-06
2018-02-06
cm0
tb0
現在、テーマ一括変換プラグインに使用しているメッセージウィンドウ素材を
ティラノスクリプト以外のゲームツールや動画の素材として使用できるようにしました。

メッセージウィンドウ、システムボタン、選択肢用のボタン台が入っています。
画面サイズ 960×640px に合わせて作成した png ファイルとなっておりますので
必要に応じてサイズやファイル形式を変更してお使いください。

ご利用の際は《素材利用規約》をご確認くださいますよう お願いいたします。

メッセージウィンドウ素材 その20-1


message20_01.jpg

メッセージウィンドウ素材 その20-1をダウンロード



メッセージウィンドウ素材 その20-2


message20_02.jpg

メッセージウィンドウ素材 その20-2をダウンロード



メッセージウィンドウ素材 その20-3


message20_03.jpg

メッセージウィンドウ素材 その20-3をダウンロード



メッセージウィンドウ素材 その20-4


message20_04.jpg

メッセージウィンドウ素材 その20-4をダウンロード



メッセージウィンドウ素材 その20-5


message20_05.jpg

メッセージウィンドウ素材 その20-5をダウンロード


ティラノスクリプト:テーマ一括変換プラグイン動作サンプル  

現在、配布中のテーマ一括変換プラグインの動作サンプルを作りました。
ゲームに組み込んだときの雰囲気がつかみやすくなると思いますので
ダウンロード前に一度おためしください (*´∀`*)ノ


▼見てみたいデザインをクリックすると始まります

上記のサンプルが動かない方はこちらからどうぞ


テーマ3の縦長画面とスライダー版は収録しておりませんのでご了承ください。
また、動作サンプルからダウンロードページに移動できないときは下記のリンクからどうぞ!

リンク:テーマ一括変換プラグインその1のダウンロードページヘ
リンク:テーマ一括変換プラグインその2のダウンロードページヘ
リンク:テーマ一括変換プラグインその3のダウンロードページヘ
リンク:テーマ一括変換プラグインその4のダウンロードページヘ
リンク:テーマ一括変換プラグインその5のダウンロードページヘ
リンク:テーマ一括変換プラグインその6のダウンロードページヘ


ティラノスクリプト:キーフレームアニメ補助プラグイン  

キーフレームアニメを簡単に扱えるようにしたプラグインです。
汎用性が高そうなアニメーションを思いついただけ放り込みました。
ティラノスクリプトv440以降でご利用いただけます。
kanimacro_sample.jpg



動作サンプル


別タブを開いて見る場合はこちらから



導入の仕方


▼作業手順
1.data > others > plugin フォルダを開く
2.kanimMacro フォルダを配置
3.シナリオファイルを開き、[ plugin name="kanimMacro" ] と記述

これ以降、独自マクロの使用が可能となります。



使いかた


▼作業手順
1.アニメーションさせたい画像を読み込む
2.アニメーションの種類をえらぶ
3.マクロを記述する

たとえばレイヤ1に test.jpg を読み込み、ズームインしながら登場させたい場合は

; 画像をレイヤ1に読み込む
[ image layer="1" storage="test.jpg" top="100" left="100" ]
; ズームインしながら登場するマクロを実行
[ zoom_in layer="1" ]

この2行でおわりです。



パラメータについて


すべてのマクロに以下のパラメータがありますが必須ではありません。
何も書かなければレイヤ0に読み込まれた画像すべてがアニメーションの対象となります。


name
名前の指定
layer
レイヤの指定(def=0)
time
アニメーションにかける時間


使用できるアニメーション


1回のみ再生(count=1)


zoon_in
拡大しながら登場・その1
zoom_out
縮小しながら退場・その2
zoom_in_bounce
拡大しながら登場・その2
zoom_out_bounce
縮小しながら退場・その2
open_vertical
上下に開く・その1
close_vertical
上下から閉じる・その1
open_vertical_bounce
上下に開く・その2
close_vertical_bounce
上下から閉じる・その2
open_horizontal
左右に開く・その1
close_horizontal
左右から閉じる・その1
open_horizontal_bounce
左右に開く・その2
close_horizontal_bounce
左右から閉じる・その2
rotate_r90
右に90度回転
reset_rotate_r90
右に90度回転した状態から戻る
rotate_r180
右に180度回転
reset_rotate_r180
右に180度回転した状態から戻る
rotate_r270
右に270度回転
reset_rotate_r270
右に270度回転した状態から戻る
rotate_r360
右に360度回転
reset_rotate_r360
右に360度回転した状態から戻る
rotate_l90
左に90度回転
reset_rotate_l90
左に90度回転した状態から戻る
rotate_l180
左に180度回転
reset_rotate_l180
左に180度回転した状態から戻る
rotate_l270
左に270度回転
reset_rotate_l270
左に270度回転した状態から戻る
rotate_l360
左に360度回転
reset_rotate_l360
左に360度回転した状態から戻る
rotate_zoom_in
拡大+右2回転で登場
rotate_zoom_out
縮小+左2回転で退場



永続的に再生(count=infinite)


start_float
ふわふわ開始
stop_float
ふわふわ停止
start_blink
点滅開始
stop_blink
点滅停止
start_zoom
ズーム開始
stop_zoom
ズーム停止
start_rotate_zoom
ズーム+傾き開始
stop_rotate_zoom
ズーム+傾き停止
start_rotate_x
X軸回転開始
stop_rotate_x
X軸回転停止
start_rotate_y
Y軸回転開始
stop_rotate_y
Y軸回転停止
start_rotate_z_right
Z軸回転開始(右回転)
stop_rotate_z_right
Z軸回転停止(右回転)
start_rotate_z_left
Z軸回転開始(左回転)
stop_rotate_z_left
Z軸回転停止(左回転)
start_figure_eight
8の字回転開始
stop_figure_eight
8の字回転停止
start_skew_horizontal
左右に傾斜開始
stop_skew_horizontal
左右に傾斜停止
start_skew_vertical
上下に傾斜開始
stop_skew_vertical
上下に傾斜停止
start_stretch_horizontal
横方向に伸縮開始
stop_stretch_horizontal
横方向に伸縮停止
start_stretch_vertical
縦方向に伸縮開始
stop_stretch_vertical
縦方向に伸縮停止
start_step
戦闘ステップ開始
stop_step
戦闘ステップ終了
start_dempsey_roll
デンプシーロール開始
stop_dempsey_roll
デンプシーロール終了
start_wiggle
ガタガタブルブル開始
stop_wiggle
ガタガタブルブル終了



プラグインのダウンロード


ご利用の際は《素材利用規約》をご確認下さいますようお願いいたします。

キーフレームアニメ補助プラグイン v101をダウンロード



更新履歴


2018.03.03 v101 start_wiggle, stop_wiggle 追加
2018.01.15 v100公開


ティラノスクリプト:ミニゲーム「Rouge ou Noir」ブラウザ版  

2018-01-04
2018-04-16
cm0
tb0

現在、当ブログで配布しているスクリプトサンプルをゲーム化しました。
Webブラウザでプレイ可能です(Chrome推奨)。
ron_title.jpg

Rouge ou Noir をプレイする


5枚のカードのうち赤と黒のどちらが多いか当てる簡単なゲームです。
連続で当てれば当てるほど配当が大きくなっていきます。
がっぽりコイン稼いだらオンラインランキングに登録してね(o'ω'o)ノ


以下、補足説明など


▼つづきを読む▼

あけましてクイズ 2018  

2018-01-01
2018-01-08
cm0
tb0

あけましておめでとうございます。
本年もよろしくお願いいたします。

今年の問題は覆面算となっております。ヒントを元に計算式を成立させてください。


お正月クイズ2018



覆面算のルール


  • 同じ文字には同じ数字が入ります
  • 入る数字は 0~9 のどれかです(重複はしません)
  • 一番上の桁に 0 は入りません

以上の条件で計算式を成立させるのが目的です。

たとえば


  HAPPY
+ HAPPY
------------------------
 SPRING


この計算式を成立させると以下のようになります。


  73445
+ 73445
-------------------------
 146890


正解は1週間後 (o'ω'o)ノ < ミニゲームも公開するから遊びにきてね



こたえ


リンク:空欄に入る単語
リンク:覆面算の解答

以上です。今年もよろしくお願いいたします。



Author

Recent

Category

Link

Comment

Mailform

Twitter