UJMLサンプル065：ぷよぷよ浮いている感じのラベル。(2006/02/24)

これは、padbuttonsのように画面上に複数選択できるボタンのようなものがあったときに、選択されたものが分かるようにするために使えるような例です。

ぷよぷよと動く感じを目指したが、ただ、行ったり来たりするだけになった。

本当は4箇所ぐらいを移動することでぷよぷよ感を出したかったが妥協したため、コード中は「4箇所を移動したい」という名残がある。申し訳無い。

★---コード
<?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_DELAY "500">
    <!ENTITY SPACING "4">

]>
<!-- http://uiengineda.blogs.com ぷよぷよ浮いている感じに -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sBox" type="boolean"/>
            <state-var name="sTick" type="boolean"/>
        </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="mInitialPosX" type="int" />
            <var name="mInitialPosY" type="int" />
            <var name="mInitialWidth" type="int"/>
            <var name="mInitialHeight" type="int"/>

            <var name="mStartTime" type="int" />
            <var name="mTickCount" type="int" />

            <var name="mMessage" type="string" />
         </variables>
        <functions>
            <function name="processTick" type="void">
                <variables>
                    <var name="mElapsedTime" type="int" />
                    <var name="i" type="int"/>
                </variables>
                <script>
                    sTick = false;

                    <!-- 本当は4パターンで1サイクルにしようとしたけど -->
                    if(mTickCount == 4){
                        mTickCount = 0;
                    }

                    <!-- 2パターンの行ったり来たりで妥協した↓ -->
                    if(mTickCount % 2 == 0){
                        <!-- 左上に -->
                        mPosX = mInitialPosX - &SPACING;;
                        mPosY = mInitialPosY - &SPACING;;
                    }else{
                        <!-- 真中 -->
                        mPosX = mInitialPosX;
                        mPosY = mInitialPosY;
                    }

                    mTickCount++;

                    <!-- 箱を再描画する -->
                    sBox = false;
                    sBox = true;

                    <!-- サイズ変更の再処理 -->
                    sTick = false;
                    sTick = true;
                </script>

            </function>
        </functions>
        <script>
            <!-- スクリーンのサイズを調べる -->
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

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

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

            <!-- 中心に配置 -->
            mInitialPosX = (mScrWidth / 2) - (mInitialWidth / 2);
            mInitialPosY = (mScrHeight / 2) - (mInitialHeight / 2);

            <!-- 初期状態にセットする。 -->
            mPosX = mInitialPosX;
            mPosY = mInitialPosY;
            mWidth = mInitialWidth;
            mHeight = mInitialHeight;

            if(_isSupported(&_X_ROUND_BOX_ARC;)){
                mMessage = "角丸の四角がサポートされています。";
            }else{
                mMessage = "角丸の四角がサポートされていません。";
            }

            sBox = true;
        </script>
        <states>
            <state var="sBox">
                <transition value="true">
                    <display>
                        <round-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>
                            <x-arc-width>&SPACING;</x-arc-width>
                            <x-arc-height>&SPACING;</x-arc-height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>5</key>
                                </accelerators>
                                <script>
                                    <!-- カウントを初期化する -->
                                    mTickCount=0;

                                    <!-- ぷよぷよ開始 -->
                                    _clear_state(sTick);
                                    sTick = true;
                                </script>
                            </event>
                            <multi-label>
                                <text><eval>mMessage</eval></text>
                                <x>&SPACING;</x>
                                <y>&SPACING;</y>
                                <width><eval>mWidth-&SPACING;*2</eval></width>
                                <height><eval>mHeight-&SPACING;*2</eval></height>
                                <fg>&_COLOR_WHITE;</fg>
                                <bg>&_COLOR_BLACK;</bg>
                            </multi-label>
                        </round-box>
                    </display>
                </transition>
            </state>
            <state var="sTick">
                <transition value="true">
                    <delay>&MSEC_DELAY;</delay>
                    <script>processTick();</script>
                </transition>
            </state>
        </states>
    </application>
</ujml>