空想曲線

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

カテゴリー:「ティラノスクリプト 小ネタ」の記事一覧

・2017/12/09|ティラノスクリプト:BGMや効果音の管理に連想配列をつかう
・2017/11/17|ティラノスクリプト:レイヤ指定に変数を使用するときの注意
・2017/09/23|ティラノビルダー:UIテーマ一括変換使用時に一部だけ変更したい場合
・2017/03/17|ティラノスクリプト︰keyframe を使ってカードめくりのアニメーションを作る

ティラノスクリプト:BGMや効果音の管理に連想配列をつかう  

2017-12-09
2017-12-09
cm0
tb0

ゲームには欠かせない要素であるBGMや効果音ですが
使用する数が増えてくると管理が大変になってきます。

とくに複数の素材サイトさんからお借りする場合
サイトによってファイル名の長さに大きな差があったり
ファイル名からどのような音楽か判別がむずかしかったり
使用するときに少し手間がかかってしまうことがあります。

ファイルをリネームしてしまえば問題は解決するのですが
これはこれで「ファイルをひとつずつリネームする手間」と
「どのサイトからどの曲を借りたかを管理する手間」が増えます。

そこで、使用するBGMや効果音をリスト化して
使い勝手を良くしようというのが今回のお題です。
リストには連想配列を使用します。



連想配列とは


配列の仲間ですが添字(インデックス)にキーを指定できるのが特徴です。
たとえば f.bgmList という連想配列を作ったとします。

普通の配列の場合は

f.bgmList[0] = "music001.ogg";
f.bgmList[1] = "happy.ogg";

もしくは
f.bgmList = ["music001.ogg", "happy.ogg"];

と書きますが、連想配列は
f.bgmList["normal"] = "music001.ogg";
f.bgmList["happy"] = "happy.ogg";

もしくは
f.bgmList = {
"normal": "music001.ogg",
"happy": "happy.ogg"
};

と書きます。この"normal"や"happy"を《キー》と呼びます。
キーにアクセスするには以下のように書きます。
var value = f.bgmList["normal"];
var value = f.bgmList.normal;

console.log(value);
// コンソールには「music001.ogg」と表示される

もっと詳しく知りたい人は「JavaScript 連想配列」でググってね。
それでは、これを使って実際にBGMリストを作ってみましょう。



BGMのリストを作る


たとえば下記のようなBGMの設定を考えたとします。
左側がBGMを使うシーン、右側が再生するファイル名です。

通常時 :music001.ogg
楽しい時:candymusic.ogg
悲しい時:bgmfile_003.ogg
イベント:event_loop_110.ogg
ED曲 :fantasy_theme.ogg

これを連想配列にしていきます。

f.bgmList = {
"normal": "music001.ogg",
"happy": "happy.ogg",
"sad": "bgmfile_003.ogg",
"event": "event_loop_110.ogg",
"ending": "ending_theme.ogg"
};

ついでに効果音リストも作っておきます。
書きかたはBGMリストと同じです。
f.seList = {
"enter":"button001.ogg",
"click":"effect_paternA_005.ogg",
"effect":"sound111.ogg"
};

おまけで効果音用のバッファ指定もリスト化。
f.bufList = {
"enter":"0",
"click":"1",
"effect":"2"
};

キーの名前をややこしくすると本末転倒になってしまうので
ひと目で用途が分かるような名前にしておきましょう。



ティラノスクリプトで使ってみる


BGMを再生するときは以下のように記述します。

[ playbgm storage="&f.bgmList.normal" ]

これを実行すると連想配列 f.bgmList のキー《normal》に格納されている「music001.ogg」が再生されます。

効果音を再生するときも同じように書きます。
[ button graphic="img.png" enterse="&f.seList.enter" clickse="&f.seList.click" ]

ホバー時に button001.ogg が再生され、クリック時に effect_paternA_005.ogg が再生されます。

もちろんマクロにしても問題ありません。
[ macro name="通常BGM再生" ]
[ playbgm storage="&f.bgmList.normal" ]
[ endmacro ]


; バッファ番号2で「sound111.ogg」を再生
[ macro name="エフェクト再生" ]
[ playse storage="&f.seList.effect" loop="false" buf="&f.bufList.effect" ]
[ endmacro ]


ティラノスクリプト:レイヤ指定に変数を使用するときの注意  

2017-11-17
2017-11-18
cm0
tb0

image タグなどのパラメータ layer に変数を使用する際の注意点です。


