UIEngine だ

技術者諸君これを使い給え。UIEngine(ユーアイエンジン)は携帯電話上でAJAX的なインタフェースを簡単に実現できる技術です。このブログではUJMLサンプルの紹介 UIEngineについて UJMLで作る便利なツール 等を載せています。

スロットゲームを作ろう その2 何事ものんびりと

 こんにちは。なんちゃってパチプロになったUIEngineだです。さて、今日も昨日の収支報告から。早速、前回に引き続きスロットゲームを作っていこう。今のうちに断っておくと、手元に完成したスロットゲームがあるわけではなく、このブログの更新と同じ速度で作っているので、ソースコードの美しさとか、そういったものは期待しないでもらいたい。

 つまり、スパゲッティを生産している。もしかしたら、途中でがっつり変更を入れ、それまでの流れをぶち壊しにするのだが、しばらくこのスタイルで続けよう。ではなく、ソースコードを貼り付けておく。追加した点は、ゲームの進行を管理するステート変数sGameStatusを例によってint型で追加した点。

<state-var name="sGameStatus" type="int"/>

このステート変数sGameStatusが何をするかと言えば、実に簡単。sBaseStatusの値が1の間、スロットゲームの進行状態を管理するわけだ。スロットゲームのインタフェースは実に簡単である。それは、

・コイン投入口
・スタートレバー
・ボタン1
・ボタン2
・ボタン3

の5つのインタフェースが極めてシンプルにユーザーと機械をつないでいる点だ。強く押そうが、連打しようが当りはずれに関係無い(笑)。以前はレバーに細工するとあたりはずれが云々と言う裏技があったようだが。

 今回、sBaseStatus=1つまりゲーム中になると、コイン投入から始まりボタン3を押すところまで、FIREボタンでゲームの状態が次の状態に遷移するようsGameStatusの値を変更している。こんな感じで、sGameStatusの値と紐づいたゲームの状態を作りこんで行けばよいはずだ。いまのところ、予想している内容を書いておくと

・コイン投入
→投入すると、どこかのランプが点灯
・スタートレバー
→全ドラムが回転 画像が上から下に流れる感じで
・ボタン1
→左のドラムが停止※反対から押す場合はどうしようかな?
・ボタン2
→中央のドラムが停止
・ボタン3
→右のドラムが停止
→何かあたったらクレジットが増える、、クレジットという仕組は面倒、つける必要あるのだろうか?

こんな感じ。まぁ、面倒なのはドラムの回転部分だろう。停止の制御というものがあるらしいのだが、はい、全く原理がわかりかねる。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 2.1//EN"
"http://www.uievolution.com/dtd/ujml-2.1.dtd" [
]>

<!--
    Copyright (c) 2007, uienginda.blogs.com.
    http://uienginda.blogs.com スロットゲームを作ろう
-->

