長文については、記事の折りたたみを使用しています。スクリプトのサンプルをみるをクリックしてください。
背景表示(2ページ目) 項目
- レイヤーの透明度を指定するV455~
- 画面を揺らす
- フォーカスを変更する(3Dカメラ)
- レイヤに追加されたnameで指定された要素をすべて削除
- imageをLive2Dの前後に置く zindexを操作する
- 複数の画像を一度に表示する
- 画像の横幅サイズに変数を指定したい
- 2つの画像を同じタイミングで透明になりながら入れ替える
- 画像の位置を変数にする
- 画像を切り取って表示させる、トリミングする、合体画像を使う
- 画面の準備中に画像を被せたい
- 外枠等の背景色を変更する、画像を使用する 旧版
- 外枠等の背景色を変更する ゲーム画面外の表示を設定したい
レイヤーの透明度を指定するV455~
[layopt layer=1 opasity=0]
他animの利用等
画面を揺らす
[quake count=5 time=300 hmax=20]
画面揺らしをとめる
[p]や[l]で次の命令にいく
[quake count=0]
フォーカスを変更する
詳細をみる
実際の動きはこちらへ↓
3Dカメラを立ち絵に使う時、背景と立ち絵を少しずらすと雰囲気が出ます。
[camera zoom=2 x=-100 layer=base wait=false]
[camera zoom=3 rx=200 layer=0 wait=true]
こんな風に同時にカメラ演出
引用元 公式ツイッターより
必ず[reset_camera]でカメラの位置を初期値に戻して下さい
カメラを戻さないと、背景の変更 [bg]タグ等は使用できません。
静止画はレイヤを分けて、それぞれを少しずつ速度や位置をずらして動かすと良い雰囲気になる。3Dカメラはレイヤごとに演出できるのでこの辺も楽。
引用元 公式ツイッターより
Config.tjs の useCameraをtrueにする必要があります。
また、カメラ機能を有効にした場合、画面の中央寄せ(ScreenCentering)が無効になります。
カメラの座標は画面中央が(x:0,y:0)です。
例えば、画面右上は x:200 y:200 画面左下は x:-200 y:-200 という座標指定になります。
カメラを元の位置に戻すためには[reset_camera]タグを使用します。
カメラの演出完了を待ちたい場合は[wait_camera]タグを使用します。
[
freeimage ]はlayerのみの指定でしたが[free]はname指定が可能であり、必須です。
[free layer=0 name="myimage"]
詳細をみる
[image name="test" time="1000" layer=0 storage="default/backpage.gif" width="812" height="211" x="65" y="164" visible=true ]
[iscript]
$(".test").css("z-index",1);
[endscript]
imageにtestという名前をつけてiscriptの中でzindexを変更します。
これで、Live2Dの前後といった制御ができます。追加するレイヤにもご注意ください。
複数の画像を一度に表示する imageを一挙に表示
詳細をみる
プリロードも忘れずに
162 2016/07/24 (Sun) 11:21:30
複数の画像を一度に表示する場合は以下の様なスクリプトになります。
;前景レイヤ1 のbackに追加
[image left=100 top=100 storage="cg1.png" layer=1 page=back ]
[image left=200 top=100 storage="cg2.png" layer=1 page=back ]
[image left=300 top=100 storage="cg3.png" layer=1 page=back ]
;前景レイヤ1をトランジション
[trans layer=1 time=2000 ]
[wt ]
これは、layer=1 のbackレイヤで画像を合成しておいて
[trans]でレイヤ1をback → foreにトランジションさせます。
画像一つの場合は、ご提示の[image ]タグのtimeで可能ですが
裏で画像を作成してから、画面に表示させる場合は、上記の方法をお試し下さい。
;最後だけwait=trueにして、同時に表示させる。 trans 不要。
[image storage="cg001.png" time=1000 layer=1 width=900 height=600 wait=false]
[image storage="cg002.png" time=1000 layer=1 width=900 height=600 wait=false]
[image storage="cg003.png" time=1000 layer=1 width=900 height=600 wait=true]
※トランジションはfore と back の入れ替えなので
一瞬暗くなるのが正しい挙動な気がします。
画像の横幅サイズに変数を指定したい
&エンティティを使用して下さい。位置を変数にしたい場合も、同様に。
詳細をみる
[image layer=1 name=bar storage=bar.png width=&f.bar height=80]
f.bar(バーサイズ変数) = f.hp* 幅マックス値/ f.hpマックス値;
bar= hp* 199/ 999;
width値=f.hp(hp)*幅に収まる最大px ÷f.hp(hp)の最大値
【HTML】タグの可能性
アニメーションでサイズ変更したい場合は、anim側にてエンティティを利用して下さい。
2つの画像を同じタイミングで透明になりながら入れ替える
詳細をみる
V423より
[bg crose=false storage=img1]
[bg crose=false storage=img2]
cross=true or false を指定します。デフォルトはtrue。trueを指定すると2つの画像が同じタイミングで透明になりながら入れ替わります。falseを指定すると、古い背景を残しながら上に重なる形で新しい背景を表示します。CG差分などに利用すると良いでしょう
画像の位置を変数にする
詳細をみる
&エンティティを使用する
[eval exp="tf.x_path=1"]
[eval exp="tf.y_path=2"]
[image name="myimage" layer=1 visible=true x="&tf.x_path" y="&tf.y_path" storage=img1.png]
ただし、これだけではアニメーションとして動かすことはできないです。
全体の画像位置管理などに利用できる程度です。 imageのみならfreeimageで消して→変数を足して→またimageを表示するなどを行う
スクリプト内で[anim]が書かれた場所にジャンプし続けると連続で動くこともます
画像を切り取って表示させる、トリミングする、合体画像を使う
例、キャラクターのimage画像二種以上を横合体したものを使いたいなど
2017年 公式プラグインにて有志の方による、トリミングタグ機能があります。
利用規約に沿ってご利用下さい。
画面の準備中に画像を被せたい [mask]
[mask color=black effect="fadeInDownBig" time=1000]
画像指定していない場合、colorはマスクの色を指定できる。
[mask graphic="img.jpg"time=1000]
layer_maskが作られるのでimgを追加する場合
[iscript]
$(".layer_mask").prepend('<img src="data/image/mask/load.gif" name="loading" left=680>');
[endscript]
外枠等の背景色を変更する、画像を使用する
tyranoフォルダ/tyrano.cssを変更します。 2022年より[body]タグがあります。
詳細をみる
/*
CSSを修正することで、ゲーム画面をカスタマイズすることが可能です
* */
/*ゲーム枠の外側の色を指定します*/
画像を使用する
body{
background-image: url("back_bg.gif");
background-size:cover;
/*background-repeat: no-repeat;*/
background-color:black;
/*色の変更は↑*/
-webkit-tap-highlight-color: transparent;
overflow:hidden;
}
cssリファレンスを検索し参照のこと
画像を利用する際は、gifなど軽いものにしておきましょう
ゲーム画面外の表示を設定したい[body]
外枠等の背景色を変更する、画像を使用する
詳細を見る
ゲーム描画領域の外側をカスタマイズすることができます。
例えば、背景画像を設定するなど。
重要な点として必ずfirst.ksなどでゲーム起動時に通過する場所で設定してください。このタグはロード時は復元されません。
[body bgimage="back.png" bgcolor="black" ]
bgimage |
ゲーム画面外の背景に画像を設定することができます。bgimageフォルダに配置してください |
bgrepeat |
背景に画像を指定した際の表示パターンを指定します。デフォルトは縦横に繰り返し表示されます |
repeat-x:水平方向のみ繰り返し |
|
repeat-y:垂直方向のみ繰り返し |
|
round|比率を崩して覆うように全画面繰り返し|
no-repeat:繰り返しなし |
|
bgcolor |
背景色を指定できます。0x000000形式で指定してください。なお、bgimageが設定されている場合は無視されます |
bgcover |
true or false。デフォルトはfalse 。trueを指定すると1枚が全画面に引き伸ばして配置されます |
引用元