変数でレイヤを指定する方法


たとえば、キャラクタをレイヤ0に、カットインをレイヤ1に、アイテムをレイヤ2に表示したいといった場合に

f.lay_chara = 0; // キャラクタ 
f.lay_cutin = 1; // カットイン
f.lay_item = 2; // アイテム
f.lay_icon = 2; // 同じレイヤ番号を指定しても大丈夫

と変数を代入しておいて

[ image layer="&f.lay_chara" storage="chara.png" ]
[ image layer="&f.lay_cutin" storage="cutin.png" ]
[ image layer="&f.lay_item" storage="item.png" ]
[ image layer="&f.lay_icon" storage="icon.png" ]

と書けば

chara.png がレイヤ0に、cutin.png がレイヤ1に、item.png と icon.png がレイヤ2に読み込まれます(icon.png は item.png の上に重ねて表示されるので注意)。
頭についている「&」は変数を指定するときにつける呪文という認識でいいです。
詳しく知りたい人は「エンティティ」でググってください。

「これはどのレイヤに読み込むんだったっけ?」
「レイヤ番号をずらさないといけないけど修正がめんどい」

といった煩わしさが解消されるのがメリットだと思います。
name パラメータと併用するとレイヤ管理がラクになります。



変数で指定する際の注意点


注意点はつぎの一点だけです。

「レイヤ0を指定するときだけは必ずダブルクォーテーションで括る」

f.lay_chara = 0; // これだとエラーが出る
f.lay_chara = "0"; // これでおっけい

レイヤ1以上は括らなくても大丈夫なようです。不思議 (´ェ`)


ティラノビルダー:UIテーマ一括変換使用時に一部だけ変更したい場合  

2017-09-23
2017-09-24
cm0
tb0

最新版のティラノビルダーからプラグイン機能が実装され
UIのデザインを簡単に変更できるようになりました。

先日、公式掲示板の質問スレッドに

(*・ω・)< メッセージ枠だけ自分で作ったやつを使いたい

(*・ω・)< テキストの色も変えたいし、表示位置も調整したい

といった旨の書き込みを見つけたので修正方法を書いていきます。
手順が多いため大変かと思いますが、よろしくおつきあいください。


用意するものは以下の4つです


  • 最新版のティラノビルダー
  • プロジェクトファイル
  • 使いたいメッセージウィンドウ画像(frame_message2.png)
  • テキストエディタ(Mery使いやすいよ)



新規プロジェクトを作成する


さすがにこれが分からない人はいないと思うので省きます。
プロジェクト名は何でも構いません。私は test170923 とつけました。味気ない。



UIテーマ一括変換を反映させる


画面右上の歯車をクリックしてゲームセッティングウィンドウを開き
UIテーマ一括変換から好きなテーマを選びます。


セッティング画面


今回は【ティラノブラウン】にしました。「更新する」ボタンをクリックすると反映されます。
起動させると以下のような画面になります。


テーマ反映後


では、このメッセージウィンドウを別のものに変更していきましょう。



myproject から自分のプロジェクトフォルダを開く


プロジェクトファイルの場所が分かっている場合はすっ飛ばしてください。


▼作業手順
1.ティラノビルダーが入っているフォルダを開く
2.myproject フォルダを開く
3.新規プロジェクト作成時につけた名前のフォルダを開く



メッセージウィンドウ画像を追加する


▼作業手順
1.data > others > plugin > theme_tyrano_05 フォルダを開く
2.image フォルダを開く
3.自分の使いたいメッセージウィンドウ画像を配置する


ということで配置しました。
元の画像に上書きしてもいいのですが、元に戻したいときに面倒なので分けてます。


メッセージ枠の追加



plugin.ks を編集する


▼作業手順
1.data > scenario > system フォルダを開く
2.plugin.ks をテキストエディタで開く
3.plugin タグの内容を修正する


ファイルの中身はこんな感じです。この[ plugin ]タグを修正していきます。


ファイル編集


■pluginタグの属性

font_color
メッセージの文字色
name_color
名前の文字色
opacity
メッセージウィンドウを不透明度(範囲0~255)
※値が大きいほど不透明になる


今回は次のように修正しました。

font_color="0x008740" name_color="0x006890" opacity="255"



メッセージウィンドウの設定を修正する


▼作業手順
1.data > others > plugin > theme_tyrano_05 フォルダを開く
2.init.ks をテキストエディタで開く
3.メッセージウィンドウの設定を修正する
4.名前枠の設定を修正する


init.ks を開くとこんな感じになっています。


ファイル編集2


■positionタグの属性

width
メッセージレイヤの幅
height
メッセージレイヤの幅
top
メッセージレイヤを表示する上端の位置
left
メッセージレイヤを表示する左端の位置
frame
メッセージレイヤに読み込む画像ファイル名
margint
テキストまでの上余白
marginr
テキストまでの右余白
marginb
テキストまでの下余白
marginl
テキストまでの左余白



■ptextタグの属性

size
文字の大きさ
x
名前を表示する左端の位置
y
名前を表示する上端の位置


今回は次の箇所だけ修正しました。

▼メッセージウィンドウ
frame = "../others/plugin/theme_tyrano_05/image/frame_message2.png"
margint = "70"

▼名前枠
x = "70"
y = "460"



以上で修正は終わりです。おつかれさまでした。
それでは起動してみましょう。


編集後にテーマ反映


( ゚д゚)< ロールボタンのコレジャナイ感がすごい!


ロールボタンを変更するときは、image > button フォルダを開いて
中に入っているボタン画像を差し替えましょう。

で、さっき編集した init.ks にロールボタンの設定があるので
要らないボタンを削除したり、表示位置を調整したり、
お好みに合わせて修正してください。

ということで、今回はこれにてー (o'ω'o)ノシ
うまく動かないとか間違ってるとこがあったら教えてね。


ティラノスクリプト︰keyframe を使ってカードめくりのアニメーションを作る  

2017-03-17
2017-11-16
cm0
tb0

今日はティラノスクリプトのちょいネタです。

ティラノスクリプトでは keyframe, frame, kanim タグを使って
複雑なアニメーションもカンタンに組むことができます。

今回は「ウラ向けのカードをめくってオモテ面を見せる」といった
アニメーションを組んでみたいと思います。
めっちゃカンタンなのでチャレンジしてみてねヾ(*´∀`*)ノ



