レビログ

携帯向けアプリケーションを簡単に作れるというUIEngineについての記事を上げていきたいと思います。

第１回ではハローワルドをしました。次はfor文かな？と思ったのですが・・・UIEngineは非同期が売りみたい＋なにをするにもSTMという動作の最小単位が出てくるということで、ＳＴＭという非同期の要素の最小単位について勉強しました。

まずは・・・開発ツール(無料)のインストールなのですが・・・詳しくは次回以後で・・・
http://developer.uievolution.com/sdk/download.html

STM State Transition Machine アニメの基本

前回はもっとも基本的なハローワールドを行いました。

今回は、UIEngineの最も基本的な要素であるSTMについてです。

STMというのは、独立して動く要素　１つ１つの事です。

たとえるなら、シューティングゲームの自機　や　敵機　弾や背景１つ１つがSTMとなります。

これは独立して動く１つ１つのキャラターや背景の事をSTMと呼ぶと便宜上思えば良いと思います。

背景？と疑問に思う人もいるかもしれませんが、背景もアニメーションするならば独立して動く要素なのです。
また、ビジュアル的な要素だけではなく、音楽なども独立して動作する場合１STMとなります。

逆に、連動して動く場合、たとえば、キャラクターが動くと同時に音が鳴る。などの場合はあわせて１つのSTMと数えます。

サンプルプログラム１：動かないSTM

学習のために、動きのないSTMを作ってみましょう。

最も基本的なSTMはBooleanSTMです。これはON　と　OFFの２つの動作からなるSTMです。

ONの時に四角を表示する。OFFの時に四角を表示しないSTMを作り。
とりあえずこのSTMをONにします。

<?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">

<ujml>
<application>
  <state-variables>
    <state-var name="sBox" type="boolean" />
  </state-variables>
  <script>
    sBox = true;
  </script>
  <states>
    <state var="sBox">
      <transition value="true">
      <display>
        <box>
          <x>0</x>
          <y>0</y>
          <width>16</width>
          <height>16</height>
        </box>
      </display>
      </transition>
    </state>
  </states>
</application>
</ujml>

これをコンパイルして実行すると・・・



<state-variables>　STMの全体の宣言開始です
<state-var name="sBox" type="boolean" />
</state-variables>　sBOXという名前のbooleanSTMを宣言します。

<states>　STMの動作定義の開始です
<state var="sBox">　sBoxの動作定義の開始です。
<transition value="true">　sBOXがONの時の動作を記述しています。 このtransitionが重要で、ON(true)の時の動作をここに書くことでsBoxの価を変えるだけで自動でこの動作が行われます。

<script>
sBox = true;
</script>

この部分が、スクリプト部分になります。全体的な動作の記述です。今回はsBoxをON(true)にすることしかしません。

本来であれば、この部分をいろいろ書くことでsBoxをアニメーションさせたりできます。

OFFの時の動作が記述されていません。そのため、sBOXがOFF(false)になった場合は、何もしないという動作（正確にはONの時に行った動作の取り消しを行います。）

STMを使った単純なアニメーション

まぁ、簡単です・・・

<?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">
<ujml>
<application>
  <state-variables>
    <state-var name="sBox" type="boolean" />
  </state-variables>
  <script>
    sBox = true;
  </script>
  <states>
    <state var="sBox">
    <transition value="true">
      <display>
        <box>
          <x>0</x>
          <y>0</y>
          <width>16</width>
          <height>16</height>
        </box>
      </display>
      <delay>1000</delay>
      <script>
        sBox = false;
      </script>
    </transition>

    <transition value="false">
      <delay>1000</delay>
      <script>
        sBox = true;
      </script>
    </transition>
    </state>
  </states>
</application>
</ujml>

最初のアプリケーションと異なるところはdelayタグです。
これはsBoxがONになった場合 delayの値だけ経過した後にscriptの中の動作を実行します。

この場合、sBoxがONになってから、1000ミリ秒後つまり１秒後にsBoxをOFFにします。

今度はsBoxがOFFの場合の動作も書いてあります。単純に１秒後にsBoxをONにします。

これによりsBoxが１秒周期でON・OFFを繰り返すことになります。
sBoxがONの場合は、四角を描画する。OFFの場合はしないという差がありますので

このスクリプトを実行すると、画面上で１秒周期で四角が出たり消えたりするアニメーションをすることになります。

STMは最小の処理要素です

というわけで、ここでは１つの四角しか扱いませんでしたが、配列化したり、することにより複数の要素がそれぞれ非同期に動くことになります。

次回はいよいよ非同期的なアニメーションにチャレンジしたいと思います。
パソコン用にJAVAアプレットとしてコンパイルしたものを作ってみました。
http://revilog.com/UIEngine/Sample5/

携帯向けと動作が多少ちがったのでfaleの時に背景色と同じ色で上塗りして明示的に四角を消すようにしました・・・なにがいけないんだろう・・・