WO2017043287A1 - ユーザ・インタフェース・プログラムおよびコンピュータ実装方法 - Google Patents

Abstract

（課題）タッチ操作に連動して生成されるＵＩ画像として、ポリゴンの頂点計算を限定的にし、処理負荷を十分に低減させながら、多様且つ柔軟な画像生成処理を動的に実現するＵＩプログラムを提供する。 (解決手段)本ＵＩプログラムでは、タッチパネル上でのユーザのタッチ操作に対応する領域を決定する領域決定部と、上記領域に対し、所定の座標系の所定の範囲を対応付けて規定する座標規定部と、上記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定する特徴量決定部と、上記領域に関連付けられ、各特徴量を適用した画像を生成する画像生成部と、画像をタッチパネル上の上記領域に表示する画像表示部と、としてタッチパネルを具備するコンピュータに機能させる。

Description

ユーザ・インタフェース・プログラムおよびコンピュータ実装方法

　本発明は、ユーザ・インタフェース（以下、「ＵＩ」と称する。）画像表示のためのＵＩプログラムおよびコンピュータ実装方法に関するものである。より詳細には、スマートフォン上で実行されるゲーム（以下、「スマートフォン・ゲーム」と称する。）で使用され、指等の物体によるタッチ操作に応じて、効果的に、タッチパネル上にＵＩ画像を表示させるためのＵＩプログラムおよびコンピュータ実装方法に関するものである。

　スマートフォンをはじめとしたタッチパネルを具備する昨今のユーザ端末では、タッチパネル上で様々なＵＩが用いられる。例えば、特許文献１では、タッチパネル上のスライド操作に応じて、スライド操作の始点から終点へと伸び、始点側の一端部と終点側の他端部とで大きさ又は形状が異なるカーソルを表示するＵＩについて開示される（特許文献１の〔要約〕参照）。ここでは、スライド操作にわたり、カーソルが長くなるほどカーソルの面積が一定となるようにカーソルの幅を細くするような視覚上の変形処理も実施される（特許文献１の段落〔００１８〕参照）。

特開２０１２－３３０６０号公報

　本発明は、処理負荷を十分に低減させながら、多様且つ柔軟な画像生成処理を動的に実現可能なＵＩプログラムおよびそのためのコンピュータ実装方法を提供することを目的とする。

　上記の課題を解決するために、第１発明は、タッチパネル上でのユーザのタッチ操作に対応する領域を決定する領域決定部と、上記領域に対し、所定の座標系の所定の範囲を対応付けて規定する座標規定部と、上記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定する特徴量決定部と、上記領域に関連付けられ、各特徴量を適用した画像を生成する画像生成部と、画像をタッチパネル上の上記領域に表示する画像表示部と、としてタッチパネルを具備するコンピュータに機能させる、ユーザ・インタフェース（ＵＩ）プログラムが得られる。

　また、第２発明は、タッチパネル上で弾性オブジェクトの形状を変形して表示するユーザ・インタフェース（ＵＩ）プログラムであって、タッチパネル上の第１接触点の周囲に第１弾性オブジェクト画像を生成して表示する第１形成部と、タッチパネル上で第１接触点から第２接触点までのスライド操作が判定された場合に、スライド操作に連動して第１弾性オブジェクト画像を第２接触点に向けて変形させた第２弾性オブジェクト画像を形成して表示する第２形成部と、としてタッチパネルを具備する携帯端末に機能させ、上記第１形成部および上記第２形成部のそれぞれが、第１接触点を含む矩形領域を決定し、矩形領域に対し、所定の座標系の所定の範囲を対応付けて規定し、上記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定し、上記矩形領域に関連付けられ、各特徴量を適用した画像を生成して表示するように構成される、ＵＩプログラムが得られる。

　更に、第３発明は、タッチパネル上でのユーザのタッチ操作に対応する領域を決定するステップと、上記領域に対し、所定の座標系の所定の範囲を対応付けて規定するステップと、上記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定するステップと、上記領域に関連付けられ、各特徴量を適用した画像を生成するステップと、画像を前記タッチパネル上の上記領域に表示させるステップと、を含む、前記タッチ・スクリーンを具備するコンピュータに実装される、ユーザ・インタフェース（ＵＩ）画像表示のための方法が得られる。

　本発明の特徴点および利点は、後述する発明の詳細な説明、並びに添付の図面および特許請求の範囲の記載から明らかなものとなる。

図１は、本発明の実施形態によるＵＩプログラムを実施可能な一例のユーザ端末の模式図である 図２は、図１のユーザ端末の物理的構成を示した模式図である。 図３は、図１のユーザ端末における入出力について示した模式図である。 図４は、本発明の実施形態によるＵＩプログラムをゲーム・プログラムに適用した例示のゲーム画面である。 図５ａは、本発明の実施形態により、タッチ操作に連動してタッチパネル上にＵＩ画像を表示する一連の動作例である。 図５ｂは、本発明の実施形態により、タッチ操作に連動してタッチパネル上にＵＩ画像を表示する一連の動作例である。 図６は、図５ｂで生成されるＵＩ画像を適用するためのＵＶ座標系について示す。 図７は、本発明の実施形態によるＵＩプログラムを用いて実装される主要な機能ブロック図である。 図８ａは、本発明の実施形態によるＵＩプログラムにより実施される基本的な処理フロー図である。 図８ｂは、本発明の実施形態によるＵＩプログラムにより実施される詳細な処理フロー図である。 図９は、本発明の実施形態によるＵＩプログラムで適用される特徴量に関する概略イメージ図である。 図１０ａは、本発明の実施形態によるＵＩプログラムを用いて生成される簡略化した画像イメージ例である。 図１０ｂは、図１０ａに例示したＵＩ画像イメージを生成するための輝度値計算に関するフロー図である。 図１１ａは、本発明の実施形態によるＵＩプログラムを用いて生成される第１実施例のプロシージャル画像について示す。 図１１ｂは、本発明の実施形態によるＵＩプログラムを用いて生成される第１実施例のプロシージャル画像について示す。 図１１ｃは、本発明の実施形態によるＵＩプログラムを用いて生成される第１実施例のプロシージャル画像について示す。 図１２は、本発明の実施形態によるＵＩプログラムを用いて生成される第２実施例のプロシージャル画像について示す。 図１３は、本発明の実施形態によるＵＩプログラムを用いて生成される第３実施例のプロシージャル画像について示す。 図１４は、本発明の実施形態によるＵＩプログラムを用いて生成される第４実施例のプロシージャル画像について示す。 図１５は、本発明の実施形態によるＵＩプログラムを用いて生成されるプロシージャル画像の他の手法との比較を示す。

　［本発明の実施形態の説明］
　最初に、本発明の実施形態の内容を列記して説明する。本発明の実施形態によるＵＩプログラムは、以下のような構成を備える。

　　（項目１）
　タッチパネル上でのユーザのタッチ操作に対応する領域を決定する領域決定部と、
　前記領域に対し、所定の座標系の所定の範囲を対応付けて規定する座標規定部と、
　前記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定する特徴量決定部と、
　前記領域に関連付けられ、各前記特徴量を適用した画像を生成する画像生成部と、
　前記画像を前記タッチパネル上の前記領域に表示する画像表示部と
として前記タッチパネルを具備するコンピュータに機能させる、ユーザ・インタフェース（ＵＩ）プログラム。
　本項目によれば、最小限の計算量で画像を生成可能とする。これにより、メモリサイズを節約でき、画像品質を劣化させることなくＣＰＵ計算量を軽減させることができる。

　　（項目２）
　前記タッチ操作がスライド操作であり、スライド方向およびスライド距離に基づいて前記領域が決定される、項目１記載のＵＩプログラム。
　本項目によれば、スライド操作全般にわたり、処理負荷の点で優れた画像を生成可能とする。

　　（項目３）
　前記画像生成部において、前記特徴量に輝度値を採用する、項目１または２記載のＵＩプログラム。
　本項目によれば、輝度値を適用することを通じて、視覚効果に優れたグラデーションを有する画像を生成することができる。

