UJMLサンプル054：画像と文字の表示→四コマ漫画できるか？(2006/02/21)

マイクロソフト社がCMで使用している画像を借用して、例えば4コマ漫画を作ることもできそうだ。

今回紹介するのは、そのさわり部分で、画像の表示と文字の表示をすることだけ。コマの切り替えは、今までも紹介した通りステート変数の切り替えで実現可能。余力のある人はチャレンジしてみよう。

このサンプルは背景色を黒に指定するために、background.ujms中のBackgroundというステートマシンを利用しているが、画像の表示と文字の表示とは本質的には関係無いことなので省いても全く問題は無い。（<!-- * --> 部分）

★---コード
<?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/office/mo</image-url>">
    <!ENTITY IMAGE_WIDTH "186">
    <!ENTITY IMAGE_HEIGHT "308">

    <!ENTITY SPACING "2">
]>
<!-- http://uienginda.blogs.com -->
<ujml>
    <application>
        <state-machines>
            <include file="components/background.ujms" state-machine="Background" /><!-- * -->
        </state-machines>
        <state-variables>
            <state-var name="sImage" type="int"/>
            <state-var name="sLabel" type="boolean"/>
        </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"/>

            <var name="mLabelHeight" type="int"/>
        </variables>
        <script>
            <!-- 背景を黒くするように指定：background.ujmsのステートマシンを利用 -->
            Background.init(&_COLOR_BLACK;,true);<!-- * -->

            <!-- 画面の幅と高さ -->
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

            <!-- 文字の高さを取得する。とりあえず2行表示分確保 -->
            mLabelHeight = (&SPACING; * 2) +
                _text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_PLAIN;,
                &_FONT_FACE_SYSTEM;) * 2;

            

            <!-- 画面内に収まるように幅と高さを指定 -->
            if(mScrWidth &_LT; &IMAGE_WIDTH;){
                mWidth = mScrWidth;
            }else{
                mWidth = &IMAGE_WIDTH;;
            }

            if(mScrHeight - mLabelHeight &_LT; &IMAGE_HEIGHT;){
                mHeight = mScrHeight - mLabelHeight;
            }else{
                mHeight = &IMAGE_HEIGHT; - mLabelHeight;
            }

            <!-- 画像の表示位置を指定 -->
            mPosX = 0;
            mPosY = mLabelHeight;

            <!-- ステート変数をセットして表示処理の実行 -->
            sImage = 0;
            sLabel = true;
        </script>
        <states>
            <state var="sLabel">
                <transition value="true">
                    <display>
                        <multi-label>
                            <text>あっしまった、洗濯物！今日、台風じゃん。</text>
                            <x>0</x>
                            <y>0</y>
                            <width><eval>mScrWidth</eval></width>
                            <height><eval>mLabelHeight</eval></height>
                            <fg>&_COLOR_WHITE;</fg>
                            <bg>&_COLOR_BLACK;</bg>
                        </multi-label>
                    </display>
                </transition>
            </state>
            <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>
                        </image>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>