<ujml>
    <application>
   
        <state-variables>
            <state-var name="sBaseStatus" type="int"/>
            <state-var name="sGameStatus" type="int"/>
        </state-variables>
   
        <script>
            sBaseStatus = 0;
        </script>

        <display>
            <!-- Display F1 function key for exiting app -->
            <fn>
                <text>終了</text>
                <event name="onselect">
                    <accelerators>
                        <key>F1</key>
                    </accelerators>
                    <script>
                        _unload();
                    </script>

                </event>
            </fn>
            <fn>
                <text>次へ</text>
                <event name="onselect">
                    <accelerators>
                        <key>F2</key>
                    </accelerators>
                    <script>
                        if(sBaseStatus==0){
                            sBaseStatus = 1;
                        }else if(sBaseStatus==1){
                            sBaseStatus = 2;
                        }else if(sBaseStatus==2){
                            sBaseStatus = 0;
                        }
                    </script>

                </event>
            </fn>
        </display>
        <states>
            <state var="sBaseStatus">
                <transition value="0">
                    <comment>スタート画面の状態:各種機能メニュー等を表示</comment>
                    <display>
                        <label>
                            <text>スタート画面</text>
                        </label>
                    </display>
                </transition>
                <transition value="1">
                    <comment>ゲーム中</comment>
                    <display>
                        <label>
                            <text>ゲーム中</text>
                        </label>
                    </display>
                    <script>
                        sGameStatus = 1;
                    </script>

                </transition>
                <transition value="2">
                    <comment>ゲーム終了 結果表示等</comment>
                    <display>
                        <label>
                            <text>ゲーム終了:結果表示</text>
                        </label>
                    </display>
                    <script>
                        sGameStatus = 0;
                    </script>

                </transition>
            </state>
            <state var="sGameStatus">
                <transition value="1">
                    <comment>スタート待ち、、</comment>
                    <display>
                        <label><text>金を投入</text><y>30</y></label>
                        <box>
                            <event name="onselect">
                                <accelerators><key>FIRE</key></accelerators>
                                <script>
                                    sGameStatus = 2;
                                </script>

                            </event>
                        </box>
                    </display>
                </transition>
                <transition value="2">
                    <comment>ドラム回転中</comment>
                    <display>
                        <label><text>回転中</text><y>30</y></label>
                        <box>
                            <event name="onselect">
                                <accelerators><key>FIRE</key></accelerators>
                                <script>
                                    sGameStatus = 3;
                                </script>

                            </event>
                        </box>
                    </display>
                </transition>
                <transition value="3">
                    <comment>停止</comment>
                    <display>
                        <label><text>第一停止</text><y>30</y></label>
                        <box>
                            <event name="onselect">
                                <accelerators><key>FIRE</key></accelerators>
                                <script>
                                    sGameStatus = 4;
                                </script>

                            </event>
                        </box>
                    </display>
                </transition>
                <transition value="4">
                    <comment>停止</comment>
                    <display>
                        <label><text>第二停止</text><y>30</y></label>
                        <box>
                            <event name="onselect">
                                <accelerators><key>FIRE</key></accelerators>
                                <script>
                                    sGameStatus = 5;
                                </script>

                            </event>
                        </box>
                    </display>
                </transition>
                <transition value="5">
                    <comment>停止</comment>
                    <display>
                        <label><text>第三停止</text><y>30</y></label>
                        <box>
                            <event name="onselect">
                                <accelerators><key>FIRE</key></accelerators>
                                <script>
                                    sGameStatus = 1;
                                </script>

                            </event>
                        </box>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>

2007/04/05 カテゴリー: UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

スロットゲームを作ろう

 さて、前回の予告どおり、パチンコ屋通いの成果を見せていこう。服がタバコくさくてたまらん。まずは昨日の収支報告。ではなく、ステート変数を使いゲームの状態を管理するところから解説。初歩の初歩。

 まず、それにはステート変数が一つ必要だ。UJMLでは良く、画面に表示するオブジェクトの表示/非表示を管理するために、boolean型でステート変数を宣言することが多いが、今回はint型で宣言した。その名も、sBaseStatus。

<state-var name="sBaseStatus" type="int"/>

こんな感じ。(一応下のソースコードでは太字にしてある)

 この変数はint値をとることになるのだが、その値によってゲームの状態を管理しよう。最初のステップはこんなところで、実際に作ってみたサンプルはこちら。ゲームの状態を

0:スタート画面
1:ゲーム中
2:ゲーム終了(結果表示とか)

と思いっきり簡単にした。それで、それぞれの値を変更し、sBaseStatusの各値に定義したことをさせているのだが、ここでは単に<label>要素を表示されているだけ。

※おっと、せっかくなのでflash版で貼り付けようとしたが、今回はお休みということで。次回以降に持ち越し。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 2.1//EN"
"http://www.uievolution.com/dtd/ujml-2.1.dtd" [
]>

<ujml>
    <application>
   
        <state-variables>
            <state-var name="sBaseStatus" type="int"/>
        </state-variables>
   
        <script>
            sBaseStatus = 0;
        </script>

        <display>
            <!-- Display F1 function key for exiting app -->
            <fn>
                <text>終了</text>
                <event name="onselect">
                    <accelerators>
                        <key>F1</key>
                    </accelerators>
                    <script>
                        _unload();
                    </script>

                </event>
            </fn>
            <fn>
                <text>次へ</text>
                <event name="onselect">
                    <accelerators>
                        <key>F2</key>
                    </accelerators>
                    <script>
                        if(sBaseStatus==0){
                            sBaseStatus = 1;
                        }else if(sBaseStatus==1){
                            sBaseStatus = 2;
                        }else if(sBaseStatus==2){
                            sBaseStatus = 0;
                        }
                    </script>

                </event>
            </fn>
        </display>
        <states>
            <state var="sBaseStatus">
                <transition value="0">
                    <comment>スタート画面の状態:各種機能メニュー等を表示</comment>
                    <display>
                        <label>
                            <text>スタート画面</text>
                        </label>
                    </display>
                </transition>
                <transition value="1">
                    <comment>ゲーム中</comment>
                    <display>
                        <label>
                            <text>ゲーム中</text>
                        </label>
                    </display>
                </transition>
                <transition value="2">
                    <comment>ゲーム終了 結果表示等</comment>
                    <display>
                        <label>
                            <text>ゲーム終了:結果表示</text>
                        </label>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>

