UJMLサンプル007：中心からだんだん大きくなる箱(2006/02/02)

前回の「だんだん大きくなる箱」の応用版で、中心から大きくなる箱のサンプルだ。このように応用すれば、リストから選択したものの内容を表示するときや、ゲームキャラクターの噴出しの表示に使える。

ポイント：
・箱の左上の角の位置の算出
　X:「スクリーン幅の半分（中央）」-「箱の幅の半分」
　Y:「スクリーン高さの半分（中央）」-「箱の高さの半分」

ところで、インサイドUJML中にも書いてあるが、この方法は「 the fixed-timer method」と呼ばれ、簡単に実装できるがあまり望ましくない方法らしい。もうひとつの「the maximum-frame-rate method」と呼ばれるものが望ましいようだ。後者の方がよりスムーズに動くと解説されている。

---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "../ujml.dtd" [
    <!ENTITY MSEC_FRAME "50">
]>
<!-- 徐々に大きくなる箱 2006/01/31 22:05
真中から大きくなる箱？できるかな？
-->
<ujml>
    <application>
        <state-variables>
            <state-var name="sTick" type="boolean" />
            <state-var name="sBox" 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="mBoxWidth" type="int" />
        </variables>
        <functions>
            <function name="processTick" type="void">
                <script>
                    <!-- 徐々に箱のサイズを大きくする -->
                    if (mBoxWidth &_LT; mScrWidth &_AND; mBoxWidth &_LT; mScrHeight ){
                        <!-- とりあえずスクリーンの幅の10分の1ずつ大きくしています。 -->
                        mBoxWidth = mBoxWidth + (mScrWidth / 10);

                        <!-- 箱の左上の角の位置を決める。 -->
                        mPosX = (mScrWidth / 2) - (mBoxWidth / 2);
                        mPosY = (mScrHeight / 2) - (mBoxWidth / 2);

                        <!-- ステート変数切り替えて再描画 -->
                        sBox = false;
                        sBox = true;

                        <!-- サイズ変更の再処理 -->
                        sTick = false;
                        sTick = true;
                    }   
                </script>
            </function>
        </functions>
        <script>
            <!-- スクリーンのサイズを調べる -->
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

            <!-- 最初の箱の位置を決める：箱は正方形なのでWidthの値を高さにも使っていますよ -->
            mBoxWidth = 10;

            mPosX = (mScrWidth / 2) - (mBoxWidth / 2);
            mPosY = (mScrHeight / 2) - (mBoxWidth / 2);

            sBox = true;
            sTick = true;
        </script>
        <states>
            <!-- 徐々にサイズ変更します。delayの分だけ実行間隔があります。 -->
            <state var="sTick">
                <transition value="true">
                    <delay>&MSEC_FRAME;</delay>
                    <script>processTick();</script>
                </transition>
            </state>
            <state var="sBox">
                <transition value="true">
                    <display>
                        <box>
                            <x><eval>mPosX</eval></x>
                            <y><eval>mPosY</eval></y>
                            <width><eval>mBoxWidth</eval></width>
                            <height><eval>mBoxWidth</eval></height>
                            <fg>&_COLOR_BLUE;</fg>
                            <bg>&_COLOR_WHITE;</bg>
                        </box>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>