• DoRubyとは
  • お問い合わせ
  • Ruby/Rails
  • Web開発
  • Webマーケティング
  • アピリッツ
  • ライフハック
  • ゲーム制作/開発
  • Railsの小技
  • Rubyの小技
  • Gemの紹介
  • ActiveRecord
  • 初心者向け
  • Java/Scalaテク
  • Unixのあれこれ
  • データベース
  • スマホ開発
  • HTML/CSS/JavaScript
  • デザイン製作
  • インフラ
  • クラウド
  • セキュリティ
  • エディタ
  • バージョン管理
  • その他
  • python
  • アクセス解析
  • Googleアナリティクス
  • Googleデータスタジオ
  • Web広告
  • SEO
  • UI/UX
  • ソーシャルメディア
  • EC開発
  • Webシステム開発
  • コンサルティング
  • Webデザイン
  • ブロックチェーン
  • ゲーム紹介
  • アプリ紹介
  • ASP
  • 風景
  • パソコン
  • ツール
  • ガジェット
  • 仕事術
  • 健康
  • 生活
  • 書評
  • Excel(エクセル)
  • PowerPoint(パワーポイント)
  • ゲームプランニング
  • SpriteStudio
  • マスターデータ入力/作成
  • Unity
  • キャラクターデザイン
  • ゲームシナリオ
  • レベルデザイン
  • ゲーム分析
  • 3DCG
  • イラスト制作
  • CG/アニメーション
  1. ホーム
  2. ゲーム制作/開発
  3. Unity
  4. 拡大テクスチャの4つのにじみ対処法
  • 2018-03-30
    • カテゴリ:
    • Unity

拡大テクスチャの4つのにじみ対処法

この記事は公開から1年以上が経過しています。情報が古い可能性がありますのでご注意ください。

Unity上でテクスチャデータをめちゃくちゃ拡大して表示させた際に発生する色のにじみの対処法です。

 Unity上でテクスチャデータをめちゃくちゃ拡大して表示させた際に発生する色のにじみをなるべく目立たないようにする対処法についてまとめました。
 例としてあげる環境ではテクスチャ(512px×512px)をSpriteModeのPixelsPerUnitを0.5に設定し4倍のサイズで表示させています。更にテクスチャに回転処理をかけUnity上に表示させています。今回はテクスチャを作るために倍以上あるサイズの元のイラストデータをテンプレートに合わせてPhotoshopで縮小や回転をかけています。

にじみ状態パターン①線がぼける

enter image description here
 Photoshopで縮小や回転をかけると、形が変わってもある程度自然に見えるように自動的に色の処理が行われます。そのため上記のイラストもテクスチャ用に縮小したところ、下記の左のテクスチャ画像のように色がなじむように隣同士の色が混じり合った部分が発生しています。こちらをそのままUnityに組み込んだ結果右のようなぼんやりとぼかしのかかったような表現になってしまいます。
enter image description here

 この場合は色の混ざり合っている部分を隣り合ったどちらかの色の単色でに塗りつぶすことではっきりとした境界線になります。注意点はななめになっている部分です。単色で塗りつぶすとはっきりとはするのですがやりすぎてしまうとカクカクとした階段状になってしまうため適度に中間色を加えぼかしをうまく利用する必要があります。
enter image description here

にじみ状態パターン②色が飛び出る

 上記で修正したテクスチャを取り込んでみます。すると中央の黄色とピンクが接触している部分で黄色がピンクの中に飛び出ています。
しかしテクスチャをみてもそれらしい色はみあたりません。
ここが難しいところで、Unity上で拡大した際、ゲーム画面上でもなめらかに表示されるよう更に画面表示処理がかかります。そのため少しの色味でも影響範囲が大きく、上記のように隣り合った色の範囲がお互いに狭いと色が侵食することがあります。
この場合はテクスチャの侵食している部分、とその付近をそれぞれ同系統の色で塗りつぶす必要があります。
enter image description here
例えば黄色が侵食しているのならば侵食範囲に濃い目のピンクを、接触している部分に中間色を。そのように修正データを作成しては組み込み、侵食がどの程度消えるかを繰り返し確認していきます。1ピクセル・僅かな色の違いで影響範囲が大きいため都度確認し地道に潰していきます。

にじみ状態パターン③使用していない色がにじみ出る

 ①②で使用している画像にもうっすら出ていますが、青なのになぜか赤色が滲み出ていたり、明るい色なのになぜか端に黒い色が表示されるという問題も出ることがあります。
 前者は色の境界部分で発生することが多いです。こちらは少し離れた色が影響してる、