2007/04/04 カテゴリー: UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

UJMLサンプル144:画像表示基礎、画像の配置

Samples_144_image_alignment 前回紹介したサンプルを少し変更し、ステート変数と<event>を使い、画像の配置を切り替えるようにした。このあたりは難しいことは無いのでOKだろう。

<?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/skype</image-url>">
]>

<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- http://uienginda.blogs.com UJMLサンプル144:画像表示基礎、画像の配置 -->
<!-- 画像サイズは 96*96 -->
<ujml>
    <application>
        <state-variables>
            <state-var name="sImage" type="int"/>
        </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"/>
        </variables>
        <script>
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
            
            if(mScrWidth &_LT; 96){
                mWidth = mScrWidth;
            }else{
                mWidth = 96;
            }
            
            if(mScrHeight &_LT; 96){
                mHeight = mScrHeight;
            }else{
                mHeight = 96;
            }
            
            mPosX = 0;
            mPosY = 0;
            
            sImage = 0;
        </script>

        <states>
            <state var="sImage">
                <transition value="0"><!-- top left -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>0</eval></x>
                            <y><eval>0</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 1;
                                </script>

                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="1"><!-- top right -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>mScrWidth - mWidth</eval></x>
                            <y><eval>0</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 2;
                                </script>

                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="2"><!-- bottom right -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>mScrWidth - mWidth</eval></x>
                            <y><eval>mScrHeight - mHeight</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 3;
                                </script>

                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="3"><!-- bottom left -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>0</eval></x>
                            <y><eval>mScrHeight - mHeight</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 4;
                                </script>

                            </event>
                        </image>
                    </display>
                </transition>
                <transition value="4"><!-- center -->
                    <display>
                        <image>
                            <url>&IMAGE_URL_1;</url>
                            <x><eval>(mScrWidth - mWidth) / 2</eval></x>
                            <y><eval>(mScrHeight - mHeight) / 2</eval></y>
                            <width><eval>mWidth</eval></width>
                            <height><eval>mHeight</eval></height>
                            <event name="onSelect">
                                <accelerators>
                                    <key>FIRE</key>
                                </accelerators>
                                <script>
                                    sImage = 0;
                                </script>

                            </event>
                        </image>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>

2006/08/14 カテゴリー: UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

UJMLサンプル143:画像表示基礎

Samples_143_image flickr を使って写真を管理し始め、不運にも携帯から flickr mobile を使えないのでそのあたりを UIEngine を使って何とかできたらと考えている。

 そこで、画像周辺のサンプルのおさらいである。今回紹介するサンプルは単純に画像を表示するだけだ。以前の

UIEngine だ: UJMLサンプル045:写真の表示と切り替え

のおさらいである。このサンプルは画像が良くないので、今回はSkypeの画像を拝借した。画像の表示は、URL、座標等を指定する(下コード参照)。注意すべきは、自動的な拡大縮小は行われないということだ。

                    <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>
                        </image>
                    </display>

ソースコード:
Download 143_main.ujml

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

その他の初心者向けのサンプル:
・UJMLサンプル052:超基礎:HELLO WORLD! その1
・UJMLサンプル053:超基礎:HELLO WORLD! その2 文字の色を指定
・UJMLサンプル056:超基礎:HELLO WORLD! その3 文字の色を指定 ENTITYを使う
・UJMLサンプル057:超基礎:HELLO WORLD! その4 文字の色を指定 変数から文字の色指定をする場合
・UJMLサンプル091:超基礎:HELLO WORLD! その5 ラベルの背景も指定する

2006/08/11 カテゴリー: UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

