RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(1)

ウェブテクノロジで、組み込み分野の営業を担当している(こともある)小高です。

組み込み機器を開発されているお客様、特にデザイン部門の方とやりとりしていると、しばしばいただく質問があります。「ソフト開発部門から、組み込み機器に内蔵する画像を作るときに使っても良いRGB値の一覧を渡されたけれど、どうやって画像を作ればいいですか?」というものです。

この記事では、「組み込み機器向け画像で、特定のRGB値しか使えない理由」の解説を中心に、組み込み機器向け画像を作るときの注意点とその解決方法についても軽く触れています。

デザイナーさんがこれらを理解していれば、ソフト開発者とのコミュニケーションで、デザインサイドの意向をよりスムーズに伝えられるようになるはずです。この記事が、美しいGUI表現を実現するための一助となれば幸いです。


1. まずはおさらいから

組み込み機器のディスプレイでは、コスト等の制約のために、RGB565形式やRGB555形式などの表示デバイスが良く使われます(以下では、説明を簡単にするために、RGB555の場合を例にとります)。

一方、機器に組み込む画像は、RGB888形式のPC(Macintosh含む)で制作していると思います。

PCで通常使われているRGB888形式では、RGB各チャネルを8bitで表現しています。28=256 なので、0~255;16進数で00h~FFhの値で256階調を表現しています。RGB値0は黒、255は一番明るい赤、または緑、または青です。

組み込み機器で使われるRGB555形式では、RGB各チャネルを5bit, 5bit 5bitで表現しています。25=32なので、0~31;16進数で00h~1Fhの値で32階調を表現しています。RGB値0は黒、31は一番明るい赤、または緑、または青です。

グラフ1: 8bit=256階調と5bit=32階調

グラフ1: 8bit=256階調と5bit=32階調

RGB888の画像をRGB555表示の機器で使用する場合は、RGB値の下位3bitを切り捨てた値を使うことになります(RGB565であれば、RとBの下位3bit、Gの下位2bitを切り捨てます)。

表1: RGB8bit値をRGB5bit値に変換

表1: RGB8bit値をRGB5bit値に変換


2. 落とし穴に注意

ところが、階調が違うということには落とし穴があるのです。RGB888環境で作った画像を実機にそのまま持っていくと、こんな現象が起こります(画像1)。

画像の中央に、同心円状のバンディング(マッハバンド)が生じていて、美しくありません。また、同じ明るさの色が使えるわけではないので、全体の色調も微妙に変化しています。

RGB888環境で作った画像をRGB555の実機で表示した場合

画像1: RGB888前提の画像をRGB555の実機で表示した様子(元画像と交互表示しています)

実機に画像データを組み込んでから初めてこのような現象に気づくと、大きな手戻りが発生して、開発工程に悪影響が生じてしまいます。

画面デザインの際は、あらかじめPC上でなるべく実機に近い条件でプレビューしておくことで「こんなはずじゃなかった」を防ぐことができます。


3. RGB565(RGB555)をPC上でプレビューする

OPTPiX imésta X-MP を使うと、PC上でRGB565(RGB555)の実機で表示した状態をシミュレート表示することができます。

画像2: OPTPiX iméstaで組み込み機器上の表示をシミュレートする方法

画像2: OPTPiX iméstaで組み込み機器上の表示をシミュレートする方法

OPTPiX imésta X-MP で画像を読み込み、「イメージ(I)」→「イメージ変換(W)…」で上記ダイアログが出ます。

実機のRGB形式に合わせて、RGB565, RGB555などを選択します。レンダリング処理は「誤差拡散なし(O)」、「RGB値を正規化する(@)」をONにして、[OK]を押します。

すると、画像のRGB値を全て5bit階調(32階調)に変換します(RGB565の場合は、Gの値のみ6bit階調(64階調))。

このため、RGB565, RGB555などの機器で表示した状態をPC上でシミュレート表示することができるわけです。

画像1, 画像2では、同心円状のバンディング(マッハバンド)が出ていますが、OPTPiX imésta X-MP を使うと、バンディングを抑制することができます。抑制する方法と仕組みについては、OPTPiX imésta 7 for Amusement & Embeddedのページに詳しく記載していますので、ぜひご覧ください。

