説明

画像処理方法、ファイル変換方法、及び、ファイル変換プログラム

【課題】HTML5対応ブラウザー(canvas要素に対応したもの)に指定画像を指定特性で色変換して表示させる処理を高速で行わせるHTMLファイルを実現する。
【解決手段】指定画像を指定特性で色変換して表示させる処理について、HTMLファイルからブラウザーにピクセル単位のデータ操作を指示するのではなく、キャンバス上に展開したビットマップ画像(原画像データおよびその派生データ)の全域に適切な輝度値・透明度の色データを均一に上書きする処理を複数回指示するアルゴリズムとした。

【発明の詳細な説明】
【技術分野】
【0001】
この発明は、ウエブアプリケーションの基盤となっているホームページ記述言語HTMLの最新バージョンHTML5による画像操作手法に関し、具体的には、HTMLのうちcanvas要素を使用可能なものに対応したブラウザーに指定画像を指定特性で色変換して表示させる処理を行わせるHTMLファイルに関する。なお、この明細書では、ブラウザーという語を、プログラムを指す語としてだけでなく、ブラウザーが稼働するコンピューターを指す語としても使用する。
【0002】
HTMLファイルはブラウザーにより解釈され、HTMLファイル制作者の意図したホームページが表示される。つまり、HTMLファイルはHTML言語により記述され、ブラウザーに特定のホームページの表示処理を実行させるコンピュータープログラムの一種であるといえる。したがって、この発明を適用して記述されたHTMLファイルはプログラムであり、この発明はプログラムに関する発明である。
【0003】
さらに、Adobe Flash(登録商標)などによって普及しているSWFファイルを本発明に係るHTMLファイルに自動変換するファイル変換方法およびファイル変換プログラムが、本発明の射程に含まれている。
【背景技術】
【0004】
出願人はMobage(商標登録出願中)と名付けたソーシャルメディアを運営し、怪盗ロワイヤル(登録商標)などの多くの種類のゲームコンテンツを携帯電話機向けに提供している。こうしたゲームコンテンツの多くはHTMLファイルやSWFファイルにより構成されており、ゲーム中のアニメーション表現はSWFファイルにより創りだされている。よく知られているように、SWFファイルを制作者の意図どおりに情報端末のブラウザーで再生するには、情報端末のブラウザーにSWFファイルを実行するプログラム(Flash Player(登録商標)が有名である)が組み込まれている必要がある。
【0005】
大流行のスマートフォンやタブレット端末などと呼ばれる最新型の情報端末、その他一部の情報端末では、ブラウザーがFlash Playerに対応していない機種がある。こうしたFlash Playerに対応していないブラウザーでは、ゲームコンテンツ中のSWFファイルによるアニメーション表現を正しく再生することができない。一方、Flash Player非対応の最新型の情報端末では、ブラウザーがHTML5に対応しているものが多い。
【0006】
ゲームコンテンツ中のSWFファイルによるアニメーション表現の典型的な手法の1つを説明する。ゲームキャラクタのフルカラーの画像データがある。この画像データを原画像データとし、これを登場させる場面のゲーム状況に応じて、原画像データの色をさまざまに変化させるという手法である。つまり、1つの原画像データの色を適宜に変換しながらさまざまなゲーム場面に登場(表示)させるのである。
【0007】
SWF形式では、上記の手法を簡便に使用できるように、原画像データに対する色変換特性を2種類のパラメータ「MultTerm」および「AddTerm」で表現することとしている。
【0008】
「MultTerm」は、原画像データの全ピクセルのRGB輝度値を指定比率で低下させるパラメータであり、R輝度値・G輝度値・B輝度値の減衰率をそれぞれRedMultTerm・GreenMultTerm・BlueMultTermにより個別に指定することができる。
【0009】
「AddTerm」は、原画像データの全ピクセルのRGB輝度値に対して指定値だけ加算または減算するパラメータであり、R輝度値・G輝度値・B輝度値に対する加減算値をそれぞれRedAddTerm・GreenAddTerm・BlueAddTermにより個別に指定することができる。
【0010】
SWFファイルにおいて原画像データを指定する記述と色変換パラメータ「MultTerm」および「AddTerm」の値を記述しておくと、SWFファイルを実行するプログラムがこれを解釈し、原画像データを指定特性で色変換した画像データを高速で生成して表示する。
【発明の開示】
【0011】
===発明が解決しようとする課題===
この発明を創作するそもそもの契機は、上述したSWFファイルとFlash Playerの組み合わせにおける原画像を色変換して高速表示する機能を、Flash Playerに非対応でありHTML5に対応したブラウザーとHTMLファイルの組み合わせにおいて実現しようということである。
【0012】
上述した色変換の処理は、煎じ詰めると、原画像データの全ピクセルのRGB各輝度値に一定値を乗じるとともに、乗算結果に別の一定値を加算または減算することである。そこで、HTMLファイル中に JavaScript で記述したプログラムの機能により、HTML5のAPIを使い、原画像データの各ピクセルのRGB各輝度値を1ピクセルずつ逐次に取得して前記の計算を行い、計算結果で原画像データの各ピクセルを更新する処理をブラウザーに実行させる方式が試みられた。
【0013】
この試みは完全に失敗であった。処理対象の画像データのピクセル数はきわめて多いので、HTML5のAPIで規定されたピクセル操作機能を使い、HTMLファイルからブラウザーにピクセル操作を指示して画像データの全ピクセルのデータを更新するのにはかなりの時間がかかり、ブラウザーがHTMLファイルを読み込んでから色変換後の画像が表示されるまでの時間が許容できない長さになる。
【0014】
===発明の概要===
HTML5では、ブラウザーによりビットマップ形式の画像を描いたり色を塗ったりすることを可能にするcanvas要素の仕様が策定された。HTMLファイルにおいてcanvas要素を使った プログラムを記述することにより、指定した画像データをビットマップキャンバスに読み込み、それを下地画像とし、その上に図形を描いて指定のモードで合成し、あらたな画像をビットマップキャンバスに生成して表示することができる。
【0015】
この発明に係るHTMLファイルにおいては、まず、指定した画像データ(原画像データ)をビットマップキャンバスに読み込む。そして、この原画像データに対して上述したようなピクセル操作を行うのではなく、原画像データを下地とし、適切な合成モードに設定した上で原画像データの全域を適切な色で均一に塗りつぶす、という処理を何回か行うことで原画像データの色を変換して表示するプログラミング方式を創作した。このプログラミング方式に従ってHTMLファイルを記述することで、ブラウザーがHTMLファイルを読み込んで色変換後の画像を表示するのに要する処理時間がきわめて短くなる。
【0016】
===発明の核心===
この発明の核心とするところは、つぎの事項(1)〜(9)により特定されるHTMLファイルである。
(1)HTMLのうちcanvas要素を使用可能なものに対応したブラウザーに指定画像を指定特性で色変換して表示させる処理を行わせるHTMLファイルであること
(2)HTMLファイルは、記述1〜記述5を含むこと
(3)記述1は、ビットマップ展開された3個の同じ原画像データを生成させること
(4)記述2は、darker合成モードにより、高輝度R原色データを原画像データに均一に上書きさせ、高輝度G原色データを原画像データに均一に上書きさせ、高輝度B原色データを原画像データに均一に上書きさせ、原画像データを三原色分解したR原画像データ・G原画像データ・B原画像データを生成させること
(5)記述3は、原画像データのRGBの各輝度値を減衰させる割合いに対応した、R減衰処理用の輝度値・透明度と、G減衰処理用の輝度値・透明度と、B減衰処理用の輝度値・透明度を含むこと
(6)記述3は、標準描画モード等により、R減衰処理用の輝度値・透明度の黒データをR原画像データに均一に上書きさせることにより暗化R画像データを生成させ、G減衰処理用の輝度値・透明度の黒データをG原画像データに均一に上書きさせることにより暗化G画像データを生成させ、B減衰処理用の輝度値・透明度の黒データをB原画像データに均一に上書きさせることにより暗化B画像データを生成させること
(7)記述4は、原画像データのRGBの各輝度値に加算または減算する値に対応した、R加減算処理用の輝度値・透明度のR原色データと、G加減算処理用の輝度値・透明度のG原色データと、B加減算処理用の輝度値・透明度のB原色データを含むこと
(8)記述4は、加算の場合はlighter 合成モードにより、減算の場合はdarker合成モードにより、R加減算処理用の輝度値・透明度のR原色データを暗化R画像データに均一に上書きさせることにより暗化シフトR画像データを生成させ、G加減算処理用の輝度値・透明度のG原色データを暗化G画像データに均一に上書きさせることにより暗化シフトG画像データを生成させ、B加減算処理用の輝度値・透明度のB原色データを暗化B画像データに均一に上書きさせることにより暗化シフトB画像データを生成させること
(9)記述5は、暗化シフトR画像データと暗化シフトG画像データと暗化シフトB画像データを合成させて色変換後の画像データとして表示出力させること
【図面の簡単な説明】
【0017】
【図1A】この発明のHTMLファイルの核心部分をなすプログラムの記述例(実施例ではJavaScriptを用いているが、実際にはプログラム言語は問わない)(前半)
【図1B】この発明のHTMLファイルの核心部分をなすプログラムの記述例(実施例ではJavaScriptを用いているが、実際にはプログラム言語は問わない)(後半)
【実施例】
【0018】
===SWFファイルから本発明のHTMLファイルへ===
以下では、本発明のファイル変換方法(ファイル変換プログラム)により既存のSWFファイルを本発明のHTMLファイルに変換した実施例として説明する。また、変換元のSWFファイルは色変換処理の対象となる原画像やその他のテキスト情報などを含んだ文書情報が規定されているところ、以下においては、色変換処理の対象となる原画像にのみ着目し、変換後のHTMLファイルにおいて原画像を色変換処理して表示出力するためのプログラム論理を摘出して説明する。
【0019】
===原画像とMultTermとAddTerm ===
ファイル変換プログラムにより、SWFファイルから抽出した色変換対象である原画像を特定する画像ファイル名「test.png」を図1A・図1Bに示したHTMLファイル実施例の行番号64に記述している。また、この原画像を色変換処理の特性を規定する乗算パラメータ「MultTerm」と加減算パラメータ「AddTerm」を上記SWFファイルから抽出し、HTMLファイル実施例の行番号5と6に記述している。
【0020】
HTMLでは、RGBの最大輝度値を255としている。これを前提とし、行番号5の記述 {R: 50, G: 75, B: 200} は、ファイル名「test.png」のビットマップ画像の各ピクセル輝度値に以下の乗算処理を加えることを示している。
(1)R輝度値に(50/255)を乗じる。
(2)G輝度値に(75/255)を乗じる。
(3)B輝度値に(200/255)を乗じる。
【0021】
行番号6の記述 {R: 127, G: 56, B: -100}は、上記の乗算後の各ピクセル輝度値に以下の加減算処理を行うことを示している。
(4)R輝度値の乗算結果に127を加算する。
(5)G輝度値の乗算結果に56を加算する。
(6)B輝度値の乗算結果に100を減算する。
以上が元となるSWFファイルから抽出した情報に基づいて作成されたHTMLファイルの記述の一部である。
【0022】
===原画像の三原色分解===
HTMLファイル実施例では、行番号9〜30により色変換処理の準備をし、行番号33〜36の処理を色を変えて3回行うことで、ファイル名「test.png」の原画像を三原色分解し、R原画像データとG原画像データとB原画像データを用意したキャンバス上に生成する。
【0023】
行番号33の処理で原画像データをキャンバス上に展開する。行番号34の処理で描画合成モードを「darker」合成モードに設定する。この状態で、RGB輝度値(255、0、0)の高輝度R原色データを原画像データに均一に上書きすることでR原画像データが生成され、RGB輝度値(0、255、0)の高輝度G原色データを原画像データに均一に上書きすることでG原画像データが生成され、RGB輝度値(0、0、255)の高輝度B原色データを原画像データに均一に上書きすることでB原画像データが生成される。これらの処理を行番号35と36で行う。
【0024】
===乗算処理===
行番号39〜42は乗算処理の記述である。まずR輝度値に(50/255)を乗じる処理について説明する。描画合成モードは標準モードに設定する。このモードで、RGB輝度値(0、0、0)の黒色で透明度(アルファ値)が1−(50/255)の黒データをキャンバス上のR原画像データに均一に上書きすることで、R原画像データの全ピクセルの輝度値を一定比率で減衰させた暗化R画像データが生成される。
【0025】
同様に、標準モードにおいて、RGB輝度値(0、0、0)の黒色で透明度(アルファ値)が1−(75/255)の黒データをキャンバス上のG原画像データに均一に上書きすることで、G原画像データの全ピクセルの輝度値を一定比率で減衰させた暗化G画像データが生成される。
【0026】
同様に、標準モードにおいて、RGB輝度値(0、0、0)の黒色で透明度(アルファ値)が1−(200/255)の黒データをキャンバス上のB原画像データに均一に上書きすることで、B原画像データの全ピクセルの輝度値を一定比率で減衰させた暗化B画像データが生成される。
【0027】
===加減算処理===
行番号45〜55は加減算処理の記述である。RおよびGの「AddTerm 」の値は正値であり、この場合は加算処理を行うように、描画合成モードを「lighter 」合成モードに設定する。まずR輝度値に127を加算する処理について説明する。ここでは、RGB輝度値(255、0、0)で透明度(アルファ値)が(127/255)のR原色データをキャンバス上の暗化R画像データに均一に上書きすることで、暗化R画像データの全ピクセルの輝度値を一定値だけ増加させた暗化シフトR画像データが生成される。
【0028】
同様に、「lighter 」合成モードにおいて、RGB輝度値(0、255、0)で透明度(アルファ値)が(56/255)のG原色データをキャンバス上の暗化G画像データに均一に上書きすることで、暗化G画像データの全ピクセルの輝度値を一定値だけ増加させた暗化シフトG画像データが生成される。
【0029】
Bの「AddTerm 」の値は負値(−100)であり、この場合は減算処理を行うように、描画合成モードを「darker」合成モードに設定する。そしてRGB輝度値(0、0、0)の黒色で透明度(アルファ値)が(100/255)の黒データをキャンバス上の暗化B画像データに均一に上書きすることで、暗化B画像データの全ピクセルの輝度値を一定値だけ減少させた暗化シフトB画像データが生成される。
【0030】
===三原色画像の合成===
最後に、行番号58〜62の処理により、描画合成モードを「lighter 」合成モードに設定し、上記のように生成された暗化シフトR画像データと暗化シフトG画像データと暗化シフトB画像データとを1つのキャンバス上に塗り重ねることで、ファイル名「test.png」の原画像データを乗算パラメータ「MultTerm」と加減算パラメータ「AddTerm」に基づいて色変換した画像データが完成し、これが表示出力される。
【0031】
===発明の効果===
以上のHTMLファイル実施例の説明から明らかなように、指定画像を指定特性で色変換して表示させる処理について、HTMLファイルからブラウザーにピクセル単位のデータ操作を指示するのではなく、キャンバス上に展開したビットマップ画像(原画像データおよびその派生データ)の全域に適切な輝度値・透明度の色データを均一に上書きする処理を指示しているのである。そのため、HTMLファイルからブラウザーに対してピクセル単位のデータ操作を指示するものに比べ、処理速度は格段に高速化し、ブラウザーがHTMLファイルを読み込んで色変換後の画像を表示するのに要する処理時間がきわめて短くなる。
【0032】
===補足事項===
「MultTerm」に対応したR乗算値とG乗算値とB乗算値のいずれか、もしくはすべてが等しい値である場合、乗算処理に際して原画像データの三原色分解を必要としない場合があり、また、後続の加減算処理についても三原色分解の一部もしくは全部を必要としない場合があり得る。こうした場合には三原色分解の処理を省略することも可能である。さらに、色変換の特性によっては、原画像の各色の輝度値に乗ずるべき値が0になる場合もあるし1になる場合もあり得る。同様に、各色の乗算結果に加減算するべき値が0になる場合もあるし正の最大輝度値、もしくは負の最大輝度値になる場合もあり得る。