UJMLサンプル142:onKeyDown, onKeyUp デバッグ やっぱりバグだ

Samples_142_debugkeyupdown ここ何回かでUIPlayerJavaApplet版にバグがあるのではないか?と書いてきたが、単純な検証用コードを作成し、やはり期待通りに動作しないことがわかった。

 今回作成したサンプルは、onkeyDown/onKeyUp イベントそれぞれに対して、画面に処理経過を表示するものだ。検証手順は、

1.矢印↑を押す(そのまま)
→onKeyDown:UPと表示される
2.先ほどの↑を押したまま矢印→を押す
→onKeyDown:RIGHTが表示されない、、、とほほ

である。その後、矢印→を離すとonKeyUp:RIGHTは検出できるので、まぁ、何かのUIEPlayer側のバグなのだろう。DOJA版にもこのバグはあるのだろうか?

検証用動作サンプル:
http://pts.app.uievolution.com/pubserv/vfs/3417/com.uiengineda.samples.142.html

ソースコード:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>

<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- http://uienginda.blogs.com UJMLサンプル142:onKeyDown, onKeyUp デバッグ やっぱりバグだ -->
<ujml>
    <application>
        <state-machines>
            <include file="bottommessagebar.ujms" state-machine="MessageBar" />
        </state-machines>
        <state-variables>
            <state-var name="sInput" type="boolean"/>
        </state-variables>
        <script>
            sInput = true;
        </script>

        <states>
            <state var="sInput">
                <transition value="true">
                    <display>
                        <box>
                            <event name="onKeyDown">
                                <variables>
                                    <var name="key" type="string"/>
                                </variables>
                                <script>
                                    key = _getStringEventData(&_EVENT_STRING_ONKEY;);
                                    MessageBar.show(_strcat(
"onKeyDown : ",key));
                                    
                                </script>

                            </event>
                        </box>
                        <box>
                            <event name="onKeyUp">
                                <variables>
                                    <var name="key" type="string"/>
                                </variables>
                                <script>
                                    key = _getStringEventData(&_EVENT_STRING_ONKEY;);
                                    MessageBar.show(_strcat(
"onKeyUP : ",key));

                                </script>

                            </event>
                        </box>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>

---
【おまけ】 女は化ける、写真は信用できないか?この時代、完璧な肌のできあがり!
LifeClever ;-) » How to use Photoshop to retouch your photo and have flawless skin
http://www.lifeclever.com/index.php/2006/07/06/how-to-use-photoshop-to-retouch-your-photo-and-have-flawless-skin/

2006/07/16 カテゴリー: UIEngine 疑問, UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

resource タグのサンプルを孤独なシナプスさんが公開

Kodokuna_1 UIEngine関連ブログでも紹介した孤独なシナプスさんが<resource>タグを使ったサンプルを紹介している。丁度、当ブログでも<resource>タグを使ったサンプルを紹介しようと思っていたので紹介。

孤独なシナプス
http://d.hatena.ne.jp/yellowseadog/20060710/1152552673

 携帯電話といった回線速度の遅い環境ではネット上のリソースを上手く利用していくコツが作り手に求められるのだが、そのあたりも今後紹介していけたらと思っている。

---
【おまけ】 国際化に欠かせない宗教比較一覧
The Big Religion Comparison Chart - ReligionFacts
http://www.religionfacts.com/big_religion_chart.htm

2006/07/11 カテゴリー: UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

UJMLサンプル141:135の同時押しコンポーネントの活用して、同時押し中に四角(box)を大きくする

Samples_141_countupbox 前回紹介した140番のサンプルと基本的には同じだが、応用例として紹介する。今回も、以下のエントリーで紹介した同時押しコンポーネントを活用している。

・UJMLサンプル138:135の同時押しコンポーネントの活用

・UJMLサンプル135:ボタンの同時押し用コンポーネントを作る 最後

 前回の140番では同時押し中にカウントアップしていたが、今回はそれを応用し同時押し中に箱をだんだんと大きくするサンプルだ。もう少し実践的なものの方が役立つと思うが、基礎的な練習としてみていただけたらと思う。

 同時押し中、例えば上と右で右上に移動、といったものも紹介できたらと思っている。

 変更したのは、message_view.ujml というファイルのみ。

message_view.ujml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>

