スポンサーリンク

ティラノスクリプト:画像を表示する[image][anim]

[image]タグの概要

 指定したレイヤーに画像を追加します。アイテム表示や背景切り替えなどに使用できますが、私の場合、選択肢のデザインにこだわりたいので[button]を使うよりも[image]を使いがちです。
 初期状態ではレイヤ自体が非表示になっているため、[image]タグで画像を追加しても画面に表示されません。なので、[layout]タグでレイヤー自体を表示状態にする必要があります。その方法はこちらの記事をご確認ください。

 レイヤー表示のマクロを作っておくと結構楽ですよ。いちもんじも作ってます。

パラメータ一覧

パラメータ必須解説初期値
storage×画像ファイル名を指定します。ファイルは背景レイヤならdata/bgimage、前景レイヤならdata/fgimageに入れてください。
layer×画像を追加するレイヤを指定します。
baseを指定すると背景レイヤ。0以上の整数を指定すると対応する前景レイヤに画像を表示します。
base
page×レイヤの表ページと裏ページ、どちらを対象とするか。foreまたはbackで指定します。省略すると、表ページとみなされます。fore
visible×trueまたはfalseを指定します。trueを指定すると、画像を追加すると同時に対象レイヤを表示状態にします。つまり、[layopt visible=”true”]を省略できます。
left×画像の左端位置を指定します。(ピクセル)
top×画像の上端位置を指定します。(ピクセル)
x×画像の左端位置を指定します。leftと同様。こちらが優先度高。(ピクセル)
y×画像の上端位置を指定します。topと同様。こちらが優先度高。(ピクセル)
width×画像の横幅を指定します。(ピクセル)
height×画像の高さを指定します。(ピクセル)
folder×画像が入っているフォルダを指定できます。デフォルトでは前景レイヤ用の画像はfgimageフォルダ、背景レイヤ用の画像はbgimageフォルダと決まっていますが、これを変更できます。
name×[anim]タグなどからこの名前でアニメーションさせられます。カンマで区切ることで複数指定できます。(高度な知識:name属性で指定した値はHTMLのクラス属性になります)
time×フェードイン時間をミリ秒単位で指定します。これを指定すると、画像が透明な状態から徐々に表示されていきます。省略すると、一瞬で表示されます。
wait×フェードインの完了を待つかどうか。trueまたはfalseで指定します。true
zindex×画像同士の重なりを指定できます。数値が大きい方が前に表示されます。1
depth×zindexが同一な場合の重なりを指定できます。front(最前面)またはback(最後面)で指定します。デフォルトはfront。front
reflect×trueを指定すると左右反転します。
pos×画像の位置をキーワードで決定します。指定できるキーワードはleft(左端)、left_center(左寄り)、center(中央)、right_center(右寄り)、right(右端)。各キーワードに対応する実際の座標はConfig.tjsで設定されており、自由に編集できます。各キーワードにはそれぞれ省略形があり、l、lc、c、rc、rと指定することもできます。動作は同じです。この属性を指定した場合はleftパラメータは無視されます。layerをbaseと指定した場合、この属性は指定しないでください。

[image]タグの使用例

[image name=”ichimonjiikemen” storage=”kakkoiiore.png” layer=”1″ x=”2700″ y=”154″ time=”0″]

 基本的にはxとyで場所を指定します。あと、レイヤーの何番に画像を乗せるか覚えておかないと素材が多い場合は結構面倒かも知れません。もちろん、配置した画像を消すときも、画像自体に名前を付けておけばピンポイントに消すことが出来ますけどね。

[image]タグと[anim]タグを組み合わせて選択肢を作る

 [image]タグは、表示させたい画像に名前を付けることが出来ます。
 一はよく選択肢にこの[image]タグを使いますと言いましたが、選択肢を出す際に、こんな感じにアニメーションを付けているんですね。(音はありません)↓

 こんな感じで表示した選択肢の上に、当たり判定(クリッカブルマスク)を乗せています。
 参考までに、この動きのスクリプトをここに貼っておくと、こんな感じです。
 (これ今気づいたんですが、普通に[button]タグ使った方が早くね…?画像も指定できるみたいですし…あれ…?涙が…。)

[button]タグでも同様の処理が可能ですが、[button]で試した結果、選択肢が横から出てきている間などにクリックされると動作がおかしくなるなどをした為に、このやり方にした…ような気がしなくもないです(制作し始めたのはもう7ヶ月前のことなので記憶にない)

;シュッって感じの効果音。
[playse storage=”sentakusiarawareru.ogg” ]
;画面外から選択肢がやってきますよ
[image name=”skipsinai” storage=”sukipsinai.png” layer=”1″ x=”2700″ y=”154.505″ time=”0″]
;ちょっとだけ左に進んで、ちょっと右に戻りますよ(慣性の感じ?)
[anim name=”skipsinai” time=500 left=290 top=154.505]
[anim name=”skipsinai” time=90 left=339.266 top=154.505]
[wait time=200]
;選択肢こんな感じで出すときはwaitが必須。じゃないと固まります。

;↓はスキップしないの方の選択肢。基本的に↑と内容は一緒
[playse buf=2 storage=”sentakusiarawareru.ogg” ]
[image name=”skipsuru” storage=”suttobi1.png” layer=”1″ x=”2700″ y=”280.505″ time=”0″]
[anim name=”skipsuru” time=500 left=290 top=280.505]
[anim name=”skipsuru” time=90 left=339.266 top=280.505]
;……以下はクリッカブルを置いたりレイヤー内の要素を削除したり……

 [image]につけた名前と、[anim]タグで付けている名前が一致しているところに注目してくださいね。この部分で、何を動かすのか指定しています。timeは移動時間です。animはxとyではなくleft(xと同義)とtop(yと同義)で表しているのがややこしいですね…。

[image]タグで配置した画像を削除したい

 レイヤー内全体の要素を削除する場合は、[freeimage]タグでOkですが、ピンポイントに狙った画像だけを削除したい場合はこんな感じで指定しましょう。↓

[free name=”imageで付けた名前” layer=”imageで置いたレイヤー数” time=”0″]

 上の例を使用すると、こんな感じです。

[free name=”skipsinai” layer=”1″ time=”0″]