ごきげんよう、kijima(@otoyasumi)です。
またまた今回もFlashLite1.1での携帯Flash開発tipsです。

巷ではiPhoneアプリだのAndroidだのってときに
こんなレガシーなテクニック紹介で心底申し訳ない。腹を切る振りをしてお詫び申し上げます。

 

AS2&3との違いや、FlashLite独自のひっかかるポイントなどの紹介に比べて、
画像の最適化tipsなどは案外取り上げられないようなので、
今回は「知らないと損をするよ! 携帯Flash軽量化メモ 〜デザイン編〜」と銘打ってお送りします。

 

PNG8 & JPEG 画像の書き出し時に注意すること

携帯htmlの世界ではどうやらdocomoの一部機種にて
PNG形式の画像が表示できないようですが、
Flash内に取り込んでしまえばそれも関係ありません。

 

・透過させたい&ドット絵などをパキっと見せたい画像のときはPNG8で。
 なおかつ使用色をなるべく少なくして容量を減らします。

・背景のベタ塗り画像はJPEGで。JPEGの書き出し画質を下げると
 にじんだように見えますがそれを逆手にとってぼかす方法もあります。

※ちなみに、書き出し方法はすべて
PhotoShopとIllustratorの「WEBおよびデバイス用に保存」から。

 

いきなり、ざっくりとまとめてしまいましたが、
透過PNG8の書き出しにはいくつかポイントがあります。
軽量化にはあまり関係がない点もありますが、少し解説します。

 

まずひとつ目。余白をつけずにギリギリで書き出さない。
なぜなら、フチがにじんで表示されてしまう場合があるので。

 

margin2px.gif

 

 

ふたつ目は、同じくフチが汚くならないように「マット」効果をうまく利用する。

下の図はどちらも同じ素材ですが、書き出しの設定によって見た目に差が出ています。

 

 

gizagiza.jpg

 

 

マット効果を使うことにより、透過の境界線が指定した色で塗られます。
素材自体のフチが黒い場合、これを利用してマット効果で黒を選択すると、
フチが汚くなくなります。

そのかわり、御覧の通りフチが太くなってしまい見た目が変わってしまうので、
使いどころには注意が必要です。

透過した素材を配置する場所の背景に合わせて、マットの色を変えることで
フチが汚く見えるのをうまくごまかせることができます。
(実際は、黒か黒に近いグレーを指定してこのテクニックを使っています)

   

ベクターデータの数字はできるだけ角張ったデザインに。

ゲーム内で得点を表示する際に、デバイスフォントではなく
独自の数字パネルデザインを使いたいという状況が、結構あります。

このとき、影付きのデザインなど凝ったものでない単色程度のデザインならば、
わざわざpng画像に書き出さなくともベクターデータで十分です。

 

ベクターデータで数字を表示させる場合、
数字フォントのアウトラインデータを配置しますが、デザインに特に指定がなければ、
なるべくカクカクしたフォント(パスが少ないもの)を選びましょう。

得点表示には必ず0〜9までの数字が必要なので、
数字1種類にしたらそれほどの差がなくとも、9倍したら、結構なものです。

下の図のように、実際に比較してみました。

 

fontDataComparison.gif

 

さらにここでポイントがひとつ。

3)の「角丸ではないフォント2」では、"2"と"5"がそのまま反転した見た目になっています。

なので、シンボル化して使うときには、
どちらか片方のみグラフィックシンボルにしておいて、
表示させるときは「変形>横反転」させたものを使いましょう。

 

さてさて、携帯Flashメモはまだまだ続きます。c⌒っ゚д゚)っφ メモメモ...

次回は、画像を使ったちょっとしたアニメーションの最適化について、解説していきます。

それでは今日はこのへんで!

HTML5飯