<!-- http://uienginda.blogs.com メッセージ表示用 141用-->
<!-- 同時に押されたらカウントアップする -->
<!-- カウントアップにより箱の大きさを変える -->
<ujml>
    <partition>
        <state-machines>
            <include file="bottommessagebar.ujms" state-machine="MessageBar" />
        </state-machines>
        <state-variables>
            <state-var name="sButtonStatus" type="int" access="import"/>
            <state-var name="sCountUp" type="boolean"/>
            <state-var name="sBox" type="boolean"/>
        </state-variables>
        <variables>
            <var name="mCounter" type="int"/>
        </variables>
        <functions>
            <function name="initCounter" type="void">
                <script>
                    mCounter=0;
                    sCountUp = false;
                </script>

            </function>
            <function name="fireCounter" type="void">
                <script>
                    if(!sCountUp)sCountUp = true;
                </script>

            </function>
        </functions>
        <script>
            initCounter();
        </script>

        <states>
            <state var="sBox">
                <transition value="true">
                    <display>
                        <box>
                            <x><eval>(_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;) - (5 * mCounter)) / 2</eval></x>
                            <y><eval>(_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;) - (5 * mCounter)) / 2</eval></y>
                            <width><eval>5 * mCounter</eval></width>
                            <height><eval>5 * mCounter</eval></height>
                        </box>
                    </display>
                </transition>
            </state>
            <state var="sCountUp">
                <transition value="true">
                    <delay>300</delay>
                    <script>
                        sCountUp = false;
                        mCounter++;
                        MessageBar.show(_strcat(
"Counter : ",mCounter));
                        _clear_state(sBox);
                        sBox = true;
                        sCountUp = true;
                    </script>

                </transition>
            </state>
            <state var="sButtonStatus">
                <transition value="0">
                    <script>
                        MessageBar.show(
"");
                        initCounter();
                    </script>

                </transition>
                <transition value="1">
                    <script>
                        MessageBar.show(
"上   ");
                        initCounter();
                    </script>

                </transition>
                <transition value="2">
                    <script>
                        MessageBar.show(
" 下  ");
                        initCounter();
                    </script>

                </transition>
                <transition value="3">
                    <script>
                        MessageBar.show(
"上下  ");
                        fireCounter();
                    </script>

                </transition>
                <transition value="4">
                    <script>
                        MessageBar.show(
"  左 ");
                        initCounter();
                    </script>

                </transition>
                <transition value="5">
                    <script>
                        MessageBar.show(
"上 左 ");
                        fireCounter();
                    </script>

                </transition>
                <transition value="6">
                    <script>
                        MessageBar.show(
" 下左 ");
                        fireCounter();
                    </script>

                </transition>
                <transition value="7">
                    <script>
                        MessageBar.show(
"上下左 ");
                        fireCounter();
                    </script>

                </transition>
                <transition value="8">
                    <script>
                        MessageBar.show(
"   右");
                        initCounter();
                    </script>

                </transition>
                <transition value="9">
                    <script>
                        MessageBar.show(
"上  右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="10">
                    <script>
                        MessageBar.show(
" 下 右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="11">
                    <script>
                        MessageBar.show(
"上下 右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="12">
                    <script>
                        MessageBar.show(
"  左右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="13">
                    <script>
                        MessageBar.show(
"上 左右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="14">
                    <script>
                        MessageBar.show(
" 下左右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="15">
                    <script>
                        MessageBar.show(
"上下左右");
                        fireCounter();
                    </script>

                </transition>
            </state>
        </states>
    </partition>
</ujml>

ソースコード:

Download 141.zip

2006/07/10 カテゴリー: UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

UJMLサンプル140:135の同時押しコンポーネントの活用して、同時押し中にカウントアップする

Samples_140_countup 以前紹介した同時押しコンポーネント

UJMLサンプル135:ボタンの同時押し用コンポーネントを作る 最後

を活用し、ボタンの同時押し中にカウントアップするサンプルを作成したので紹介する。今回のサンプルは138番のものがベースになっている。

UJMLサンプル138:135の同時押しコンポーネントの活用

138番では、ユーザーの入力を受け付けて「何かする」部分を別のパーティション message_view.ujml に切り分けた。今回、紹介するものはこの message_view.ujml のみを書き換えている。

message_view.ujml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>

<!-- http://uienginda.blogs.com メッセージ表示用 -->
<!-- 同時に押されたらカウントアップする -->
<!-- 二つ以上押されていたらカウントアップする -->
<ujml>
    <partition>
        <state-machines>
            <include file="bottommessagebar.ujms" state-machine="MessageBar" />
        </state-machines>
        <state-variables>
            <state-var name="sButtonStatus" type="int" access="import"/>
            <state-var name="sCountUp" type="boolean"/>
        </state-variables>
        <variables>
            <var name="mCounter" type="int"/>
        </variables>
        <functions>
            <function name="initCounter" type="void">
                <script>
                    mCounter=0;
                    sCountUp = false;
                </script>

            </function>
            <function name="fireCounter" type="void">
                <script>
                    if(!sCountUp)sCountUp = true;
                </script>

            </function>
        </functions>
        <script>
            initCounter();
        </script>

        <states>
            <state var="sCountUp">
                <transition value="true">
                    <delay>300</delay>
                    <script>
                        sCountUp = false;
                        mCounter++;
                        MessageBar.show(_strcat(
"Counter : ",mCounter));
                        sCountUp = true;
                    </script>

                </transition>
            </state>
            <state var="sButtonStatus">
                <transition value="0">
                    <script>
                        MessageBar.show(
"");
                        initCounter();
                    </script>

                </transition>
                <transition value="1">
                    <script>
                        MessageBar.show(
"上   ");
                        initCounter();
                    </script>

                </transition>
                <transition value="2">
                    <script>
                        MessageBar.show(
" 下  ");
                        initCounter();
                    </script>

                </transition>
                <transition value="3">
                    <script>
                        MessageBar.show(
"上下  ");
                        fireCounter();
                    </script>

                </transition>
                <transition value="4">
                    <script>
                        MessageBar.show(
"  左 ");
                        initCounter();
                    </script>

                </transition>
                <transition value="5">
                    <script>
                        MessageBar.show(
"上 左 ");
                        fireCounter();
                    </script>

                </transition>
                <transition value="6">
                    <script>
                        MessageBar.show(
" 下左 ");
                        fireCounter();
                    </script>

                </transition>
                <transition value="7">
                    <script>
                        MessageBar.show(
"上下左 ");
                        fireCounter();
                    </script>

                </transition>
                <transition value="8">
                    <script>
                        MessageBar.show(
"   右");
                        initCounter();
                    </script>

                </transition>
                <transition value="9">
                    <script>
                        MessageBar.show(
"上  右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="10">
                    <script>
                        MessageBar.show(
" 下 右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="11">
                    <script>
                        MessageBar.show(
"上下 右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="12">
                    <script>
                        MessageBar.show(
"  左右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="13">
                    <script>
                        MessageBar.show(
"上 左右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="14">
                    <script>
                        MessageBar.show(
" 下左右");
                        fireCounter();
                    </script>

                </transition>
                <transition value="15">
                    <script>
                        MessageBar.show(
"上下左右");
                        fireCounter();
                    </script>

                </transition>
            </state>
        </states>
    </partition>
</ujml>

ソースコード:
Download 140.zip

2006/07/10 カテゴリー: UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

UJMLサンプル139:英語→日本語 辞書のプロトタイプ

Samples_139_kana 何かを作るとしても、せっかくなら多くの人に使ってもらえる方がうれしいかなと感じるときもある。あるいは、日本人だけでなく世界中の人に使ってもらえるものがいいかなと感じるときもある。

 今回紹介するのは、プロトタイプ版だが、日本語を学ぶ世界中の人に使ってもらうことを目指した簡易版英日辞書である。課題は、多くの海外の携帯では日本語を表示できないということだ。

 そこで、ひらがなを画像ファイルで準備することにした。例えばこんな感じの画像である。

Kana_a_1

この画像を適宜切り取って表示するわけだ。まだ「あいうえお」しか準備していないので、まずは、Blueを翻訳する仕組みのみを実装した。動作サンプルはこちら。動作にはJavaが必要。

http://pts.app.uievolution.com/pubserv/vfs/3388/com.uiengineda.samples.139.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 CHAR_HEIGHT '13'>
   
<!ENTITY CHAR_WIDTH '12'>
]>

<!-- Copyright (c) 2006, uienginda.blogs.com -->
<!-- http://uienginda.blogs.com UJMLサンプル139:英語→日本語 辞書のプロトタイプ -->
<!-- http://pts.app.uievolution.com/pubserv/vfs/3388/com.uiengineda.samples.139.html -->
<ujml>
    <application>
        <state-machines>
            <include file="../components/background.ujms" state-machine="Background" />
        </state-machines>
        <state-variables>
            <state-var name="sStatus" type="int"/>
        </state-variables>
        <script>
            Background.init(&_COLOR_WHITE;,true);
            sStatus = 0;
        </script>

        <display>
        </display>
        <states>
            <state var="sStatus">
                <transition value="0">
                    <display>
                        <fn>
                            <text>F2 to get ANSWER.</text>
                            <event name="onSelect">
                               <accelerators><key>F2</key></accelerators>
                                  <script>
                                    _clear_state(sStatus);
                                    sStatus = 1;
                                  </script>

                            </event>
                        </fn>
                        <multi-label>
                            <text>What is "BLUE" in Japanese?</text>
                            <width><eval>_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;)</eval></width>
                            <height><eval>_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;)</eval></height>
                        </multi-label>
                    </display>
                </transition>
                <transition value="1">
                    <display>
                        <image>
                            <url><image-url>images/kana_a</image-url></url>
                            <src-x><eval>&CHAR_WIDTH; * 0</eval></src-x>
                            <src-y>0</src-y>
                            <x>0</x>
                            <y>0</y>
                            <width>&CHAR_WIDTH;</width>
                            <height>&CHAR_HEIGHT;</height>
                        </image>
                        <image>
                            <url><image-url>images/kana_a</image-url></url>
                            <src-x><eval>&CHAR_WIDTH; * 4</eval></src-x>
                            <src-y>0</src-y>
                            <x>&CHAR_WIDTH;</x>
                            <y>0</y>
                            <width>&CHAR_WIDTH;</width>
                            <height>&CHAR_HEIGHT;</height>
                        </image>
                        <fn>
                            <text>BACK</text>
                            <event name="onSelect">
                               <accelerators><key>F1</key></accelerators>
                                  <script>
                                    _clear_state(sStatus);
                                    sStatus = 0;
                                  </script>

                            </event>
                        </fn>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>

---

【おまけ】 変わった乗り物 未来的な乗り物とか映画に出てきそうな乗り物とか
Sports Vehicle Encyclopedia: strange vehicles
http://www.diseno-art.com/encyclopedia/strange_vehicles/strange_vehicles.html

2006/07/10 カテゴリー: UJML Samples, プロトタイプ | 個別ページ | コメント (0) | トラックバック (0)

UJMLサンプル138:135の同時押しコンポーネントの活用

Samples_138_keyupdown ボタン同時押しに対応するコンポーネントを以前紹介した。

UJMLサンプル135:ボタンの同時押し用コンポーネントを作る 最後

今回を含め、このコンポーネントの使い方を解説しつつ、必要であれば改良を加えていく予定だ。

※このエントリーは初めて本ブログに来た方が読むには敷居が高い。まずは、初心者向けまとめページに目を通すことをおすすめする。

 前回紹介したときのソースコード 135_main.ujml には、ユーザーの入力を受けて画面下部「上下左右」と表示されるようにしていた。まず、今回はユーザーの入力を受け表示する部分を別のパーティションとして切り分ける。これは切り分けることで今後の改良をやりやすくするためだ。切り分けてスリムになった138_main.ujmlは以下の通り。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>

<!-- http://uienginda.blogs.com UJMLサンプル138:135の同時押しコンポーネントの活用 -->
<ujml>
    <application>
        <state-machines>
            <include file="bottommessagebar.ujms" state-machine="MessageBar" />
        </state-machines>
        <state-variables>
            <state-var name="sButtonStatus" type="int" access="export"/>
        </state-variables>
        <script>
            _link(
"controler","cursor_controler.ujbc");
            _link(
"message","message_view.ujbc");
        </script>

    </application>
</ujml>

_link()により新しく作成したパーティション、message_view.ujml へリンクしている。新しく作成した message_viw.ujml は以下の通り。これで、今後はこのファイルの内容を変更することでユーザー入力に対するエフェクトを作成することができる。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN" "../ujml.dtd" [
]>

<!-- http://uienginda.blogs.com メッセージ表示用 -->
<ujml>
    <partition>
        <state-machines>
            <include file="bottommessagebar.ujms" state-machine="MessageBar" />
        </state-machines>
        <state-variables>
            <state-var name="sButtonStatus" type="int" access="import"/>
        </state-variables>
        <states>
            <state var="sButtonStatus">
                <transition value="0">
                    <script>
                        MessageBar.show(
"");
                    </script>

                </transition>
                <transition value="1">
                    <script>
                        MessageBar.show(
"上   ");
                    </script>

                </transition>
                <transition value="2">
                    <script>
                        MessageBar.show(
" 下  ");
                    </script>

                </transition>
                <transition value="3">
                    <script>
                        MessageBar.show(
"上下  ");
                    </script>

                </transition>
                <transition value="4">
                    <script>
                        MessageBar.show(
"  左 ");
                    </script>

                </transition>
                <transition value="5">
                    <script>
                        MessageBar.show(
"上 左 ");
                    </script>

                </transition>
                <transition value="6">
                    <script>
                        MessageBar.show(
" 下左 ");
                    </script>

                </transition>
                <transition value="7">
                    <script>
                        MessageBar.show(
"上下左 ");
                    </script>

                </transition>
                <transition value="8">
                    <script>
                        MessageBar.show(
"   右");
                    </script>

                </transition>
                <transition value="9">
                    <script>
                        MessageBar.show(
"上  右");
                    </script>

                </transition>
                <transition value="10">
                    <script>
                        MessageBar.show(
" 下 右");
                    </script>

                </transition>
                <transition value="11">
                    <script>
                        MessageBar.show(
"上下 右");
                    </script>

                </transition>
                <transition value="12">
                    <script>
                        MessageBar.show(
"  左右");
                    </script>

                </transition>
                <transition value="13">
                    <script>
                        MessageBar.show(
"上 左右");
                    </script>

                </transition>
                <transition value="14">
                    <script>
                        MessageBar.show(
" 下左右");
                    </script>

                </transition>
                <transition value="15">
                    <script>
                        MessageBar.show(
"上下左右");
                    </script>

                </transition>
            </state>
        </states>
    </partition>
</ujml>

2006/07/08 カテゴリー: UJML Samples | 個別ページ | コメント (0) | トラックバック (0)

»

UIEngine/UJML初心者向け

  • 01 初心者向けまとめページ
  • 02 UJMLサンプル一覧(001-025)
  • 03 UJMLサンプル一覧(026-050)
  • 04 UJMLサンプル一覧(051-075)
  • 05 UJMLサンプル一覧(076-100)
  • 06 UJMLサンプル一覧(101-125)
  • 07 学ぶ前に読む10の記事
  • 08 UIEに入りたい人用10の記事
  • 09 UIEngine関連10のブログ

最近の記事

  • 2013年になっておりました
  • 2010年もあと少しですね
  • Bellevue
  • 事業の譲渡とか情けとか
  • Google App Engine Java と Axis
  • プログラミングの楽しさ
  • いろんな変化とか - linkedin 使えない -
  • More Joel on Software
  • 浦島太郎とチップスター
  • 自分の足跡について考えてみた tracのtimelineとGoogleの検索履歴

ブログリンク

  • HOW DO YOU LIKE SILICON VALLEY?
  • It's not about the DBMS

カテゴリー

  • centos
  • FlashLite^^
  • gnizr
  • JAVA
  • PHP
  • Pligg
  • SDKを使い込む
  • Seasar
  • UIEngine 疑問
  • UIEngine注目指数
  • UJML Samples
  • UJML Source解説
  • UJML 初心者向け
  • wordpress
  • ひたすら開発
  • インサイド UJML
  • ブログ(お知らせ)?
  • プログラム
  • プロトタイプ
  • ユーザーインターフェース
  • 働きやすい環境整備\(^^)/
  • 勉強while(true)
  • 技術全般++;

おまけ

フィードを購読
Blog powered by TypePad

アーカイブ

  • 1 月 2013
  • 12 月 2010
  • 6 月 2010
  • 4 月 2010
  • 11 月 2009
  • 10 月 2009
  • 6 月 2009
  • 5 月 2009
  • 1 月 2009
  • 12 月 2008

もっと見る