　　（項目４）
　前記画像生成部において、前記特徴量にアルファ値を採用して、所定のＲＧＢ値と共に用いる、項目１から３のいずれか一項記載のＵＩプログラム。
　本項目によれば、アルファ値を適用することを通じて、視覚効果に優れたグラデーションを有する画像を生成することができる。

　　（項目５）
　前記座標系がＵＶ座標系であり、前記所定の範囲内の前記各座標値が０から１までの範囲のｕ値およびｖ値で規定され、
　前記特徴量決定部において、前記各座標の特徴量が、前記各座標値に基づく特徴化ルールを適用することで決定され、
　前記特徴化ルールが、ｕ値およびｖ値に基づく２次関数の計算ルールを含む、項目１から４のいずれか一項記載のＵＩプログラム。
　本項目によれば、２次関数の計算ルールを適用することを通じて、視覚的に優れた曲線を、過剰な処理負荷を掛けることなく表現することができる。

　　（項目６）
　前記特徴量決定部において、前記各座標の特徴量が、前記各座標値に基づく特徴化ルールを適用することで決定され、
　前記特徴化ルールが、ｕ値および／またはｖ値と前記タッチ操作がスライド操作である場合のスライド距離とに基づく補間ルールを含む、請求項１から５のいずれか一項記載のＵＩプログラム。
　本項目によれば、補間ルールを適用することを通じて、視覚的に優れたグラデーションを有する画像を、処理負荷を掛けることなく生成することができる。

　　（項目７）
　前記画像が３角形状を有する２つのポリゴンから形成される画像である、項目１から６のいずれか一項記載のＵＩプログラム。
　本項目によれば、３角形状を有する２つのみのポリゴンから画像を生成することを可能にする。即ち、最小限の計算量で画像生成を可能とし、メモリサイズの節約およびＣＰＵ計算量の軽減を実現することができる。また、このように生成される画像は、拡大しても決してぼやけるようなことのないものとなる。

　　（項目８）
　タッチパネル上で弾性オブジェクトの形状を変形して表示するユーザ・インタフェース（ＵＩ）プログラムであって、
　前記タッチパネル上の第１接触点の周囲に第１弾性オブジェクト画像を生成して表示する第１形成部と、
　前記タッチパネル上で前記第１接触点から第２接触点までのスライド操作が判定された場合に、前記スライド操作に連動して前記第１弾性オブジェクト画像を前記第２接触点に向けて変形させた第２弾性オブジェクト画像を形成して表示する第２形成部ととして前記タッチパネルを具備する携帯端末に機能させ、前記第１形成部および前記第２形成部のそれぞれが、
　前記第１接触点を含む矩形領域を決定し、
　前記矩形領域に対し、所定の座標系の所定の範囲を対応付けて規定し、
　前記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定し、
　前記矩形領域に関連付けられ、各前記特徴量を適用した画像を生成して表示するように構成される、ＵＩプログラム。
　本項目によれば、最小限の計算量で画像生成を可能とする。これにより、メモリサイズを節約でき、画像品質を劣化させることなくＣＰＵ計算量を軽減させることができる。
　　（項目９）
　項目８記載のＵＩプログラムであって、前記第１形成部において、
　前記矩形領域が前記第１接触点の周囲の正方形領域であり、
　前記第１弾性オブジェクト画像が、前記正方形領域内に形成される円放射状にグラデーションされた画像であり、且つ、３角形状を有する２つのポリゴンから形成される画像である、ＵＩプログラム。
　本項目によれば、視覚的に優れたグラデーションを有する特徴的な画像を、過剰な処理負荷を掛けることなく生成可能とする。

　　（項目１０）
　項目９記載のＵＩプログラムであって、前記第２形成部において、
　前記矩形領域が前記第１接触点および前記第２接触点の周囲の長方形領域であり、
　前記第２オブジェクト画像が、前記長方形領域内に、前記円放射状にグラデーションされた画像を分割して離間し、該離間した間の部分を補間するように更にグラデーションされた画像であり、且つ、３角形状を有する２つのポリゴンから形成される画像である、ＵＩプログラム。
　本項目によれば、視覚的に優れたグラデーションを有する特徴的な画像を、過剰な処理負荷を掛けることなく生成可能とする。

　　（項目１１）
　タッチパネル上でのユーザのタッチ操作に対応する領域を決定するステップと、
　前記領域に対し、所定の座標系の所定の範囲を対応付けて規定するステップと、
　前記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定するステップと、
　前記領域に関連付けられ、各前記特徴量を適用した画像を生成するステップと、
　前記画像を前記タッチパネル上の前記領域に表示させるステップと
を含む、前記タッチ・スクリーンを具備するコンピュータに実装される、ユーザ・インタフェース（ＵＩ）画像表示のための方法。
　本項目によれば、最小限の計算量で画像を生成可能とする。これにより、メモリサイズを節約でき、画像品質を劣化させることなくＣＰＵ計算量を軽減させることができる。

　　（項目１２）
　前記タッチ操作がスライド操作であり、スライド方向およびスライド距離に基づいて前記領域が決定される、項目１１記載の方法。
　本項目によれば、スライド操作全般にわたり、処理負荷の点で優れた画像を生成可能とする。

　　（項目１３）
　前記画像生成部において、前記特徴量に輝度値を採用する、項目１１または１２記載の方法。
　本項目によれば、輝度値を適用することを通じて、視覚効果に優れたグラデーションを有する画像を生成することができる。

　（項目１４）
　前記画像生成部において、前記特徴量にアルファ値を採用して、所定のＲＧＢ値と共に用いる、項目１１から１３のいずれか一項記載の方法。
　本項目によれば、アルファ値を適用することを通じて、視覚効果に優れたグラデーションされた画像を生成することができる。

　［本発明の実施形態の詳細］
　これより図面を参照して、本発明の実施形態による、ＵＩ画像表示のためのＵＩプログラムおよびコンピュータ実装方法について説明する。図中、同一の構成要素には同一の符号を付してある。本ＵＩプログラムは、主に、スマートフォン・ゲームとしてのゲーム・プログラムの一部として適用可能である。より詳しくは、本ＵＩプログラムは、ゲーム・プログラムの一部としてゲームを進行させ、仮想空間や該仮想空間内のゲーム・キャラクタの動作を制御するために用いることが可能である。

　携帯端末のハードウェア構成
　図１に示すスマートフォン１は、携帯端末の一例であり、タッチパネル２を備える。スマートフォンのユーザは当該タッチパネル２上でのタッチ操作を含むユーザ操作を介してゲームの進行を制御することができる。なお、本発明の実施形態によるＵＩプログラムを実行するための携帯端末は、図２のようなスマートフォン１に限定されず、例えば、ＰＤＡ、タブレット型コンピュータのデバイスなど、タッチパネルを備える携帯端末であれば如何なるデバイスともできることが理解される。

　図２に示すように、スマートフォン１は、互いにバス接続されたＣＰＵ３、主記憶４、補助記憶５、送受信部６、表示部７および入力部８を備える。このうち主記憶４は例えばＤＲＡＭなどで構成され、補助記憶５は例えばＨＤＤなどで構成されている。補助記憶５は、本発明の実施形態によるＵＩプログラムやゲーム・プログラムを記録可能な記録媒体である。補助記憶５に格納された各種プログラムは、主記憶４上に展開されてＣＰＵ３によって実行される。なお、主記憶４上には、ＣＰＵ３がＵＩプログラムに従って動作している間に生成したデータやＣＰＵ３によって利用されるデータも一時的に格納される。送受信部６はＣＰＵ３の制御によりスマートフォン１とネットワークとの間の接続（無線接続および／または有線接続）を確立して各種情報の送受信を行う。表示部７は、ＣＰＵでの制御の下でユーザに提示することになる各種情報を表示する。入力部８は、ユーザのタッチパル２に対するタッチ入力操作（主に、タップ操作、スライド（スワイプ）操作、およびフリック操作等の物理的接触操作）を検知する。

