LoginSignup
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Sase(SASE)

【Unity】Pixel Art風な見た目にするアセット Stylizer - Extended　

Last updated at Posted at 2017-08-19

この記事は「Unity アセット真夏のアドベントカレンダー 2017」の20日目の記事です。
昨日１９日目の記事は、青木ととさんの「[Unity] TextMeshProで生成したテキストをDOTween(Pro)を使って動かす」でした。
さて、私が今回紹介するUnityアセットは「Stylizer - Extended」とゆうPixel Art風にしてくれるカメラエフェクトとシェーダーが入っているアセットを紹介したいと思います。

スクリーンショット 2017-08-19 15.38.25.png

#はじめに
「Stylizer - Extended」はどんな事ができるか

Stylizer Extendedにはフル装備のStylizerプラグインが含まれていますが、68色のパレット、10パターンのプリセット、デモコンテンツなど、70以上のモデルを含む4つの環境と16種類のシーンが含まれています。
Stylizer - Extendedは、ユニークな方法でゲームの外観を変更することができますドラッグ＆ドロップのUnityエクステンションです。 一貫した方法で色を統一し、画面をピクセル化することができます。 ご覧のように、これは本当に使いやすく、数秒でゲームの外観を劇的に変えることができます。
コンテンツ：
スタイライザーのイメージエフェクトでは、次の3つのレイヤーで再生できます。
▲パレットツールを使用してゲームの色を変更し、その色をパターンとミックスしてさまざまな外観を実現します。
▲あなたの画面をピクセル化して、ピクセルアートの美学
▲穀物を適用して詳細を絞り込む
パッケージには、イメージエフェクトのディザリングレイヤーと同じ結果を作成するために使用できるいくつかのマテリアルシェーダーが含まれています。使用可能なディザシェーダは合計8つあります。 'Standard'と 'Diffuse'（Lambert）は、ディザリング効果がマテリアルに適用される前に使用されていた照明方法を指定します。
Stylizerの中身 - 拡張
▲Stylizer Image Effect Plugin
▲色と方法を指定するパレットツール
▲パターン生成ツール
▲ピクセル化（ピクセルアート）Image Effect Plugin
▲8つのディザーシェイダー
▲優れたカラーグレーディングスキームを備えた45色パレットプリセット
▲10画像の詳細のためのパターンプリセット
▲4つのカテゴリに分類された16のシーン（Apolcapse Scene、Detective Scene
▲山の風景、宇宙の風景）
▲黙示録のシーンのための40個のユニークなモデル
▲探偵シーンのための20のユニークなモデル
▲1マウンテンチャンク（8K拡散、通常＆反射テクスチャ）
▲1リングシステム、小惑星ボリューム、月システムがすべて非常に詳細な8k拡散、通常＆反射テクスチャで作成されたアニメーションサイエンスフィリピンプラネットモデル
特徴：
▲使いやすい - ドラッグアンドドロップのワークフローとすぐに使える
▲ワークフローを単純化し、ベーキングやレスポンスを待つことなくオンザフライで動作する少数の設定
▲さまざまな外観を素早くプレビューできる既製のプリセット
▲完全に記述されたコード
▲絶え間ないアップデートと新機能
▲積極的な開発とサポート
▲清潔でユニークなモダンスタイル
▲スタイライザはゲーム内での最適化を念頭に置いて慎重に作られています
▲ドキュメント＆ビデオチュートリアル付属
技術的側面：
▲Vr、モバイル＆デスクトップ向けに最適化
▲各モデルはゲーム内での最適化を念頭に置いて慎重に作られています
▲モジュラーワークフロー用にすべての要素を事前設定

  • VR - ピクセルエフェクトはレンダーテクスチャを使用して最終結果を生成します。現時点ではVRでは動作しません。他のすべてのエフェクトがVR上で動作する点を除いて。

「Survival Shooter tutorial」をベースに見ていきたいと思います

適用前
bandicam 2017-08-13 21-43-58-158.jpg
適用後
bandicam 2017-08-13 21-44-02-098.jpg

適用前
bandicam 2017-08-13 21-50-38-078.jpg

適用後
bandicam 2017-08-13 21-51-25-404.jpg

適用前
bandicam 2017-08-13 21-55-34-565.jpg

適用後
bandicam 2017-08-13 21-55-30-752.jpg

マテリアルだけ変更も可能
適用前
スクリーンショット 2017-08-19 20.25.42.png

適用後
スクリーンショット 2017-08-19 20.25.12.png

#動作環境
Unity2017.1.0f3
Stylizer - Extended　 1.1

