229 lines
19 KiB
HTML
229 lines
19 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
|
|
<!-- generated by to_html.pl from Transition.xml -->
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>トランジションについて</title>
|
|
<meta name="author" content="W.Dee" />
|
|
<meta http-equiv="Content-Style-Type" content="text/css" />
|
|
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
|
<link href="browser.css" type="text/css" rel="stylesheet" title="吉里吉里関連リファレンス用標準スタイル" />
|
|
<link href="mailto:[email protected]" rev="Made" />
|
|
<link href="index.html" target="_top" rel="Start" title="トップページ" />
|
|
</head>
|
|
<body>
|
|
<h1><a id="id288" name="id288">トランジションとは</a>
|
|
</h1><div class="para"><div>
|
|
トランジションは、時間をかけて画面の入れ替えを行う物です。吉里吉里２のトランジションは、レイヤ単体に対して行うことも、レイヤツリーに対して行うこともできます。<br />
|
|
レイヤに切り替わり元を指定した場合は、二つのレイヤが入れ替わることになります。<br />
|
|
前者の場合は該当するレイヤが、後者の場合はレイヤのツリー構造がそのままそっくり入れ替わります。<br />
|
|
<a target="main" class="jump" href="f_Layer_beginTransition.html">Layer.beginTransition</a> メソッドを参照してください。<br />
|
|
<br />
|
|
吉里吉里２はトランジションを「<a id="id289" name="id289" class="targanchor"><dfn>トランジションハンドラ</dfn></a>」と呼ばれる物で管理しています。これらは Layer.beginTransition メソッドの name 引数で指定する物で、現バージョンでは吉里吉里本体内に３つ持っています。プラグインにより拡張することもできます。<br />
|
|
<br />
|
|
以下、吉里吉里本体に内蔵しているトランジションハンドラと、拡張トランジションプラグイン ( extrans.dll ) で使用可能になるトランジションハンドラを説明します。<br />
|
|
</div></div>
|
|
<h1><a id="id290" name="id290">オプションの指定</a>
|
|
</h1><div class="para"><div>
|
|
<br />
|
|
<dl>
|
|
<dt>TJS2 から利用する場合</dt>
|
|
<dd> Layer.beginTransition メソッドの options 引数に、辞書配列の形で指定します。たとえば、"universal" トランジションを、vague=100 time=2000 rule=rule1.png で指定する場合は、options 引数に以下のように指定します。<br />
|
|
<br />
|
|
<code class="inlinecode">%[vague:100, time:2000, rule:"rule1.png"]</code></dd>
|
|
<dt>KAG から利用する場合</dt>
|
|
<dd> KAG の場合、trans タグにオプションを、属性としてそのまま記述します。ただし、オプション以外にも指定する属性 ( layer, children, method 属性 ) があります。これらの属性と一緒にオプションを指定することになります。<br />
|
|
たとえば、背景レイヤに、子レイヤも含めて、vague=100 time=2000 rule=rule1.png の "universal" トランジションを行うには以下のようにします。<br />
|
|
<br />
|
|
<code class="inlinecode">@trans layer=base children=true method=universal vague=100 time=2000 rule=rule1.png</code><br />
|
|
<br />
|
|
また、たとえば "wave" トランジションを maxomega=0.1 maxh=20 で使いたい場合は以下のようにします。<br />
|
|
<br />
|
|
<code class="inlinecode">@trans layer=base children=true method=wave maxomega=0.1 maxh=20</code></dd></dl></div></div>
|
|
<h1><a id="id291" name="id291">内蔵トランジションハンドラ</a>
|
|
</h1><div class="para"><div>
|
|
吉里吉里は本体内に以下の３つのトランジションハンドラを持っています。<br />
|
|
<br />
|
|
<dl>
|
|
<dt><a id="id292" name="id292" class="targanchor"><dfn>crossfade</dfn></a></dt>
|
|
<dd> "crossfade" トランジション (クロスフェードトランジション) は、最も単純なトランジションで、単純なクロスフェードを行います。<br />
|
|
オプションは以下の通りです。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd></dl></dd>
|
|
<dt><a id="id293" name="id293" class="targanchor"><dfn>universal</dfn></a></dt>
|
|
<dd> "universal" トランジション (ユニバーサルトランジション) は、ルール画像と呼ばれる、グレースケールの画像に従ってトランジションを行う物です。ルール画像は rule オプションで指定し、この画像のより暗いところからより早く切り替わり元 ( KAG における裏画面 ) に切り替わります。<br />
|
|
ルール画像が、トランジションを行おうとした画面より小さい場合はタイル状に敷き詰められ、トランジションを行おうとした画面よりも大きい場合は左上の部分のみが使われます。<br />
|
|
KAG のリファレンスに詳しい説明があります。<br />
|
|
オプションは以下の通りです。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>rule (必須)</dt>
|
|
<dd> ルール画像ファイル名を指定します。ルール画像は 256 階調グレースケールの画像である必要があります。それ以外の画像を指定した場合は強制的にグレースケールに変換されます。</dd>
|
|
<dt>vague</dt>
|
|
<dd>「あいまい領域値」を指定します。小さい値 ( 0 とか ) を指定すると、画面の切り替わり前の部分と切り替わり後の部分の境界がはっきりします。大きい値 ( 128 とか ) を指定すると、この境界はぼやけ、なめらかになります。ルール画像によって最適な値があります。省略すると 64 が指定されたと見なされます。</dd></dl></dd>
|
|
<dt><a id="id294" name="id294" class="targanchor"><dfn>scroll</dfn></a></dt>
|
|
<dd> "scroll" トランジション (スクロールトランジション) は、切り替わり元か切り替わり先のどちらかあるいは両方をスライドさせ、スクロール効果を出すことのできるトランジションです。<br />
|
|
オプションは以下の通りです。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>from</dt>
|
|
<dd> 切り替わり元 ( KAG における裏ページ ) のレイヤがどちらの方向から現れてくるかを指定します。<br />
|
|
TJS で指定する場合、sttLeft を指定すると左から(デフォルト)、sttTop を指定すると上から、sttRight を指定すると右から、sttBottom を指定すると下から現れてきます。<br />
|
|
KAG の trans タグで指定する場合、"left" を指定すると左から(デフォルト)、"top" を指定すると上から、"right" を指定すると右から、"bottom" を指定すると下から現れてきます。</dd>
|
|
<dt>stay</dt>
|
|
<dd> 切り替わり元および切り替わり先の画像がどのように動くかを指定します。<br />
|
|
TJS で指定する場合、ststNoStay を指定すると、切り替わり先の画像が切り替わりもとの画像に押されるようにして出ていきます (デフォルト)。２画面をつなげてスクロールさせている効果を出すことができます。ststStaySrc を指定すると、切り替わり先の画像が移動して出ていき、その背後から切り替わり元の画像が現れます。ststStayDest を指定すると、切り替わり先の画像は静止して、そこに切り替わり元の画像が入ってきます。<br />
|
|
KAG で指定する場合、"nostay" が ststNoStay、"stayback" が ststStaySrc、"stayfore" が ststStayDest を表します。</dd></dl></dd></dl></div></div>
|
|
|
|
<h1><a id="id295" name="id295">拡張トランジションプラグイン</a>
|
|
</h1><div class="para"><div>
|
|
拡張トランジションプラグイン ( extrans.dll ) は 吉里吉里２用のプラグインで、本体に内蔵されていないようなトランジションをいくつか使用可能にする物です。<br />
|
|
使用可能にするには、他のプラグインと同じく、<a target="main" class="jump" href="f_Plugins_link.html">Plugins.link</a> メソッドで接続する必要があります ( KAG の場合は loadplugin タグ )。接続されるだけで以下のトランジションハンドラが使用可能になります。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>wave</dt>
|
|
<dd>"wave" (波) トランジションは、ラスタスクロールによる波を表現し、切り替えるトランジションです。<br />
|
|
<br />
|
|
<img width="320" height="240" alt="wave_trans.jpg" src="wave_trans.jpg" /><br />
|
|
<br />
|
|
以下のオプションがあります。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>wavetype</dt>
|
|
<dd> 波の動きを指定します。0 を指定するとトランジションの最初と最後で波が細かく、中程で波がおおらかになります。1 を指定すると最初に波が細かく、だんだんおおらかになります。2 を指定すると最初は波がおおらかで、徐々に細かくなります。デフォルトは 0 です。</dd>
|
|
<dt>maxh</dt>
|
|
<dd> 波の横幅の最大値をピクセル単位で指定します。値を大きくすると波の刻みが深くなります。デフォルトは 50 です。</dd>
|
|
<dt>maxomega</dt>
|
|
<dd> 波の角速度 ( rad/pixel ) の最大値を指定します。値を大きくすると波が細かくなります。小さくすると波がおおらかになります。デフォルトは 0.2 です。</dd>
|
|
<dt>bgcolor1</dt>
|
|
<dd> 初期背景色を 0xRRGGBB 形式で指定します。</dd>
|
|
<dt>bgcolor2</dt>
|
|
<dd> 最終背景色を 0xRRGGBB 形式で指定します。背景色は、初期背景色から始まり、徐々に最終背景色に変わっていきます。</dd></dl></dd>
|
|
|
|
<dt>mosaic</dt>
|
|
<dd>"mosaic" (モザイク) トランジションは、矩形のモザイクがかかったような表現をするトランジションです。<br />
|
|
<br />
|
|
<img width="320" height="240" alt="mosaic_trans.png" src="mosaic_trans.png" /><br />
|
|
<br />
|
|
以下のオプションがあります。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>maxsize</dt>
|
|
<dd> モザイクの矩形の大きさの最大値を指定します。デフォルトは 30 です。値を大きくするとモザイクが荒くなります。</dd></dl></dd>
|
|
|
|
<dt>turn</dt>
|
|
<dd>"turn" トランジションは、小さなカードがいくつもくるりとひっくり返るような表現をするトランジションです。<br />
|
|
<br />
|
|
<img width="320" height="240" alt="turn_trans.jpg" src="turn_trans.jpg" /><br />
|
|
<br />
|
|
以下のオプションがあります。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>bgcolor</dt>
|
|
<dd> 背景色を 0xRRGGBB 形式で指定します。</dd></dl></dd>
|
|
|
|
<dt>rotatezoom</dt>
|
|
<dd>"rotatezoom" トランジションは、トランジション元 ( KAG における裏画面 ) を回転させながらズームインあるいはズームアウトさせるトランジションです。<br />
|
|
<br />
|
|
<img width="320" height="240" alt="rotatezoom_trans.jpg" src="rotatezoom_trans.jpg" /><br />
|
|
<br />
|
|
以下のオプションがあります。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>factor</dt>
|
|
<dd> 初期拡大率を指定します。0 を指定すると最初は見えません。中央から回転しながらズームインします。2 を指定すると２倍の拡大率から徐々に等倍まで回転しながらズームアウトします。3 以上の数や実数も指定できます。デフォルトは 1 (等倍) になっています。</dd>
|
|
<dt>accel</dt>
|
|
<dd> 拡大縮小の動作を、加速度的に行うかどうかを指定します。-2 以下の負の数を指定すると、最初が早く、徐々に遅くなります。2 以上の正の数を指定すると、最初は遅く、徐々に早くなります。0 を指定すると直線的な動きになります。しかし視覚効果で直線的には見えないかも知れません。デフォルトは 0 です。</dd>
|
|
<dt>twist</dt>
|
|
<dd> どちらの方向にどれだけ回転するかを指定します。正の数を指定すると、反時計回りに回転します。負の数を指定すると時計回りに回転します。指定する値は回転数です。デフォルトは 2 です。</dd>
|
|
<dt>twistaccel</dt>
|
|
<dd> 回転の動作を、加速度的に行うかどうかを指定します。-2 以下の負の数を指定すると、最初が早く、徐々に遅くなります。2 以上の正の数を指定すると、最初は遅く、徐々に早くなります。0 を指定すると直線的な動きになります。デフォルトは -2 です。</dd></dl></dd>
|
|
|
|
<dt>rotatevanish</dt>
|
|
<dd>"rotatevanish" トランジションは、トランジション先 ( KAG における表画面 ) を回転させながらズームアウトさせるトランジションです。<br />
|
|
<br />
|
|
<img width="320" height="240" alt="rotatevanish_trans.jpg" src="rotatevanish_trans.jpg" /><br />
|
|
<br />
|
|
以下のオプションがあります。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>accel</dt>
|
|
<dd> 拡大縮小の動作を、加速度的に行うかどうかを指定します。-2 以下の負の数を指定すると、最初が早く、徐々に遅くなります。2 以上の正の数を指定すると、最初は遅く、徐々に早くなります。0 を指定すると直線的な動きになります。しかし視覚効果で直線的には見えないかも知れません。デフォルトは 2 です。</dd>
|
|
<dt>twist</dt>
|
|
<dd> どちらの方向にどれだけ回転するかを指定します。正の数を指定すると、反時計回りに回転します。負の数を指定すると時計回りに回転します。指定する値は回転数です。デフォルトは 2 です。</dd>
|
|
<dt>twistaccel</dt>
|
|
<dd> 回転の動作を、加速度的に行うかどうかを指定します。-2 以下の負の数を指定すると、最初が早く、徐々に遅くなります。2 以上の正の数を指定すると、最初は遅く、徐々に早くなります。0 を指定すると直線的な動きになります。デフォルトは 2 です。</dd></dl></dd>
|
|
|
|
<dt>rotateswap</dt>
|
|
<dd>"rotateswap" トランジションは、トランジション先とトランジション元を回転させながら入れ替えるトランジションです。トランジション先 ( KAG における表画面 ) は回転しながら奥に行き、そのかわりトランジション元 ( KAG における裏画面 ) が回転しながら手前に来ます。<br />
|
|
<br />
|
|
<img width="320" height="240" alt="rotateswap_trans.jpg" src="rotateswap_trans.jpg" /><br />
|
|
<br />
|
|
以下のオプションがあります。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>twist</dt>
|
|
<dd> どちらの方向にどれだけ回転するかを指定します。正の数を指定すると、反時計回りに回転します。負の数を指定すると時計回りに回転します。指定する値は回転数です。デフォルトは 1 です。</dd>
|
|
<dt>bgcolor</dt>
|
|
<dd> 背景色を 0xRRGGBB 形式で指定します。</dd></dl></dd>
|
|
|
|
<dt>ripple</dt>
|
|
<dd>"ripple" トランジションは、波紋が広がっていくような表現を行いながら入れ替えるトランジションです。<br />
|
|
<br />
|
|
<img width="320" height="240" alt="ripple_trans.jpg" src="ripple_trans.jpg" /><br />
|
|
<br />
|
|
以下のオプションがあります。<br />
|
|
<br />
|
|
<dl>
|
|
<dt>time (必須)</dt>
|
|
<dd> トランジションを行っている時間をミリ秒単位で指定します。</dd>
|
|
<dt>centerx</dt>
|
|
<dd> 波紋の中心 X 座標を指定します。省略すると画像の中央になります。</dd>
|
|
<dt>centery</dt>
|
|
<dd> 波紋の中心 Y 座標を指定します。省略すると画像の中央になります。</dd>
|
|
<dt>rwidth</dt>
|
|
<dd> 波紋の細かさを指定します。16, 32, 64, 128 のいずれかを指定することができ、数値が小さければ小さいほど細かい波紋になります。省略すると 128 が指定されたと見なされます。</dd>
|
|
<dt>roundness</dt>
|
|
<dd> 波紋が縦に長い楕円になるか、真円になるか、横に長い楕円になるかを指定します。0.0 ～ 1.0 (ただし 0.0 は含まず) の範囲の数値を指定すると ( たとえば 0.5 など )、縦に長い楕円になります。1.0 を指定すると真円になります。1.0 よりも大きい数値を指定すると (たとえば 2 など )、横に長い楕円になります。省略すると 1.0 が指定されたと見なされます。</dd>
|
|
<dt>speed</dt>
|
|
<dd> 波の広がる速度を指定します。省略すると 6.0 が指定されたと見なされます。</dd>
|
|
<dt>maxdrift</dt>
|
|
<dd> 波の激しさを指定します。省略すると 24 が指定されたと見なされます。</dd></dl><br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
ripple トランジションは、初めて実行するときに、かなり大きなメモリを割り当てて ( 0.5～4MB ほどでオプションによって異なります ) 、
|
|
なめらかにトランジションを実行するための数値計算をあらかじめ完了させ、そのメモリに格納しておきます。
|
|
これには少し時間 ( 0.01秒～0.5秒ほど ) がかかる場合があります。<br />
|
|
トランジションを行う画像のサイズ、centerx, centery, rwidth, roundness, maxdrift の各条件がすべて同じならば、前回の
|
|
数値計算の情報を再利用します。過去４つまでの条件に対する数値計算の結果が保持されています ( キャッシュされています )。
|
|
それ以上の新たな条件に対する数値計算が要求された場合は、一番古い情報から削除されていきます。<br />
|
|
これらをふまえ、このトランジションを良く使う場合は、実行前にダミーで一回トランジションを実行しておくと、以降の
|
|
数値計算を避けることができます。<br />
|
|
</div><br />
|
|
</dd></dl><br />
|
|
|
|
</div></div>
|
|
<script type="text/javascript" charset="UTF-8" src="documentid.js" ></script>
|
|
<script type="text/javascript" charset="UTF-8" src="postcontent.js" ></script>
|
|
</body>
|
|
</html>
|