　表示部７および入力部８は、上述したタッチパネル２に相当する。図３に示すように、タッチパネル２は、入力部８に相当するタッチセンシング部３０１、および表示部７に相当する液晶表示部３０２を有する。タッチパネル２は、ＣＰＵ３による制御の下で、画像を表示して、スマートフォンのユーザによるインタラクティブなタッチ操作（タッチパネル２における物理的接触操作等）を受ける。そして、制御部３０３での制御に基づいて、対応するグラフィックを液晶表示部３０２に表示する。

　より詳細には、上記タッチセンシング部３０１は、ユーザによるタッチ操作に応じた操作信号を制御部３０３に出力する。タッチ操作は、何れの物体によるものとすることができ、例えば、ユーザの指によりなされてもよいし、スタイラス等を用いてもよい。また、タッチセンシング部３０１として、例えば、静電容量タイプのものを採用することができるが、これに限定されない。制御部３０３は、タッチセンシング部３０１からの操作信号を検出すると、ユーザのキャラクタへの操作指示として判断し、当該指示操作に応じたグラフィック（図示せず）を液晶表示部へ表示信号として送信する処理を行う。制御部３０３で実装される主要機能については、図７を参照して後述する。液晶表示部３０２は、表示信号に応じたグラフィックを表示する。

　ゲーム画面例
　図４のゲーム画面例を参照しながら、本発明の実施形態によるＵＩプログラムおよびコンピュータ実装方法による動作について概略的に説明する。図４の画面例では、３次元仮想ゲーム空間内２０にキャラクタ１０が配置されている。そして、仮想カメラ（非図示）がキャラクタ１０の画面手前上部から該キャラクタ１０を撮影した視野画像が２次元画像としてタッチパネルに表示されている。同時に、２つのＵＩ画像（画面左上の３０と画面右下の４０）が視界画像に重畳されている。ＵＩ画像３０，４０は、ユーザによるタッチパネルへのタッチ操作（例えば指によるスライド操作）の結果として、タッチパネル上に表示されたものである。そして、当該ＵＩ画像３０，４０が、本発明の実施形態によるＵＩプログラムおよびコンピュータ実装方法で生成されるものである。

　スマートフォン・ゲームでは、通例、ユーザがスマートフォンを縦持ちして片手で操作することが多いが、勿論これに限らず、横持ちにより端末を両手で操作してもよい。両手で画面を操作する場合は、左手と右手によりそれぞれタッチ操作が許容される。図示したＵＩ画像３０，４０も、左手と右手のタッチ操作によるものにそれぞれ対応するものである。

　これらＵＩ画像により、ゲーム進行命令が生成および実行される。例えば、左手によるＵＩ画像３０は「Ｍｏｖｅ」と表示されているとおり、ＵＩ画像が示している（右上）方向にキャラクタ１０をゲーム空間２０内の平面上を移動させる命令を実行する。同様に、右手によるＵＩ画像４０は「Ｃａｍｅｒａ」と表示されているとおり、ＵＩ画像が示している右上方向に視野を変更するよう仮想カメラをゲーム空間２０内で移動させる命令を実行する。

　このように、本発明の実施形態によるＵＩ画像表示のためのＵＩプログラムは、ユーザのタッチ操作に応じて、ＵＩ画像を生成および表示する。本ＵＩプログラムが、特にゲーム・プログラムに適用される場合は、それに対応したキャラクタ操作機能をコンピュータに実行させる。以下では、簡単のためにユーザによる片手操作に応じたＵＩ画像生成および表示処理について例示により説明する。

　ＵＩ画像表示処理
　これより、図５ａから図８ｂを参照して、本発明の実施形態によるＵＩ画像表示のためのＵＩプログラムおよびコンピュータ実装方法について説明する。まず、図５ａおよび図５ｂを参照して、タッチパネルへのタッチ操作に連動してユーザ・インタフェース（ＵＩ）画像を出力する一連の動作の概要について説明する。図５ａは、タッチ操作がタップ操作である場合について示す。一方、図５ｂは、タッチ操作がスライド操作である場合である場合について示す。

　図５ａの例に示すように、まず（ｉ）において、タッチパネル２に対し、ユーザは指によるタップ操作を任意の位置で行う。当該タップ操作に対し、（ｉｉ）においてタップ位置の周囲に正方形の領域Ｄ １ （点線領域）が決定される。引き続き（ｉｉｉ）において領域Ｄ １ 上に円放射状の画像Ｉ １ が生成および表示される。ここで、「円放射状」とは、円形状を有し、且つ、円の中心から外周に向けて放射状にグラデーションされた状態のことである。以下では、「円放射状の画像」や「円放射状にグラデーションされた」等のように用いる同様に、図５ｂの例では、（ｉ）において、タッチパネル２に対し、ユーザは指によるスライド操作を任意のスライド開始点からスライド終了点まで行う。図５ｂの場合は、当該スライド操作に対し、（ｉｉ）において、スライド開始点およびスライド終了点の周囲に長方形の領域Ｄ ２ （点線領域）が決定される。なお、スライド操作の前後にわたり領域の幅は一定としているが、これに限定されない。

　引き続き（ｉｉｉ）において、当該スライド操作に連動して、長方形領域Ｄ ２ 上に画像Ｉ ２ を生成して重畳する。画像Ｉ ２ は、図５ａの画像Ｉ １ をスライド終了点に向けて引き伸ばすようにして変形させる。具体的には、図５ｂの（ｉｉｉ）のように表示される領域Ｄ ２ 上の画像Ｉ ２ は、図５ａの（ｉｉｉ）の画像Ｉ １ をスライド操作方向に２つに分割して離間させ、そして、当該離間した間の部分を、更に、ｕ値および／またはｖ値とスライド距離とに基づいて補間するように、グラデーションと共に生成される。

　本発明の実施形態によれば、図５ｂの（ｉｉ）で領域Ｄ ２ が決定されると、図６（ａ）に示すように、当該領域Ｄ ２ に対して、ＵＶ座標と一般に称される座標系が適用される（なお、ＵＶ座標系はテクスチャ座標系と称されることもある。）。ＵＶ座標系は、ｕ値は幅を、ｖ値は高さを表す２次元の座標系である。そして、ｕ値およびｖ値の各々の座標値が０から１となる範囲に小数点形式で表され、それぞれがテクスチャ座標の位置を構成する。例えば、ＵＶ座標系での位置は、座標値（０．５，０．５），（０．１２５，０．６２５）というように、上記所定の数のｕ値およびｖ値のセットで特定することができる。即ち、領域Ｄ ２ は、図６（ａ）のようにｕ値およびｖ値がそれぞれ０以上かつ１以下の範囲となる、（０，０），（１，０），（０，１），（１，１）の４点から構成される矩形領域となる。

　領域Ｄ ２ 上に生成される画像、即ち、テクスチャ座標から生成したテクスチャ画像Ｉ ２は、３角形状を有する２つのポリゴン、または４角形状を有する１つのポリゴンのみから形成可能なものである。つまり、テクスチャ画像Ｉ ２ は、最低４つの頂点情報のみをメモリに格納して表示可能なものであるため、従来技術のように、多数のポリゴンから構成するものとは処理負荷の点で大きく異なる。本発明は、視覚的に優れたグラデーションを有するテクチャ画像を、最小限の計算量で生成可能とする。これと共に、処理時のメモリサイズを節約でき、画像品質を劣化させることなくＣＰＵ計算量を軽減させることができるものである。なお、以降において、上記テクスチャ座標から動的に生成されるテクスチャ画像のことを「プロシージャル画像」と称することにする。一般的に、「プロシージャル」(procedural)とは動的に生成することを意味する語である。

　図６（ｂ）に示すように、矩形領域Ｄ ２ に対し、生成したプロシージャル画像Ｉ ２ を関連付ける。つまり、グラデーション表現されたプロシージャル画像Ｉ ２ を矩形領域Ｄ ２ 上に被せるようにマップする。なお、プロシージャル画像Ｉ ２ の生成、特にグラデーション表現については図９以降を参照して後述する。また、図６（ｂ）およびこれ以降の図面では、グラデーション表現されたプロシージャル画像を図示する際、背景色を灰色にして示してある。これは、白色を明示的に可視化するために敢えて本願図面において対処したものである。

