UJMLサンプル028：うろうろ(2006/02/05)
「インサイドUJMLのAnimation」で紹介されているwalk.ujmlを参考にして、うろうろ動き回るアニメーションを作成した。これは今までのサンプルのエッセンスに画像表示を加えただけだ。
UJMLではこういうものも簡単にできてしまう。Flashに職人と呼ばれる人々がいるように、UJMLもそのようになるのだろうか？（そのためにはもっとUJMLがオープンになる必要があると思うが）。
前にも書いたが、UJMLで作るときの感覚はHTMLにかなり近い。HTMLで、美しいレイアウトをするときにTABLEを一生懸命いじることがあるが、UJMLの場合はそれがステート変数になった感じだ、とふと思った。
次のような流れで処理が進む
１．上下左右のどこかに移動する（moveBoyとprocessTick）
２．左右きょろきょろ（sStayをtrueにしprocessTick2）
３．移動方向を決める（sMoveBoyを0から3の値でランダムに決定する）
繰り返す
動作サンプル
※動作にはJAVA Runtimeが必要
※2枚目の写真のように移動後の画像が残るのはたぶんバグ SDKの画面上では消えています。
---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "../ujml.dtd" [
<!ENTITY MSEC_FRAME "300">
<!ENTITY BOYW "20">
<!ENTITY BOYH "24">
<!ENTITY SBOY_L0 "0">
<!ENTITY SBOY_L1 "1">
<!ENTITY SBOY_R0 "2">
<!ENTITY SBOY_R1 "3">
<!ENTITY SBOY_U0 "4">
<!ENTITY SBOY_U1 "5">
<!ENTITY SBOY_D0 "6">
<!ENTITY SBOY_D1 "7">
<!ENTITY IMAGE_URL "<image-url>boy</image-url>">
]>
<!-- http://uiengineda.blogs.com 歩き回る感じ -->
<ujml>
<application>
<state-variables>
<state-var name="sTick" type="boolean"/>
<state-var name="sStay" type="boolean"/>
<state-var name="sBoy" type="int"/>
<state-var name="sMoveBoy" type="int"/>
</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="mDX" type="int"/>
<var name="mDY" type="int"/>
<var name="mTickCount" type="int"/>
</variables>
<functions>
<function name="randRange" type="int"><!-- これは指定範囲の数字をランダムに作る関数 -->
<parameters>
<var name="seed" type="int"/>
<var name="min" type="int"/>
<var name="max" type="int"/>
</parameters>
<return>
<eval>
(_srand(seed) % (max - min + 1)) + min
</eval>
</return>
</function>
<function name="processTick2" type="void">
<script>
mTickCount++;
sBoy = (mTickCount % 2) * 2;
if (mTickCount &_LT; 5) {
sStay = false;
sStay = true;
} else {
_clear_state(sMoveBoy);
<!-- 次に移動する方向をランダムで決める -->
sMoveBoy = randRange(_msec(), 0, 3);;
}
</script>
</function>
<function name="processTick" type="void">
<script>
mPosX = mPosX + mDX;
mPosY = mPosY + mDY;
sBoy = (sBoy /2 *2) + 1 - (sBoy % 2);
if (_eq(sBoy % 2,1)) {
sTick = false;
sTick = true;
} else {
mTickCount = 0;
sStay = false;
sStay = true;
}
</script>
</function>
<function name="moveBoy" type="void">
<parameters>
<var name="dx" type="int"/>
<var name="dy" type="int"/>
<var name="state" type="int"/>
<var name="fMove" type="boolean"/>
</parameters>
<script>
sBoy = state;
if (fMove) {
mDX = (dx * &BOYW;)/2;
mDY = (dy * &BOYH;)/2;
sTick = false;
sTick = true;
}
</script>
</function>
</functions>
<script>
mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
mPosX = (mScrWidth-&BOYW;)/2;
mPosY = (mScrHeight-&BOYH;)/2;
mTickCount = 0;
sMoveBoy = 0;
</script>
<states>
<state var="sTick">
<transition value="true">
<delay>&MSEC_FRAME;</delay>
<script>processTick();</script>
</transition>
</state>
<state var="sStay">
<transition value="true">
<delay>&MSEC_FRAME;</delay>
<script>processTick2();</script>
</transition>
</state>
<state var="sMoveBoy">
<transition value="0"><!-- move to LEFT -->
<script>
moveBoy(-1, 0, &SBOY_L0;, _gt(mPosX-&BOYW;, -1));
</script>
</transition>
<transition value="1"><!-- move to RIGHT -->
<script>
moveBoy(1, 0, &SBOY_R0;, _lt(mPosX+&BOYW;*2, mScrWidth));
</script>
</transition>
<transition value="2"><!-- move to UP -->
<script>
moveBoy(0, -1, &SBOY_U0;, _gt(mPosY-&BOYH;, -1));
</script>
</transition>
<transition value="3"><!-- move to DOWN -->
<script>
moveBoy(0, 1, &SBOY_D0;, _lt(mPosY+&BOYH;*2, mScrHeight));
</script>
</transition>
</state>
<!-- キャラの画像 8種類 上下左右（全部は使ってないけど、一応貼り付けた） -->
<state var="sBoy">
<transition value="&SBOY_L0;">
<display>
<image>
<url>&IMAGE_URL;</url>
<x>
<eval>mPosX</eval>
</x>
<y>
<eval>mPosY</eval>
</y>
<width>&BOYW;</width>
<height>&BOYH;</height>
</image>
</display>
</transition>
<transition value="&SBOY_L1;">
<display>
<image>
<url>&IMAGE_URL;</url>
<src-y>&BOYH;</src-y>
<x>
<eval>mPosX</eval>
</x>
<y>
<eval>mPosY</eval>
</y>
<width>&BOYW;</width>
<height>&BOYH;</height>
</image>
</display>
</transition>
<transition value="&SBOY_R0;">
<display>
<image>
<url>&IMAGE_URL;</url>
<src-x>&BOYW;</src-x>
<x>
<eval>mPosX</eval>
</x>
<y>
<eval>mPosY</eval>
</y>
<width>&BOYW;</width>
<height>&BOYH;</height>
</image>
</display>
</transition>
<transition value="&SBOY_R1;">
<display>
<image>
<url>&IMAGE_URL;</url>
<src-x>&BOYW;</src-x>
<src-y>&BOYH;</src-y>
<x>
<eval>mPosX</eval>
</x>
<y>
<eval>mPosY</eval>
</y>
<width>&BOYW;</width>
<height>&BOYH;</height>
</image>
</display>
</transition>
<transition value="&SBOY_U0;">
<display>
<image>
<url>&IMAGE_URL;</url>
<src-x>
<eval>&BOYW;*2</eval>
</src-x>
<x>
<eval>mPosX</eval>
</x>
<y>
<eval>mPosY</eval>
</y>
<width>&BOYW;</width>
<height>&BOYH;</height>
</image>
</display>
</transition>
<transition value="&SBOY_U1;">
<display>
<image>
<url>&IMAGE_URL;</url>
<src-x>
<eval>&BOYW;*2</eval>
</src-x>
<src-y>&BOYH;</src-y>
<x>
<eval>mPosX</eval>
</x>
<y>
<eval>mPosY</eval>
</y>
<width>&BOYW;</width>
<height>&BOYH;</height>
</image>
</display>
</transition>
<transition value="&SBOY_D0;">
<display>
<image>
<url>&IMAGE_URL;</url>
<src-x>
<eval>&BOYW;*3</eval>
</src-x>
<x>
<eval>mPosX</eval>
</x>
<y>
<eval>mPosY</eval>
</y>
<width>&BOYW;</width>
<height>&BOYH;</height>
</image>
</display>
</transition>
<transition value="&SBOY_D1;">
<display>
<image>
<url>&IMAGE_URL;</url>
<src-x>
<eval>&BOYW;*3</eval>
</src-x>
<src-y>&BOYH;</src-y>
<x>
<eval>mPosX</eval>
</x>
<y>
<eval>mPosY</eval>
</y>
<width>&BOYW;</width>
<height>&BOYH;</height>
</image>
</display>
</transition>
</state>
</states>
</application>
</ujml>
コメント