UJMLサンプル067：4コマ漫画の実現→画像とラベルを切り替えて表示する例(2006/02/24)
※ここにきてサンプル番号が前後入れ替わってしまい、わかりにくく申し訳無い。
複数の画像を切り替えて表示することで、紙芝居のようなものができる。
今回紹介するサンプルは、「UJMLサンプル054：画像と文字の表示→四コマ漫画できるか？」で紹介した画像とテキストをあわせて表示することに、画像を複数切り替える動作を追加したものだ。
※UIEngineは画像の表示サイズの指定が、実際の画像のサイズと異なってもオートで拡大・縮小しないので注意。ここはHTMLとは違う。
★---コード
<?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/mo</image-url>">
<!ENTITY IMAGE_URL_2 "<image-url>images/mo2</image-url>">
<!ENTITY IMAGE_URL_3 "<image-url>images/mo4</image-url>">
<!ENTITY IMAGE_URL_4 "<image-url>images/mo3</image-url>">
<!ENTITY IMAGE_WIDTH "200">
<!ENTITY IMAGE_HEIGHT "240">
<!ENTITY SPACING "2">
<!ENTITY MSEC_DELAY "100">
<!ENTITY MSEC_TOTAL "600">
]>
<!-- 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-var name="sTick" 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="mGoalPosX" type="int"/>
<var name="mGoalPosY" type="int"/>
<var name="mLabelHeight" type="int"/>
<var name="mStartTime" type="int" />
<var name="mIndex" type="int" />
<var name="mMessages" type="string" size="4"/>
</variables>
<functions>
<function name="processTick" type="void">
<variables>
<var name="mElapsedTime" type="int" />
</variables>
<script>
mElapsedTime = _msec()-mStartTime;
if (_lt(mElapsedTime, &MSEC_TOTAL;)) {
<!-- 徐々に下から上がってくる -->
mPosY = mScrHeight - (mScrHeight - mGoalPosY) * mElapsedTime / &MSEC_TOTAL;;
<!-- ステート変数切り替えて再描画 -->
_clear_state(sImage);
sImage = mIndex;
<!-- サイズ変更の再処理 -->
sTick = false;
sTick = true;
} else {
mPosY = mGoalPosY;
<!-- ステート変数切り替えて再描画 -->
_clear_state(sImage);
sImage = mIndex;
sTick = false;
sLabel = true;
}
</script>
</function>
</functions>
<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;
}
<!-- 画像の表示位置を指定 -->
mGoalPosX = 0;
mGoalPosY = mLabelHeight;
mPosX = 0;
mPosY = mLabelHeight;
mIndex = 0;
mMessages[0] = "ビルゲイツって財布にいくら入っているのかなぁ？";
mMessages[1] = "オフィスの利益率を考えたことがあるのか？";
mMessages[2] = "値下げしたらどうなんだ？";
mMessages[3] = "何なのこの面接(o_o;)";
<!-- ステート変数をセットして表示処理の実行 -->
sImage = 0;
sLabel = true;
</script>
<states>
<state var="sTick">
<transition value="true">
<delay>&MSEC_DELAY;</delay>
<script>
processTick();
</script>
</transition>
</state>
<state var="sLabel">
<transition value="true">
<display>
<multi-label>
<text><eval>mMessages[mIndex]</eval></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>
<event name="onSelect">
<accelerators>
<key>FIRE</key>
</accelerators>
<script>
mStartTime = _msec();
mIndex = 1;
sLabel = false;
sTick = true;
</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>
mStartTime = _msec();
mIndex = 2;
sLabel = false;
sTick = true;
</script>
</event>
</image>
</display>
</transition>
<transition value="2">
<display>
<image>
<url>&IMAGE_URL_3;</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>
mStartTime = _msec();
mIndex = 3;
sLabel = false;
sTick = true;
</script>
</event>
</image>
</display>
</transition>
<transition value="3">
<display>
<image>
<url>&IMAGE_URL_4;</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>
mStartTime = _msec();
mIndex = 0;
sLabel = false;
sTick = true;
</script>
</event>
</image>
</display>
</transition>
</state>
</states>
</application>
</ujml>
コメント