　図７は、本発明の実施形態によるＵＩプログラムとして実装され、タッチパネルを具備する携帯端末に機能させる主要な機能のセットについて示したものである。当該機能セットは、図３に示した制御部３０３に相当する制御部５０を構成する。つまり、制御部５０（３０３）を通じて、操作信号としての入力を処理し、表示信号としての出力を生成することになる。制御部５０は、タッチパネルを通じたユーザ入力操作およびプロシージャル画像形成に関連するユーザ操作部１００、タッチ操作に連動して図５に示したようなＵＩ画像を生成および表示するためのＵＩ形成部２００、並びに当該ユーザ入力操作に応じたゲーム進行や仮想空間内のキャラクタを操作させるゲーム進行部（キャラクタ操作）５００を含む。

　ユーザ操作部１００は、接触・非接触判定部１２０およびスライド操作判定部１４０を含む。接触・非接触判定部１２０では、タッチパネルへのタッチ操作やデタッチ操作を判定する。また、スライド操作判定部１４０では、接触を通じたタッチ操作・デタッチ操作によるユーザ操作がスライド操作であるか（または単なるタップ操作であるか）を判定する。

　ユーザ操作部１００で判定されるタッチ操作またはスライド操作に応答して、ＵＩ形成部２００は第１形成部および第２形成部として機能する。第１形成部では、図５ａの（ｉｉｉ）を参照して説明したように、接触点の周囲に円放射状のグラデーションを有するプロシージャル画像を生成および表示する。また、第２形成部では、図５ｂの（ｉｉｉ）を参照して説明したように、円放射状のグラデーションを有するプロシージャル画像に対し、スライド終了点に向けて変形させたような更なるグラデーションを有するプロシージャル画像を生成および表示する。ＵＩ形成部２００は、次に説明するように、領域決定部２１０、ＵＶ座標規定部２３０、特徴量決定部２５０、ＵＩ画像生成部２７０、およびＵＩ画像出力部２９０を含む。

　領域決定部２１０では、図５で説明したタッチ操作に対応した領域を規定する。ＵＶ座標規定部２３０では、図６で説明したＵＶ座標系を、ｕ値およびｖ値が０から１までの範囲の所定の値となるように、領域に対応付けて規定する。特徴量決定部２５０では、ＵＶ座標系における上記領域の範囲に対し、各座標値に基づく特徴化ルールを適用して、各座標の特徴量を決定する。ＵＩ画像生成部２７０では、上記領域に関連付けられると共に、各特徴量を適用した画像をＵＩ画像として生成する。そして、ＵＩ画像表示部２９０では、生成したＵＩ画像をタッチパネル上の上記領域部分に表示する。なお、ＵＩ画像生成については、図９以降を参照して後述する。

　ＵＩ形成部２００で生成されたＵＩ画像は、例えば図４に示したようなゲームでは、仮想ゲーム空間画像に重畳されると共に、ゲーム進行部５００において、対応するゲーム進行命令を生成および実行してゲームを進行させる。

　　図８ａおよび図８ｂは、本発明の実施形態によるＵＩ画像表示のためのコンピュータ実装方法について説明したフロー図である。そして、図８ａのフロー図に示したステップＳ１０７の詳細が図８ｂのフロー図に相当する。

　図８ａでは、ステップＳ１０１で処理が開始されると、ステップＳ１０３では、接触・非接触判定部１２０によって、タッチパネルへのタッチ操作を判定する。また、ステップＳ１０５では、ステップＳ１０３に応じて、スライド操作判定部１４０によって、タッチ操作がタップ操作かスライド操作であるかについて更に判定する。ここで、タップ操作は、タッチパネルへの１つの接触点のみで構成されるタッチ操作を意味する。一方、スライド操作は、タッチパネルへの２つの接触点（即ち接触開始点および接触終了点）を含んでなされる連続的なタッチ操作を意味する。

　ステップＳ１０５でタッチ操作判定がなされると、続いてステップＳ１０７において、ＵＩ形成部２００によってプロシージャル画像を生成および表示する。タッチ操作がタップ操作の場合は、ステップＳ１０７１において、図５ａにも示した、接触点を中心とした正方形領域に形成される円放射状のグラデーションを有する上記画像Ｉ １ を生成してＵＩ画像として表示する。一方、タッチ操作がスライド操作の場合は、ステップＳ１０７３において、図５ｂにも示した、接触開始点および終了点の周囲の長方形領域内に、円放射状のグラデーションを有する画像Ｉ １ をスライド操作方向に変形した画像Ｉ ２ を生成して表示する。具体的には、画像Ｉ １ を分割して離間し、離間した間の部分を補間するようにグラデーションされた画像Ｉ ２ を生成してＵＩ画像として表示する。

　ステップＳ１０８では、ゲーム進行部５００によって、ステップＳ１０７で生成したＵＩ画像に対し、対応するゲーム進行命令を生成および実行して、図４に示したゲーム進行制御を実施する。ゲーム進行命令は、ここでは、キャラクタに対し移動等の動作を行わせるキャラクタ操作命令や、ゲーム空間を撮影する仮想カメラの動作を制御させる仮想カメラ操作命令を含むのがよい。

　次に図８ｂを参照して、上記ステップＳ１０７について詳細に説明する。図示のように、ステップＳ１０７はステップＳ２０１からＳ２０５を含む。なお、図８ａに示したように、ステップＳ１０７は、タッチ操作に応じてステップＳ１０７１およびＳ１０１７３の２種類が想定されるが、これらは、後述のステップＳ２０３において適用される際の違いによるものである。

　ステップＳ２０１では、領域決定部２１０によって、タッチパネル上でのユーザのタッチ操作に対応する領域を決定する。例えば、図５ａの領域Ｄ １ および図５ｂの領域Ｄ ２ がこれに該当する。ステップＳ２０２では、ＵＶ座標規定部２３０によって、上記領域に対し、ＵＶ座標系におけるｕ値およびｖ値を０から１まで範囲で対応付けて規定する。ステップＳ２０３では、特徴量決定部２５０によって、０から１まで範囲内に対し、各座標値に基づく特徴化ルールを適用して、各座標の特徴量を決定する。ステップＳ１０７１とステップＳ１０７２は、当該ステップＳ２０３で与える特徴化ルールの点が大きく異なる。

　次いで、ステップＳ２０４では、ＵＩ画像生成部２７０によって、ステップＳ２０３で決定した特徴量を適用した画像を、上記領域に関連付けて生成する。ここでは、ＵＶ座標系における各位置を、ＵＩ画像が有する各画素に関連付け、更に、各位置の特徴量を、各画素が有する値（図９で後述する輝度値や不透明度値）として適用する。最後にステップＳ２０５では、ＵＩ画像表示部によって、ＵＩ画像をタッチパネル上の対応の領域に表示する。

　特徴量の適用
　ステップＳ２０３で決定される特徴量を、ステップＳ２０５で画像に適用することに関連して、図９にその概念を例示した概略イメージ図を示す。本発明の実施形態によれば、ＵＶ座標系における各位置を、プロシージャル画像が有する各画素に関連付け、各画素に対して各特徴量を適用する。ｕｖ座標系（図６（ａ））においてｕ値およびｖ値がそれぞれ０から１までの範囲に対応するように、図９でも特徴量も０から１までの範囲で表される。しかしながら、特徴量が当該範囲に限定されないことが当業者に理解されるべきである。

　図９では、特徴量が０から１まで変化する場合に、対応する１つの画素がどのような表示となるかについての一連の遷移の様子が示される。なお、図中、各画素には黒枠を付してあるが、これは図示上の明瞭化のためであり、実際の画素には反映されない点に留意すべきである。図９では、特徴量を０．０→０．２５→０．５→０．７５→１．０と０．２５刻みで変化させる。その際、（１）特徴量に「輝度値」を採用した場合、および（２）特徴量に「白地ベースの不透明度値」を採用した場合に、どのような表示パターンとして遷移するかについて示している。