#使い方 カメラエフェクト編
アセットをインポートしてきて、適当に新しいシーンを作る
カメラコンポーネントが入っているオブジェクトにAssets/Stylizer/Resources/Scripts/Stylizer.csをアタッチします。　基本これだけで実装可能です。
Stylizer.csのプロパティには基本の大枠のプロパティが３つあり

###１,「Dithering」

インクが限られた印刷媒体で従来使用されていた効果で、後でメモリを節約するためにデジタル画像形式で導入されています。 特定のパターンを使用してこれらの色を混在させることにより、他の色の表現を達成することが可能である。 このエフェクトは、例えば、色の間に硬いエッジを見ずに、色の勾配を数色で表現するために使用できます。

いわゆる、特定の色だけで表現する効果です
これを使えばゲームボーイ風の見た目とか作れそうですね。

8月-19-2017 21-13-10.gif

主なプロパティ
・PaletteAssets
dithering effectをかける為の色情報が入っているアセット
　プリセット（Assets/Stylizer/Styles/Palette）は元から入ってるので基本そちらを使ってもいいが、物足りなくなったらオリジナルのPaletteAssetsを作成する事が可能　後ほど紹介
・PatternAssets
　ピクセルのパターンをつけられるアセット
　　プリセット（Assets/Stylizer/Styles/Pattern）は元から入ってるので基本そちらを使ってもいいが、物足りなくなったらオリジナルのPatternAssetsを作成する事が可能　後ほど紹介

###２,「Pixelation」

ピクセルアートを定義することは、個々のピクセルが画像を構成するビルディングブロックとして機能する独自のビジュアルスタイルです。 この効果は、モザイクアート、クロスステッチなどのタイプの刺繍テクニックと非常によく似たビジュアルスタイルです。

8月-19-2017 21-13-50.gif

主なプロパティ
・Pixel Size
ピクセルのサイズの変更
　　値を大きくすればカメラ全体がモザイク風になったりします

###３,「Grain」
フィルム粒子のザラザラ感を足すような表現

8月-19-2017 21-14-17.gif

主なプロパティ
・Intensity
　ザラザラの密度
・Luminance contribution
　値が低いほど、暗い領域ではノイズが少なくなります。
・Size
　ザラザラの大きさ
・Colored
　チェックすると色付きのザラザラができます
・Animated
　チェックするとアニメーションの追加ができます

もちろん組み合わせることも可能

8月-19-2017 21-21-08.gif

#使い方 マテリアル編
新しくマテリアルを作り、シェーダーを　Beffio/ImageEffect以外を選ぶ　ちなみにいろいろマテリアルシェーダーがあるので使う用途に合わせて使いましょう
作成したマテリアルを任意のモデルにアタッチします

8月-19-2017 22-02-51.gif

主なプロパティ
https://www.beffio.com/stylizer-documentation
###注意
マテリアルシェーダーのプロパティにもPaletteAssetsとPatternAssetsがセットできるのですが、
PaletteAssetsのみ　
Paletteとプリセットの適当なものと差し替えて再生するとデフォルトのPaletteに戻ってしまう問題があります　多分バグ？
なので、戻らないようにするスクリプトを書く必要があります

paletteUpdate.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Beffio.Dithering;

public class paletteUpdate : MonoBehaviour {

	[SerializeField]
	public Palette _palette;

	public void Start()
	{
		var ma = new Material( GetComponent<Renderer>().sharedMaterial);
		ma.SetFloat("_PaletteColorCount", _palette.MixedColorCount);
		ma.SetFloat("_PaletteHeight", _palette.Texture.height);
		ma.SetTexture("_PaletteTex", _palette.Texture);
		ma.SetFloat ("_PatternSize", _palette.Texture.width);
		GetComponent<Renderer>().sharedMaterial = ma;
	}
}

今後のアップデートで修正されるかもしれないですが、一応参考までに

#PaletteAssets作成
Projectウィンドウ→Create→Beffio/Dithering Palette
スクリーンショット 2017-08-19 22.43.20.png
デフォルトは[No Textures....]と警告がでるので、Palette Color List を適当に使いたい色を指定してGenerateTexturesをすれば完成です

詳しい設定はドキュメントで
https://www.beffio.com/stylizer-documentation

#PatternAssets作成
Projectウィンドウ→Create→Beffio/Dithering Pattern
スクリーンショット 2017-08-19 22.44.32.png

「Noize」 「Checkerboard」 「Lines」
から任意のタブを選び Generate　を押せば完成です

詳しい設定はドキュメントで
https://www.beffio.com/stylizer-documentation

#最後に
UnityのWebCamTextureで自分をPixel Art風な見た目にしてみました
8月-19-2017 23-10-44.gif
Unity アセット真夏のアドベントカレンダー 2017
明日２１日目はユノミさんの「開発を爆速にするアセット紹介」です

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?