ところで、画像2のダイアログに「RGB値を正規化する(@)」というチェックボックスがありますが、これが、組み込み機器向け画像で特定のRGB値しか使えない理由の鍵を握っています。


4. 組み込み機器向け画像で、特定のRGB値しか使えない理由~正規化とは

第3節では、「RGB値を正規化する(@)」をONにしてプレビューすると書きました。それでは、OFFにするとどうなるのでしょうか。ONにして変換した画像と、OFFにして変換した画像を交互表示して比べてみます。

正規化していない画像

画像3: 正規化ありとなしの画像を交互表示しています

微妙に、ではありますが、明るさが変化していることがおわかりになると思います。

正規化ONと正規化OFFでは、RGB値には次のような違いがあります。

表2: 5bit階調のRGB値を、PCで表示するときのRGB値一覧(正規化なし、あり)

表2: 5bit階調のRGB値を、PCで表示するときのRGB値一覧(正規化なし、あり)

第3節の後半に「画像のRGB値を全て5bit階調(32階調)に変換します」と書きましたが、PC上で画像をハンドリングしている間は、RGB値として表1にあるような0~31の範囲を使うのではなく、表2のような値に変換します。RGB値が0~31の画像をPCに表示しても、真っ暗でなにが表示されているのかわからなくなってしまうからです。

普通に考えれば、32階調に変換するのであれば、表2のなかの「正規化なし」のRGB値を使えば良さそうです。ところが、この表をよく見ると、最大輝度を表す最後の行の値が、F8(248)になっています。つまり、最大輝度がFF(255)ではなくなってしまうのです。「正規化あり」では、最大輝度が8bit階調の時と同じFF(255)になっています。これが、画像3の明度の違いの原因です。正規化を行うと、最大輝度を256階調の場合と同じに揃えるために、全体的に、均等に、値をシフトします。

さて、ソフト開発部門から渡された「使っても良いRGB値の一覧」は、表2の「正規化あり」「正規化なし」のどちらかの場合がほとんどのはずです。渡された値の一覧表を見て、OPTPiX iméstaの設定を行えば大丈夫です。

実は、正規化にはもう一つ方式があって値が少し異なるのですが、それはまた後日、このブログで紹介しようと思っています。

もう一つの正規化方式を、「RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)」でご紹介しましたので、そちらもあわせてご覧下さい。

5. 実は、組み込み機器向け画像で特定のRGB値しか使えない、わけではありません

実機に画像を組み込むとき、最終的にはRGB値として表1の値が使われます。つまり、正規化は、してもしなくても、実機での表示結果には変化がありません。実は、ハードウェア的に特定のRGB値しか使えないというわけではないのです。正規化は、PC上で画像をハンドリングするときの利便性(色再現性の向上)のために行う処理なのですが、ハードウェア寄りの話のため、ソフト開発者の方でも、そのあたりを詳しく把握できていない場合が多いようです。

以上、デザイナーさんにとっては若干ややこしいお話で恐縮ですが、ご理解いただけましたでしょうか。

わかりにくい点などありましたら、コメント欄でご指摘いただければ幸いです。

2012年4月5日加筆

続きのエントリーを公開しました。下記のリンクからどうぞ。

RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)

カテゴリー: 画像形式 | タグ: , | 2016/08/31 更新

田中圭一のゲームっぽい日常 夢から覚めたつもりが・・・・

ひどいときは、4重のレイヤーで夢を見ます。しかも、月に1回くらいの頻度で。

カテゴリー: 田中圭一のゲームっぽい日常 | タグ: | 2016/08/25 更新

Unity3Dで2Dの新しい手法 in 福岡。

例によって事後報告。ソリューション営業部の浅井でございます。

さて本日の事後報告ですが、去る10/23(日)に福岡にて開催されました、『ゲームツール&ミドルウェアセミナーin 福岡』に弊社セミナー出展、無事終了、という。 聡明なる読者ちゃん諸兄はご存知のコトかと思われますが、福岡にはゲーム会社さんがゾクゾク。また、福岡コンテンツ産業振興会議様による強力なバックアップもあって実に熱い! 熱いエリアなんですね福岡。