　上記（１）は、特徴量を「輝度値」として、輝度値０を「黒色」、輝度値１を「白色」とモノクロ化して対応付けた場合である。輝度値が０から１に近づくにつれ、黒色から白色に徐々に遷移する様子が理解される。なお、この例では特徴量に「輝度値」を採用しているが、これには限定されず、他にも「明度」のような色情報を採用した場合も類似の結果が得られることが当業者には理解される。また、色情報について、この例のようにモノクロ化することには限定されず、一般に用いられる０から２５５の整数値で表現されるＲＧＢ（Ｒｅｄ：赤、Ｇｒｅｅｎ：緑、Ｂｌｕｅ：青）値に基づいて決定される０から１までの小数範囲の如何なる複数の組み合わせともすることができることが当業者には理解される。

　他方、上記（２）は、特徴量を「白地ベースの不透明度」として、不透明度値０を「完全透明」（透明率：１００％）と対応付け、また、不透明度値１を「完全不透明」（透明率：０％）と対応付けた場合である。ここで、不透明度値は、上記（１）のＲＧＢで表現される色情報とは概念が異なり、当該技術分野では「アルファ値」と一般に称される透過度を示す指標に相当する。そして、０から２５５の整数の範囲で通常表現されるアルファ値を、０から１までの小数の範囲で表したのが、ここでの「不透明度値」ということになる。図示のように、不透明度値が０の場合は完全透明状態であり、背景のグレー色に同化している。そして、不透明度値が１に近づくにつれ、基準としたベース色である白色に遷移する様子が理解される。なお、この例では、基準ベース色を「白色」（即ち「Ｒ：２５５，Ｇ：２５５，Ｂ：２５５」の値）に設定したが、これに限定されず、ＲＧＢ値で表現される如何なる値に設定することができる。即ち、プロシージャル画像も任意の基準ベース色のグラデーションを有する画像として形成することができる。基準ベース色を変えることにより、例えば図４に示したゲーム画面例での２つのＵＩ画像３０，４０にように、異なる色彩のグラデーションを有する画像を生成することができる。

　図９では、特徴量に基づく１つの画素の表示態様について説明した。次の図１０ａでは、ＵＶ座標系において複数の画素から構成され、グラデーションを有する画像について説明する。図１０ａは、グラデーションを有する画像を示し、そして、図１０ｂは当該画像を生成するための処理フローについて示す。なお、ここでは、特徴量として図９の（１）「輝度値」を採用した場合について想定する。

　図１０ａのようなグラデーションを有する画像例は、ＵＶ座標系の４点（０，０），（１，０），（０，１），（１，１）から形成される矩形領域を８個の小領域Ｌ （ｉ，ｊ）（即ち、Ｌ （１，１） からＬ （４，２） ）に分割し、各小領域に対して次に説明する特徴化ルールを適用して全体としてグラデーションを有する画像を生成する。当該画像は、Ｕ軸方向およびＶ軸方向共に、隣接する各小領域について輝度値が「０．２５」間隔となるようにセットされている。例えば、小領域Ｌ （１，１） は、ＵＶ座標系の４点（０，０），（０．２５，０），（０，０．５），（０．２５，０．５）から形成される矩形領域であり、当該領域にわたる輝度値が「０．２５」となるように各画素がセットされる。同様に、小領域Ｌ （４，２） は、ＵＶ座標系の４点（０.７５，０．５），（１，０．５），（０．７５，１），（１，１）から形成される矩形領域であり、当該領域にわたる輝度値が「０．７５」となるように各画素がセットされる。

　図１０ａのようなグラデーションを有する画像は、図１０ｂの処理フローに示すような輝度値計算、即ち各（ｕ，ｖ）座標値に基づく特徴化ルールを用いて実装される。具体的には、まずステップＳ３０１およびＳ３０２において、ｕ値およびｖ値とｉ値およびｊ値との対応付けをそれぞれ行う。ステップＳ３０１では、ｕ値×４を計算し、更にその値の小数点以下を切り上げることで整数値ｉをセットする。当該計算により、ｕ値が０から０．２５の範囲ではｉ＝１、ｕ値が０．２５から０．５の範囲ではｉ＝２、ｕ値が０．５から０．７５の範囲ではｉ＝３、ｕ値が０．７５から１の範囲ではｉ＝４とセットされ、図１０ａのｕ値とｉ値の対応付けができていることが理解される。同様に、ステップＳ３０２では、ｖ値×２を計算し、更にその値の小数点以下を切り上げることで整数値ｊをセットする。当該計算により、ｖ値が０から０．５の範囲ではｊ＝１、ｕ値が０．５から１の範囲ではｊ＝２とセットされ、図１０ａのｖ値とｊ値の対応付けができていることが理解される。

　次のＬ（ｉ，ｊ）の輝度値の計算では、ｊの値が「１」か「２」かによって計算式が分かれる。即ち、ｊ＝１の場合（ステップＳ３０３）は、ステップＳ３０４で数式「Ｌ（ｉ，１）の輝度値＝０．２５×整数ｉ」によって輝度値を計算する。一方、ｊ＝２の場合（ステップＳ３０５）は、ステップＳ３０６で数式「Ｌ（ｉ，２）の輝度値＝０．２５×（整数ｉ－１）」によって輝度値を計算する。

　このようにＬ（ｉ，ｊ）の輝度値を計算することにより、図１０ａに示した８つの小領域に対してセットする輝度値が決定され、ＵＶ座標系の矩形領域全体としてグラデーションを有する画像を生成することができる。生成される画像について、３角形状を有する２つのポリゴン、または４角形状を有する１つのポリゴンのみから形成されるものである。この点、本処理は、多数のポリゴンの頂点計算、並びに各頂点のメモリ格納・メモリアクセスを要することがなく、処理負荷が非常に軽いものとすることができる。なお、上記図１０ａおよび図１０ｂの例は、特徴量として輝度値を採用して画像生成したが、代替として、図９を参照して説明したように、特徴量に不透明度（アルファ値）を採用してＲＧＢ値と共に画像生成してもよく、更には輝度値および不透明度の組み合わせでもよいことが当業者には理解される。

　上記のようにＵＶ座標値に基づいて生成されるプロシージャル画像について、そのグラデーション態様は数多くのパターンを想定することができる。そこで、以下に幾らかの好適な実施例と共に、様々なグラデーション態様について更に説明する。なお、以下の実施例では、ユーザによるタッチ操作が、距離ｄだけスライドさせるスライド操作であることを想定する。つまり、領域決定部２１０では、スライド方向およびスライド距離ｄに基づいて矩形領域を決定する。また、決定される矩形領域の幅は一定（２×ｒ）であることを想定する。また、Ｌｕｍ（ｕ，ｖ）は、ＵＶ座標系における座標値（ｕ，ｖ）に対応する輝度値を示すものとする。

　第１実施例
　図１１ａから図１１ｃに示す一連の画像を形成する第１実施例では、ＵＶ座標値に基づく８つの特徴化ルール（１－１）から（１－８）を組み合わせて、各特徴化ルールに基づくＵＶ座標の特徴量を計算しながらグラデーションを決定する。

　１）図１１ａに示した特徴化ルール（１－１）では、特徴量として輝度値を採用する。そして、Ｕ軸方向に輝度値を０から１まで連続的に分布させる。即ち、輝度値Ｌｕｍ（ｕ，ｖ）は、ＵＶ座標系での０≦ｕ値≦１、且つ０≦ｖ値≦１の範囲（以下、０≦ｕｖ値≦１と略す。）に対し、次の数式
Ｌｕｍ（ｕ，ｖ）＝ｕ
として定義されるパラメータｕの関数式で計算される。計算された輝度値をプロシージャル画像として適用することにより、図示したようにＵ軸方向に沿ってグラデーションを有するプロシージャル画像を生成することができる。

　２）図１１ａに示した特徴化ルール（１－２）でも、特徴量として輝度値を採用する。そして、Ｖ軸方向に輝度値を０から１まで連続的に分布させる。即ち、輝度値Ｌｕｍ（ｕ，ｖ）は、ＵＶ座標系での０≦ｕｖ値≦１の範囲に対し、次の数式
Ｌｕｍ（ｕ，ｖ）＝１－ｖ
として定義されるパラメータｖの関数式で計算される。計算された輝度値をプロシージャル画像として適用することにより、図示したようにＶ軸方向に沿ってグラデーションを有するプロシージャル画像を生成することができる。

