UJMLサンプル045：写真の表示と切り替え(2006/02/17)

写真の表示と切り替えを簡単に行うサンプルを紹介する。

SDKのサンプルとして入っているwalk.ujmlも単純なサンプルなので、そちらも是非参考にして欲しい。

FIREボタンで画像が切り替わる仕組だ。

ここでは単純に1枚の画像を表示しているが、ある画像の一部分のみを表示することもできる。それは、次回以降で解説する予定だ。walk.ujmlはその仕組を使って1枚の絵の中にある右向き、左向きのキャラクターを画像の表示範囲を指定して表示している。

★---コード
<?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 IMAGE_URL_1 "<image-url>images/aoyama02</image-url>">
    <!ENTITY IMAGE_URL_2 "<image-url>images/li02</image-url>">
]>
<!-- http://uiengineda.blogs.com 歩き回る感じ -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sImage" type="int"/>
        </state-variables>
        <variables>
            <var name="mScrWidth" type="int"/>
            <var name="mScrHeight" type="int"/>

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

            <var name="mPosX" type="int"/>
            <var name="mPosY" type="int"/>
        </variables>
        <script>
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

            if(mScrWidth &_LT; 150){
                mWidth = mScrWidth;
            }else{
                mWidth = 150;
            }

            if(mScrHeight &_LT; 200){
                mHeight = mScrHeight;
            }else{
                mHeight = 200;
            }

            mPosX = 0;
            mPosY = 0;

            sImage = 0;
        </script>
        <states>
            <state var="sImage">
                <transition value="0">
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x>
                                <eval>mPosX</eval>
                            </x>
                            <y>
                                <eval>mPosY</eval>
                            </y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 1;
                                </script>
                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="1">
                    <display>
                        <image>
                            <url>&IMAGE_URL_2;</url>
                            <x>
                                <eval>mPosX</eval>
                            </x>
                            <y>
                                <eval>mPosY</eval>
                            </y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 0;
                                </script>
                            </event>
                        </image>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>