シナリオに沿った背景変更について記す。
長文については、記事の折りたたみを使用しています。スクリプトのサンプルをみるをクリックしてください。
背景表示 項目
- 基礎的な背景変更[bg]
- マクロを使った背景表示。マクロの参考
- 画面をフラッシュさせる。
- 背景画像をループする
- クリアしたらタイトル画面を変える。
- 背景管理マクロ(音楽マクロと大差ないです)マクロの参考
- 前景に画像imageを出したい[image]
- 画像を消したい [freeimage]
- imageのトランジション
- トランジョンするレイヤーを指定(他のものに対してトランジションを行わない)
- 背景に動画を流す
- エフェクト等の演出
背景表示(2ページ目)をみる。>>
よくある質問
- imageの画像が表示されない→通常前景レイヤはfgimage フォルダ指定してなければimageフォルダではありません。@layopt visible=true layer=0(1)が必要。http://tyrano.jp/home/tag#image
- 複数のname指定は 例 name="ch,ch_100" です。
- layer= の数値を指定しない場合、画面全体に表示されます。数値以外に layer=base で背景となります。
- imageタグのstorageにSVG(svg)ファイルを指定 更新日2022/04/08
ファイル名の大文字・小文字を確認。
ノベコレでは image.PNGと image.png は別ファイル。
もしくは日本語のファイル名を使用しているときは半角英数字に統一するとさらに確実。
引用元 参考ほか
詳細をみる レイヤーについて
■ baseレイヤー
画面に1つだけ存在します。これは必ず一番後に位置していて、背景を表示するためのレイヤです。
このレイヤを指定する場合は layer="base" としてください。
レイヤの画像を非表示にする場合は[freeimage layer="base"]とすることで、背景画像がなくなります。
http://tyrano.jp/adv/next/layer より。
■画像をfixレイヤーの手前に表示する
画像をどの要素の前に置きたいかにもよりますが、
例えば[button]タグでfix=trueとした際のz-indexは99999999なので
[image layer="message0" storage="image.png" zindex="100000000"]
と指定するとシステムボタンより前に画像が表示されます。
※[image]のlayerはメッセージレイヤを指定してください(前景レイヤは×)
■トランジションで暗くなる
トランジションで暗くなるのはベースの色で反映してます。
【tyrano.base.js】の以下の部分を書き換えることで変更可能です。
this.tyrano.get(".tyrano_base").css("width",width).css("height",height).css("background-color","black");
【tyrano.css】を変更する。
body{
background-color:black;
/*色の変更は↑*/
-webkit-tap-highlight-color: transparent;
overflow:hidden;
}
その他。
最前列に白や黒のイメージを置いて、その間に後ろの画面構築をし、freeimageで最前列のイメージ消す方法で、
トランジションっぽいこともできる。
提示版情報URL
基礎的な背景変更
!!よくあるミス。ファイルのbmp jpgを確認のこと。
バージョン追加情報
ティラノスクリプトVer4.23より。
パラメーターに空白を指定した場合、デフォルト値が入るように変更
[bg storage="test.png" time="" ]
ティラノスクリプトVer430より
cross=true or false を指定します。
デフォルトはtrue。trueを指定すると2つの画像が同じタイミングで透明になりながら入れ替わります。falseを指定すると、古い背景を残しながら上に重なる形で新しい背景を表示します。
CG差分などで使用する場合はfalseが良いでしょう
背景変更【bg】
[bg storage=fg0.png time=1500 wait=true]
背景エフェクト
[bg storage=fg0.png time=1500 method=fadeIn wait=true]
fadeIn |
fadeInDown |
fadeInLeft |
fadeInRight |
fadeInUp |
lightSpeedIn |
rotateIn |
rotateInDownLeft |
rotateInDownRight |
rotateInUpLeft |
rotateInUpRight |
zoomIn |
zoomInDown |
zoomInLeft |
|
zoomInRight |
zoomInUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
bounceIn |
bounceInDown |
bounceInLeft |
|
bounceInRight |
bounceInUp |
rollIn |
vanishIn |
puffIn |
背景変更【bg2】
[bg2 storage=fg0.png time=1500 wait=true]
bg2ではbgとは違って背景にサイズ、位置を指定できます。
擬似的なカメラ効果、あるいはフリーでは全部見せられないCGなどに……。
背景をサイズ指定します
デフォルトは0です(ピクセル)
left |
画像の左端位置を指定 |
top |
画像の上端位置を指定 |
width |
画像の横幅を指定します。(ピクセル)指定しない場合はゲーム画面に一致するサイズが設定されます |
height |
画像の縦幅を指定します。(ピクセル)指定しない場合はゲーム画面に一致するサイズが設定されます |
例
elementでの内容
[bg2 time="1000" method="crossfade" storage="rouka.jpg" width=4000 height=2000]
僕は廊下の天井を見つめた。
[p]
そして視線を戻した。
[bg2 time="1000" method="crossfade" storage="rouka.jpg" width=960 height=640]
[p]
背景エフェクト
[bg2 storage=fg0.png time=1500 method=fadeIn wait=true]
fadeIn |
fadeInDown |
fadeInLeft |
fadeInRight |
fadeInUp |
lightSpeedIn |
rotateIn |
rotateInDownLeft |
rotateInDownRight |
rotateInUpLeft |
rotateInUpRight |
zoomIn |
zoomInDown |
zoomInLeft |
|
zoomInRight |
zoomInUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
bounceIn |
bounceInDown |
bounceInLeft |
|
bounceInRight |
bounceInUp |
rollIn |
vanishIn |
puffIn |
旧背景変更 back
詳細をみる
;[back storage=rouka.bmp time=3000] 旧スクリプト
[bg storage=rouka.jpg time=3000]
詳細をみる
[bg storage=kyousitu.jpg time=1000]
;ゆっくりと切り替わるので、メッセージレイヤーを非表示へ。
@layopt layer=message0 visible=false
メッセージを非表示。
;表ページを裏ページにコピー
[backlay]
;裏ページに新しい背景画像を設定 ☆この時点では画面に表示されていない!
[image storage=image.jpg layer="base" page=back visible=true ]
;裏ページを表ページへ徐々に表示する(2000ミリ秒かけて)
[trans time=2000]
;トランジションが完了するまで待ちます
@wt
このように、page="back"を指定して、裏ページ画面を作った後、[trans]トランジションで 裏ページを表ページに表示することで様々な表現ができるようになります。
端的に言うと、、、
【backlay】【image】【trans】@wt
で徐々に浮かび上がってくる表現、
【backlay】【freeimage layer=bace page=back】【trans】【wt】
沈み消えていく表現。(layer=bace page=back は表示された部位に変更のこと。)
このような背景の変更はtyrano.ksにて簡易的に利用できるよう、bgマクロ化されている。
??【backlay】レイヤ情報の表ページから裏ページへのコピー
指定したレイヤ、あるいはすべての"レイヤの情報を”、表ページから裏ページに コピーします。
利用方法としてはtrans タグで表ページのレイヤの画像を裏ページの レイヤの画像に置き換えます。
そのため、トランジション前にこの backlay タ グで画像を裏ページに転送し、裏ページでレイヤを操作してから、トランジションを 行うという方法に用います。
jsで背景変更
詳細をみる
[iscript]
TG.ftag.startTag("image", {storage:"room.jpg", page:"back", layer:"base"});
または、page:"fore",
[endscript]
マクロを使った背景"表示"
※ 背景マクロタグ
スクリプトサンプルをみる
[macro name=”base”]
[backlay]
[image layer=base page=back storage=%storage]
[trans layer=”base” method=%method|crossfade time=%time|2000]
[wt]
[endmacro]
[base storage=kyousitu.jpg]
image の画像ファイルについては、背景レイヤbaseならプロジェクトフォルダのbgimage、前景レイヤforeならfgimageに入れてください
ver.303以前のシナリオを利用にはマクロ名をbackにしてもいいかも??
マクロについてはサブルーチンとマクロについてをご覧ください。
画面をフラッシュさせる。
スクリプトサンプルをみる
ティラノスクリプトでは背景はlayer=baseの背景レイヤに、キャラクターはその手前の前景レイヤに配置されるようになってます。
ですのでlayer=0やlayer=1といった前景レイヤに真っ黒、真っ白、真っ赤な画像を配置して瞬間的に表示させることでフラッシュ効果が得られると思います。
- トランジションなしでチカチカさせたい場合(白フラッシュ・2回点滅)
[image name="effect" layer=1 left=0 top=0 storage=white.jpg page=fore visible=true]
[wait time=100]
[freeimage name="effect" layer=1]
[wait time=60]
[image name="effect" layer=1 left=0 top=0 storage=white.jpg page=fore visible=true]
[wait time=100]
[freeimage name="effect" layer=1]
- トランジションありでなめらかに点滅させたい場合(白フラッシュ・2回点滅)
[backlay]
[image name="effect" layer=1 left=0 top=0 storage=white.jpg page=back visible=true]
[trans time=60]
[wt]
[backlay]
[freeimage name="effect" layer=1 page=back]
[trans time=40]
[wt]
[backlay]
[image name="effect" layer=1 left=0 top=0 storage=white.jpg page=back visible=true]
[trans time=60]
[wt]
[backlay]
[freeimage name="effect" layer=1 page=back]
[trans time=40]
[wt]
この場合「fgimage」フォルダ内にwhite.jpg(真っ白な画像)を用意して表示させています。
タイトル画面の画像変更をループする
スクリプトサンプルをみる
?タイトル画像のループ変更について
サンプルソースroom1.jpg~room3.jpgまでループ変更する例になります。
[iscript]
f.loop = 1;
f.loop = setInterval(function() {
if (f.loop > 3) {
f.loop = 1;
}
TG.kag.ftag.startTag("image", {layer:"base", page:"fore", storage:"room"+ f.loop +".jpg"});
f.loop++;
}, 3000);
[endscript]
[iscript]
clearInterval(f.loop);
[endscript]
クリアしたらタイトル画面を変える。
スクリプトサンプルをみる
;クリアしたら、ゲーム変数(sf.complete)にtrueを格納
[eval exp="sf.complete=true"]
;タイトル処理
[if exp="sf.complete==true"]
[image storage="complete.jpg" page=fore layer=base]
[endif]
;-------------------------------
背景"管理"マクロ
スクリプトサンプルをみる
背景を管理するマクロです。分けるのは大変ですが、急な差し替え時やチーム作成おいて便利です。
あと背景呼び出し時にNowLoding…と表示されます。背景が一番重いですからね。
[macro name="cg"]
[ptext name=nowlod_text layer=5 text="NowLoding…" size=20 x=260 y=30 color=snow]
[if exp="mp.play=='居間'"]
[preload wait=true storage="data/bgimage/B001.bmp"]
[back storage=B006.bmp time=1000]
[endif]
;↓ここにどんどん↑を追加してください。
;preload wait=trueで背景の読み込みがおわるまでウェイトします。
[chararemove layer=5]
[endmacro]
;マクロ設定おわり。シナリオ内実行方法[cg play="居間"]
;[chararemove layer=5]で[ptext layer=5 ]を消してます。
;使いそうにない前景レイヤー数を指定してます。
詳細をみる
folderの指定がなければ、基本fgimageフォルダから呼び出します。
(V4.01の時点では)エラーのアラート表示は出ないようなので、画像が表示されない時はデベロッパーツールで確認しましょう。大抵folderやファイル名が違ってます
[image layer=0 name=logo1 storage=logo1.png width=200 height=80]
fgimageフォルダからlogo1.pngがlayer0に表示される。
imageフォルダ変えの場合 folder="image" data/はいらない
[image layer=0 name=logo2 folder=bgimage storage=logo/logo2.png width=200 height=80]
bgimageフォルダのlogo2フォルダからlogo1.pngがlayer0に表示される。
[iscript]
tf.day = 'chara/day.png';
tyrano.plugin.kag.ftag.startTag("image",{storage:tf.day,page:"fore",layer:"0"});
[endscript]
画像を消したい
詳細をみる
指定したレイヤーに表示されてる画像を全てクリア
[freeimage layer=1]
http://tyrano.jp/home/tag#freeimage
name=" "で指定しておいた画像を消します。
[free layer=1 name="my_image"]
http://tyrano.jp/home/tag#free
属性 |
layer=0 … (message0 …) |
name=" " |
time=" " |
wait=" " (削除を待つか?) |
表示時に
[image name="my_image" storage="myimg.png"] または
[chara_show name="youko"]などのname=""の部分
charaについては[chara_hide name="youko"]があるからimageとptext以外は使わないかもしれない
imageのトランジション
詳細をみる
;背景変更をトランジションで実施
@layopt layer=message0 visible=false
[backlay]
[image layer=base page=back storage=rouka.jpg]
[trans time=2000]
[wt]
@layopt layer=message0 visible=true
image 自体にもtimeがあります。
画像のフェードインはimageにあるtime属性の利用やキーフレームアニメーションを利用するなどが考えられます
トランジョンするレイヤーを指定(他のものに対してトランジションを行わない)
廃止
詳細をみる
トランジョンにはレイヤーを指定できます。
@backlay
[image storage="rouka.jpg" layer=base page=back]
[trans layer=base time=1500 children=false ]
children=false で他のものに対してトランジションを行わないようにします。
廃止です
背景に動画を流す
(V4.10より搭載)PCゲーム形式の場合は webm形式を使ってください。 mp4 に対応しません。
詳細をみる
videoフォルダに入れて下さい。
[bgmovie storage="test.webm" ]
デフォルトでは動画はループ再生します。
ogv webm mp4 などに対応します
提供するゲームによって対応するフォーマットが異なります。
PCゲーム形式の場合は webm形式を使ってください。 mp4 に対応しません。
ブラウザゲームの場合はmp4ファイルを使用します。ただし、FireFox Opera を含む全てのブラウザに対応させる場合は同名のwebmファイルも配置して下さい
stop_bgmovie タグを指定すると再生が終わります。
タイトル画面に動画を流してみたり mtext(下記URLで確認)やanimと合わせてopやedクレジットにも使える
ウエイトを挟んだ方がいいかも?
[wait_bgmovie]
;背景ムービーの再生完了を待つ
[stop_bgmovie time=2000 wait=true]
;背景ムービーの停止 timeのデフォルトは1000 フェードアウトする
;wait=trueでフェードアウトを待つか決定する。デフォルトはtrue
背景動画の停止
[stop_bgmovie]
なにかの拍子でロード後消えない場合【原因不明 再現できてない】
bgmovie が再生されるとこのような要素が作られます。
[iscript]
$('#bgmovie').remove();
[endscript]
をmake.ksに使用してください。
フォーカスを変更する
まだ記事は無いよ
この記事についての引用元
ゲーム画像は管理人作ゲームのものです。
ティラノスクリプトは? Copyright ShikemokuMK All Rights Reserved.のものです。