【特許請求の範囲】
【請求項1】
つぎの事項(1)〜(9)により特定されるHTMLファイル。
(1)HTMLのうちcanvas要素を使用可能なものに対応したブラウザーに指定画像を指定特性で色変換して表示させる処理を行わせるHTMLファイルであること
(2)HTMLファイルは、記述1〜記述5を含むこと
(3)記述1は、ビットマップ展開された3個の同じ原画像データを生成させること
(4)記述2は、darker合成モードにより、高輝度R原色データを原画像データに均一に上書きさせ、高輝度G原色データを原画像データに均一に上書きさせ、高輝度B原色データを原画像データに均一に上書きさせ、原画像データを三原色分解したR原画像データ・G原画像データ・B原画像データを生成させること
(5)記述3は、原画像データのRGBの各輝度値を減衰させる割合いに対応した、R減衰処理用の輝度値・透明度と、G減衰処理用の輝度値・透明度と、B減衰処理用の輝度値・透明度を含むこと
(6)記述3は、標準描画モード等により、R減衰処理用の輝度値・透明度の黒データをR原画像データに均一に上書きさせることにより暗化R画像データを生成させ、G減衰処理用の輝度値・透明度の黒データをG原画像データに均一に上書きさせることにより暗化G画像データを生成させ、B減衰処理用の輝度値・透明度の黒データをB原画像データに均一に上書きさせることにより暗化B画像データを生成させること
(7)記述4は、原画像データのRGBの各輝度値に加算または減算する値に対応した、R加減算処理用の輝度値・透明度のR原色データと、G加減算処理用の輝度値・透明度のG原色データと、B加減算処理用の輝度値・透明度のB原色データを含むこと
(8)記述4は、加算の場合はlighter 合成モードにより、減算の場合はdarker合成モードにより、R加減算処理用の輝度値・透明度のR原色データを暗化R画像データに均一に上書きさせることにより暗化シフトR画像データを生成させ、G加減算処理用の輝度値・透明度のG原色データを暗化G画像データに均一に上書きさせることにより暗化シフトG画像データを生成させ、B加減算処理用の輝度値・透明度のB原色データを暗化B画像データに均一に上書きさせることにより暗化シフトB画像データを生成させること
(9)記述5は、暗化シフトR画像データと暗化シフトG画像データと暗化シフトB画像データを合成させて色変換後の画像データとして表示出力させること
【請求項2】
請求項1に記載のHTMLファイルによる画像処理方法
【請求項3】
SWFファイルを請求項1に記載のHTMLファイルに変換するコンピューター情報処理方法であって、
SWFファイル中の画像データを指定する情報を抽出するとともに、当該画像データを修飾している RedMultTerm・GreenMultTerm・BlueMultTerm および RedAddTerm・GreenAddTerm・BlueAddTerm を抽出し、
抽出した前記情報により指定された画像データを前記記述1における原画像データとし、
抽出した RedMultTerm・GreenMultTerm・BlueMultTerm に基づいて、前記記述3におけるR減衰処理用の輝度値・透明度とG減衰処理用の輝度値・透明度とB減衰処理用の輝度値・透明度を作成し、
抽出した RedAddTerm に基づいて、これが正値であればその値に対応した前記記述4におけるR加算処理用の輝度値・透明度のR原色データを作成し、これが負値であればその値に対応した前記記述4におけるR減算用の輝度値・透明度のR原色データを作成し、
抽出したGreenAddTermに基づいて、これが正値であればその値に対応した前記記述4におけるG加算処理用の輝度値・透明度のG原色データを作成し、これが負値であればその値に対応した前記記述4におけるG減算用の輝度値・透明度のG原色データを作成し、
抽出したBlueAddTerm に基づいて、これが正値であればその値に対応した前記記述4におけるB加算処理用の輝度値・透明度のB原色データを作成し、これが負値であればその値に対応した前記記述4におけるB減算用の輝度値・透明度のB原色データを作成する
ファイル変換方法。
【請求項4】
請求項3に記載のファイル変換方法をコンピューターに行わせるファイル変換プログラム。

【図1A】
image rotate

【図1B】
image rotate


【公開番号】特開2013−30009(P2013−30009A)
【公開日】平成25年2月7日(2013.2.7)
【国際特許分類】
【出願番号】特願2011−165918(P2011−165918)
【出願日】平成23年7月28日(2011.7.28)
【出願人】(599115217)株式会社 ディー・エヌ・エー (9)
【Fターム(参考)】