　３）図１１ａに示した特徴化ルール（１－３）でも、特徴量として輝度値を採用する。そして、Ｕ軸方向に、輝度値０から１、且つ１から０まで、ｕ値＝０．５を境界にして連続的に分布させる。即ち、輝度値Ｌｕｍ（ｕ，ｖ）は、ＵＶ座標系での０≦ｕｖ値≦１の範囲に対し、次の数式
Ｌｕｍ（ｕ，ｖ）＝ａｂｓ｛（ｕ－０．５）×２｝
として定義されるパラメータｕの関数式で計算される。なお、ａｂｓ関数は、入力値に対してその絶対値を返す関数として知られる。計算された輝度値をプロシージャル画像として適用することにより、図示したようにＵ軸方向に沿ってグラデーションを有するプロシージャル画像を生成することができる。

　４）図１１ｂに示した特徴化ルール（１－４）でも、特徴量として輝度値を採用する。そして、Ｕ軸方向に、輝度値０から１、且つ１から０まで、ｕ値＝０．５を境界にして連続的に分布させる。即ち、輝度値Ｌｕｍ（ｕ，ｖ）は、ＵＶ座標系での０≦ｕｖ値≦１の範囲に対し、次の数式
Ｌｕｍ（ｕ，ｖ）＝｛（ｕ－０．５）×２｝＾２
として定義されるパラメータｕの関数式で計算される。特徴化ルール（１－３）とは、絶対値とするか、２乗するかの点で異なる。計算された輝度値をプロシージャル画像として適用することにより、図示したようなＵ軸方向に沿ってグラデーションを有するプロシージャル画像を生成することができる。

　５）図１１ｂに示した特徴化ルール（１－５）でも、特徴量として輝度値を採用する。そして、Ｖ軸方向に、輝度値を０から１まで、且つ１から０までｖ値＝０．５を境界に連続的に分布させる。即ち、輝度値Ｌｕｍ（ｕ，ｖ）は、ＵＶ座標系での０≦ｕｖ値≦１の範囲に対し、次の数式
Ｌｕｍ（ｕ，ｖ）＝｛（ｖ－０．５）×２｝＾２
として定義されるパラメータｖの関数式で計算される。計算された輝度値をプロシージャル画像として適用することにより、図示したようなＶ軸方向に沿ってグラデーションを有するプロシージャル画像を生成することができる。

　６）図１１ｂに示した特徴化ルール（１－６）でも、特徴量として輝度値を採用する。そして、Ｕ軸およびＶ軸の両方向に、輝度値を０から１まで、且つ１から０までｕ値＝０．５、ｖ値＝０．５を境界に各々連続的に分布させる。即ち、輝度値Ｌｕｍ（ｕ，ｖ）は、ＵＶ座標系での０≦ｕｖ値≦１の範囲に対し、次の数式
Ｌｕｍ（ｕ，ｖ）＝｛（ｕ－０．５）×２｝＾２＋｛（ｖ－０．５）×２｝＾２
として定義されるパラメータｕおよびｖの２次関数式で計算される。計算された輝度値をプロシージャル画像として適用することにより、図示したようなＵ軸およびＶ軸方向に沿って楕円放射状のグラデーションを有するプロシージャル画像を生成することができる。ＵＶ座標によって表現される矩形が正方形の場合は、円放射状のプロシージャル画像が生成される。

　なお、図９に関連し、特徴量は０から１の範囲内にあるものと説明したが、これに限定されない。即ち、輝度値（特徴量）を計算した結果、値が０未満となる場合は「０」の特徴（即ち黒色）を有するとしてもよいし、１より大きくなる場合は「１」の特徴（即ち白色）を有するとしてもよい。上記２次関数式の計算においても輝度値が１より大きくなる領域部分が矩形の４頂点周辺に存在する。本実施例１では、当該領域部分は、図示のように全て白色となるように処理している。

　７）図１１ｃに示した特徴化ルール（１－７）でも、特徴量として輝度値を採用する。ここでは、ルール（１－６）で生成した楕円放射状のグラデーションの外側白色部分、即ち輝度値が１より大きい領域部分に対して、次のルール（１－８）で不透明化処理するための事前準備として、反転処理を行って輝度値を０より小さくする。反転処理された輝度値をプロシージャル画像として適用することにより、図示したようなＵ軸およびＶ軸方向に沿って楕円放射状のグラデーションを有し、かつ外側が黒色を有するプロシージャル画像を生成することができる。

　８）図１１ｃに示した特徴化ルール（１－８）では、これまでの特徴化ルール（１－１）から（１－７）とは異なり、特徴量として不透明度値（アルファ値）を採用する。つまり、特徴化ルール（１－７）の結果生じた、輝度値としての特徴量の分布に対し、引き続き、特徴化ルール（１－８）では当該特徴量を不透明度値として採用する。この場合、図９において（１）特徴量に輝度値を採用する場合、および（２）特徴量に不透明度値を採用する場合の２つについて違いを図示したように、特徴量の値に応じて、特徴化ルール（１－７）で生成されたプロシージャル画像のグラデーションを図示のように変化させることができる。つまり、特徴化ルール（１－７）に対し、図示したようなＵ軸およびＶ軸方向に楕円放射状の不透明化処理されたグラデーションを有するプロシージャル画像を新たに生成することができる。なお、本明細書では、図９の（２）のように特徴量に不透明度値を採用して処理することを不透明化処理と称している。

　第２実施例
　図１２に示す第２実施例では、ＵＶ座標値に基づく３つの特徴化ルール（２－１）から（２－３）を組み合わせて、各特徴化ルールに基づくＵＶ座標の特徴量を計算しながらグラデーションを決定する。ここでは、スライド操作に対応する矩形領域の幅を２ｒと、スライド操作距離をｄと標記する。即ち、タッチパネル上でのスライド操作に対応する矩形領域（例えば、図５ｂの領域Ｄ ２ ）の大きさは、「横（ｄ＋２ｒ）×縦２ｒ」ということになる。

　第２実施例では、ＵＶ座標系の矩形領域をＵ軸方向に３つの領域部分に分割する。第１部分は、ｕ値が「０」から「ｒ／（２ｒ＋ｄ）」となる部分、第２部分は、ｕ値が「ｒ／（２ｒ＋ｄ）」から「（ｒ＋ｄ）／（２ｒ＋ｄ）」となる部分、そして第３部分は、ｕ値が「（ｒ＋ｄ）／（２ｒ＋ｄ）」から「１」となる部分である。

　１）図１２に示した特徴化ルール（２－１）では、特徴量として輝度値を採用する。そして、Ｕ軸方向に沿って輝度値Ｌｕｍ（ｕ，ｖ）を０から１まで離散的に分布させる。輝度値Ｌｕｍ（ｕ，ｖ）の分布態様は次のとおりである。
・第１部分では、Ｌｕｍ（ｕ，ｖ）＝０（定数）。即ち黒色。
・第２部分では、Ｌｕｍ（ｕ，ｖ）＝０．５（定数）。即ちグレー色。
・第３部分では、Ｌｕｍ（ｕ，ｖ）＝１（定数）。即ち白色。
上記に基づく輝度値Ｌｕｍ（ｕ，ｖ）をプロシージャル画像として適用することにより、図示したようなプロシージャル画像を生成することができる。

　２）図１２に示した特徴化ルール（２－２）でも、同様に特徴量として輝度値を採用する。そして、Ｕ軸方向に沿って輝度値を０から１まで離散的に分布させる。輝度値Ｌｕｍ（ｕ，ｖ）の分布態様は次のとおりである。
・第１部分では、Ｌｕｍ（ｕ，ｖ）＝１（定数）。即ち白色。
・第２部分では、Ｌｕｍ（ｕ，ｖ）＝０（定数）。即ち黒色。
・第３部分では、Ｌｕｍ（ｕ，ｖ）＝１（定数）。即ち白色。
上記に基づく輝度値Ｌ（ｕ，ｖ）をプロシージャル画像として適用することにより、図示したようなプロシージャル画像を生成することができる。

