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

画像をフォルダに置く
1. fgimageフォルダの中の自作フォルダに画像を置く場合
2. fgimageフォルダと同一階層に独自フォルダを作成して画像を置く場合
画像を配置するレイヤーを可視状態にする
[image]タグの概要
パラメータ一覧
[image]タグの使用例
1. [image]タグと[anim]タグを組み合わせて選択肢を作る
[image]タグで配置した画像を削除したい

画像をフォルダに置く

　表示させたい画像はfgimageフォルダに入れましょう。

myprojects　→　ゲーム名フォルダ　→　date　→　fgimage

fgimageフォルダの中の自作フォルダに画像を置く場合

　基本fgimageに置くとタグが簡単になりますが、もしも他にフォルダを作るのであれば、例えばフォルダを作成する場所がfgimage内ならば

[image name=”画像名” storage=”fgimage/フォルダ名/画像名.拡張子” layer=”表示レイヤー” x=”数値” y=”数値” time=”表示するためにかける時間”]

　こんな感じで”/“で区切ってフォルダを指定する必要があります。

fgimageフォルダと同一階層に独自フォルダを作成して画像を置く場合

　もしもfgimage以外のフォルダに入れるならば、こんな感じに書く必要があります。

[image name=”画像名” storage=”../フォルダ名/画像名.拡張子” layer=”表示レイヤー” x=”数値” y=”数値” time=”表示するためにかける時間”]

　基準となるフォルダがfgimageなので、fgimageと同列の階層にフォルダを作った場合、..で階層を１つ上げる必要があります。

画像を配置するレイヤーを可視状態にする

まず、画像を配置したいレイヤーをプレイヤーに見えるように設定する必要があります。これを忘れてしまうと、[image]タグで画像をいくら表示させたって画面上には表示されません。

[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]で試した結果、選択肢が横から出てきている間などにクリックされると動作がおかしくなるなどをした為に、このやり方にした…ような気がしなくもないです（制作し始めたのはもう７ヶ月前のことなので記憶にない）

;シュッって感じの効果音。
[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]
;……以下はクリッカブルを置いたりレイヤー内の要素を削除したり……