その『ゲームツール&ミドルウェアセミナーin 福岡』の弊社セッションでは、本年夏のGTMFでご紹介しました”SpriteStudio”の採用事例紹介に新たな2作品の事例を追加、更に加えて今話題のゲームエンジン『Unity3D』と”SpriteStudio”を連携するアセット、”SpriteStudio for Unity”をプレビュー公開いたしました。


福岡県のゲーム業界+ゲームを研究されている学生さんにご紹介したところ、評判は上々! ついでに弊社開発がスキを見てプロトタイプ制作していた”こみぽちゃん”を使った害虫駆除ゲームもいっしょにご紹介。まだ開発中というコトもあって全ての機能をご紹介するには至らなかったのですが、現在鋭意開発中。コンシューマゲーム機やスマートフォンアプリの数々のゲームタイトルで採用されている弊社謹製2Dアニメーションツール、これを『Unity3D』という今まさにホットなゲームエンジンと組み合わせた全く新しい”2D”ゲーム開発手法を、普段お会いする機会の少ない福岡の方々にご紹介できて良かったなぁ、と。

で。

福岡といえば当然『長浜ラーメン』!

ということで博多駅近くのお店によって賞味賞味♪ ・・・したんですけれども、昼食に食べたこちらはなんとなくうーん、おいしいんだけどこんなもんだっけ長浜ーみたいな。(相方は替え玉してましたが)

どうも納得がいかない、というか福岡に来たんだからやっぱりおいしいものを食べておかないとーとセミナー終了後に再度他のお店に。

そしたら全然、違うのねお店によって。こちらは有名店なのかしら『だるま』
油断してるとズビズバとスープを飲み干してしまいそうな味、それでいてしょっぱくない不思議。これよこれこそが長浜よーみたいな。(相方はここでも替え玉を3玉してましたが)

 

と、ラーメンを食べた話ばっかりだとアレなので、食べる前に撮影したラーメン画像を弊社の”OPTPiX WebFree“、あれの”エンハンストフィルター”で更に美味しそうに画像加工してみた。

ああそうそう、こんな感じ。

というコトで福岡でラーメンが美味しかった話、ではなく『ゲームツール&ミドルウェアセミナーin 福岡』で『Unity3D』で”2D”! というご報告でありました。 来年も是非!

カテゴリー: OPTPiX SpriteStudio | タグ: , , , , , , | 2016/08/25 更新

画像サイズの縮小に最適なソフト「OPTPiX imesta シリーズ」導入事例紹介

本日の「OPTPiX Labs Blog」では、画像サイズの縮小方法についてお伝えしたいと思います。

最近、スマートフォンがかなり市場に出回りスマートフォンのアプリが増えてきました。スマートフォンアプリ開発において、最近よく耳にするのが、アプリデータのサイズ縮小です。

スマートフォンアプリのアプリデータサイズを20MB以内に縮小することが、最終的なアプリの売れ行きに一役買うようです。

先月開催されたCEDEC の講演「忍者ロワイヤルの今までと今後」の中で当社の画像最適化ツール「OPTPiX imesta シリーズ」が特に画像サイズ縮小機能にフォーカスして紹介されました。

特にスマートフォン表示向けに画像サイズを縮小する際に有効というご紹介をいただきましたのでここではその内容をご紹介いたします。

こちらの講演での紹介内容のポイントは、画像サイズの軽量化です。

特にiPhone 向けのアプリケーションでは、アプリのサイズを「20MB以内」に抑えることが重要とされており、そのために、画像のインデックスカラー化、つまり「減色」を利用したとのことです。

忍者ロワイヤルでは、当社のOPTPiX imesta を利用していただくことで高品質な画像のままアプリケーションのサイズを「20MB 以内」に抑えることができたそうです。

特に「透過情報までインデックスカラーとして扱えるところ」が「ユニーク」だと紹介されました。

多くの画像サイズ縮小ソフトの中で、当社のOPTPiX imesta をご利用いただき画像品質を落とすことなく、画像サイズの縮小に効果を発揮したとのこと大変うれしく思います。