　３）図１２に示した特徴化ルール（２－３）でも、特徴量として輝度値を採用する。そして、Ｕ軸方向に沿って、輝度値を０から１まで連続的に分布させる。具体的には、輝度値Ｌｕｍ（ｕ，ｖ）の分布態様は次のとおりである。
・第１部分では、Ｌｕｍ（０，ｖ）＝０、且つ、Ｌｕｍ（ｒ／（２ｒ＋ｄ），ｖ）＝０．５とし、その間（０＜ｕ＜ｒ／（２ｒ＋ｄ））では、Ｌｕｍ（ｕ，ｖ）を０（黒色）から０．５（グレー色）に向けて線形補間する。（以下、線形補間関数ｆ（ｕ）で表す。）
・第２部分では、Ｌｕｍ（ｕ，ｖ）＝０．５（定数）。即ち、グレー色。
・第３部分では、Ｌｕｍ（（ｒ＋ｄ）／（２ｒ＋ｄ），ｖ）＝０．５、且つ、Ｌｕｍ（１，ｖ）＝１とし、その間（（ｒ＋ｄ）／（２ｒ＋ｄ）＜ｕ＜１）では、Ｌｕｍ（ｕ，ｖ）を０．５（グレー色）から１（白色）に向けて線形補間する（以下、線形補間関数ｇ（ｕ）で表す。）
上記に基づく輝度値Ｌ（ｕ，ｖ）をプロシージャル画像として適用することにより、図示したようなグラデーションを有するプロシージャル画像を生成することができる。

　第３実施例
　図１３に示す第３実施例では、第１実施形態および第２実施形態で生成される各特徴化ルールを組み合わせることで、より柔軟なグラデーションを決定する。より具体的には、第２実施形態における図１２の特徴化ルール（２－３）を適用した結果として得られる特徴量（即ち、輝度値）の値に対して、第１実施形態における特徴化ルールを適用する。具体的には、第１実施形態における図１１ｂの特徴化ルール（１－６）から図１１ｃの特徴化ルール（１－８）まで順次適用する。これにより、各特徴化ルール（２－３）および（１－６）から（１－８）に基づくＵＶ座標の特徴量を計算して、対応するプロシージャル画像を生成することができる。

　１）まず、第２実施形態における図１２の特徴化ルール（２－３）で計算される輝度値（特徴量）Ｌｕｍ（ｕ，ｖ）を用いて、新たにｕ’値およびｖ’値を次のように設定する。
・第１部分では、ｕ’＝ｆ（ｕ），ｖ’＝ｖ
・第２部分では、ｕ’＝０．５（定数），ｖ’＝ｖ
・第３部分では、ｕ’＝ｇ（ｕ），ｖ’＝ｖ
そして、上記の（ｕ’，ｖ’）を、以下のとおり特徴化ルール（１－６）から（１－８）に順次適用する。

　２）図１３に示した特徴化ルール（３－１）では、特徴量として輝度値を採用する。そして、Ｕ軸およびＶ軸の両方向に沿って、輝度値０から１まで、且つ１から０までｕ’値＝０．５、ｖ’値＝０．５を境界に連続的に分布させる。即ち、輝度値Ｌｕｍ（ｕ，ｖ）は、ＵＶ座標系での０≦ｕｖ値≦１の範囲に対し、次の数式
Ｌｕｍ（ｕ，ｖ）＝｛（ｕ’－０．５）×２｝＾２＋｛（ｖ’－０．５）×２｝＾２
として定義されるパラメータｕ’およびｖ’の２次関数式で計算される。計算された輝度値Ｌｕｍ（ｕ’，ｖ’）をプロシージャル画像として適用することにより、図示したようなＵ軸およびＶ軸方向に沿ってグラデーションを有するプロシージャル画像を生成することができる。

　３）図１３に示した特徴化ルール（３－２）でも、特徴量として輝度値を採用する。ここでは、ルール（３－１）で生成したグラデーションの外側白色部分、即ち輝度値Ｌｕｍ（ｕ，ｖ）が１より大きい領域部分に対して、反転処理を行って輝度値を０より小さくする。これにより、図示したようなＵ軸およびＶ軸方向にグラデーションを有し、かつ外側が黒色を有するプロシージャル画像を生成することができる。

　４）最後に、図１３に示した特徴化ルール（３－３）では、特徴量として不透明度値（アルファ値）を採用する。つまり、特徴化ルール（３－２）の結果として生じた、輝度値Ｌｕｍ（ｕ，ｖ）としての特徴量の値の分布に対し、特徴化ルール（３－３）では当該特徴量の値を不透明度値として採用して、不透明化処理を実施する。図１１ｃでの特徴化ルール（１－８）の適用と同様に、図示のように特徴化ルール（３－３）で生成されたプロシージャル画像のグラデーションが変化することになる。これにより、上記特徴化ルール（３－２）に対して図示したようなＵ軸およびＶ軸方向に楕円放射状に対して、不透明化処理されたグラデーションを有するプロシージャル画像を新たに生成することができる。

　最終的には、図１４の特徴化ルール（３－３）に示したプロシージャル画像、即ち、円放射状のグラデーションを有する画像を分割して離間し、該離間した間の部分を補間するように更にグラデーションされた画像が生成される。

　第４実施例（第３実施例の更なる変形例）
　図１４に示す第４実施例は、上記の図１３の第３実施例の特徴化ルール（３－３）に示したグラデーションを有するプロシージャル画像の更なる変形例である。図１４の（ａ）から（ｇ）に示した各変形例は、特徴化ルール（３－３）のプロシージャル画像を生成するに際し、これまで適用してきた特徴化ルールの一部を変更するか、または、更に何らかの特徴化ルールを付加的に適用することで実現可能である。

　１）図１４（ａ）の変形例では、特徴量として不透明度値を採用した不透明化処理を実施する。具体的には、図１３の第３実施例の特徴化ルール（３－３）に対し、更に、輪郭部分を所定の太さ部分の不透明度値が「１．０」となるように（０から１までの）不透明度値の小数点以下を切り上げると共に、それ以外の不透明度値が「０．０」となるように小数点以下を切り捨てるという特徴化ルールを適用すればよい。

　２）図１４（ｂ）の変形例でも、特徴量として不透明度値を採用した不透明化処理を実施する。具体的には、図１３の第３実施例の特徴化ルール（３－３）に加えて、更に不透明度値Ｔｒａ（ｕ，ｖ）に関する次の式
Ｔｒａ（ｕ，ｖ）＝ｕ
を適用すればよい。

　３）図１４（ｃ）の変形例では、図１３の第３実施例の特徴化ルール（３－１）の適用
に替えた代替ルールを適用する。即ち、Ｌｕｍ（ｕ，ｖ）について、パラメータｕに関する新規の関数ｐ（ｕ）を導入して、
Ｌｕｍ（ｕ，ｖ）＝｛（ｕ’－ｐ（ｕ））×２｝＾２＋｛（ｖ’－ｐ（ｕ））×２｝＾２
として輝度値Ｌｕｍ（ｕ，ｖ）を計算すればよい。ここで、ｐ（ｕ）について、例えば、
・上記第１部分では、ｐ（ｕ）＝０．２５
・上記第３部分では、ｐ（ｕ）＝０．１
を適用して、引き続き特徴化ルール（３－２）および（３－３）を更に適用すればよい。

　４）図１４（ｄ）の変形例では、図１３の第３実施例の特徴化ルール（３－１）の適用に替えた代替ルールを適用する。即ち、Ｌｕｍ（ｕ，ｖ）について、次の式
Ｌｕｍ（ｕ，ｖ）＝ａｂｓ｛（ｕ’－０．５）×２｝＋ａｂｓ｛（ｖ’－０．５）×２｝
を適用して、引き続き特徴化ルール（３－２）および（３－３）を更に適用すればよい。

　５）図１４（ｅ）の変形例では、図１４（ｄ）の変形例に対し、更に、特徴量として不透明度値を採用した不透明化処理を実施する。具体的には、不透明度値が「１．０」となるように小数点以下を切り上げる特徴化ルールを適用すればよい。