カード画像を用意する


用意する画像はオモテとウラのカード2枚のみです。
2枚のカードは同じサイズで作成しましょう(今回は 160×220 px で作成)。

card_back card_open



キーフレームアニメ定義


キーフレームアニメの中身を作っていきます。


; ▼カードを閉じるキーフレームアニメ定義
[ keyframe name="card_close" ]
[ frame p="0%" rotateY="0" ]
[ frame p="100%" rotateY="90deg" ]
[ endkeyframe ]


; ▼カードを開くキーフレームアニメ定義
[ keyframe name="card_open" ]
[ frame p="0%" rotateY="90deg" ]
[ frame p="100%" rotateY="0" opacity=255 ]
[ endkeyframe ]


card_close の方では画像を90度Y軸回転させています。
card_open の方では90度Y軸回転してある画像を元に戻します。

この2つを組み合わせることでカードをめくっているように見せています。
実際のカードのように180度回転しているわけではないので注意。



マクロをつくる


さっきのキーフレームアニメを組み合わせたものをマクロ化します。
基本的な設定しか書いてないので、お好みでカスタムしてください。


; ▼カードをめくるマクロ
[ macro name="anim_card_open" ]
; カードを閉じるキーフレームアニメを実行
[ kanim keyframe="card_close" layer="0" name="turn1" time="300" easing="ease-in" ]
[ wait time="300" ]
; 表面のカード画像を読み込ませているレイヤを可視に
[ layopt layer="1" visible="true" ]
; カードを開くキーフレームアニメを実行
[ kanim keyframe="card_open" layer="1" name="turn2" time="300" easing="ease-out" ]
[ wait time="300" ]
[ freeimage layer="0" ]
[ endmacro ]



スクリプトを書く


*test
; ▼カードの裏面をレイヤ0に読み込ませる
[ image storage="card_back.png" top="300" left="300" layer="0" name="turn1" visible="true" ]

; ▼カードの表面をレイヤ1に読み込ませる(visible=falseなので画面上では見えていない)
[ image storage="card_open.png'" top="380" left="300" layer="1" name="turn2" visible="false" ]

; ▼カードをめくる
[ anim_card_open ]


keyframe で定義したアニメーションは他にも使い回すことができるので、基本的な動き(X,Y,Z軸回転、ズーム、上下 or 左右の反復運動などなど)を作ってストックしておくと良いかもしれません。

ということで今回はこれにて (`・ω・´)ゞ< おつかれっした!

Author

Recent

Category

Link

Comment

Mailform

Twitter