UJMLサンプル013：ブーメラン風移動効果(2006/02/02)
「はじく感じで移動する」作成中に産まれた副産物だが（バグでたまたま期待以上の動きをした）、今度はブーメランのように戻ってくる。
こちらのサンプルはSDK付属のJavaAppletPTSという仕組みを使ってWEB上でJavaAppletとして公開してみた。（こちら）この仕組みは以前もワンクリックでWEB公開できると書いたが、本当に便利な仕組みだ。
JavaAppletとして公開すると期待した通りに画面が描画されないことも多いが、動きはなんとなくつかんでもらえると思う。
・移動軌跡が黒く残ってしまう（本来は白く戻るべき）
という表示上のバグはあるが勘弁して欲しい。
動作サンプル
※動作にはJava以上が必要です。
---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd" [
<!ENTITY LABEL_WIDTH_STRING "X:000 Y:000" >
<!ENTITY SPACING "4">
<!ENTITY MOVE_SUB "1"><!-- 減速の度合 -->
<!ENTITY MSEC_FRAME "50"><!-- フレームの処理間隔 -->
<!ENTITY INITIAL_DIST "10"><!-- 最初の移動速度 -->
]>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
XYの位置の練習 カーソルキーで動かすとXYの値が変わる
移動ははじく感じでだんだ遅くなる。減速の度合いはMOVE_SUBで設定する。
はじいた瞬間の移動距離はINITIAL_DISTで設定する。
そのまま戻ってくるようにして、ブーメランみたいにする。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<ujml>
<application>
<state-variables>
<state-var name="sBox" type="boolean"/>
<state-var name="sTick" type="boolean"/>
<state-var name="sInput" 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="mDX" type="int"/>
<var name="mDY" type="int"/>
<var name="mMovingStep" type="int"/>
<var name="mTotalMoving" type="int"/>
</variables>
<functions>
<function name="processTick" type="void">
<script>
<!-- 戻ってくるまで移動するようにするため "2 * " を入れている -->
if (mMovingStep * &MOVE_SUB; &_LTE; 2 * (&INITIAL_DIST;)) {
<!-- 移動後のXY座標を算出する。 -->
mPosX = mPosX + mDX * (&INITIAL_DIST; - mMovingStep * &MOVE_SUB;);
mPosY = mPosY + mDY * (&INITIAL_DIST; - mMovingStep * &MOVE_SUB;);
<!-- 再描画 -->
sBox = false;
sBox = true;
mMovingStep++;<!-- だんだん移動距離を短くするために、移動ステップ数を増やす。 -->
<!-- 同じ処理を再度実行 -->
sTick = false;
sTick = true;
} else {
<!-- 移動距離が0になったので移動処理をやめて、入力待ち状態にする。 -->
sInput = true;
}
</script>
</function>
<function name="moveBox" type="void">
<parameters>
<var name="dx" type="int"/>
<var name="dy" type="int"/>
<var name="fMove" type="boolean"/>
</parameters>
<script>
if (fMove) {
<!-- 移動ステップ数を初期化 -->
mMovingStep = 0;
<!-- どの方向に移動させるか -->
mDX = dx;
mDY = dy;
<!-- 箱の移動処理をさせる。 -->
sTick = false;
sTick = true;
<!-- 移動中は入力を拒否するためにsInputをfalseにする。-->
sInput = false;
}
</script>
</function>
</functions>
<script>
<!-- スクリーンの幅と高さ -->
mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
<!-- 全文字数分の幅 -->
mWidth = (&SPACING; * 2) +_text_width("&LABEL_WIDTH_STRING;", &_FONT_SIZE_MEDIUM;,
&_FONT_STYLE_ITALIC;, &_FONT_FACE_SYSTEM;);
<!-- 高さ -->
mHeight = (&SPACING; * 2) + _text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_ITALIC;,
&_FONT_FACE_SYSTEM;);
mPosX = &MOVE_SUB;;
mPosY = &MOVE_SUB;;
sInput = true;
sBox = true;
</script>
<states>
<state var="sTick">
<transition value="true">
<delay>&MSEC_FRAME;</delay>
<script>processTick();</script>
</transition>
</state>
<state var="sInput">
<transition value="true">
<display>
<!-- カーソルを押すイベントをキャッチするためのBOX -->
<!-- もちろん空なので表示はされませんよ -->
<box>
<event name="onselect">
<accelerators>
<key>LEFT</key><!-- 左 -->
</accelerators>
<script>
moveBox(-1, 0, _gt(mPosX, -1));
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators>
<key>RIGHT</key><!-- 右 -->
</accelerators>
<script>
moveBox(1, 0, _lt(mPosX+mWidth, mScrWidth));
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators>
<key>UP</key><!-- 上 -->
</accelerators>
<script>
moveBox(0, -1, _gt(mPosY-mHeight, -1));
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators>
<key>DOWN</key><!-- 下 -->
</accelerators>
<script>
moveBox(0, 1, _lt(mPosY+mHeight, mScrHeight));
</script>
</event>
</box>
</display>
</transition>
</state>
<state var="sBox">
<transition value="true">
<display>
<!-- XYの座標を表示する箱 -->
<box>
<x><eval>mPosX</eval></x>
<y><eval>mPosY</eval></y>
<width><eval>mWidth</eval></width>
<height><eval>mHeight</eval></height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
<label>
<text><eval>_strcat("X:",mPosX," Y:",mPosY)</eval></text>
<x>&SPACING;</x>
<y>&SPACING;</y>
<fg>&_COLOR_WHITE;</fg>
<bg>&_COLOR_BLACK;</bg>
</label>
</box>
<!-- 左上の黄色い目印 -->
<box>
<x><eval>mPosX</eval></x>
<y><eval>mPosY</eval></y>
<width>3</width>
<height>3</height>
<fg>&_COLOR_YELLOW;</fg>
<bg>&_COLOR_YELLOW;</bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
コメント