　６）図１４（ｆ）の変形例では、図１４（ｄ）の変形例に対し、更に、特徴量として不透明度値を採用した不透明化処理を実施する。具体的には、輪郭部分を所定の太さだけ不透明度値が「１．０」となるように不透明度値の小数点以下を切り上げると共に、それ以外の不透明度値が「０．０」となるように小数点以下を切り捨てるという特徴化ルールを適用すればよい。

　７）図１４（ｇ）の変形例でも、特徴量として不透明度値を採用した不透明化処理を実施する。具体的には、図１４（ｆ）に対し、画像中央部にも、不透明度値が「１．０」となる所定の太さを有する菱形の領域を設け、更に、横方向の輪郭部分の不透明度値が「０．０」となるように反転させる特徴化ルールを適用すればよい。

　これまで説明してきた様々なグラデーション態様で形成されるプロシージャル画像は、ＵＩ画像としてタッチパネルに表示することができる。当該プロシージャル画像は、その都度特徴量が計算され、例えば、拡大表示してもぼやけることがないという有利な点を有するものとなる。この点につき、以下に図１５を参照して更に説明する。

　図１５は、ＵＩ画像の拡大表示に関し、本発明の実施形態による画像表示のためのＵＩプログラムで生成したＵＩ画像（図１５（ａ））を他の手法による例と比較した図である。他の手法による例として、ここでは、多数のポリゴンによって構成されるメッシュで実現したＵＩ画像（図１５（ｂ））を想定する。図１５（ａ），（ｂ）共に、画像の右半分が全体のＵＩ画像を示し、左半分がＵＩ画像の曲線部分の拡大画像をそれぞれ示す。

　図１５（ａ）のように、本発明の実施形態による画像表示のためのＵＩプログラムでは、拡大処理を実施すると、これに連動して逐一ＵＶ座標系を適用しながらプロシージャル画像を生成および表示することになる。この点、本発明の実施形態によるＵＩプログラムでは、拡大処理に応じて画質に影響を及ぼすような事態は発生しない。これに対し、図１５（ｂ）の例のようにメッシュで実現したＵＩ画像に対して拡大処理を実施する場合は、倍率に応じて各ポリゴンを引き伸ばす処理を行うことになる。この結果、図示するように画像に粗が生じることになる。

　図１５（ｂ）の例は、ＵＩプログラムをスマートフォン上のゲーム・アプリケーションに適用し、ＵＩ画像をスライド操作に関連付ける場合は、画像の粗さが特に顕著となり好適とは言えない。何故ならば、ユーザのスマートフォン操作では、タッチパネルとユーザの目の間の距離は短く、スライド操作が頻繁に行われる状況ではどうしても粗さが目立つからである。スマートフォン・ゲームの場合は特に、これによってゲーム全体の品質を損ねることになりかねない。このように、拡大処理を実施しても画質に影響を及ぼさないという点で、本発明の実施形態によるＵＩプログラムは有利なものとなる。

　以上、本発明の実施形態による、画像表示のためのＵＩプログラムおよびコンピュータ実装方法について、幾らかの例示と共に説明した。上述した実施形態は、本発明の理解を容易にするための例示に過ぎず、本発明を限定して解釈するためのものではない。本発明は、その趣旨を逸脱することなく、変更、改良することができると共に、本発明にはその均等物が含まれることは言うまでもない。

 

Claims (14)

1. 　タッチパネル上でのユーザのタッチ操作に対応する領域を決定する領域決定部と、
   　前記領域に対し、所定の座標系の所定の範囲を対応付けて規定する座標規定部と、
   　前記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定する特徴量決定部と、
   　前記領域に関連付けられ、各前記特徴量を適用した画像を生成する画像生成部と、
   　前記画像を前記タッチパネル上の前記領域に表示する画像表示部と
   として前記タッチパネルを具備するコンピュータに機能させる、ユーザ・インタフェース（ＵＩ）プログラム。
2. 　前記タッチ操作がスライド操作であり、スライド方向およびスライド距離に基づいて前記領域が決定される、請求項１記載のＵＩプログラム。
3. 　前記画像生成部において、前記特徴量に輝度値を採用する、請求項１または２記載のＵＩプログラム。
4. 　前記画像生成部において、前記特徴量にアルファ値を採用して、所定のＲＧＢ値と共に用いる、請求項１から３のいずれか一項記載のＵＩプログラム。
5. 　前記座標系がＵＶ座標系であり、前記所定の範囲内の前記各座標値が０から１までの範囲のｕ値およびｖ値で規定され、
   　前記特徴量決定部において、前記各座標の特徴量が、前記各座標値に基づく特徴化ルールを適用することで決定され、
   　前記特徴化ルールが、ｕ値およびｖ値に基づく２次関数の計算ルールを含む、請求項１から４のいずれか一項記載のＵＩプログラム。
6. 　前記特徴量決定部において、前記各座標の特徴量が、前記各座標値に基づく特徴化ルールを適用することで決定され、
   　前記特徴化ルールが、ｕ値および／またはｖ値と前記タッチ操作がスライド操作である場合のスライド距離とに基づく補間ルールを含む、請求項１から５のいずれか一項記載のＵＩプログラム。
7. 　前記画像が３角形状を有する２つのポリゴンから形成される画像である、請求項１から６のいずれか一項記載のＵＩプログラム。
8. 　タッチパネル上で弾性オブジェクトの形状を変形して表示するユーザ・インタフェース（ＵＩ）プログラムであって、
   　前記タッチパネル上の第１接触点の周囲に第１弾性オブジェクト画像を生成して表示する第１形成部と、
   　前記タッチパネル上で前記第１接触点から第２接触点までのスライド操作が判定された場合に、前記スライド操作に連動して前記第１弾性オブジェクト画像を前記第２接触点に向けて変形させた第２弾性オブジェクト画像を形成して表示する第２形成部と
   として前記タッチパネルを具備する携帯端末に機能させ、前記第１形成部および前記第２形成部のそれぞれが、
   　前記第１接触点を含む矩形領域を決定し、
   　前記矩形領域に対し、所定の座標系の所定の範囲を対応付けて規定し、
   　前記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定し、
   　前記矩形領域に関連付けられ、各前記特徴量を適用した画像を生成して表示するように構成される、ＵＩプログラム。
9. 　請求項８記載のＵＩプログラムであって、前記第１形成部において、
   　前記矩形領域が前記第１接触点の周囲の正方形領域であり、
   　前記第１弾性オブジェクト画像が、前記正方形領域内に形成される円放射状にグラデーションされた画像であり、且つ、３角形状を有する２つのポリゴンから形成される画像である、ＵＩプログラム。
10. 　請求項９記載のＵＩプログラムであって、前記第２形成部において、
    　前記矩形領域が前記第１接触点および前記第２接触点の周囲の長方形領域であり、
    　前記第２オブジェクト画像が、前記長方形領域内に、前記円放射状にグラデーションされた画像を分割して離間し、該離間した間の部分を補間するように更にグラデーションされた画像であり、且つ、３角形状を有する２つのポリゴンから形成される画像である、ＵＩプログラム。
11. 　タッチパネル上でのユーザのタッチ操作に対応する領域を決定するステップと、
    　前記領域に対し、所定の座標系の所定の範囲を対応付けて規定するステップと、
    　前記所定の範囲に対し、各座標値に基づいて各座標の特徴量を決定するステップと、
    　前記領域に関連付けられ、各前記特徴量を適用した画像を生成するステップと、
    　前記画像を前記タッチパネル上の前記領域に表示させるステップと
    を含む、前記タッチ・スクリーンを具備するコンピュータに実装される、ユーザ・インタフェース（ＵＩ）画像表示のための方法。
12. 　前記タッチ操作がスライド操作であり、スライド方向およびスライド距離に基づいて前記領域が決定される、請求項１１記載の方法。
13. 　前記画像生成部において、前記特徴量に輝度値を採用する、請求項１１または１２記載の方法。
14. 　前記画像生成部において、前記特徴量にアルファ値を採用して、所定のＲＧＢ値と共に用いる、請求項１１から１３のいずれか一項記載の方法。
    
     

Images