インサイド UJML
バージョン 1.5 - 2006/06/23
Copyright 2001-2006 by UIEvolution, Inc. All rights reserved.
はじめに
本ガイドは UjinnMarkup Language(UJML) を使用し、携帯電話やPDA、パソコン、そして組み込み機器などのプラットフォームにおいてアプリケーションの開発と配布を簡単に行う方法に興味がある人のためのガイドです。
本ガイドは簡単なゲーム・アプリケーションの書き方について説明するチュートリアル形式をとっています。チュートリアルにおける各ステップでは、ゲーム開発における UJML の概念を１つずつ紹介しています。本ガイドはまた、UJML の概念に関する一般的なヒントも提供しています。
UJML のメリット
UJML を使用すると、リッチなユーザ体験を与えるアプリケーションを他のどんなテクノロジーよりも多くの人々に対して提供することが出来ます。
小さなデバイスでも豊かなユーザ体験
UJML は2つのことを実現するため、ミニマリストな思想で設計されています。1つは UJML のバイトコードを実行する UIE Player のサイズを小さくすること。UIE Player は Java 対応端末において 30KB 程度に収められています。もう1つはシンプルかつ習得が容易なプログラミング言語を実現すること。UJML はミニマリストな設計思想を採っているにも関わらず、リッチなユーザ体験を提供するアプリケーションの開発を実現しています。
簡単に学べる
UJML は ECMA Script（JavaScript）のサブセットをサポートする、XMLベースのプログラミング言語です。
Hello World! の例
次に、画面上に「Hello World」と表示するアプリケーションを紹介します。この例では UJML、Java（J2ME/MIDP）、C++（BREW）の各言語を使って Hello World を記述しています。Symbian、Palm OS、そして Pocket PC バージョンは複雑さにおいて BREW バージョンに似ているため省略しています。また HTML と WML バージョンは簡単さにおいて UJML と似ているので、やはり省略しています。
この比較では UJML のシンプルさをモバイル用の他のプログラム言語と比較説明しています。UJML では特定の処理を記述するためのコーディング量が少なくて済むだけでなく、言語を学び、理解し、熟練するために必要な言語コンセプトが単純かつ簡潔になっています。
UJML 版：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.1//EN" "ujml.dtd">
<ujml>
<application>
<display>
<label>
<text>Hello world</text>
</label>
</display>
</application>
</ujml>
J2ME/MIDP 版：
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
public class HelloWorld extends MIDlet implements CommandListener
{
private Command exitCommand; // The exit command
private Display display; // The display for this MIDlet
public HelloWorld()
{
display = Display.getDisplay(this);
exitCommand = new Command("Exit", Command.SCREEN, 2);
}
public void startApp()
{
TextBox t = new TextBox("", "Hello World", 256, 0);
t.addCommand(exitCommand);
t.setCommandListener(this);
display.setCurrent(t);
}
public void pauseApp()
{
}
public void destroyApp(boolean unconditional)
{
}
public void commandAction(Command c, Displayable s)
{
if (c == exitCommand)
{
destroyApp(false);
notifyDestroyed();
}
}
}
BREW 版：
#include "AEEModGen.h" // Module interface definitions
#include "AEEAppGen.h" // Applet interface definitions
#include "AEEShell.h" // Shell interface definitions
#include "AEEDisp.h" // Display interface defintions
#include "helloworld.bid" // applet class ID
#include "AEEFile.h" // AEEFile Services
static boolean HelloWorld_HandleEvent(IApplet * pi, AEEEvent eCode, uint16 wParam, uint32 dwParam);
int AEEClsCreateInstance(AEECLSID ClsId,IShell * pIShell,IModule * po,void ** ppObj)
{
*ppObj = NULL;
if(ClsId == AEECLSID_HELLOWORLD)
{
if(AEEApplet_New(sizeof(AEEApplet), ClsId, pIShell,po,(IApplet**)ppObj,
(AEEHANDLER)HelloWorld_HandleEvent,NULL) == TRUE)
{
return (AEE_SUCCESS);
}
}
return (EFAILED);
}
static boolean HelloWorld_HandleEvent(IApplet * pi, AEEEvent eCode, uint16 wParam, uint32 dwParam)
{
AEEDeviceInfo di;
AECHAR szBuf[] = {'H','e','l','l','o',' ','W','o', 'r', 'l', 'd', '\0'};
AEEApplet * pMe = (AEEApplet*)pi;
switch (eCode)
{
case EVT_APP_START:
ISHELL_GetDeviceInfo (pMe->m_pIShell, &di);
IDISPLAY_ClearScreen (pMe->m_pIDisplay);
IDISPLAY_DrawText(pMe->m_pIDisplay, AEE_FONT_BOLD, szBuf, -1, 0, 0, 0, IDF_ALIGN_CENTER | IDF_ALIGN_MIDDLE);
IDISPLAY_Update (pMe->m_pIDisplay);
return(TRUE);
case EVT_APP_STOP:
return TRUE;
default:
break;
}
return FALSE;
}
マルチプラットフォーム対応
UIE Player は次のプラットフォームに対応しています：
ｷ Java
o J2ME/MIDP (AT&T, Sprint)
o J2ME/DoJa (NTT DoCoMo 504i 以降)
o Personal Java
o J2SE (Applet/Application)
ｷ BREW (Verizon、 All-Tel、au/KDDI)
ｷ Danger Hiptop
ｷ Palm OS 3.5 以降
ｷ Pocket PC
ｷ Symbian
ｷ Win32 ActiveX
ｷ ゲームボーイアドバンス（プロトタイプ）
クライアント／サーバ型アプリケーションのサポート
UJML ではアプリケーションとリソースの読み込みに URL を使用します。UJML のプログラミングモデルはスタンダローンのプリインストールアプリケーションだけでなく、動的なクライアントサーバ型ネットワークアプリケーションも簡単に作成できるように設計されています。UIE Playerは、相対パスの URL に加え http と file の2つのスキーマに対応しています。
優れたセキュリティ
UJML アプリケーションは UIE Player が実行します。UIE Player は欠陥や悪意のあるアプリケーションからデバイスを守り、クラッシュしたアプリケーションをアンロードします。この "sandbox" 機能は、UJML アプリケーション同士を互いから保護するだけでなく、悪意のあるアプリケーションによるデバイスへのダメージを制限します。
デフォルトでは、UJML アプリケーションからファイルシステムや電話帳、電話の音声発呼などのデバイス機能にアクセスすることはできません。デバイスの機能やリソースへのアクセスを開放したカスタマイズ版の UIE Player では、 UIE Player の設定を通じて柔軟なセキュリティポリシーを実現しています。このセキュリティポリシーを使用すると信頼できる UJML アプリケーションやパーティションによるリソースへのアクセスを限定することができます。UIE Player は、HTML/HTTP ブラウザ上でのクッキーセキュリティに似た、URL ベースのシンプルなセキュリティポリシーを備えています。
インストール不要のアプリケーションモデルを提供
アプリケーションのインストール管理からユーザーを解放するため、UIE Player ではデバイスにローカルな記憶装置をアプリケーションのキャッシュとして使うことができます。キャッシュに存在しないアプリケーションはUIE Player がネットワークから取得します。キャッシュが一杯になった場合、アプリケーションは古い順にキャッシュから捨てられます。
この仕組みはデバイスの運用コストを大幅に下げます。理由は、アプリケーションの保守と配布をサーバー側で行うため、デバイス上におけるアプリケーション管理が不要となるからです。この仕組みはまた、アプリケーションのアップデートを透過的に配布することを可能にします。アップデートを配布するには新しいバージョンをサーバに配備します。新しいバージョンは、ユーザーがアプリケーションを実行すると自動的に読み込まれます。
UJML のアーキテクチャ
UJML は UJML DTDに準拠する XML ベースのマークアップ言語です。この言語ではビジュアルステートの記述を通じて画面表示を行います。またステートには UIE Player がステート間を遷移する際の動作を制御する、実行コードのブロックを記述します。
UJML は UIE Player と呼ばれる小さなアプリケーション（HTMLブラウザと同等のものと考えてください）によってデバイス上に表示されます。「Browser（ブラウザ）」ではなく「Player（プレイヤー）」という言葉を用いるのは、HTML コンテンツのほとんどが静的なページであるのに対し、UJML アプリケーションがアクティブかつ動的であることに由来しています。UJML は通常の HTML ではなく、スクリプティングによるアクティブかつ動的なコンテンツをサポートする Dynamic HTML（DHTML）に似ているといえるでしょう。
他のマークアップ言語ブラウザと異なり、UIE Player は UJML テキストファイルを直接表示しません。パフォーマンスの最大化とリソース消費（CPUとメモリ）の効率化を図るために、UJML テキストファイルは UIE Player が処理可能なバイトコードファイルにコンパイルする必要があります。コンパイラは UJML テキストファイルを効率の高い実行形式にコンパイルします。その際、元の UJML テキストファイルを小さなサイズに圧縮し、高コストかつ帯域の限られたワイヤレスネットワーク上での通信能率を高めます。
スタティック VS ダイナミック
コンパイラは UJBC ファイルと呼ばれるコンパイル済みの UJML ファイルをオフラインで作成することができます。 コンパイラはまた、サーバにインストールすることによりオンデマンドなコンパイルが可能になります。 次の2つの図では、UJML アプリケーションを開発し配布する際に行う作業をそれぞれのケースに当てはめて解説しています。 最初の図ではオフラインでコンパイルしたアプリケーションをデバイスにプリインストールしています。 次の図ではデバイスからのリクエストに応じて、サーバー側でアプリケーションを動的にコンパイルしています。 この2つはコンパイル方法の二極端ですが、これ以外にも多くのバリエーションが存在します。
図：コンパイル済ファイルによるアプリケーションの配布
図：ダイナミックコンパイルによるアプリケーションの配布
この2つの配布モデルに対応するために、UIE Player は http と file の両 URL スキームに対応しています。
UIE Player は HTML ブラウザと同様に履歴機能を備えています。履歴とは、実行中の UJML アプリケーションから直前のアプリケーションに戻れることを意味しています。アプリケーションを起動するには _run() 関数を使用します。その際、起動順に応じてアプリケーションがヒストリースタックに追加されます。アプリケーションをアンロードするには _unload() 関数を使用します。アンロードしたアプリケーションはスタックから消去され、直前に実行されていたアプリケーションが再起動されます。デバイス上で起動した UIE Player が最初に実行すべきアプリケーション URL の設定方法や記述方法はプラットフォームに依存します。これは、本ドキュメントのアプリケーション・デプロイメントの章で説明しています。
パーティション
複数の HTML ページからウェブサイトを構築できるのと同様に、UJML アプリケーションを複数のパーティションから構成することが可能です。_run() 関数によって読み込むパーティションはアプリケーションの「メインパーティション」あるいは「親パーティション」と呼ばれます。_link() 関数で読み込み、_unlink() 関数でアンロードするパーティションは子パーティションと呼ばれます。これらの関数の名前はバイナリ形式の実行アプリケーションや DLL などの命名規則に沿って命名されています。UJML パーティションは利用方法によって HTML ページとバイナリ DLL の両特性を併せ持つことが出来ます。_link() 関数でリンクしたパーティションはヒストリースタックに追加されません。その代わり、このパーティションは呼び出し元の子パーティションとなり、親（呼び出し元）がアンロードされると共にアンロードされます。
メモリリソースを使用するパーティションはヒストリースタックの一番上にある現在のアプリケーションと、そこからリンクされているパーティションに限られます。アプリケーションがヒストリースタックの一番上でなくなった時に、そのアプリケーションが使用するすべてのメモリリソースは解放され、新しいアプリケーションによる使用が可能になります。
メモ：_run() 関数を呼びアプリケーションがヒストリースタックの一番上にロードされている間は、ロードが完了するまで現在のアプリケーションがメモリリソースを消費します。アプリケーションを開発する際は、新旧アプリケーションの両方がメモリに同時に収まるように設計してください。
この問題を回避する方法の一つに、メモリの消費量が少ない中間アプリケーション（ローダー）を 使用する方法があります。このドキュメントにある「AppSplash.ujml」の例を参照してください。
次の図は、以下のことが起こった後の UIE Player のヒストリースタックの状態を示しています：
1. UIE Player が App 1 をデフォルトのアプリケーションとして起動。 これにより、App 1 がヒストリースタックの一番下である0番目に格納される。
2. App 1 が App 2 を実行し、App 2 がヒストリースタックの一番上である1番目に格納される。
3. App 2 がパーティション Part A をリンク。
4. App 1 はこの時点でメモリを物理的に占有してないため、グレー表示。
App 2 が _unload() 関数を呼び、自身をアンロードする。 すると UIE Player は App 1 を再起動し、ヒストリースタックは次の図のようになる：
UIE Player はほとんどのデバイスにおいて UJML ファイルをローカルにキャッシュし、 ネットワーク経由の再取得を防いでいます。
UIE Player は多くのプラットフォームにおいて 「プロパティバッグ」という形式で ローカルで持続的なストレージを提供しています。 アプリケーションはプロパティバッグを通じて少量のデータを端末に保存することにより、 自身の状態の一部を保存することができます。
アプリケーション開発
次のセクションでは、Ujinn[1]という ゲームの開発を通じて UJML の機能を説明します。このゲームは「SameGame」というゲームがベースになっており、 次のような基本仕様を持っています。
アプリケーション名：ujinn
目的：
グリッドから可能な限りのボックスを取り除き、スコアを最大にすること。
遊び方：
上下左右に同色のボックスが1つ以上ある場合、
それらのボックスを選択して取り除くことができます。
ボックスとボックスは隣接してなければなりません。
得点の計算方法：
ボックスを取り除くと(n) * (n - 1) が得点に加算されます。
n は同時に消したボックスの数を示します。
ゲーム終了時に残っているボックスの数はペナルティとして減点されます。
すべてのボックスを取り除いた場合はボーナスとして(mScore / 4)が与えられます。
次のスクリーンショットは、ゲームレイアウトと動作を示しています。
プレイヤーが現在のボックス（左上）を選択したため、黄色のボックスと右側に隣接する２つの黄色いボックスが消えます。
SDK
以降の各セクションでは、数多くの UJML サンプルを紹介しています。 これらの UJML はすべて「Ujinn」の開発に寄与しています。UJML のサンプルは、 このドキュメントに同梱されているファイルに収められています。 是非、SDK をインストールして SDK に同梱されているサンプルを実行してみてください。
インストール
UIE SDK のインストール方法：
1.
Java(TM) 2 Platform Standard Editionのインストール
サン・マイクロシステムズのJ2SEは「java.sun.com/j2se」で提供されています。
サンのウェブサイトの使用説明書に従ってJ2SE Software Development Kitをダウンロードし、インストールしてください。
2.
環境変数「JAVA_HOME」を、J2SE SDK のルートディレクトリに設定してください。
デフォルトでは「C:\j2sdk1.4.1_01」です。環境変数の設定については
こちらをご覧ください。
3.
UIE SDK のインストーラを実行してください。
UIE SDK は www.uievolution.com からダウンロードしてください。
アプリケーション
最も小さな UJML アプリケーションの例：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd">
<ujml>
<application>
</application>
</ujml>
ファイル名：Application.ujml
次の手順を行い、UIE SDK Debugger でこのアプリケーションを実行します：
1. デバッガを起動。「スタート>プログラム>UIEvolution SDK」中の「UIEデバッガ起動」を選択。
2. アプリケーション選択ダイアログで設定を行う。
a. Application.ujml へのパスを入力。 もしInside UJML ZIPファイルを「D:\My Documents\Inside UJML」に展開した場合は URLに「file:///D:\My Documents\Inside UJML\UJML\Application.ujml」と入力 （「参照」ボタンを使って、ファイルを指定することも可能）。
b. スキンの選択で「Flip Phone, MIDP (136x140)」を選択。
c.
OK をクリック。
3.
ツールバーの Run ボタンをクリック。
4. デバイスエミュレータに次のような画面が表示される：
画面表示
Ujinn は縦横の枠を使ったゲームであるため格子状のボックスを表示する必要があります。 またスクリーン最上部に現在のスコアとレベルなどの成績を表示します。
<display> 要素を使用すると、画面への描画を簡単に行うことができます。ここではボックスと「Score」のテキストを描いています：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd">
<ujml>
<application>
<display>
<label>
<text>Score</text>
<x>2</x>
<y>2</y>
<fg>&_COLOR_BLUE;</fg>
</label>
<box>
<x>5</x>
<y>20</y>
<width>30</width>
<height>50</height>
<fg>&_COLOR_RED;</fg>
<bg>&_COLOR_GREEN;</bg>
</box>
</display>
</application>
</ujml>
ファイル： Display.ujml
SDK デバッガ上で Display.ujml を実行すると、エミュレータが次の結果を返します：
この例ではデフォルトの <display> 要素を使っています。 デフォルトの <display> の内容は更新することができないため、 静的な背景画像などの表示に向いています。
ステート
UJML で動的な画面表示を行うには <display> 要素を追加で記述します。 プログラムを通じてステート変数の値の更新するとこれらの要素を制御（表示、更新、非表示）することができます。
UJML のステートは変数が取り得る値のそれぞれにつき1つ以上の <display> 要素を関連づけます。 例えばブーリアン変数は２つの値を取り得るため、true と false の2つの状態を表すことができます。 UJMLでは、これらの値もしくはステートごとに<display> 要素を定義することが出来ます。
次の例では、ブーリアン型のステート変数 sBox が true の値を取った場合の <display> 要素が１つ定義しています。 sBox が true に設定されると画面上にボックスが表示されます。 逆に false にセットされた場合、false に定義づけられた <display> が存在しないためボックスが非表示となります。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.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>5</x>
<y>20</y>
<width>30</width>
<height>50</height>
<fg>&_COLOR_RED;</fg>
<bg>&_COLOR_GREEN;</bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル： DisplayState.ujml
この例を実行すると次のような画面が表示されます：
次の例ではさきほどの Display.ujml を変更し、 <display> 要素をテキストとボックスのそれぞれに分割して記述しています。 分割により、テキストとボックスのそれぞれに対応するステート変数を true または false に設定し 各々を独立して表示・非表示することが可能になりました。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd">
<ujml>
<application>
<state-variables>
<state-var name="sScore" type="boolean"/>
<state-var name="sBox" type="boolean"/>
</state-variables>
<script>
sScore = true;
sBox = true;
</script>
<states>
<state var="sScore">
<transition value="true">
<display>
<label>
<text>Score</text>
<x>2</x>
<y>2</y>
<fg>&_COLOR_BLUE;</fg>
</label>
</display>
</transition>
</state>
<state var="sBox">
<transition value="true">
<display>
<box>
<x>5</x>
<y>20</y>
<width>30</width>
<height>50</height>
<fg>&_COLOR_RED;</fg>
<bg>&_COLOR_GREEN;</bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル： DisplayStates.ujml
UJML とステートについて覚えておくべき最も重要なこと：
画面表示を更新する唯一の方法は、 <display> 要素を含むステート変数の値を変更すること。
ステート変数に現在の値を再度設定しても表示に影響を与えません。 画面を書き換えるには、値を書き換えなければなりません 。 [2] これはブーリアン型の変数よりも整数型のステート変数のほうがパワフルなことを意味しています。 非表示の状態が必要な場合、ブーリアン型ステート変数では通常、値が true の場合に表示を行い、 false の場合に非表示を行います。そのため実質1種類の <display> 要素しか持てません。
Z-order
<display> 要素は Z-ORDER に応じて背面から前面に重ねられ、ディスプレイ上に描画されます。 これは <display> 要素が UJML ソースファイルに出現する順序に一致しています。 デフォルトの <display> は Z-ORDER が低く最背面に描画されます。 ファイルの最後に記述する <display> は Z-ORDER が高く最前面に描画されます [3]。
次の例では DisplayStates.ujml に2つのボックスと背景を追加しています。 また UJML の配列の作成と使い方についても紹介しています。 sBox は前回のサンプルにおいては単純なブーリアン型の変数でしたが、 ここでは個別表示が可能なように要素数が3つのブーリアン型の配列になっています。 最後に、このプログラムではビジュアル要素の ARGB（アルファ、赤、緑、青）の値を指定する方法を紹介しています。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd">
<ujml>
<application>
<state-variables>
<state-var name="sScore" type="boolean"/>
<state-var name="sBox" type="boolean" size="3"/>
</state-variables>
<script>
sScore = true;
sBox[ 0 ] = true;
sBox[ 1 ] = true;
sBox[ 2 ] = true;
</script>
<display>
<box>
<width>136</width>
<height>140</height>
</box>
</display>
<states>
<state var="sScore">
<transition value="true">
<display>
<label>
<text>Score</text>
<x>2</x>
<y>2</y>
<fg>&_COLOR_BLUE;</fg>
</label>
</display>
</transition>
</state>
<state var="sBox" index="0">
<transition value="true">
<display>
<box>
<x>5</x>
<y>20</y>
<width>30</width>
<height>50</height>
<fg>0xffcccccc</fg>
<bg>0xffcccccc</bg>
</box>
</display>
</transition>
</state>
<state var="sBox" index="1">
<transition value="true">
<display>
<box>
<x>10</x>
<y>25</y>
<width>30</width>
<height>50</height>
<fg>0xff999999</fg>
<bg>0xff999999</bg>
</box>
</display>
</transition>
</state>
<state var="sBox" index="2">
<transition value="true">
<display>
<box>
<x>15</x>
<y>30</y>
<width>30</width>
<height>50</height>
<fg>0xff666666</fg>
<bg>0xff666666</bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル： DisplayZOrder.ujml
プログラムの実行結果：
アプリケーションロジック
これまでの例では UJML を使って画面に物を表示する方法を解説してきました。また <scirpt> 要素を使ったプログラムロジックの表現方法も垣間見ることができたと思います。UJML は変数、算術式、論理・ブーリアン式、文字列式、フロー制御文、関数とイベントをサポートしています。
変数
これまでの例では、ステート変数の宣言方法と使用方法を紹介しました。ステート変数はステート遷移に対応するための内部的なオーバーヘッドを持っています。 そこで UJML はステートを持たない単純変数も備えています。 ステート変数と単純変数は他のプログラム言語の変数と同様、式や実行文に使用することができます。
次の例では、スコアの値とボックスの色を格納するための変数を追加しています。また XML エンティティ定義を使用した定数の宣言とディスプレイ要素における変数と定数の使い方を紹介しています。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd" [
<!ENTITY MAX_BOXES "3">
<!ENTITY BOX_WIDTH "30">
<!ENTITY BOX_HEIGHT "50">
]>
<ujml>
<application>
<state-variables>
<state-var name="sScore" type="boolean"/>
<state-var name="sBox" type="boolean" size="&MAX_BOXES;"/>
</state-variables>
<variables>
<var name="mScore" type="int"/>
<var name="mBox" type="int" size="&MAX_BOXES;"/>
</variables>
<script>
mScore = 0;
sScore = true;
mBox[ 0 ] = 0xffcccccc;
sBox[ 0 ] = true;
mBox[ 1 ] = 0xff999999;
sBox[ 1 ] = true;
mBox[ 2 ] = 0xff666666;
sBox[ 2 ] = true;
</script>
<display>
<box>
<width>136</width> <height>140</height>
</box>
</display>
<states>
<state var="sScore">
<transition value="true">
<display>
<label>
<text><eval>mScore</eval></text>
<x>2</x> <y>2</y>
<fg>&_COLOR_BLUE;</fg>
</label>
</display>
</transition>
</state>
<state var="sBox" index="0">
<transition value="true">
<display>
<box>
<x>5</x> <y>20</y>
<width>&BOX_WIDTH;</width>
<height>&BOX_HEIGHT;</height>
<fg><eval>mBox[ 0 ]</eval></fg>
<bg><eval>mBox[ 0 ]</eval></bg>
</box>
</display>
</transition>
</state>
<state var="sBox" index="1">
<transition value="true">
<display>
<box>
<x>10</x> <y>25</y>
<width>&BOX_WIDTH;</width>
<height>&BOX_HEIGHT;</height>
<fg><eval>mBox[ 1 ]</eval></fg>
<bg><eval>mBox[ 1 ]</eval></bg>
</box>
</display>
</transition>
</state>
<state var="sBox" index="2">
<transition value="true">
<display>
<box>
<x>15</x> <y>30</y>
<width>&BOX_WIDTH;</width>
<height>&BOX_HEIGHT;</height>
<fg><eval>mBox[ 2 ]</eval></fg>
<bg><eval>mBox[ 2 ]</eval></bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル：Variables.ujml
表示結果：
スクリプト
UJMLはアプリケーションのフロー制御と式の評価のために ２つのスクリプト言語をサポートしています。 ここまでの例では、 UJML が対応している ECMA スクリプト（JavaScript）のサブセットを使っていました。 JavaScript は <script> 要素に記述します。 C、C++、Java そして JavaScript のようなプログラミング言語に精通した人であれば、 UJML アプリケーション内で JavaScript を記述するやり方が使いやすいでしょう。
UJML はまた、JavaScript と同等の機能を持ち、かつ、XML 構文を維持する UJML スクリプトにも対応しています。 UJML スクリプトは <execute> 要素に記述します。 プログラマーが前述のプログラミング言語に精通してない場合は、UJML スクリプトの学習から始めるほうが楽でしょう。 しかし UJML スクリプトは冗長になりがちであるため、複雑な計算やプログラムのフロー制御を 行う場合にコードの可読性が悪くなってしまいます。アプリケーションのプログラムロジックが 複雑になる場合は、JavaScript の方が簡単であると言えるでしょう。
次の例では JavaScript と UJML スクリプトが同等であることを示しています。 これ以外の例は全て JavaScript を使っています。
この例は前回の Variables.ujml の UJML スクリプト版です：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd" [
<!ENTITY MAX_BOXES "3">
<!ENTITY BOX_WIDTH "30">
<!ENTITY BOX_HEIGHT "50">
]>
<ujml>
<application>
<state-variables>
<state-var name="sScore" type="boolean"/>
<state-var name="sBox" type="boolean" size="&MAX_BOXES;"/>
</state-variables>
<variables>
<var name="mScore" type="int"/>
<var name="mBox" type="int" size="&MAX_BOXES;"/>
</variables>
<execute>
<set var="mScore">0</set>
<set-state var="sScore">true</set-state>
<set var="mBox">
<index>0</index>
<val>0xffcccccc</val>
</set>
<set-state var="sBox">
<index>0</index>
<val>true</val>
</set-state>
<set var="mBox">
<index>1</index>
<val>0xff999999</val>
</set>
<set-state var="sBox">
<index>1</index>
<val>true</val>
</set-state>
<set var="mBox">
<index>2</index>
<val>0xff666666</val>
</set>
<set-state var="sBox">
<index>2</index>
<val>true</val>
</set-state>
</execute>
<display>
<box>
<width>136</width>
<height>140</height>
</box>
</display>
<states>
<state var="sScore">
<transition value="true">
<display>
<label>
<text>
<ref var="mScore"/>
</text>
<x>2</x>
<y>2</y>
<fg>&_COLOR_BLUE;</fg>
</label>
</display>
</transition>
</state>
<state var="sBox" index="0">
<transition value="true">
<display>
<box>
<x>5</x>
<y>20</y>
<width>&BOX_WIDTH;</width>
<height>&BOX_HEIGHT;</height>
<fg>
<ref var="mBox">
<index>0</index>
</ref>
</fg>
<bg>
<ref var="mBox">
<index>0</index>
</ref>
</bg>
</box>
</display>
</transition>
</state>
<state var="sBox" index="1">
<transition value="true">
<display>
<box>
<x>10</x>
<y>25</y>
<width>&BOX_WIDTH;</width>
<height>&BOX_HEIGHT;</height>
<fg>
<ref var="mBox">
<index>1</index>
</ref>
</fg>
<bg>
<ref var="mBox">
<index>1</index>
</ref>
</bg>
</box>
</display>
</transition>
</state>
<state var="sBox" index="2">
<transition value="true">
<display>
<box>
<x>15</x>
<y>30</y>
<width>&BOX_WIDTH;</width>
<height>&BOX_HEIGHT;</height>
<fg>
<ref var="mBox">
<index>2</index>
</ref>
</fg>
<bg>
<ref var="mBox">
<index>2</index>
</ref>
</bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル： UJMLscript.ujml
式
UJML はプログラマーが一般的に利用する数値演算、論理演算、そして文字列演算の演算子をサポートしています。 式は、値と変数の参照が許されている UJML 要素内とスクリプト内に記述することができます。この場合、式は UJML スクリプトあるいは <eval> 要素内の JavaScript でなければなりません。 またUJMLではすべての属性値はスタティックな定数であるため、UJML 要素の属性値に式を記述することはできません。
次の表では式の正しい使い方と誤った使い方の例を紹介しています：
|
正しい使い方 |
誤った使い方 |
|
<script> x = y * 3; </script>
<box> <width><eval>w / 3</eval></width> <height><eval>h / 3</eval></height> </box> |
<state var= x + y index= z / 8 >
|
関数
UJML は数多くのユティリティ関数を備えています。 これらの関数に加え、独自の関数を定義することも出来ます。
次の例ではデバイスの画面サイズに合わせたダイナミックな画面レイアウトを行うために、 式と数種類のビルトイン関数を利用しています。 またこの例では「デフォルト・ステート」という、配列型のステート変数の全要素に同一のステートを定義する機能の使い方を紹介しています。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd" [
<!ENTITY MAX_BOXES "3">
]>
<ujml>
<application>
<state-variables>
<state-var name="sScore" type="boolean"/>
<state-var name="sBox" type="boolean" size="&MAX_BOXES;"/>
</state-variables>
<variables>
<var name="mScore" type="int"/>
<var name="mBox" type="int" size="&MAX_BOXES;"/>
<var name="mTextHeight" type="int"/>
<var name="mScrWidth" type="int"/>
<var name="mScrHeight" type="int"/>
<var name="mBoxWidth" type="int"/>
<var name="mBoxHeight" type="int"/>
</variables>
<script>
mTextHeight = _text_height( 0, 0, 0 );
mScrWidth = _getIntProperty( &_PROPERTY_INT_SCREEN_WIDTH; );
mScrHeight = _getIntProperty( &_PROPERTY_INT_SCREEN_HEIGHT; );
mBoxWidth = mScrWidth / &MAX_BOXES;;
mBoxHeight = mScrHeight - mTextHeight;
mScore = 0;
sScore = true;
mBox[ 0 ] = 0xffcccccc;
sBox[ 0 ] = true;
mBox[ 1 ] = 0xff999999;
sBox[ 1 ] = true;
mBox[ 2 ] = 0xff666666;
sBox[ 2 ] = true;
</script>
<display>
<box>
<width> <eval>mScrWidth</eval> </width>
<height> <eval>mScrHeight</eval> </height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
</box>
</display>
<states>
<state var="sScore">
<transition value="true">
<display>
<label>
<text> <eval>mScore</eval> </text>
<x>1</x> <y>1</y>
<fg>&_COLOR_YELLOW;</fg>
</label>
</display>
</transition>
</state>
次のサンプルコードでは配列型のステート変数 sBox のすべての要素を１つのデフォルトステートで定義しています。デフォルトステートを使う主な目的は、配列内の全ステートが同一である場合に UJML コードの記述量を減らすことにあります[4]。
<state var="sBox" index="*">
<transition value="true">
<display>
<box>
<x> <eval>_state_index() * mBoxWidth</eval> </x>
<y> <eval>mTextHeight</eval> </y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg> <eval>mBox[ _state_index() ]</eval> </fg>
<bg> <eval>mBox[ _state_index() ]</eval> </bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル： Functions.ujml
次のスクリーンショットはエミュレータで様々なデバイススキンを指定した場合の表示結果です：
アプリケーションは一般的に、デバイスの画面サイズを考慮した描画を行うことが望ましいとされています。縦長の画面と横長の画面の両方に対応するアプリケーションの開発は困難、あるいは不必要かもしれませんが、携帯電話の多くは画面のアスペクト比が同一であり、画面サイズのみが異なっています。少しの変更（また変更無し）で、多くのデバイスに対応することが狙いであるならば、特定のアスペクト比の画面に描画を最適化し、画面サイズの大小にも考慮すれば良い結果を得られるでしょう。
フロー制御
UJML はミニマリストな思想の元に設計されているため、用意されているフロー制御文は if と while に限られています。switch や for はサポートしていません。
次の例では while ループを使って配列中の全ボックスを表示します。ここでは各ボックスの x 軸方向の位置を計算するために関数を使用しています：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd" [
<!ENTITY MAX_BOXES "3">
]>
<ujml>
<application>
<state-variables>
<state-var name="sScore" type="boolean"/>
<state-var name="sBox" type="boolean" size="&MAX_BOXES;"/>
</state-variables>
<variables>
<var name="mScore" type="int"/>
<var name="mBox" type="int" size="&MAX_BOXES;"/>
<var name="mTextHeight" type="int"/>
<var name="mScrWidth" type="int"/>
<var name="mScrHeight" type="int"/>
<var name="mBoxWidth" type="int"/>
<var name="mBoxHeight" type="int"/>
<var name="i" type="int"/>
</variables>
<functions>
<function name="getX" type="int">
<parameters>
<var name="box" type="int"/>
</parameters>
<variables>
<var name="x" type="int"/>
</variables>
<script>
x = box * mBoxWidth;
</script>
<return>
<eval>x</eval>
</return>
</function>
</functions>
<script>
mTextHeight = _text_height( 0, 0, 0 );
mScrWidth = _getIntProperty( &_PROPERTY_INT_SCREEN_WIDTH; );
mScrHeight = _getIntProperty( &_PROPERTY_INT_SCREEN_HEIGHT; );
mBoxWidth = mScrWidth / &MAX_BOXES;;
mBoxHeight = mScrHeight - mTextHeight;
mScore = 0;
sScore = true;
mBox[ 0 ] = 0xffcccccc;
mBox[ 1 ] = 0xff999999;
mBox[ 2 ] = 0xff666666;
while (i < &MAX_BOXES;)
{
sBox[ i ] = true;
i = i + 1;
}
</script>
<display>
<box>
<width> <eval>mScrWidth</eval> </width>
<height> <eval>mScrHeight</eval> </height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
</box>
</display>
<states>
<state var="sScore">
<transition value="true">
<display>
<label>
<text> <eval>mScore</eval> </text>
<x>1</x> <y>1</y>
<fg>&_COLOR_YELLOW;</fg>
</label>
</display>
</transition>
</state>
<state var="sBox" index="*">
<transition value="true">
<display>
<box>
<x><eval>getX( _state_index() )</eval></x>
<y> <eval>mTextHeight</eval> </y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg> <eval>mBox[ _state_index() ]</eval> </fg>
<bg> <eval>mBox[ _state_index() ]</eval> </bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
イベント
ユーザ入力とシステムステータスの変更は、イベントを通じて UJML アプリケーションに伝えられます。
次の例ではファンクションキー F1 のイベントハンドラを定義しています。 ユーザーが F1 を押すと、イベントハンドラがアプリケーションをアンロードします。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd" [
<!ENTITY MAX_BOXES "3">
]>
<ujml>
<application>
<state-variables>
･･･
</state-variables>
<variables>
･･･
</variables>
<script>
･･･
</script>
<display>
<box>
<width> <eval>mScrWidth</eval> </width>
<height> <eval>mScrHeight</eval> </height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
</box>
<fn>
<text>Back</text>
<event name="onselect">
<accelerators>
<key>F1</key>
</accelerators>
<script>
_unload();
</script>
</event>
</fn>
</display>
<states>
･･･
</states>
</application>
</ujml>
ファイル： Events.ujml
メモ： F1 キーは「戻る」機能として使用することをお勧めします。 理由は、BREW などのプラットフォームがこの挙動を必要としているためと、 他のデバイスにおけるユーザインタフェース設計と親和性が高いためです。 例えば多くの携帯電話は「戻る」や「クリア」機能を持っており、 ソニーの CLIE も「戻る」ボタンを持っています。
イベントは、ビジュアル要素の <display> 要素にのみ関連づけることができます。
メモ： ビジュアル要素の必要ない場面でイベントハンドラを作成したい場合は、 空・透明の <box> 要素を利用します。
ステート
ステートには <display> 要素の定義だけでなく、ステートが有効（＝ステート変数が <tansition> 要素で指定の値に設定される）になった時に実行するアプリケーションロジックを定義することもできます。
次の例ではメッセージボックスを表示後、delay スクリプトを使って５秒後に非表示にします。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.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>5</x>
<y>20</y>
<width>30</width>
<height>50</height>
<fg>&_COLOR_RED;</fg>
<bg>&_COLOR_GREEN;</bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル； DisplayState.ujml
ステート変数 sMessageBox が true に設定されるとともに、UIE Player が以下のステート遷移を実行します。UIE Player はまず <display> 要素を処理し、画面描画を行うために内部で使用している「表示リスト」に <display> 要素を追加します。UIE Player は次に <scirpt> を処理します。しかし直前に <delay> 要素があるため <script> を実行する代わりに、実行を５秒後に遅延するキューに要素を追加します。
<state var="sMessageBox">
<transition value="true">
<display>
<multi-label>
<text>This is a message box.</text>
<x>10</x>
<y>30</y>
<width><eval>mScrWidth - 20</eval></width>
<height><eval>mScrHeight - 60</eval></height>
<fg>&_COLOR_LIME;</fg>
<bg>&_COLOR_MAROON;</bg>
</multi-label>
</display>
<delay>5000</delay>
<script>
sMessageBox = false;
</script>
</transition>
</state>
</states>
</application>
</ujml>
ファイル：ScriptStates.ujml
ステートの中の scipt の主な用途：
ｷ ロジックの遅延実行
ｷ ロジックの時間管理
ｷ アニメーション
テンプレート
Ujinn ゲームでは、ゲームフィールドに8×8のグリッドを使います。 そこで２次元の配列型ステート変数を使うようにサンプルアプリケーションを修正する必要があります。またボックスの色情報を格納するための配列を導入します。この配列の初期化は デバイスのカラー対応（カラーまたはグレースケール）に応じて後ほど行います。
太字は修正部分を表します：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd" [
<!ENTITY MAX_ROWS "8">
<!ENTITY MAX_COLS "8">
<!ENTITY MAX_COLORS "4">
]>
<ujml>
<application>
<state-variables>
<state-var name="sBoxes" type="boolean" size="&MAX_ROWS;,&MAX_COLS;"/>
･･･
</state-variables>
<variables>
<var name="mBoxes" type="int" size="&MAX_ROWS;,&MAX_COLS;"/>
<var name="mColorMap" type="int" size="&MAX_COLORS;"/>
<var name="r" type="int"/>
<var name="c" type="int"/>
･･･
</variables>
<script>
･･･
mColorMap[ 0 ] = 0xffcccccc;
mColorMap[ 1 ] = 0xff999999;
mColorMap[ 2 ] = 0xff666666;
mColorMap[ 3 ] = 0xff333333;
while (r < &MAX_ROWS;)
{
c = 0;
while (c < &MAX_COLS;)
{
mBoxes[ r ][ c ] = mColorMap[ (r + c) % &MAX_COLORS; ];
sBoxes[ r ][ c ] = true;
c = c + 1;
}
r = r + 1;
}
</script>
<display>
･･･
</display>
<states>
･･･
<state var="sBoxes" index="*,*">
<transition value="true">
<display>
<box>
<x> <eval>_state_index(1) * mBoxWidth</eval> </x>
<y>
<eval>mTextHeight + (_state_index(0) * mBoxHeight)</eval>
</y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg>
<eval>mBoxes[ _state_index(0) ][ _state_index(1) ]</eval>
</fg>
<bg>
<eval>mBoxes[ _state_index(0) ][ _state_index(1) ]</eval>
</bg>
</box>
</display>
</transition>
</state>
･･･
</states>
</application>
</ujml>
ファイル： ArrayStates.ujml
このアプリケーションを実行すると次のような画面が表示されます：
UIE SDK デバッガはアプリケーションのネットワークトラフィックについての 重要な情報を提供しています。 またネットワーククライアントとサーバ間の遅延やデータ転送の帯域をエミュレートする機能も備えています。アプリケーションのデータ転送量はデバッガの「リクエスト」タブに表示されます。 またグリッドを8×8に変更することによりアプリケーションサイズが大きくなっていることにもご注目ください。
サイズが増加した理由は、アプリケーションに61個のディスプレイステートを追加したからです。デフォルトステートを利用しているにも関わらずこのような結果になり、驚かれたかもしれません：
<state var="sBoxes" index="*,*">
<transition value="true">
<display>
<box>
<x> <eval>_state_index(1) * mBoxWidth</eval> </x>
<y>
<eval>mTextHeight + (_state_index(0) * mBoxHeight)</eval>
</y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg>
<eval>mBoxes[ _state_index(0) ][ _state_index(1) ]</eval>
</fg>
<bg>
<eval>mBoxes[ _state_index(0) ][ _state_index(1) ]</eval>
</bg>
</box>
</display>
</transition>
</state>
デフォルトステートは、同一のステートを持つステート変数から構成される配列を簡易なシンタックスで定義するための記述方法に過ぎません。デフォルトステートは、コンパイル時に64コの独立したステートに展開されます。従ってファイルサイズは大きくなります。
UJMLでは「ディスプレイテンプレート」というテンプレートを定義することができます。 ディスプレイテンプレートをディスプレイステートから参照すると UIE Player が展開します。テンプレートは前述の例のようにアプリケーションサイズを小さくする場合だけでなく、再利用可能なディスプレイ要素を定義する目的にも便利です。
次の例では、グリッド内の各ステートがテンプレートを利用するように、これまでのアプリケーションを改良しています：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "ujml.dtd"[
･･･
]>
<ujml>
<application>
<state-variables>
･･･
</variables>
<templates>
<template name="tBox">
<display>
<box>
<x> <eval>c * mBoxWidth</eval> </x>
<y> <eval>mTextHeight + (r * mBoxHeight)</eval> </y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg>
<eval>mBoxes[ r ][ c ]</eval>
</fg>
<bg>
<eval>mBoxes[ r ][ c ]</eval>
</bg>
</box>
</display>
</template>
</templates>
<script>
･･･
</script>
<display>
･･･
</display>
<states>
･･･
<state var="sBoxes" index="*,*">
<transition value="true">
<display>
<expand template="tBox"/>
</display>
</transition>
</state>
･･･
</states>
</application>
</ujml>
ファイル： Templates.ujml
テンプレートを使用したことによるファイルサイズの縮小にご注目ください：
この例では以前と同様に64個のディスプレイステートがあります。 しかし各ステートの中でディスプレイエレメントを直接記述していたところを テンプレートの参照に置き換えることにより、生成されるバイトコードを縮小しています。
メモ： テンプレートではグローバル変数しか参照できません。 テンプレートを使う際は、グローバル変数の値とステート遷移を同調させてください。 同調を実現する方法の1つに関数を使う方法があります。 テンプレートを使用するディスプレーステートの表示・非表示を行う際に ステート変数の設定を直接行わず、関数を介して行う、という方法です。 この関数ではテンプレートが必要とするグローバル変数の設定を行ってからディスプレイステートを有効にします。このテクニックは後の Ujinn ゲームの開発において使用します。
Ujinn
Ujinn ゲームを実装するために必要な UJML のパーツがそろいました。 それでは実際にゲームを作成しましょう。
グリッドの初期化
Ujinn では色をランダムに組み合わせてグリッドを作成します。 まずサンプルアプリケーションを修正し、グリッドの初期化を実装しましょう。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "../ujml.dtd" [
<!ENTITY and "&&">
<!ENTITY SCORE_ITEM_FG "&_COLOR_WHITE;">
<!ENTITY SCORE_ITEM_BG "0xff000066">
<!-- Limits -->
<!ENTITY MAX_ROWS "8">
<!ENTITY MAX_COLS "8">
<!ENTITY MAX_COLORS "4">
<!ENTITY CLEARING_COLOR "&_COLOR_WHITE;">
<!ENTITY CLEARED_COLOR "&_COLOR_TRANSPARENT;">
]>
<ujml>
<application>
<state-variables>
<state-var name="sBoxes" type="boolean" size="&MAX_ROWS;,&MAX_COLS;"/>
</state-variables>
<variables>
<var name="mTextHeight" type="int"/>
<var name="mScrHeight" type="int"/>
<var name="mScrWidth" type="int"/>
<var name="mBoxHeight" type="int"/>
<var name="mBoxWidth" type="int"/>
<var name="mColorMap" type="int" size="&MAX_COLORS;,2"/>
<var name="tBoxRow" type="int"/>
<var name="tBoxCol" type="int"/>
<var name="gSeed" type="int"/>
<var name="mBoxes" type="int" size="&MAX_ROWS;,&MAX_COLS;,2"/>
</variables>
<functions>
<function name="setColorMapEntry" type="void">
<parameters>
<var name="entry" type="int"/>
<var name="color1" type="int"/>
<var name="color2" type="int"/>
</parameters>
<script>
mColorMap[ entry ][ 0 ] = color1;
mColorMap[ entry ][ 1 ] = color2;
</script>
</function>
<function name="setupColorMap" type="void">
<script>
if (_getBooleanProperty( &_PROPERTY_BOOLEAN_COLOR_CAPABLE; ))
{
setColorMapEntry( 0, 0xffff0000, 0xffdd0000 );
setColorMapEntry( 1, 0xff00ff00, 0xff00dd00);
setColorMapEntry( 2, 0xff0000ff, 0xff0000dd);
setColorMapEntry( 3, 0xffffff00, 0xffdddd00);
}
else
{
setColorMapEntry( 0, 0xff000000, 0xffcccccc);
setColorMapEntry( 1, 0xff555555, 0xffcccccc);
setColorMapEntry( 2, 0xffaaaaaa, 0xffcccccc);
setColorMapEntry( 3, 0xffdddddd, 0xffcccccc);
}
</script>
</function>
<function name="start" type="void">
<variables>
<var name="row" type="int"/>
<var name="col" type="int"/>
</variables>
<script>
gSeed = _srand( 101 );
while (col < &MAX_COLS;)
{
row = 0;
while (row < &MAX_ROWS;)
{
mBoxes[row][col][0] = mColorMap[ gSeed % &MAX_COLORS; ][0];
mBoxes[row][col][1] = mColorMap[ gSeed % &MAX_COLORS; ][1];
tBoxRow = row;
tBoxCol = col;
sBoxes[ tBoxRow ][ tBoxCol ] = true;
gSeed = _srand( gSeed );
row = row + 1;
}
col = col + 1;
}
</script>
</function>
</functions>
<templates>
<template name="tBox">
<display>
<box>
<x> <eval>tBoxCol * mBoxWidth</eval> </x>
<y> <eval>tBoxRow * mBoxHeight + mTextHeight</eval> </y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg> <eval>mBoxes[ tBoxRow ][ tBoxCol ][ 1 ]</eval> </fg>
<bg> <eval>mBoxes[ tBoxRow ][ tBoxCol ][ 0 ]</eval> </bg>
<box>
<x> <eval>mBoxWidth / 4</eval> </x>
<y> <eval>mBoxHeight / 4</eval> </y>
<width> <eval>mBoxWidth / 2</eval> </width>
<height> <eval>mBoxHeight / 2</eval> </height>
<fg> <eval>mBoxes[ tBoxRow ][ tBoxCol ][ 1 ]</eval> </fg>
<bg> <eval>mBoxes[ tBoxRow ][ tBoxCol ][ 1 ]</eval> </bg>
</box>
</box>
</display>
</template>
</templates>
<script>
mTextHeight = _text_height( 0, 0, 0 );
mScrWidth = _getIntProperty( &_PROPERTY_INT_SCREEN_WIDTH; );
mScrHeight = _getIntProperty( &_PROPERTY_INT_SCREEN_HEIGHT; );
mBoxWidth = mScrWidth / &MAX_COLS;;
mBoxHeight = (mScrHeight - mTextHeight) / &MAX_ROWS;;
setupColorMap();
start();
</script>
<display>
<box>
<width> <eval>mScrWidth</eval> </width>
<height> <eval>mScrHeight</eval> </height>
<fg>&_COLOR_BLACK;</fg>
<bg>&_COLOR_BLACK;</bg>
</box>
<fn>
<text>Back</text>
<event name="onselect">
<accelerators> <key>F1</key> </accelerators>
<script>
_unload();
</script>
</event>
</fn>
</display>
<states>
<state var="sBoxes" index="*,*">
<transition value="true">
<display>
<expand template="tBox"/>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル： ujinn1.ujml
ボックスの色を選ぶ際に乱数を使っていることに注目してください。 色の情報はカラーマップに保存され、デバイスのカラー対応に応じて初期化が 行われます。各ボックスは同系色を2つ使った二重のボックスとして描画しています。 これは色の区別がつきにくいユーザにも見やすくするための配慮です。
start() 関数はボックスの色を初期化し、各ボックスのステートを true に設定して表示を行っています。表示を更新するために関数を使用する方法も考えられますが、 ユーザが耐えれないほど遅くなってしまう可能性があります。 例えば、ujinn1.ujml は携帯電話によっては画面の初期化に大変長い時間がかかります。 [RA1]
遅れが発生する理由は、UIE Player が画面の更新をアイドル時（UJML を実行してない状態）に行っていることに起因しています。従って start() 関数を実行している限り、関数が終了するまでディスプレイを更新するすべてのステート遷移がユーザに表示されません。
ループを使った定期的な画面更新
グリッドの初期化中に画面を更新するには <delay> を含んだステートを使って start() 関数を実装する方法が簡単です。<delay> によるアプリケーションの 一瞬のアイドル状態の間に UIE Player が画面を更新します。
ステートを使い、列を1つ初期化する度に画面を更新するように start() 関数を書き直しましょう。こうすることにより、何かが起きていることやプログラムが進行していることをユーザに視覚的にフィードバックできます。
<ujml>
<application>
<state-variables>
<state-var name="sBoxes" type="boolean" size="&MAX_ROWS;,&MAX_COLS;"/>
<state-var name="sStart" type="boolean"/>
</state-variables>
<variables>
･･･
<var name="gCol" type="int"/>
</variables>
<functions>
･･･
</functions>
<templates>
･･･
</templates>
<script>
･･･
gSeed = _srand( 101 );
gCol = 0;
sStart = true;
</script>
<display>
･･･
</display>
<states>
･･･
<state var="sStart">
<transition value="true">
<delay>20</delay>
<variables>
<var name="row" type="int"/>
</variables>
<script>
row = 0;
while (row < &MAX_ROWS;)
{
mBoxes[row][gCol][0] = mColorMap[ gSeed % &MAX_COLORS; ][0];
mBoxes[row][gCol][1] = mColorMap[ gSeed % &MAX_COLORS; ][1];
tBoxRow = row;
tBoxCol = gCol;
sBoxes[ tBoxRow ][ tBoxCol ] = true;
gSeed = _srand( gSeed );
row = row + 1;
}
gCol = gCol + 1;
sStart == true のトランジションは一列毎に実行します。 gCol が MAX_COLS と同じになった時、gStart は false にセットされループを終了します
_clear_state( sStart );
sStart = gCol < &MAX_COLS;;
</script>
</transition>
</state>
</states>
</application>
</ujml>
ファイル： ujinn2.ujml
修正後の Ujinn では、start() 関数を削除して、初期化ループを sStart というステートに移動しています。各列の外側のループはグローバル変数 gCol で制御しています。この変数はまた、 true に再度遷移すべきかを判定するためにスクリプトの終わりでも使用しています。true の状態へのステート遷移は列の値が MAX_COLS よりも小さい場合に発生します。小さなディレイを使って、画面の更新を強制している点にも注目してください。このディレイは UIE Player にアイドル状態を強いることにより、画面の書き換えを実現しています。
メモ： 画面を定期的に更新するループでは <delay> を使用します。
カーソル
ゲームにはユーザ入力を受け付ける手段を用意しなくてはなりません。 携帯電話は一般的に、方向キーと決定キー／選択キーを備えています。 PDA のユーザ入力はスタイラス指向です。 次の修正で、Ujinn にカーソルとスタイラス入力を追加します。
･･･
<ujml>
<application>
<state-variables>
･･･
<state-var name="sCursor" type="boolean"/>
</state-variables>
<variables>
･･･
<var name="mCursorCol" type="int"/>
<var name="mCursorRow" type="int"/>
</variables>
<functions>
･･･
<function name="setCursor" type="void">
<parameters>
<var name="row" type="int"/>
<var name="col" type="int"/>
</parameters>
<script>
mCursorRow = row;
mCursorCol = col;
sCursor = false;
sCursor = true;
</script>
</function>
</functions>
･･･
<states>
･･･
<state var="sCursor">
<transition value="true">
<display>
最初のボックスがスタイラスのタップを検出します。 スタイラスの場所はイベントハンドルによってボックスの位置に変換され、 カーソルがボックスに移動します。
<box>
<y> <eval>mTextHeight</eval> </y>
<width> <eval>mBoxWidth * &MAX_COLS;</eval> </width>
<height> <eval>mBoxHeight * &MAX_ROWS;</eval> </height>
<fg>&_COLOR_TRANSPARENT;</fg>
<bg>&_COLOR_TRANSPARENT;</bg>
<event name="onselect">
<script>
setCursor(
_getIntProperty( &_VALUE_INT_ONSELECT_Y_REL; ) /
mBoxHeight,
_getIntProperty( &_VALUE_INT_ONSELECT_X_REL; ) /
mBoxWidth );
</script>
</event>
</box>
<box>
<x>
<eval>mCursorCol * mBoxWidth + mBoxWidth / 2 - 2</eval>
</x>
<y>
<eval>(mCursorRow * mBoxHeight) + mTextHeight + 2</eval>
</y>
<width> <eval>4</eval> </width>
<height> <eval>mBoxHeight - 4</eval> </height>
</box>
<box>
<x> <eval>mCursorCol * mBoxWidth + 2</eval> </x>
<y>
<eval>(mCursorRow * mBoxHeight) + mTextHeight +
mBoxHeight / 2 - 2</eval>
</y>
<width> <eval>mBoxWidth - 4</eval> </width>
<height> <eval>4</eval> </height>
<event name="onselect">
<accelerators> <key>LEFT</key> </accelerators>
<script>
setCursor( mCursorRow, (mCursorCol + &MAX_COLS; - 1)
% &MAX_COLS; );
</script>
</event>
</box>
<box>
<x>
<eval>mCursorCol * mBoxWidth + mBoxWidth / 2 - 2</eval>
</x>
<y>
<eval>(mCursorRow * mBoxHeight) + mTextHeight +
mBoxHeight / 2 - 2</eval>
</y>
<width> <eval>4</eval> </width>
<height> <eval>4</eval> </height>
<bg> <eval>mBoxes[ mCursorRow ][ mCursorCol ][1]</eval></bg>
<event name="onselect">
<accelerators> <key>RIGHT</key> </accelerators>
<script>
setCursor( mCursorRow, (mCursorCol+1) % &MAX_COLS; );
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators> <key>UP</key> </accelerators>
<script>
if (mCursorRow == 0)
{
<!-- move to bottom of previous column -->
setCursor( &MAX_ROWS; - 1,
(mCursorCol + &MAX_COLS; - 1) %
&MAX_COLS; );
}
else
{
<!-- move to previous row -->
setCursor( mCursorRow - 1, mCursorCol );
}
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators> <key>DOWN</key> </accelerators>
<script>
if (mCursorRow == (&MAX_ROWS; - 1))
{
<!-- move to top of next column -->
setCursor( 0, (mCursorCol + 1) % &MAX_COLS; );
}
else
{
<!-- move to next row -->
setCursor( mCursorRow + 1, mCursorCol );
}
</script>
</event>
</box>
<box>
<x> <eval>mCursorCol * mBoxWidth</eval> </x>
<y> <eval>(mCursorRow * mBoxHeight) + mTextHeight</eval> </y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg>&_COLOR_TRANSPARENT;</fg>
<bg>&_COLOR_TRANSPARENT;</bg>
</box>
</display>
</transition>
</state>
<state var="sStart">
�
</state>
</states>
</application>
</ujml>
ファイル： ujinn3.ujml
カーソルを追加するには、カーソルとそれに関連するディスプレ要素の表示を制御する sCursor というステートを追加する必要があります。同様に上下左右のボタン押下を検出するためのイベントハンドラを追加します。最後に、スタイラスの x、y 座標をゲームグリッド内のボックスに変換するイベントハンドラを追加します。
修正後の Ujinn ではグリッドの左上にカーソルが表示されます。 上下左右ボタンは携帯電話でも PDA であってもカーソルの移動に使用できます。 PDA ではボックスをタップすることでカーソルがボックスに移動します。
ボックスを消す
選択機能の次は、ボックスを消す機能を実装します。 ボックスはカーソルが選択中のボックスを起点に消します。 このプログラムではカーソル位置のボックスとその隣のボックスの色を比較し、同じ色のボックスが隣接している場合は、その色のボックスを消去し画面を更新します。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.4//EN" "ujml.dtd" [
<!ENTITY and "&&">
<!-- Colors -->
<!ENTITY SCORE_ITEM_FG "&_COLOR_WHITE;">
<!ENTITY SCORE_ITEM_BG "0xff000066">
<!-- Limits -->
<!ENTITY MAX_ROWS "8">
<!ENTITY MAX_COLS "8">
<!ENTITY MAX_COLORS "4">
<!ENTITY CLEARING_COLOR "&_COLOR_WHITE;">
<!ENTITY CLEARED_COLOR "&_COLOR_TRANSPARENT;">
]>
<ujml>
<application>
<state-machines>
<include file="ujlib/stack.ujml" state-machine="IntStack"/>
</state-machines>
<state-variables>
･･･
<state-var name="sDelayedRemoveBoxes" type="boolean"/>
<state-var name="sDelayedSelectBox" type="boolean"/>
<state-var name="sRemoveColumns" type="boolean"/>
</state-variables>
<variables>
<var name="mTextHeight" type="int"/>
<var name="mScrHeight" type="int"/>
<var name="mScrWidth" type="int"/>
<var name="mBoxHeight" type="int"/>
<var name="mBoxWidth" type="int"/>
<var name="mColorMap" type="int" size="&MAX_COLORS;,2"/>
<var name="mRemoveBoxesFromColumn" type="boolean" size="&MAX_COLS;"/>
<var name="tBoxRow" type="int"/>
<var name="tBoxCol" type="int"/>
<var name="mColorMapIndex" type="int"/>
<var name="mColorMapBoxSize" type="int"/>
<var name="mCursorCol" type="int"/>
<var name="mCursorRow" type="int"/>
<var name="mNumBoxes" type="int"/>
<var name="mNumBoxesInColumn" type="int" size="&MAX_COLS;"/>
<var name="mBoxes" type="int" size="&MAX_ROWS;,&MAX_COLS;,2"/>
<var name="mColumnHasRemovableBoxes" type="boolean" size="&MAX_COLS;"/>
<!-- Globals used for removing columns -->
<var name="mNumBoxesCleared" type="int"/>
<var name="gI" type="int"/>
<var name="gCol" type="int"/>
<var name="gRow" type="int"/>
<var name="gSeed" type="int"/>
<var name="gAvailCol" type="int"/>
<var name="gRemoveColumnsDelay" type="int"/>
</variables>
<functions>
･･･
<function name="checkBoxColor" type="void">
<parameters>
<var name="row" type="int"/>
<var name="col" type="int"/>
<var name="color" type="int"/>
</parameters>
<script>
if (color == mBoxes[ row ][ col ][ 0 ])
{
IntStack.push( row );
IntStack.push( col );
}
</script>
</function>
･･･
<function name="selectBox" type="void">
<parameters>
<var name="row" type="int"/>
<var name="col" type="int"/>
</parameters>
<variables>
<var name="selectedColor" type="int"/>
<var name="selectedInnerColor" type="int"/>
<var name="numBoxesToBeRemoved" type="int"/>
<var name="i" type="int"/>
</variables>
<script>
<!-- don't allow the user to select a cleared or clearing box -->
if ((mBoxes[row][col][0] != &CLEARING_COLOR;) ∧
(mBoxes[row][col][0] != &CLEARED_COLOR;))
{
<!-- remember selected color -->
selectedColor = mBoxes[ row ][ col ][ 0 ];
selectedInnerColor = mBoxes[ row ][ col ][ 1 ];
<!-- put selected box on stack -->
IntStack.push( row );
IntStack.push( col );
<!-- find boxes of the selectec color to remove -->
while (IntStack.size() > 0)
{
<!-- process current box on the stack -->
col = IntStack.pop();
row = IntStack.pop();
<!-- mark the box to be cleared -->
mBoxes[ row ][ col ][ 0 ] = &CLEARING_COLOR;;
mBoxes[ row ][ col ][ 1 ] = &CLEARING_COLOR;;
repaintBox( row, col );
<!-- increment count of boxes to be cleared -->
numBoxesToBeRemoved = numBoxesToBeRemoved + 1;
<!-- mark column as having a box to be removed -->
mRemoveBoxesFromColumn[ col ] = true;
<!-- Now check neighboring boxes to see if they are the same
color -->
<!-- Check box above -->
if (row > 0)
{
checkBoxColor( row - 1, col, selectedColor );
}
<!-- Check box left -->
if (col > 0)
{
checkBoxColor( row, col - 1, selectedColor );
}
<!-- check box below -->
if (row < (&MAX_ROWS; - 1))
{
checkBoxColor( row + 1, col, selectedColor );
}
<!-- check box to the right -->
if (col < (&MAX_COLS; - 1))
{
checkBoxColor( row, col + 1, selectedColor );
}
}
<!-- Make sure the user selected a box that had neighbors of
the same color -->
if (numBoxesToBeRemoved > 1)
{
<!-- user selected a valid box, remove the marked boxes after
a slight delay -->
<!-- to show the user some feedback on which boxes are being
deleted -->
sDelayedRemoveBoxes = true;
}
else
{
<!-- user selected a box that has no neighbors of the same
color so back out -->
mBoxes[ row ][ col ][ 0 ] = selectedColor;
mBoxes[ row ][ col ][ 1 ] = selectedInnerColor;
repaintBox( row, col );
}
}
</script>
</function>
<function name="removeBoxes" type="void">
<variables>
<var name="row" type="int"/>
<var name="col" type="int"/>
<var name="availRow" type="int"/>
<var name="topBox" type="int"/>
<var name="thereAreRemovableBoxes" type="boolean"/>
</variables>
<script>
<!-- hide cursor -->
sCursor = false;
mNumBoxesCleared = 0;
gAvailCol = &MAX_COLS;;
col = &MAX_COLS; - 1;
<!-- for each column, check to see if we've marked it as having boxes
to remove -->
while (col > -1)
{
if (mRemoveBoxesFromColumn[ col ])
{
<!-- this column has boxes to be removed; remove them now -->
topBox = &MAX_ROWS; - mNumBoxesInColumn[ col ];
row = topBox;
while (row < &MAX_ROWS;)
{
if (mBoxes[ row ][ col ][ 0 ] == &CLEARING_COLOR;)
{
mNumBoxesCleared = mNumBoxesCleared + 1;
mBoxes[ row ][ col ][ 0 ] = &CLEARED_COLOR;;
mBoxes[ row ][ col ][ 1 ] = &CLEARED_COLOR;;
repaintBox( row, col );
availRow = row;
mNumBoxesInColumn[col] = mNumBoxesInColumn[col] - 1;
}
row = row + 1;
}
<!-- remove boxes in column -->
row = &MAX_COLS; - 1;
row = availRow - 1;
topBox = topBox - 1;
while (row > topBox)
{
if (mBoxes[ row ][ col ][ 0 ] != &CLEARED_COLOR;)
{
mBoxes[ availRow ][col][0] = mBoxes[row][col][ 0 ];
mBoxes[ availRow ][col][1] = mBoxes[row][col][ 1 ];
mBoxes[ row ][ col ][ 0 ] = &CLEARED_COLOR;;
mBoxes[ row ][ col ][ 1 ] = &CLEARED_COLOR;;
repaintBox( row, col );
repaintBox( availRow, col );
availRow = availRow - 1;
}
row = row - 1;
}
}
mRemoveBoxesFromColumn[ col ] = false;
if (mNumBoxesInColumn[ col ] == 0)
{
gAvailCol = col;
}
col = col - 1;
}
<!-- if there are empty columns, remove them; if gAvailCol is
less than &MAX_COLS;, then -->
<!-- there is at least one empty column -->
gCol = gAvailCol;
sRemoveColumns = gCol < &MAX_COLS;;
</script>
</function>
<function name="moveColumn" type="void">
<parameters>
<var name="fromCol" type="int"/>
<var name="toCol" type="int"/>
</parameters>
<variables>
<var name="row" type="int"/>
</variables>
<script>
while (row < &MAX_ROWS;)
{
mBoxes[ row ][ toCol ][ 0 ] = mBoxes[ row ][ fromCol ][ 0 ];
mBoxes[ row ][ toCol ][ 1 ] = mBoxes[ row ][ fromCol ][ 1 ];
mBoxes[ row ][ fromCol ][ 0 ] = &CLEARED_COLOR;;
mBoxes[ row ][ fromCol ][ 1 ] = &CLEARED_COLOR;;
repaintBox( row, fromCol );
repaintBox( row, toCol );
row = row + 1;
}
mNumBoxesInColumn[ toCol ] = mNumBoxesInColumn[ fromCol ];
mNumBoxesInColumn[ fromCol ] = 0;
</script>
</function>
･･･
</functions>
<templates>
<template name="tBox">
<display>
<box>
<x> <eval>tBoxCol * mBoxWidth</eval> </x>
<y> <eval>tBoxRow * mBoxHeight + mTextHeight</eval> </y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg> <eval>mBoxes[ tBoxRow ][ tBoxCol ][ 1 ]</eval> </fg>
<bg> <eval>mBoxes[ tBoxRow ][ tBoxCol ][ 0 ]</eval> </bg>
<box>
<x> <eval>mBoxWidth / 4</eval> </x>
<y> <eval>mBoxHeight / 4</eval> </y>
<width> <eval>mBoxWidth / 2</eval> </width>
<height> <eval>mBoxHeight / 2</eval> </height>
<fg> <eval>mBoxes[ tBoxRow ][ tBoxCol ][ 1 ]</eval> </fg>
<bg> <eval>mBoxes[ tBoxRow ][ tBoxCol ][ 1 ]</eval> </bg>
</box>
</box>
</display>
</template>
</templates>
<script>
･･･
</script>
<display>
･･･
</display>
<states>
<state var="sDelayedSelectBox">
<transition value="true">
<delay>200</delay>
<script>
selectBox( mCursorRow, mCursorCol );
sDelayedSelectBox = false;
</script>
</transition>
</state>
<state var="sBoxes" index="*,*">
<transition value="true">
<display>
<expand template="tBox"/>
</display>
</transition>
</state>
<state var="sCursor">
<transition value="true">
<display>
<box>
<y> <eval>mTextHeight</eval> </y>
<width> <eval>mBoxWidth * &MAX_COLS;</eval> </width>
<height> <eval>mBoxHeight * &MAX_ROWS;</eval> </height>
<fg>&_COLOR_TRANSPARENT;</fg>
<bg>&_COLOR_TRANSPARENT;</bg>
<event name="onselect">
<script>
setCursor( _getIntProperty( &_VALUE_INT_ONSELECT_Y_REL; ) / mBoxHeight,
_getIntProperty( &_VALUE_INT_ONSELECT_X_REL; ) / mBoxWidth );
sDelayedSelectBox = true;
</script>
</event>
</box>
<box>
<x> <eval>mCursorCol * mBoxWidth + mBoxWidth / 2 - 2</eval>
</x>
<y> <eval>(mCursorRow * mBoxHeight) + mTextHeight + 2</eval>
</y>
<width> <eval>4</eval> </width>
<height> <eval>mBoxHeight - 4</eval> </height>
<event name="onselect">
<accelerators> <key>FIRE</key> </accelerators>
<script>
selectBox( mCursorRow, mCursorCol );
</script>
</event>
</box>
<box>
<x> <eval>mCursorCol * mBoxWidth + 2</eval> </x>
<y> <eval>(mCursorRow * mBoxHeight) + mTextHeight +
mBoxHeight / 2 - 2</eval> </y>
<width> <eval>mBoxWidth - 4</eval> </width>
<height> <eval>4</eval> </height>
<event name="onselect">
<accelerators> <key>LEFT</key> </accelerators>
<script>
setCursor( mCursorRow,
(mCursorCol+&MAX_COLS;-1) % &MAX_COLS; );
</script>
</event>
</box>
<box>
<x> <eval>mCursorCol * mBoxWidth + mBoxWidth / 2 - 2</eval>
</x>
<y> <eval>(mCursorRow * mBoxHeight) + mTextHeight +
mBoxHeight / 2 - 2</eval> </y>
<width> <eval>4</eval> </width>
<height> <eval>4</eval> </height>
<bg>
<eval>mBoxes[ mCursorRow ][ mCursorCol ][ 1 ]</eval>
</bg>
<event name="onselect">
<accelerators> <key>RIGHT</key> </accelerators>
<script>
setCursor( mCursorRow, (mCursorCol + 1) % &MAX_COLS; );
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators> <key>UP</key> </accelerators>
<script>
if (mCursorRow == 0)
{
<!-- move to bottom of previous column -->
setCursor( &MAX_ROWS; - 1,
(mCursorCol + &MAX_COLS; - 1) %
&MAX_COLS; );
}
else
{
<!-- move to previous row -->
setCursor( mCursorRow - 1, mCursorCol );
}
</script>
</event>
</box>
<box>
<event name="onselect">
<accelerators> <key>DOWN</key> </accelerators>
<script>
if (mCursorRow == (&MAX_ROWS; - 1))
{
<!-- move to top of next column -->
setCursor( 0, (mCursorCol + 1) % &MAX_COLS; );
}
else
{
<!-- move to next row -->
setCursor( mCursorRow + 1, mCursorCol );
}
</script>
</event>
</box>
<box>
<x> <eval>mCursorCol * mBoxWidth</eval> </x>
<y> <eval>(mCursorRow * mBoxHeight) + mTextHeight</eval> </y>
<width> <eval>mBoxWidth</eval> </width>
<height> <eval>mBoxHeight</eval> </height>
<fg>&_COLOR_TRANSPARENT;</fg>
<bg>&_COLOR_TRANSPARENT;</bg>
<event name="onselect">
<accelerators> <key>FIRE</key> </accelerators>
<script>
selectBox( mCursorRow, mCursorCol );
</script>
</event>
</box>
</display>
</transition>
</state>
<state var="sDelayedRemoveBoxes">
<transition value="true">
<delay>400</delay>
<script>
sDelayedRemoveBoxes = false;
removeBoxes();
</script>
</transition>
</state>
<state var="sRemoveColumns">
<transition value="true">
<delay>
<eval>gRemoveColumnsDelay</eval>
</delay>
<script>
gRemoveColumnsDelay = 0;
if (mNumBoxesInColumn[ gCol ] > 0)
{
<!-- this column is not empty so move it to the empty
available column -->
moveColumn( gCol, gAvailCol );
gAvailCol = gAvailCol + 1;
gRemoveColumnsDelay = 200;
}
gCol = gCol + 1;
<!-- reset self -->
_clear_state( sRemoveColumns );
sRemoveColumns = gCol < &MAX_COLS;;
</script>
</transition>
<transition value="false">
<script>
sCursor = true;
<!-- reset self -->
gRemoveColumnsDelay = 0;
_clear_state( sRemoveColumns );
</script>
</transition>
</state>
<state var="sStart">
･･･
</state>
</states>
</application>
</ujml>
ファイル： ujinn4.ujml
これで隣接する同色のブロックを消せるようになりました：
ボックスを消すロジックの実装は至って簡単です。 実装方法に関しては ujinn4.ujml 内の UJML ソースを確認してください。 ujinn4.ujml ではボックスを消すコードのほか、delay 付きのステートを利用し、 ボックスを消去し列を左にシフトする際の処理をアニメーション表示しています。 またスタック機能を再利用可能な UJML の部品として実装しています。 スタックについては次の章で説明します。
再利用可能なスタック
UJML が開発された主な理由の1つに「プログラマーによる実装を1回に留めながらマルチプラットフォーム対応を可能にする」があります。コードの再利用を実現するには再利用可能な UJML コンポーネントの開発が重要な課題となってきます。
UJML のバージョン 1.5 は、Java クラスや COM オブジェクトのような再利用可能なコンポーネントの開発に直接対応していません。しかし <state-machine> 要素が UJML の効率的な再利用に柔軟に対応しています[5]。
<state-machine> と <include> 要素についてはのちほど説明します。
次のサンプルコードは Ujinn で使用した、<state-machine> を利用した単純な再利用可能なスタックの一例です：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.4//EN" "../ujml.dtd" [
<!ENTITY % include SYSTEM "include.ujmc">
%include;
]>
<ujml>
<partition>
<state-machine name="IntStack" access="export">
<variables>
<var name="mItems" type="int" size="&STACK_MAX_ITEMS;"/>
<var name="mTop" type="int"/>
</variables>
<functions>
<function name="push" type="int" visibility="public">
<parameters>
<var name="item" type="int"/>
</parameters>
<script>
mItems[ mTop ] = item;
mTop = mTop + 1;
</script>
<return>
<eval>mTop</eval>
</return>
</function>
<function name="pop" type="int" visibility="public">
<variables>
<var name="item" type="int"/>
</variables>
<script>
if (mTop > 0)
{
mTop = mTop - 1;
item = mItems[ mTop ];
}
</script>
<return>
<eval>item</eval>
</return>
</function>
<function name="size" type="int" visibility="public">
<return>
<eval>mTop</eval>
</return>
</function>
</functions>
</state-machine>
</state-machines>
</partition>
</ujml>
ファイル：ujlib/stack.ujml
スコア表示
次に、画面上部の得点を更新する機能を追加します。
･･･
<ujml>
<application>
<state-variables>
･･･
<state-var name="sScores" type="boolean"/>
<state-var name="sDelayedUpdateScores" type="boolean"/>
</state-variables>
<variables>
･･･
<var name="mScore" type="int"/>
<var name="mHighScore" type="int"/>
<var name="mTotalBoxesCleared" type="int"/>
<var name="mLevelNumber" type="int"/>
･･･
</variables>
<functions>
･･･
<function name="updateScores" type="void">
<script>
sDelayedUpdateScores = true;
</script>
</function>
･･･
<function name="repaint" type="void">
<variables>
<var name="col" type="int"/>
</variables>
<script>
while (col < &MAX_COLS;)
{
repaintColumn( col );
col = col + 1;
}
updateScores();
</script>
</function>
･･･
<function name="setup" type="void">
<script>
<!-- initialize global values based on the game grid size -->
mBoxWidth = mScrWidth / &MAX_COLS;;
mBoxHeight = (mScrHeight - mTextHeight) / &MAX_ROWS;;
mNumBoxes = &MAX_ROWS; * &MAX_COLS;;
<!-- reset scoring counters -->
mScore = 0;
mTotalBoxesCleared = 0;
mLevelNumber = 1;
<!-- move selected box to upper left corner -->
mCursorRow = 0;
mCursorCol = 0;
sCursor = false;
sCursor = true;
</script>
</function>
<function name="clearScores" type="void">
<script>
mScore = 0;
mHighScore = 0;
updateScores();
</script>
</function>
･･･
</functions>
･･･
<states>
<state var="sDelayedUpdateScores">
<transition value="true">
<delay>10</delay>
<script>
sScores = false;
sScores = true;
sDelayedUpdateScores = false;
</script>
</transition>
</state>
<state var="sScores">
<transition value="true">
<display>
<box>
<width> <eval>mScrWidth</eval> </width>
<height> <eval>mTextHeight</eval> </height>
<fg>&SCORE_ITEM_BG;</fg>
<bg>&SCORE_ITEM_BG;</bg>
<label>
<text>
<strcat>
<eval>mScore</eval>
<val>/</val>
<eval>mHighScore</eval>
<val> | </val>
<eval>mLevelNumber</eval>
<val> | </val>
<eval>mTotalBoxesCleared</eval>
<val>/</val>
<eval>mNumBoxes</eval>
<val> |</val>
</strcat>
</text>
<x>2</x>
<fg>&SCORE_ITEM_FG;</fg>
</label>
</box>
</display>
</transition>
</state>
･･･
<state var="sRemoveColumns">
<transition value="true">
･･･
</transition>
<transition value="false">
<script>
<!-- update score -->
mScore = mScore + (mNumBoxesCleared * (mNumBoxesCleared - 1));
mTotalBoxesCleared = mTotalBoxesCleared + mNumBoxesCleared;
updateScores();
sCursor = true;
<!-- reset self -->
gRemoveColumnsDelay = 0;
_clear_state( sRemoveColumns );
</script>
</transition>
</state>
･･･
</states>
</application>
</ujml>
ファイル： ujinn5.ujml
updateScores() 関数は、ステート変数 sDelayedUpdatesScores を true に設定しているに過ぎない点に注目して下さい。このステート遷移は、<delay> 要素を使って実際のスコア更新を遅延させています。これは画面上の2つの独立した部分を同時に再描画することを避けるために行っています。再描画を平行して行ってしまうと、遅いデバイス上で画面の再描画が劇的に遅くなってしまうからです。
UIE Player は、ステートマシンにディスプレイステートが追加または削除されたことによって 無効となった部分の再描画を最小限に留めようとします。UIE Player は複数の無効な画面領域を1つの無効な領域に統合します。もしそのような無効領域が互いから離れている場合、UIE Playerは両方の領域を含む矩形領域を再描画します。そのため、必要以上の再描画が発生してしまいます。ディレイを使うことにより、2つの領域を独立して再描画することが可能になります。その結果、パフォーマンスが劇的に改善されます。Ujinn のようなグリッドベースのゲームでは、無効な画面領域が大きいことによって多くのディスプレイステートの再描画が必要となるため、このようなテクニックが必要となります。
メモ： 位置的に離れたディスプレイステートの表示を独立して行うには <delay> を使います。
ゲームの終了判定
次の変更では、グリッドが完全にクリアされた場合や、 クリアできるグループが存在しない場合のチェックを行います。
･･･
<ujml>
<application>
<state-variables>
･･･
<state-var name="sGameOver" type="boolean"/>
<state-var name="sDelayedEndGameCheck" type="boolean"/>
<state-var name="sMessage" type="boolean"/>
</state-variables>
･･･
<states>
･･･
<state var="sRemoveColumns">
<transition value="true">
･･･
</transition>
<transition value="false">
<script>
<!-- update score -->
mScore = mScore + (mNumBoxesCleared * (mNumBoxesCleared - 1));
mTotalBoxesCleared = mTotalBoxesCleared + mNumBoxesCleared;
<!-- Check to see if the end of the game has been reached -->
sDelayedEndGameCheck = true;
<!-- reset self -->
gRemoveColumnsDelay = 0;
_clear_state( sRemoveColumns );
</script>
</transition>
</state>
<state var="sDelayedEndGameCheck">
<transition value="true">
<delay>100</delay>
<variables>
<var name="fGameOver" type="boolean"/>
</variables>
<script>
<!-- see if the end of the game has been reached. Either all boxes have been removed -->
<!-- or it is not possible to remove any more boxes. -->
if (mTotalBoxesCleared == mNumBoxes)
{
<!-- we have a winner! all boxes have been removed. -->
mScore = mScore + (mScore / 4);
mMessage = _strcat( "Level cleared!
Bonus: ", _strcat( mScore / 4, "." ) );
sMessage = true;
if (mScore > mHighScore)
{
mHighScore = mScore;
}
fGameOver = true;
}
else
{
<!-- determine if there are removable boxes -->
if (!areBoxesRemovable())
{
<!-- there are no more selectable boxes so the game is over -->
mScore = mScore - (mNumBoxes - mTotalBoxesCleared);
mMessage = _strcat( "No more moves.
Penalty: ", _strcat( mNumBoxes - mTotalBoxesCleared, "." ) );
sMessage = true;
if (mScore > mHighScore)
{
mHighScore = mScore;
}
fGameOver = true;
}
}
updateScores();
<!-- repaint cursor -->
sCursor = false;
sCursor = true;
sDelayedEndGameCheck = false;
sGameOver = fGameOver;
</script>
</transition>
</state>
<state var="sGameOver">
<transition value="true">
<script>
sCursor = false;
</script>
</transition>
</state>
<state var="sMessage">
<transition value="true">
<display>
<multi-label>
<text><eval>mMessage</eval> </text>
<x>10</x>
<y>10</y>
<width><eval>mScrWidth - 20</eval> </width>
<height><eval>mScrHeight - 20</eval></height>
<bg>&_COLOR_WHITE;</bg>
<event name="onselect">
<accelerators> <key>FIRE</key> </accelerators>
<script>
sMessage = false;
start();
</script>
</event>
</multi-label>
</display>
</transition>
</state>
</states>
</application>
</ujml>
ファイル： ujinn6.ujml
メニュー
これで Ujinn ゲームの基礎が完成しました。 しかしユーザオプションとして「異なるレベルを遊ぶ」「グリッドサイズを変更」「色数を変更」「同じレベルをもう一回遊ぶ」といった機能を拡張できます。
これらのオプションを指定可能にするために、メインメニューとオプション変更ダイアログボックスを追加することにします。メニューは他のアプリケーションでも役立つ可能性が高いので、<state-machine> を使って再利用可能な UJML として実装します：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.4//EN" "../ujml.dtd" [
<!ENTITY % include SYSTEM "include.ujmc">
%include;
<!ENTITY HIGHLIGHT_VISIBLE "-1">
<!ENTITY HIGHLIGHT_FIRE_SELECT_EVENT "-2">
<!ENTITY MENU_MAX_ITEMS "6">
]>
<ujml>
<partition>
<state-machines>
<include file="include.ujml" state-machine="Event"/>
<state-machine name="Menu" access="export">
<state-variables>
<state-var name="sMenu" type="boolean"/>
<state-var name="sHighlight" type="int"/>
<state-var name="sMenuItems" type="boolean" size="&MENU_MAX_ITEMS;"/>
</state-variables>
<variables>
<var name="mHandler" type="string"/>
<var name="mScrWidth" type="int"/>
<var name="mScrHeight" type="int"/>
<var name="mX" type="int"/>
<var name="mY" type="int"/>
<var name="mWidth" type="int"/>
<var name="mItemHeight" type="int"/>
<var name="mNumItems" type="int"/>
<var name="mCaptions" type="string" size="&MENU_MAX_ITEMS;"/>
<var name="mItemIndex" type="int"/>
<var name="mCommands" type="int" size="&MENU_MAX_ITEMS;"/>
<var name="mCurItemOffsetY" type="int"/>
<var name="mCurItem" type="int"/>
<var name="mAttributes" type="int" size="&MENU_ATTRIBUTES;"/>
</variables>
<functions>
<function name="selectItem" type="void">
<parameters>
<var name="item" type="int"/>
</parameters>
<script>
mCurItem = item;
mCurItemOffsetY = mCurItem * mItemHeight;
Event.setParam( 0, mCommands[ mCurItem ] );
Event.fireEventNow( &EVENT_SELECTING;, mHandler );
_clear_state( sHighlight );
sHighlight = &HIGHLIGHT_FIRE_SELECT_EVENT;;
</script>
</function>
<function name="Highlight_show" type="void">
<script>
_clear_state( sHighlight );
sHighlight = &HIGHLIGHT_VISIBLE;;
</script>
</function>
<function name="Highlight_move" type="void">
<parameters>
<var name="delta" type="int"/>
</parameters>
<script>
mCurItem = (mCurItem + delta + mNumItems) % mNumItems;
mCurItemOffsetY = mCurItem * mItemHeight;
Event.setParam( 0, mCommands[ mCurItem ] );
Event.fireEventNow( &EVENT_HIGHLIGHTING;, mHandler );
Highlight_show();
Event.setParam( 0, mCommands[ mCurItem ] );
Event.fireEvent( &EVENT_HIGHLIGHTED;, mHandler);
</script>
</function>
<function name="setAttribute" type="void" visibility="public">
<parameters>
<var name="attribute" type="int"/>
<var name="color" type="int"/>
</parameters>
<script>
mAttributes[ attribute ] = color;
</script>
</function>
<function name="getAttribute" type="int" visibility="public">
<parameters>
<var name="attribute" type="int"/>
</parameters>
<variables>
<var name="retval" type="int"/>
</variables>
<script>
if (attribute &_GTE; 0)
{
retval = mAttributes[ attribute ];
}
else if (attribute == &MENU_ATTR_X;)
{
retval = mX - mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ];
}
else if (attribute == &MENU_ATTR_Y;)
{
retval = mY - mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ];
}
else if (attribute == &MENU_ATTR_WIDTH;)
{
retval = mWidth + mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ] * 2;
}
else if (attribute == &MENU_ATTR_HEIGHT;)
{
retval = mItemHeight * mNumItems +
mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ] * 2;
}
</script>
<return>
<eval>retval</eval>
</return>
</function>
<function name="setVisible" type="void" visibility="public">
<parameters>
<var name="visible" type="boolean"/>
</parameters>
<variables>
<var name="item" type="int"/>
</variables>
<script>
_clear_state( sMenu );
sMenu = visible;
if (visible)
{
while (item < mNumItems)
{
<!-- allow client to alter colors before paiting item -->
Event.setParam( 0, mCommands[ mCurItem ] );
Event.fireEventNow( &EVENT_PAINTING;, mHandler );
mItemIndex = item;
_clear_state( sMenuItems[ item ] );
sMenuItems[ item ] = true;
item = item + 1;
}
Highlight_show();
}
else
{
while (item < mNumItems)
{
_clear_state( sMenuItems[ item ] );
item = item + 1;
}
_clear_state( sHighlight );
}
</script>
</function>
<function name="getVisible" type="boolean" visibility="public">
<return>
<eval>sMenu</eval>
</return>
</function>
<function name="center" type="void" visibility="public">
<script>
mX = (mScrWidth - mWidth) / 2;
mY = (mScrHeight - mNumItems * mItemHeight) / 2;
</script>
</function>
<function name="initialize" type="void" visibility="public">
<parameters>
<var name="handler" type="string"/>
</parameters>
<script>
setVisible( false );
mScrWidth = _getIntProperty( &_PROPERTY_INT_SCREEN_WIDTH; );
mScrHeight = _getIntProperty( &_PROPERTY_INT_SCREEN_HEIGHT; );
mHandler = handler;
mWidth = 0;
mItemHeight = _text_height( 0, 0, 0 );
mNumItems = 0;
mCurItemOffsetY = 0;
mCurItem = 0;
setAttribute( &MENU_ATTR_ITEM_FG;, &_COLOR_BLACK; );
setAttribute( &MENU_ATTR_ITEM_BG;, &_COLOR_WHITE; );
setAttribute( &MENU_ATTR_BORDER;, &_COLOR_GRAY; );
setAttribute( &MENU_ATTR_BG;, &_COLOR_BLACK; );
setAttribute( &MENU_ATTR_HIGHLIGHT_FG;, &_COLOR_WHITE; );
setAttribute( &MENU_ATTR_HIGHLIGHT_BG;, 0xff9999ff );
setAttribute( &MENU_ATTR_SELECTED_FG;, &_COLOR_WHITE; );
setAttribute( &MENU_ATTR_SELECTED_BG;, 0xff6666cc );
mX = 3;
mY = mX;
setAttribute( &MENU_ATTR_BORDER_THICKNESS;, mX );
</script>
</function>
<function name="add" type="int" visibility="public">
<parameters>
<var name="caption" type="string"/>
<var name="command" type="int"/>
</parameters>
<script>
mCaptions[ mNumItems ] = caption;
mCommands[ mNumItems ] = command;
mNumItems = mNumItems + 1;
mWidth = _max( mWidth, _text_width( caption, 0, 0, 0 ) + 8 );
</script>
<return>
<eval>mNumItems - 1</eval>
</return>
</function>
<function name="update" type="void" visibility="public">
<parameters>
<var name="id" type="int"/>
<var name="caption" type="string"/>
<var name="evt" type="int"/>
</parameters>
<execute>
<set var="mCaptions">
<index>
<eval>id</eval>
</index>
<ref var="caption"/>
</set>
<set var="mCommands">
<index>
<eval>id</eval>
</index>
<eval>evt</eval>
</set>
</execute>
</function>
<function name="highlight" type="void" visibility="public">
<parameters>
<var name="id" type="int"/>
</parameters>
<script>
mCurItem = id % mNumItems;
mCurItemOffsetY = mCurItem * mItemHeight;
Event.setParam( 0, mCommands[ mCurItem ] );
Event.fireEventNow( &EVENT_HIGHLIGHTING;, mHandler );
if (getVisible())
{
Highlight_show();
}
Event.setParam( 0, mCommands[ mCurItem ] );
Event.fireEvent( &EVENT_HIGHLIGHTED;, mHandler );
</script>
</function>
<function name="setPosition" type="void" visibility="public">
<parameters>
<var name="x" type="int"/>
<var name="y" type="int"/>
</parameters>
<script>
mX = x + mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ];
mY = y + mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ];
</script>
</function>
</functions>
<templates>
<template name="Item">
<display>
<label>
<text>
<eval>mCaptions[ mItemIndex ]</eval>
</text>
<x>3</x>
<fg>
<eval>mAttributes[ &MENU_ATTR_ITEM_FG; ]</eval>
</fg>
</label>
</display>
</template>
</templates>
<states>
<state var="sMenu">
<transition value="true">
<display>
<!-- catch all unwanted events, especially clicking outside the
boundary of the menu -->
<box>
<width><eval>mScrWidth</eval></width>
<height><eval>mScrHeight</eval></height>
<fg>&_COLOR_TRANSPARENT;</fg>
<bg>&_COLOR_TRANSPARENT;</bg>
<event name="onselect">
<accelerators>
<key>FIRE</key>
<key>LEFT</key>
<key>RIGHT</key>
<key>UP</key>
<key>DOWN</key>
<key>0</key>
<key>1</key>
<key>2</key>
<key>3</key>
<key>4</key>
<key>5</key>
<key>6</key>
<key>7</key>
<key>8</key>
<key>9</key>
</accelerators>
<script>
</script>
</event>
</box>
<box>
<x>
<eval>mX - mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ]</eval>
</x>
<y>
<eval>mY - mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ]</eval>
</y>
<width>
<eval>mWidth + 2 * mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ]</eval>
</width>
<height>
<eval>(mItemHeight * mNumItems) + 2 * mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ]</eval>
</height>
<fg>
<eval>mAttributes[ &MENU_ATTR_BORDER; ]</eval>
</fg>
<bg>
<eval>mAttributes[ &MENU_ATTR_BG; ]</eval>
</bg>
<box>
<x>
<eval>mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ]</eval>
</x>
<y>
<eval>mAttributes[ &MENU_ATTR_BORDER_THICKNESS; ]</eval>
</y>
<width>
<eval>mWidth</eval>
</width>
<height>
<eval>(mItemHeight * mNumItems)</eval>
</height>
<fg>
<eval>mAttributes[ &MENU_ATTR_ITEM_BG; ]</eval>
</fg>
<bg>
<eval>mAttributes[ &MENU_ATTR_ITEM_BG; ]</eval>
</bg>
</box>
</box>
</display>
</transition>
</state>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<state var="sMenuItems" index="*">
<transition value="true">
<display>
<box>
<x>
<eval>mX</eval>
</x>
<y>
<eval>mY + _state_index() * mItemHeight</eval>
</y>
<width>
<eval>mWidth</eval>
</width>
<height>
<eval>mItemHeight</eval>
</height>
<fg>&_COLOR_TRANSPARENT;</fg>
<bg>
<eval>mAttributes[ &MENU_ATTR_ITEM_BG; ]</eval>
</bg>
<event name="onselect">
<script>
selectItem( _state_index() );
</script>
</event>
<expand template="Item"/>
</box>
</display>
</transition>
</state>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<state var="sHighlight">
<transition value="&HIGHLIGHT_VISIBLE;">
<display>
<box>
<x>
<eval>mX</eval>
</x>
<y>
<eval>mY + mCurItemOffsetY</eval>
</y>
<width>
<eval>mWidth</eval>
</width>
<height>
<eval>mItemHeight</eval>
</height>
<fg>
<eval>mAttributes[ &MENU_ATTR_HIGHLIGHT_BG; ]</eval>
</fg>
<bg>
<eval>mAttributes[ &MENU_ATTR_HIGHLIGHT_BG; ]</eval>
</bg>
<event name="onselect">
<accelerators>
<key>FIRE</key>
</accelerators>
<execute>
<eval>selectItem( mCurItem )</eval>
</execute>
</event>
<label>
<text>
<eval>mCaptions[ mCurItem ]</eval>
</text>
<x>3</x>
<fg>
<eval>mAttributes[ &MENU_ATTR_HIGHLIGHT_FG; ]</eval>
</fg>
</label>
</box>
<box>
<event name="onselect">
<accelerators>
<key>DOWN</key>
</accelerators>
<execute>
<eval>Highlight_move( 1 )</eval>
</execute>
</event>
</box>
<box>
<event name="onselect">
<accelerators>
<key>UP</key>
</accelerators>
<execute>
<eval>Highlight_move( 0 - 1 )</eval>
</execute>
</event>
</box>
<box>
<event name="onselect">
<accelerators>
<key>
<eval>mCurItem + 1</eval>
</key>
</accelerators>
<execute>
<eval>selectItem( mCurItem )</eval>
</execute>
</event>
</box>
</display>
</transition>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<transition value="&HIGHLIGHT_FIRE_SELECT_EVENT;">
<display>
<box>
<x>
<eval>mX</eval>
</x>
<y>
<eval>mY + mCurItemOffsetY</eval>
</y>
<width>
<eval>mWidth</eval>
</width>
<height>
<eval>mItemHeight</eval>
</height>
<fg>
<eval>mAttributes[ &MENU_ATTR_SELECTED_BG; ]</eval>
</fg>
<bg>
<eval>mAttributes[ &MENU_ATTR_SELECTED_BG; ]</eval>
</bg>
<label>
<text>
<eval>mCaptions[ mCurItem ]</eval>
</text>
<x>3</x>
<fg>
<eval>mAttributes[ &MENU_ATTR_SELECTED_FG; ]</eval>
</fg>
</label>
</box>
</display>
<delay>500</delay>
<script>
Event.setParam( 0, mCommands[ mCurItem ] );
Event.fireEvent( &EVENT_SELECTED;, mHandler );
</script>
</transition>
</state>
</states>
</state-machine>
</state-machines>
</partition>
</ujml>
ファイル： menu.ujml
次に、Ujinn にメニューを組み込みます：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.4//EN" "ujml.dtd" [
<!ENTITY % include SYSTEM "ujlib/include.ujmc">
%include;
<!-- Colors -->
<!ENTITY SCORE_ITEM_FG "&_COLOR_WHITE;">
<!ENTITY SCORE_ITEM_BG "0xff000066">
<!-- Limits -->
<!ENTITY MAX_ROWS "8">
<!ENTITY MAX_COLS "8">
<!ENTITY MAX_COLORS "16">
<!ENTITY CLEARING_COLOR "&_COLOR_WHITE;">
<!ENTITY CLEARED_COLOR "&_COLOR_TRANSPARENT;">
<!-- Popup -->
<!ENTITY POPUP_HIDDEN "-1">
<!ENTITY POPUP_NULL "0">
<!ENTITY POPUP_MAIN_MENU "1">
<!ENTITY POPUP_MESSAGE "4">
<!-- Main Menu -->
<!ENTITY MENU_NEW "Next Level">
<!ENTITY MENU_RESTART "Replay Level">
<!ENTITY MENU_DONE "Done">
<!-- Events events -->
<!ENTITY ON_START "1">
<!ENTITY ON_NEXT_LEVEL "2">
<!ENTITY ON_GOTO_MENU "3">
<!ENTITY ON_NULL "4">
<!ENTITY ON_RESTART "5">
]>
<ujml>
<application>
<state-machines>
<include file="ujlib/stack.ujml" state-machine="IntStack"/>
<include file="ujlib/event.ujml" state-machine="Event"/>
</state-machines>
<state-variables>
<state-var name="sFnKeys" type="boolean"/>
<state-var name="sBoxes" type="boolean" size="&MAX_ROWS;,&MAX_COLS;"/>
<state-var name="sCursor" type="boolean"/>
<state-var name="sPopup" type="int"/>
<state-var name="sScores" type="boolean"/>
<state-var name="sDelayedUpdateScores" type="boolean"/>
<state-var name="sDelayedRemoveBoxes" type="boolean"/>
<state-var name="sDelayedSelectBox" type="boolean"/>
<state-var name="sRemoveColumns" type="boolean"/>
<state-var name="sStart" type="boolean"/>
<state-var name="sRestart" type="boolean"/>
<state-var name="sGameOver" type="boolean"/>
<state-var name="sDelayedEndGameCheck" type="boolean"/>
</state-variables>
<variables>
<var name="mTextHeight" type="int"/>
<var name="mScrHeight" type="int"/>
<var name="mScrWidth" type="int"/>
<var name="mBoxHeight" type="int"/>
<var name="mBoxWidth" type="int"/>
<var name="mColorMap" type="int" size="&MAX_COLORS;,2"/>
<var name="mRemoveBoxesFromColumn" type="boolean" size="&MAX_COLS;"/>
<var name="tBoxRow" type="int"/>
<var name="tBoxCol" type="int"/>
<var name="mMessage" type="string"/>
<var name="mColorMapIndex" type="int"/>
<var name="mColorMapBoxSize" type="int"/>
<!-- persistent variables -->
<var name="mNumRows" type="int"/>
<var name="mNumCols" type="int"/>
<var name="mNumColors" type="int"/>
<var name="mScore" type="int"/>
<var name="mHighScore" type="int"/>
<var name="mTotalBoxesCleared" type="int"/>
<var name="mLevelNumber" type="int"/>
<var name="mCursorCol" type="int"/>
<var name="mCursorRow" type="int"/>
<var name="mNumBoxes" type="int"/>
<var name="mNumBoxesInColumn" type="int" size="&MAX_COLS;"/>
<!-- game board -->
<var name="mBoxes" type="int" size="&MAX_ROWS;,&MAX_COLS;,2"/>
<var name="mColumnHasRemovableBoxes" type="boolean" size="&MAX_COLS;"/>
<!-- mSavedXXX variables are used to restart the current game -->
<var name="mSavedBoxes" type="int" size="&MAX_ROWS;,&MAX_COLS;,2"/>
<var name="mSavedColumnHasRemovableBoxes" type="boolean" size="&MAX_COLS;"/>
<!-- end of persistent variables -->
<!-- Globals used for removing columns -->
<var name="mNumBoxesCleared" type="int"/>
<var name="gI" type="int"/>
<var name="gCol" type="int"/>
<var name="gRow" type="int"/>
<var name="gSeed" type="int"/>
<var name="gAvailCol" type="int"/>
<var name="gRemoveColumnsDelay" type="int"/>
</variables>
<functions>
<function name="repaintPopup" type="void">
<variables>
<var name="temp" type="int"/>
</variables>
<script>
temp = sPopup;
sPopup = &POPUP_HIDDEN;;
sPopup = temp;
</script>
</function>
�
</functions>
<templates>
�
</templates>
<script>
�
</script>
<display>
�
</display>
<states>
<state var="sFnKeys">
<transition value="true">
<display>
<fn>
<text>Options</text>
<event name="onselect">
<accelerators>
<key>F2</key>
<key>POUND</key>
<key>STAR</key>
</accelerators>
<variables>
<var name="temp" type="int"/>
</variables>
<script>
temp = sPopup;
sPopup = &POPUP_HIDDEN;;
if (temp == &POPUP_MAIN_MENU;)
{
sPopup = &POPUP_NULL;;
}
else if (temp == &POPUP_NULL;)
{
sPopup = &POPUP_MAIN_MENU;;
}
else
{
<!-- an options menu is being displayed; restart the game with new settings -->
start();
}
</script>
</event>
</fn>
</display>
</transition>
</state>
･･･
<state var="sPopup">
<transition value="&POPUP_NULL;">
<script>
Menu.setVisible( false );
</script>
</transition>
<transition value="&POPUP_MAIN_MENU;">
<script>
Menu.initialize( "menu" );
Menu.add( "&MENU_NEW;", &ON_NEXT_LEVEL; );
Menu.add( "&MENU_RESTART;", &ON_RESTART; );
Menu.add( "&MENU_DONE;", &ON_NULL; );
Menu.center();
Menu.setVisible( true );
</script>
</transition>
<transition value="&POPUP_MESSAGE;">
<display>
<box>
<x>
<eval>2</eval>
</x>
<y>
<eval>2</eval>
</y>
<width>
<eval>mScrWidth - 4</eval>
</width>
<height>
<eval>mScrHeight - 4</eval>
</height>
<bg>&_COLOR_DARKGRAY;</bg>
<multi-label>
<text>
<ref var="mMessage"/>
</text>
<x>2</x>
<y>2</y>
<width>
<eval>mScrWidth - 8</eval>
</width>
<height>
<eval>_max( mScrHeight - (mTextHeight * 2) - 4, mTextHeight * 2 )</eval>
</height>
<fg>&_COLOR_WHITE;</fg>
<bg>&_COLOR_DARKGRAY;</bg>
</multi-label>
</box>
</display>
<script>
Menu.initialize( "menu" );
Menu.add( "&MENU_RESTART;", &ON_RESTART; );
Menu.add( "&MENU_NEW;", &ON_NEXT_LEVEL; );
Menu.center();
Menu.setVisible( true );
</script>
</transition>
</state>
<state var="Event.sEvent" index="&EVENT_SELECTED;">
<transition value="menu">
<variables>
<var name="command" type="int"/>
</variables>
<script>
Menu.setVisible( false );
command = Event.getParam( 0 );
if (command == &ON_GOTO_MENU;)
{
sPopup = &POPUP_MAIN_MENU;;
}
else if (command == &ON_START;)
{
start();
}
else if (command == &ON_RESTART;)
{
restart();
}
else if (command == &ON_NEXT_LEVEL;)
{
mScore = 0;
mHighScore = 0;
mLevelNumber = mLevelNumber + 1;
start();
}
else if (command == &ON_NULL;)
{
sPopup = &POPUP_NULL;;
}
</script>
</transition>
</state>
･･･
<state var="sDelayedEndGameCheck">
<transition value="true">
<delay>100</delay>
<variables>
<var name="fGameOver" type="boolean"/>
</variables>
<script>
<!-- see if the end of the game has been reached. Either all boxes have been removed -->
<!-- or it is not possible to remove any more boxes. -->
if (mTotalBoxesCleared == mNumBoxes)
{
<!-- we have a winner! all boxes have been removed. -->
mScore = mScore + (mScore / 4);
mMessage = _strcat( "Level cleared!
Bonus: ", _strcat( mScore / 4, "." ) );
sPopup = &POPUP_MESSAGE;;
if (mScore > mHighScore)
{
mHighScore = mScore;
}
fGameOver = true;
}
else
{
<!-- determine if there are removable boxes -->
if (!areBoxesRemovable())
{
<!-- there are no more selectable boxes so the game is over -->
mScore = mScore - (mNumBoxes - mTotalBoxesCleared);
mMessage = _strcat( "No moves.
Penalty: ", _strcat( mNumBoxes - mTotalBoxesCleared, "." ) );
sPopup = &POPUP_MESSAGE;;
if (mScore > mHighScore)
{
mHighScore = mScore;
}
fGameOver = true;
}
}
updateScores();
<!-- repaint cursor -->
sCursor = false;
sCursor = true;
sDelayedEndGameCheck = false;
sGameOver = fGameOver;
</script>
</transition>
</state>
･･･
</states>
<--Menu goes on top of z-order -->
<state-machines>
<include file="ujlib/menu.ujml" state-machine="Menu"/>
</state-machines>
</application>
</ujml>
ファイル： ujinn7.ujml
ビジーカーソル（処理中インジケータ）
遅いデバイスではゲーム開始時の画面の再描画に時間がかかります。 完了に数秒を要する可能性が高いことがわかっている処理には、 画面にビジーカーソル（処理中インジケータ）を追加します。
ビジーカーソルは他のアプリケーションでも使う可能性が大なので、 再利用可能な <state-machine> として実装することにします。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.4//EN" "../ujml.dtd" [
<!ENTITY % include SYSTEM "include.ujmc">
%include;
<!ENTITY BUSY_FACE "0xff0000ff">
<!ENTITY BUSY_HANDS "0xff00ffff">
<!ENTITY BUSY_BG "0xfff000066">
<!ENTITY BUSY_BORDER "2">
<!ENTITY BUSY_HAND_THICKNESS "4">
<!ENTITY BUSY_ANIMATE_FRAME_CNT "4">
]>
<ujml>
<partition>
<state-machines>
<include file="include.ujml" state-machine="Linker"/>
<state-machine name="Busy" access="export">
<state-variables>
<state-var name="sAnimate" type="boolean"/>
<state-var name="sAnimateTick" type="boolean"/>
</state-variables>
<variables>
<var name="mScrWidth" type="int"/>
<var name="mScrHeight" type="int"/>
<var name="mTextHeight" type="int"/>
<var name="mAnimateFrame" type="int"/>
<var name="mSize" type="int"/>
<var name="mX" type="int"/>
<var name="mY" type="int"/>
<var name="mLittleHandX" type="int" size="&BUSY_ANIMATE_FRAME_CNT;"/>
<var name="mLittleHandY" type="int" size="&BUSY_ANIMATE_FRAME_CNT;"/>
<var name="mLittleHandWidth" type="int" size="&BUSY_ANIMATE_FRAME_CNT;"/>
<var name="mLittleHandHeight" type="int" size="&BUSY_ANIMATE_FRAME_CNT;"/>
<var name="mBigHandX" type="int" size="&BUSY_ANIMATE_FRAME_CNT;"/>
<var name="mBigHandY" type="int" size="&BUSY_ANIMATE_FRAME_CNT;"/>
<var name="mBigHandWidth" type="int" size="&BUSY_ANIMATE_FRAME_CNT;"/>
<var name="mBigHandHeight" type="int" size="&BUSY_ANIMATE_FRAME_CNT;"/>
</variables>
<functions>
<function name="centerText" type="int">
<parameters>
<var name="text" type="string"/>
</parameters>
<return>
<eval>(mScrWidth - _text_width( text, 0, 0, 0 )) / 2</eval>
</return>
</function>
<function name="initialize" type="void" visibility="public">
<script>
mScrWidth = _getIntProperty( &_PROPERTY_INT_SCREEN_WIDTH; );
mScrHeight = _getIntProperty( &_PROPERTY_INT_SCREEN_HEIGHT; );
mTextHeight = _text_height( 0, 0, 0 );
mSize = _max( _min( mScrWidth, mScrHeight ) / &BUSY_HAND_THICKNESS;, 40 );
mX = (mScrWidth - mSize) / 2;
mY = (mScrHeight - mSize) / 2;
mLittleHandX[ 0 ] = mX + mSize / 2 - &BUSY_HAND_THICKNESS; / 2;
mLittleHandY[ 0 ] = mY + mSize / 2;
mLittleHandWidth[ 0 ] = mSize / 2 - &BUSY_HAND_THICKNESS; * 2;
mLittleHandHeight[ 0 ] = &BUSY_HAND_THICKNESS;;
mBigHandX[ 0 ] = mX + mSize / 2 - &BUSY_HAND_THICKNESS; / 2;
mBigHandY[ 0 ] = mY + &BUSY_HAND_THICKNESS;;
mBigHandWidth[ 0 ] = &BUSY_HAND_THICKNESS;;
mBigHandHeight[ 0 ] = mSize / 2;
mLittleHandX[ 1 ] = mX + mSize / 2 - &BUSY_HAND_THICKNESS; / 2;
mLittleHandY[ 1 ] = mY + mSize / 2;
mLittleHandWidth[ 1 ] = mSize / 2 - &BUSY_HAND_THICKNESS; * 2;
mLittleHandHeight[ 1 ] = &BUSY_HAND_THICKNESS;;
mBigHandX[ 1 ] = mX + mSize / 2 - &BUSY_HAND_THICKNESS; / 2;
mBigHandY[ 1 ] = mY + mSize / 2;
mBigHandWidth[ 1 ] = mSize / 2 - &BUSY_HAND_THICKNESS;;
mBigHandHeight[ 1 ] = &BUSY_HAND_THICKNESS;;
mLittleHandX[ 2 ] = mX + mSize / 2 - &BUSY_HAND_THICKNESS; / 2;
mLittleHandY[ 2 ] = mY + mSize / 2;
mLittleHandWidth[ 2 ] = mSize / 2 - &BUSY_HAND_THICKNESS; * 2;
mLittleHandHeight[ 2 ] = &BUSY_HAND_THICKNESS;;
mBigHandX[ 2 ] = mX + mSize / 2 - &BUSY_HAND_THICKNESS; / 2;
mBigHandY[ 2 ] = mY + mSize / 2;
mBigHandWidth[ 2 ] = &BUSY_HAND_THICKNESS;;
mBigHandHeight[ 2 ] = mSize / 2 - &BUSY_HAND_THICKNESS;;
mLittleHandX[ 3 ] = mX + mSize / 2 - &BUSY_HAND_THICKNESS; / 2;
mLittleHandY[ 3 ] = mY + mSize / 2;
mLittleHandWidth[ 3 ] = mSize / 2 - &BUSY_HAND_THICKNESS; * 2;
mLittleHandHeight[ 3 ] = &BUSY_HAND_THICKNESS;;
mBigHandX[ 3 ] = mX + &BUSY_HAND_THICKNESS;;
mBigHandY[ 3 ] = mY + mSize / 2;
mBigHandWidth[ 3 ] = mSize / 2 - &BUSY_HAND_THICKNESS;;
mBigHandHeight[ 3 ] = &BUSY_HAND_THICKNESS;;
</script>
</function>
<function name="show" type="void" visibility="public">
<script>
mAnimateFrame = 0;
sAnimate = true;
</script>
</function>
<function name="hide" type="void" visibility="public">
<script>
sAnimate = false;
</script>
</function>
</functions>
<states>
<state var="sAnimate">
<transition value="true">
<display>
<box>
<x>
<eval>mX - &BUSY_BORDER;</eval>
</x>
<y>
<eval>mY - &BUSY_BORDER;</eval>
</y>
<width>
<eval>mSize + &BUSY_BORDER; * 2</eval>
</width>
<height>
<eval>mSize + &BUSY_BORDER; * 2</eval>
</height>
<fg>&BUSY_BG;</fg>
<bg>&BUSY_BG;</bg>
<oval>
<x>
<eval>&BUSY_BORDER;</eval>
</x>
<y>
<eval>&BUSY_BORDER;</eval>
</y>
<width>
<eval>mSize</eval>
</width>
<height>
<eval>mSize</eval>
</height>
<fg>&BUSY_FACE;</fg>
<bg>&BUSY_FACE;</bg>
</oval>
</box>
</display>
<script>
sAnimateTick = true;
</script>
</transition>
<transition value="false">
<script>
sAnimateTick = false;
</script>
</transition>
</state>
<state var="sAnimateTick">
<transition value="true">
<display>
<box>
<x>
<eval&g