もしくは「隣の色か滲みが発生している面の色を構成している色(青色でもわずかに赤と白がまじった色みなど)」が影響している場合があります。
そのため、発生している場所にわざと同系色の濃い色をおいたり、青に赤がでるならば多少青寄りの色を境界におくことで影響を軽減させられる場合があります。
 後者は使用している色のうち同色だと思っていた部分にほんの僅かなに色味の異なる色がのっていた場合などに起こります。
そのため、同色で異なる色が出る部分をマスクをかけて塗りつぶしてみたりすると問題が解消されます。

にじみ状態パターン④線から隣の色がはみ出て表示される

 ①のように中間色の線も潰し、③のように同色で塗りつぶしたとしても場合によっては中には図のように間の線をこして隣の色に広範囲に侵食する場合があります。
こちらの対処法は2点。
一つは、間の線を面にすること。間の色の範囲を大きくすることで侵食を消すことができます。
間の色に侵食するだけじゃないの?とも思いますが案外大きくした間の色には同じような色の侵食は発生しません。
もう一つは、色の系統を統一させてしまうこと。青をメインに使いたいならば寒色系と色を統一など、系統を統一させることで④のような侵食を防ぐことができます。
enter image description here
 どちらもデザインを変える最終手段ではありますが、イラストを作成中に事前に組み込んで問題ないかを確認していけば早い段階で手が打てますね。

最後に

拡大縮小せずデータを使用せれば一番問題ないのですが、画像データもなかなか重く、大きいデータを使用すれば使用するほどゲーム全体の容量も圧迫してしまいます。抑えられるものは抑えて、Unity上の設定で補えるものは補って動作の軽い快適なゲームを作成していきましょう。


  • 142 views
    • Tweet
    • このエントリーをはてなブックマークに追加

この記事を書いた人
tokin
デザイナーです。

「いいね!」するとDoRubyの最新記事を受け取ることができます。

Facebook

Twitterから最新記事を受け取るならこちら

Follow @doruby

Feedlyから最新記事を受け取るならこちら

follow us in feedly

おすすめの記事
  • 435 views
  • 2018-06-13
おすすめのAfterEffects無料エフェクトプラグイン紹介
  • 450 views
  • 2018-04-02
Unityのシェーダーについて
  • 1,340 views
  • 2018-01-31
塗りにひと手間加えてイラストの印象を華やかにする【前編】

カテゴリ

Ruby/RailsRailsの小技Rubyの小技Gemの紹介ActiveRecord初心者向けWeb開発Java/ScalaテクUnixのあれこれデータベーススマホ開発HTML/CSS/JavaScriptデザイン製作インフラクラウドセキュリティエディタバージョン管理その他pythonWebマーケティングアクセス解析GoogleアナリティクスGoogleデータスタジオWeb広告SEOUI/UXソーシャルメディアアピリッツEC開発Webシステム開発コンサルティングWebデザインブロックチェーンゲーム紹介アプリ紹介ASP風景ライフハックパソコンツールガジェット仕事術健康生活書評Excel(エクセル)PowerPoint(パワーポイント)ゲーム制作/開発ゲームプランニングSpriteStudioマスターデータ入力/作成Unityキャラクターデザインゲームシナリオレベルデザインゲーム分析3DCGイラスト制作CG/アニメーション

    人気の記事
    • 41 views
    • 2019-12-09
    どうしようもないけどやれるだけのことはやってどうにかしよう
    最近の記事
    • 41 views
    • 2019-12-09
    どうしようもないけどやれるだけのことはやってどうにかしよう
    • 68 views
    • 2019-10-18
    カスタマーサポートの極意 2019 #3 レポート
    • 357 views
    • 2019-08-16
    Search Engineerring Tech Talk 2019 Spring レポート
    • 489 views
    • 2019-07-24
    Rails & Webpack案件でのgmo paymentのトークン決済
    • 481 views
    • 2019-07-12
    whenever で時刻を設定する際システムで設定されているのとは別のタイムゾーンを使用する
    Facebook

      サイト情報
      • DoRubyとは
      • 株式会社アピリッツ

      ソーシャルアカウント
      • Facebook
      • Twitter

      企業情報
      • 会社概要
      • 採用情報
      • お問い合わせ
      サービス製品
      • レコメンドASP
      • サイト内検索ASP「Advantage Search」
      • オープンソースECサイト構築パッケージ「エレコマ」
      • 受注・在庫・商品情報一元管理「モールコネクター」
      • セキュリティ診断サービス
      • Googleアナリティクスセミナー

      Copyright © Appirits All Rights Reserved.