« UJMLサンプル023:ボックスエフェクト | メイン | UJMLサンプル025:ブラインドエフェクト the maximum-frame-rate method »

UJMLサンプル024:スプリットエフェクト(2006/02/04)

Samples_024_spriteffectエフェクト3つ目、これで最後にするつもりだが、作っていて気がついたのが、アニメーションとしては良くないコードだったことだ。以前「UJMLサンプル006:だんだん大きくなる箱」で少し書いたが、サンプルのコードは「 the fixed-timer method」と呼ばれる方法で実装している。本来は「the maximum-frame-rate method」という方法で実装すべきだ。おいおい、新たなサンプルを紹介していこうと思う。

今まで2回分のエフェクト:

ブラインドエフェクト
ボックスエフェクト

動作サンプル
※動作にはJAVA Runtimeが必要

---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN"
"http://www.uievolution.com/dtd/ujml-1.5.dtd" [
    <!ENTITY MSEC_FRAME "100">
]>
<!-- http://uiengineda.blogs.com スピリットエフェクト(上下から中央に向かって隠れた部分が小さくなる) -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sBox" type="boolean"/>
            <state-var name="sTick" type="boolean"/>
            <state-var name="sScreenBox" type="boolean" size="2"/>
        </state-variables>
        <variables>
            <var name="mScrWidth" type="int" />
            <var name="mScrHeight" type="int" />

            <var name="mPosX" type="int" />
            <var name="mPosY" type="int" />

            <var name="mWidth" type="int"/>
            <var name="mHeight" type="int"/>

            <var name="mScreenBoxHeight" type="int"/>

            <var name="mTickCount" type="int"/>
        </variables>
        <functions>
            <function name="processTick" type="void">
                <variables>
                    <var name="i" type="int"/>
                </variables>
                <script>

                    mTickCount++;

                    <!-- 徐々に箱のサイズを小さくする。上下から閉じる感じ -->
                    if (mScreenBoxHeight-mTickCount*2 &_GT; 0 ){
                        <!-- 高さを減らす -->
                        mScreenBoxHeight = mScreenBoxHeight - mTickCount * 2;

                        <!-- ステート変数切り替えて再描画 -->
                        i = 0;
                        sScreenBox[0] = false;
                        sScreenBox[0] = true;
                        sScreenBox[1] = false;
                        sScreenBox[1] = true;

                        <!-- サイズ変更の再処理 -->
                        sTick = false;
                        sTick = true;
                    }else{
                        <!-- 充分小さくなったら箱を消す -->
                        sScreenBox[0] = false;
                        sScreenBox[1] = false;
                    }
                </script>
            </function>
        </functions>
        <script>
            <!-- スクリーンのサイズを調べる -->
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

            <!-- 幅 スクリーンの半分 -->
            mWidth = mScrWidth / 2;

            <!-- 高さ -->
            mHeight = mScrHeight / 2;

            mScreenBoxHeight = mHeight;

            <!-- 中心に配置 -->
            mPosX = (mScrWidth / 2) - (mWidth / 2);
            mPosY = (mScrHeight / 2) - (mHeight / 2);

            mTickCount = 0;

            sBox = true;
            sTick = true;
        </script>
        <states>
            <state var="sBox">
                <transition value="true">
                    <display>
                        <box>
                            <x><eval>mPosX</eval></x>
                            <y><eval>mPosY</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <fg>&_COLOR_BLUE;</fg>
                            <bg>&_COLOR_BLUE;</bg>
                        </box>
                    </display>
                </transition>
            </state>
            <state var="sTick">
                <transition value="true">
                    <delay>&MSEC_FRAME;</delay>
                    <script>processTick();</script>
                </transition>
            </state>
            <!-- 中央に向かってだんだん小さくなる白い箱 -->
            <state var="sScreenBox" index="*">
                <transition value="true">
                    <display>
                        <box>
                            <x><eval>mPosX</eval></x>
                            <y><eval>(mScrHeight / 2) - (mScreenBoxHeight / 2)</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mScreenBoxHeight</eval></height>
                            <fg>&_COLOR_WHITE;</fg>
                            <bg>&_COLOR_WHITE;</bg>
                        </box>
                    </display>
                </transition>   
            </state>
        </states>
    </application>
</ujml>

トラックバック

この記事のトラックバックURL:
https://www.typepad.com/services/trackback/6a00d8341c2e2e53ef00e55083e8378834

UJMLサンプル024:スプリットエフェクトを参照しているブログ:

» UJMLサンプル027:スプリットエフェクト the maximum-frame-rate method (UIEngine だ)
既に紹介した「UJMLサンプル024:スプリットエフェクト」を「the maxi [続きを読む]

コメント

この記事へのコメントは終了しました。