Only this pageAll pages
Powered by GitBook
1 of 5

Pixel Art Top Down - Village

Loading...

Loading...

Loading...

Loading...

Loading...

OVERVIEW

PIXEL ART TOP DOWN – VILLAGE

Thanks for using this asset pack.

For any questions, please email to [email protected]

CHANGLOG

1.0.4

  • Add PSD files.

1.0.3

  • Some minor issues fixed.

1.0.2

  • Fix water renderer feature glitch when game view and scene view are active at the same time.

1.0.1

  • Add Unity 6 support.

1.0.0

  • First release.

TILE PALETTE

Scripted Tile

There is one single tile besides every terrain texture tile sets. This tile is a scripted tile and will automatically draw different tiles from the normal tile set as variation with each paint.

You can find the configurations of the scripted tiles at Cainos/Pixel Art Top Down – Village/Tileset/Scripted Tile.

Decoration Rate is the chance to draw a random tile from the Decoration

list rather than from the
Basic
list, in range
[0, 1]

Seed is the random seed to use.

Below is an example of using Decoration Rate at 1.0 vs Decoration Rate at 0.0 for ST Glass

No Collision Tile

The last group of the terrain tiles are the same as the first group, but with no collision

They are used in positions like the example shown below to prevent generating collision into higher layer of terrain.

SETUP GUIDE

Color Space

It is recommended to use Linear color space with this asset.

You can find this setting at Project Settings/Player/Other Settings.

Universal Render Pipeline

The demo scene requires Universal Render Pipeline with 2D Renderer to work. You can install it in the Package Manager.

After the Universal Render Pipeline is properly installed, you can use the Universal Render Pipeline Asset that comes with this asset. You can find it at Cainos/Pixel Art Top Down – Village/Rendering.

If you are using your own render pipeline asset, make sure to set Transparency Sort Mode to Custom Axis with Transparency Sort Axis set to [0, 1, 1].

Unity 6 Support

Import Patch - Unity 6 package at the root folder of the asset to add Unity 6 support.

Sometimes you will get a error of [Top Down Pixel Water Renderer Feature] Blur shader not set. after importing. In this case, just follow the setup steps to add the material and shader to the renderer feature.

Building for WebGL in Unity 6

For the water to be rendered correctly in WebGL builds, you need to disable Auto Graphics API and set Graphics API to WebGPU in Project Settings > Player > Other Settings .

Input System in Unity 6.1

For compatiblity, the default input method in this asset still uses the old input manager. And in Unity 6.1, the old input manager is no longer the default option.

If you encounter any error regarding the input system. Please change the Active Input Handling in Project Settings/Player to Both .

Pixel Aligned Placement

By setting the move value of Increment Snapping to 0.03125 (1/32), and press CTRL when moving objects, the objects can be placed perfectly aligned to the pixel grid.

Top Down Pixel Water

This asset is uploaded as a complete project to included project settings. The Top Down Pixel Water renderer feature should be well setup by default.

If you need to set it up by yourself, follow the below instruction:

  • Add a Top Down Water Renderer Feature to the render pipeline asset.

  • Assign the water material at Cainos/Pixel Art Top Down - Village/Material/MT Top Down Pixel Water and gaussian blur shader at Cainos/Pixel Art Top Down - Village/Shader/SH Render Pass - Gaussian Blur to the Reference foldout.

  • Set Terrain Layer Mask

Optimize the Water for Mobile Platform

The rendering of the water is quite performance heavy. When optimizing for mobile platforms, please try the follows settings.

On Assets\Cainos\Pixel Art Top Down - Village\Rendering\Universal Render Pipeline Asset - 2D Renderer, find the Top Down Pixel Water Renderer Feature and tweak the blur settings of the water.

The idea is to make Downsample as large as possible and Kernel Size and Blur Pass as small as possible while maintaining an acceptable water rendering quality.

On the Universal Render Pipeline Asset, set Render Scale to 0.5. Mobile platforms usually have much higher DPI so we do not need to render at full resolution.

On Project Settings/Player, Set Graphics APIs to Vulkan, enable Multithreaded Rendering and Graphics Jobs.

With these settings, the demo scene can run at 60fps at Xiaomi MIX 2S, a pretty old device.

and
Water Layer Mask
. The
Terrain Layer Mask
is used to render refraction and a color gradient from shore to deep water. It should contain layers of the terrain tile map and other objects that directly touch the water, for example, the support of the dock. The
Water Layer Mask
should only contain the water prefab.
  • Find the PF Top Down Pixel Water in Cainos/Pixel Art Top Down – Village/Prefab/FX and drag it to the scene.

  • Top Down Pixel Water

    WATER RENDERING

    The water effect is achieved through a custom shader combined with a Renderer Feature. Below is a breakdown of the rendering process.

    The water shader ASE Top Down Pixel Water is made using Amplify Shader Editor. If you own this asset, you can open the shader as a graph to see how it is made.

    Water Color

    Render terrain and water-touching objects defined in Terrain Layer Mask into a texture named Terrain Tex.

    Apply a gaussian blur to the alpha channel of Terrain Tex using parameters from Water Color Blur Setting, creating Terrain Blurred Tex.

    Then we can use the grayscale of Terrain Blurred Tex to lerp between Shallow Color and Deep Color to create a gradient from shallow water near the shore to deep water far from the shore.

    Shore Line

    Shift the alpha of Terrain Texture down by one pixel size (1/32 in world space as this asset is 32x32 per unit), color it with Foam Color and blend it with the base water color.

    Refraction

    First we need to create a mask texture Under Water Mask Tex in the same way as we create the Terrain Blurred Tex in the Water Color step, but with parameters from Under Water Mask Blur Setting.

    For the content to be refracted, we use the Terrain Tex and move it down twice, each by 0.4 tile size, mix them together and color it with Under Water Color.

    For the distortion effect, apply time-animated Voronoi noise to UV coordinates when sampling from Terrain Tex.

    Then we can mask the result with Under Water Mask Tex to create a fading effect and blend it to the base water color.

    Foam

    We use a foam texure TX FX Water Foam from this asset, sample it with the UV multiplied by 2.0 in the vertical direction to match the perspective of the top down scene, and disturb it with a time-animated noise.

    For the mask, we use the maske value from Under Water Mask Tex, but move it down by 0.5 tile size and power the value by 2.5 (make the white part wider).

    Highlight

    The highlight pattern is made by multiplying two noise with different size and moving direction, then powered with 6.5 to extract the most light color, and stepped by 0.3 to make it flat.

    The UV of the noise is multiplied by 20 in the vertical direction to make it much wider horizontally.

    Then we can use this as a mask to add Highlight Color to the water to create the final water effect.

    Terrain Tex
    Terrain Blurred Tex Overlayed by Terrain Tex
    Water Color
    Water Color with Shore Line
    Under Water Mask Tex
    Under Water Content
    Under Water Content with Noice Distortion
    Masked by Under Water Mask Tex
    Blended with Water Color and Shore line
    Foam Texture with Modified UV
    Disturb Noise
    Mask for the Foam
    Final Result
    Noise 1
    Noise 2
    Two Noise Multiplied Together and Powered by 6.5
    Stepped by 0.3
    Final Water Effect
    With Other Scene Objects