UJMLサンプル126：移動するキャラとテキスト（125から続き）(2006/06/15)

　前回の

UIEngine だ: UJMLサンプル125：移動するキャラとテキスト（124から続き）

に引き続き、表示される文字を見やすくしたバージョン。Boxを重ねることで、HTMLのTableタグのようにボーダーの幅を自由に指定することもできる。テキストの背景色も自由に変更することができるので、このあたりはHTMLデザイン等に慣れたホームページデザイナーにまかせれば上手い配色を考えてくれるのだろう。

　UIEngineの特長は、例えばこのようにして作成したUIのパーツを組み合わせることで簡単に他のアプリに取り組むことができる点だ。わかる方はこのサンプルを<partition>化し、何でも良いので他のアプリケーションから_link()関数を使いリンクしてみて欲しい。

　以下は<box>を重ねている部分の例：

            <state var="sLabel"><!-- *125* -->
                <transition value="true">
                    <display>
                        <box>
                            <x><eval>mLabelPosX</eval></x>
                            <y><eval>mLabelPosY</eval></y>
                            <width><eval>mLabelWidth</eval></width>
                            <height><eval>mLabelHeight</eval></height>
                            <fg>&_COLOR_GRAY;</fg>
                            <bg>&_COLOR_GRAY;</bg>
                            <box>
                                <x>&SPACING;</x>
                                <y>&SPACING;</y>
                                <width><eval>mLabelWidth - &SPACING; * 2</eval></width>
                                <height><eval>mLabelHeight - &SPACING; * 2</eval></height>
                                <fg>0xFFEEEEEE</fg>
                                <bg>0xFFEEEEEE</bg>
                                <label>
                                    <text><eval>mLabelText</eval></text>
                                    <x>&SPACING;</x>
                                    <y>&SPACING;</y>
                                    <fg>&_COLOR_BLACK;</fg>
                                    <bg>0xFFEEEEEE</bg>
                                    <size>&_FONT_SIZE_SMALL;</size>
                                </label>
                            </box>
                        </box>
                    </display>
                </transition>
            </state>

ソースコード：
Download 126_main.ujml

UIEngine/UJML 初心者の方にお勧めのページ：
・初心者向けまとめページ
・初心者向けカテゴリ

その他の初心者向けのサンプル：
・UJMLサンプル052：超基礎：HELLO WORLD!　その１
・UJMLサンプル053：超基礎：HELLO WORLD!　その２　文字の色を指定
・UJMLサンプル056：超基礎：HELLO WORLD!　その３　文字の色を指定 ENTITYを使う
・UJMLサンプル057：超基礎：HELLO WORLD!　その４　文字の色を指定 変数から文字の色指定をする場合
・UJMLサンプル091：超基礎：HELLO WORLD!　その５　ラベルの背景も指定する