スマートフォン向けウェブサイトで採用した場合でも、画像サイズが縮小されるため表示の高速化、全体的な品質の向上が見込めます。

ぜひ無料トライアルサービスをご利用下さい。

OPTPiX imesta for Mobile &Socialの無料トライアルはこちら

なお、ご紹介したCEDECの講演「忍者ロワイヤルの今までと今後」の記事へのリンクはこちらです。

[4Gamer.net]「忍者ロワイヤルの今までと今後」

[Gigazine]「忍者ロワイヤルの今までと今後」

では、続いて”画像サイズの縮小”をテーマに次の事例を紹介します。

OPTPiX imesta 7 for Mobile &Social 導入事例

i-Mode黎明期から携帯コンテンツを手がけるA社様では携帯SNSコンテンツのアバターキャラクター、およびコンテンツ自体のフィーチャーフォン向け最適化に、長らくOPTPiX imesta 7 for Mobile & Socialをご利用いただいています。

ベースになるアバターキャラクターをある程度のまとまった単位で共通パレットを作成して減色。

加えて、アバターを彩るアイテムデータも同じく”OPTPiX imesta 7″の「共通パレット減色」を
使うことで、画像データのサイズを縮小化。

結果、コンテンツ全体のサイズと、データ転送量の節約に効果を発揮したとのこと。

また、同サービスのスマートフォン対応では、スマートフォンの高解像度化に合わせて大元となった画像データを再度リサイズ。

フルカラーが使える端末とは言えキャリアによっては3G回線がフルレートでないこともしばしば。

そこで、”OPTPiX imesta 7″の「アルファチャンネル対応減色」機能を使い、フルカラーと見分けがつかないクォリティの画像を用意し、無事にサービスを開始することができました。

3週間おきのアイテムリリースも、デザイナーの手を煩わせることなく誰でもマウスをクリックするだけで実行できるようプロジェクトのスリム化に成功。

およそ1人月のコストダウンにも貢献したとのことです。

なお、OPTPiX imesta for Mobile & Scoial は以下のページをご覧ください。

OPTPiX imesta for Mobile & Socialの詳細はこちら

OPTPiX imesta シリーズには姉妹製品もあります。当社の製品一覧は以下のページをご覧ください。

OPTPiX imesta シリーズの姉妹製品はこちら

カテゴリー: OPTPiX imesta | タグ: , , , , , , , , , , , , , | 2016/08/25 更新

無料画像加工サービス「OPTPiX WebFree」が体験可能になりました。

こんにちは。ウェブテクノロジ開発部の山崎です。

ハイクラスのインデックスカラー減色エンジンを搭載した無料で使える画像加工サイト「OPTPiX Webfree」が体験可能になりました。

画像容量(ファイルサイズ)を指定した減色処理ができたり、全自動でキレイに美味しくみせちゃう「エンハンストフィルター」があったり、「ミニチュアフィルター」や「魚眼レンズフィルター」などといった遊べる機能も搭載したりと、すべて無料で使えるなんて、弊社としては出血大サービス(死語?)なWebアプリなのです。

いままではご利用いただく前に、(どなたがアップロードした画像なのかきちんと区別するために)メールアドレスのご登録をお願いしていました。

しかしながら、事前登録では「先にどのような機能があるのか見てみることができない」という問題を抱えていました。

この問題に対応し、登録をしなくてもすべての機能が体験できるように、「デモ体験」機能を強化しました。

先ほど、すべての機能を体験できると申しましたが、実は「画像のアップロード」だけは申し訳ありませんが体験できなくなっています。

代わりに、「サンプル画像」を用意しましたので、こちらの画像を選んでいただくことで、他の機能をそのまま体験できるようになっています。


コミPo! を使って、雰囲気を脚色してみました。)

今すぐ体験可能ですので、まだ体験していない方はぜひこちら↓からどうぞ。
無料画像加工サイト OPTPiX WebFree
よろしくお願いいたします。

カテゴリー: OPTPiX WebFree | タグ: , , , , , , , , , , | 2016/08/25 更新