Java applet AQUA CITY Example

水面の揺れなど、超特訓コーナーへ 1. 画像で見る「波なみ」作成テクニック、及び、解説 「初級」 トップページへ

前提知識
 
画像の波なみ化、超簡単設定
 画像の波なみ化、設定詳細

1)HEIGHT=360とした場合 (ご参考: 波なみ化時のHEIGHTサイズ一覧表 )


ソースコード

2)HEIGHT=358とした場合 (ご参考: 波なみ化時のHEIGHTサイズ一覧表 )




ソースコード


上記、流れの向き 1)、2)いずれを採用するかは各自の判断であるが、島周辺の水面に映る波の状況より考察するに、この「波なみ」では2)が良いと思われる。なお、参考までに、流れの向きは採用する画像の画質により異なる。


チェック ポイント: ⇒使用した画像は、どの様になっているか

3)背景画像: 2965_4.jpg サイズ: 512 x 360 37KB(波なみ化対象)
 




背景に使用する画像は、鮮度の良い綺麗な画質の画像であれば、波なみ効果がよりリアルに表現される。
4)GIF 透明化画像: 2965_444.gif 43KB




GIF 透明化状況

波なみ化しない部分を大雑把に残し、波なみ化部分を透明化する。

・楽に画像のGIF透明化作成ができる。

・不自然な箇所が少なければ、背景画像に手を加える必要性が少ない。

波なみ化の初期段階で、手軽なため推奨する。

拡大画像を見てみる
5)背景画像のみの場合の、「波なみ」状況 (参考)


ソースコード


この状態に、波なみ化しない部分( 4)GIF透明化画像  )を被せたものが1)。

2.「波なみ」をより綺麗に仕上げる作成テクニック、及び、解説「中級」

1)GIF透明化画像: 2965_44.gif サイズ: 512 x 360 33KB



透明化のポイント

・波なみ化しない箇所の境目で、細かい箇所に注意し、波なみ化部分を正確に透明化する。

・この場合、背景画像の修正が必須となる。無修正では不自然な箇所が目立ち過ぎることによる。

従って、かなりの手間がかかることになるが、「波なみ」の仕上がりが大変綺麗で、努力は報われる筈。

経験者向き

拡大画像を見てみる


2)修正背景画像: 2965_444.jpg サイズ: 512 x 360 33KB





修正のポイント

・境目の色で、波なみ化しない部分を多めに塗りつぶす。

波なみ化しない部分を周辺同一色で、全て塗りつぶしても構わない。

・塗りつぶす他に、境目近辺の波なみ化部分を10〜30ピクセル分、 波なみ化しない側にコピーの上、複写する方法も境目の波なみが綺麗に仕上がるため、 是非トライしてみたい手法。

拡大画像を見てみる

3)努力した結果の「波なみ」状況


ソースコード



3. 更に「こだわり」の作成テクニック、及び、解説 「中級」

GIF透明化は、画像全体の色を256色に減色するが、この減色により「空」などの部分の画質が劣化し、 高品質の画像であっても、劣化が気になるケースが時々発生する。波なみ部分は綺麗に仕上がったのに・・・・と言うケース。

この劣化を回避する方法として、「空」部分に、GIFファイルではなくJPEGファイルを使用する。JPEG化した部分の GIF画像は、透明化することにより、若干、KB サイズが軽量化できる。

GIF透明化画像は、KB サイズがJPEGより、かなり大のため、「波なみ化」しない部分がかなりある場合は、部分的にJPEG化すると 更に軽量化できる。ある程度、「波なみ化」経験がある場合、下記、ソースコード説明を参考にトライしてはいかが。

1)空部分の背景画像に採用: sora.jpg 2KB


2)「波なみ」状況



ソースコード

パラメタimage の詳細はこちらご参照


※注意事項※

上記解説には最新バージョン AquaCity.class を使用したため、ReverseImage などは省略型になっていますが、AquariumCityLite.class 或いは、AquariumCityV4.class 使用の場合は、下記の追加設定が必要です。


登録手続きは、こちら

   Copyright© 2011 Y.Ichisaka VirtualPHOTO javao.com All Right Reserved.