# HOME

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Pixel Art Top Down - Village</td><td><a href="/files/KGrDY6G89H1wD9CONFsw">/files/KGrDY6G89H1wD9CONFsw</a></td><td><a href="/spaces/IPBJbsBHfwnXGNm0L3kh">/spaces/IPBJbsBHfwnXGNm0L3kh</a></td></tr><tr><td>Pixel Art Top Down - Basic</td><td><a href="/files/WjyrB9mKtkQjOzV02fxx">/files/WjyrB9mKtkQjOzV02fxx</a></td><td><a href="/spaces/XXykzv2ZOBtAHZzGTFq1">/spaces/XXykzv2ZOBtAHZzGTFq1</a></td></tr><tr><td>Pixel Art Platformer - Dungeon</td><td><a href="/files/dSofFTML5N8AwJEJXcLv">/files/dSofFTML5N8AwJEJXcLv</a></td><td><a href="/spaces/2RD5mzvf7qYwyCpm2uH3">/spaces/2RD5mzvf7qYwyCpm2uH3</a></td></tr><tr><td>Customizable Pixel Character</td><td><a href="/files/32RtycFdnriWSqtYgKIB">/files/32RtycFdnriWSqtYgKIB</a></td><td><a href="/spaces/VAsWZLJR6xuMkfJM3gAU">/spaces/VAsWZLJR6xuMkfJM3gAU</a></td></tr><tr><td>Pixel Art Monster - Dungeon</td><td><a href="/files/x5t4tDIro9NqS9extITD">/files/x5t4tDIro9NqS9extITD</a></td><td><a href="/spaces/mSx8trfX3J4tI1Wvg8rF">/spaces/mSx8trfX3J4tI1Wvg8rF</a></td></tr><tr><td>Pixel Art Platformer - Village House</td><td><a href="/files/zlB9swefNsU8tiYEkUkg">/files/zlB9swefNsU8tiYEkUkg</a></td><td><a href="/spaces/GaR7IiGRboSpaS07N5td">/spaces/GaR7IiGRboSpaS07N5td</a></td></tr><tr><td>Interactive Pixel Water</td><td><a href="/files/kAHKvpR0zvodmzkIUghF">/files/kAHKvpR0zvodmzkIUghF</a></td><td><a href="/spaces/WsdVV12dCn86UlSmS6CH">/spaces/WsdVV12dCn86UlSmS6CH</a></td></tr></tbody></table>


# OVERVIEW

### Customizable Pixel Character

Thanks for using this asset pack.

For any question, feel free to please email to [*support@cainos.net*](mailto:support@cainos.net)

### Quick Tutorial

Drag and drop one of the character presets in `Cainos\Customizable Pixel Character\Prefab\Character Preset` into the scene and there you go.

Character customization is done in the `Customization` foldout group in `Pixel Character` script.

### Character Control

* <kbd>A</kbd> and<kbd>D</kbd> to move left and right.
* <kbd>SHIFT</kbd> to run.
* <kbd>CTRL</kbd> to dodge.
* Holding <kbd>SHIFT</kbd> and double tap <kbd>A</kbd> or <kbd>D</kbd> to dash.
* <kbd>C</kbd> to crouch.
* <kbd>Z</kbd> to crawl.
* <kbd>SPACE</kbd> to jump.
* <kbd>LMB</kbd> to attack.
* Holding <kbd>RMB</kbd> to look.
* <kbd>V</kbd> to melee attack.
* <kbd>W</kbd> and <kbd>S</kbd> to climb ladder.
* Holding <kbd>S</kbd> to jump down platform.


# SETUP GUIDE

### Layer Collision Settings

To avoid the character colliding with its own weapon. Put the character and weapon into different layer and in the project’s Physics 2D settings, make sure these two layers do not collide.

You need to setup this by hand as project settings will not be imported with the asset pack. <br>

In this case we put characters into `Player` layer and weapons into `Player Weapon` layer. Of course, this may vary based on your need.

All the character presets are variation prefabs of `Cainos\Customizable Pixel Character\Prefab\PF Pixel Character`. So for overall changes you only need to modify this one.

<figure><img src="/files/z7fDaxgSs80oJ5KCdOo2" alt="" width="224"><figcaption></figcaption></figure>

### Custom Sort Axis&#xD;

It is recommended that you set `Transparency Sort Mode` to `Custom Axis` and `Transparency Sort Axis` to `(0,0,1)` at the Graphics settings.

<figure><img src="/files/LtLlXD7XJ33lZLSygDCW" alt="" width="375"><figcaption></figcaption></figure>

### Skin Weights&#xD;

For best animation quality, in `Project Settings/Quality`, `Skin Weights` should be set to at least `2 Bones`.

<figure><img src="/files/2gBBTdWFlxpDieypgdUw" alt="" width="375"><figcaption></figcaption></figure>

### Color Space

It is recommended to use `Linear` color space with this asset. You can find it in `Project Settings/Player/Other Settings`.

<figure><img src="/files/PivGW7WK5QrvlgQG4q79" alt="" width="375"><figcaption></figcaption></figure>

### Lighting Support

By default, the character shaders behave like an unlit sprite shader, and can be used in any render pipeline.

But if you need lighting on the character, you need to install additional shaders to make them support lighting.

Currently lighting on character only supports `Universal Render Pipeline`.

### Universal Render Pipeline 2D Lighting

Import the patch version that corresponds to your Unity version. It will replace current character shaders with versions that support URP 2D Lighting.

* Before Unity 6: Import `Patch - URP 2D Lit`
* Unity 6.0 to 6.2: Import `Patch - URP 2D Lit - Unity 6.0 to 6.2`
* Unity 6.3 and later: Import `Patch - URP 2D Lit - Unity 6.3`

Make sure your 2D lighting is properly set up so the character can be displayed correctly.

### Universal Render Pipeline 3D Lighting

Import the patch version that corresponds to your Unity version. It will replace current character shaders with versions that support URP 3D Lighting.

* Before Unity 6: Import `Patch - URP Lit`
* Unity 6.x: Import `Patch - URP Lit - Unity 6`

### Input System in Unity 6.x

For compatiblity, the default input method in this asset still uses the old input manager. And in Unity 6.x, 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`

<figure><img src="/files/sLqkJfTiA05gdpVpVdS1" alt="" width="375"><figcaption></figcaption></figure>

### Fixing Missing UI Text

The demo UI utilizes Text Mesh Pro. If your project does not already include it, a prompt to Import TMP Essentials will appear when you open the scene. Please complete the import and then reopen the scene to ensure the text displays correctly.

If the prompt does not appear automatically, you can trigger it manually by selecting any Text Mesh Pro object in the Hierarchy.

### Sorting Order Glitch When Using Multiple Character&#xD;

You may see some glitch when two characters are too close. It happens when the two characters take up the same z space. Give them different z position value will solve the problem.\
You can set the character’s z scale to a smaller value like `0.1` (but avoid setting it to `0.0`), so that it takes up less z space.

<div><figure><img src="/files/QFgGTD39Qvw04qLK4Yca" alt="" width="177"><figcaption></figcaption></figure> <figure><img src="/files/p8THa7gAONciwt28o3vW" alt="" width="161"><figcaption></figcaption></figure></div>

### Parts of the Character Not Visible When Using a Background

The background may be positioned at the same z-coordinate as the character, causing it to occlude parts of the model. Since the character is not a flat plane (it has 3D depth), overlapping z-positions can result in rendering conflicts.

Adjust the background’s position by moving it backward along the z-axis (assigning it a larger z-value). This ensures proper depth sorting, allowing the character to render fully in front of the background.

<figure><img src="/files/j0Md6x3GqhsCDvqWOMlV" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/CX80E48aZXcdBF5YBkNT" alt="" width="563"><figcaption></figcaption></figure>


# SCRIPT REFERENCE

### Overview

There are 3 scripts attached to the character object.

<table data-header-hidden><thead><tr><th width="229.5"></th><th></th></tr></thead><tbody><tr><td>Pixel Character       </td><td>Storing object reference inside the character object and character customization.</td></tr><tr><td>Pixel Character Controller</td><td>Controlling movement of the character.</td></tr><tr><td>Pixel Character Input Mouse and Keyboard</td><td>Reading mouse and keyboard input and feed into the Pixel Character Controller script</td></tr></tbody></table>

There are also 2 scripts attached to the `Animator` object inside character. Generally, you don’t need to pay attention to these two scripts.

<table data-header-hidden><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Animation Event Receiver</td><td>For receiving animation events.</td></tr><tr><td>Root Motion Receiver</td><td>For receiving root motion from the animation.</td></tr></tbody></table>

### Pixel Character

For storing object reference inside the character object and character customization.

#### Reference Foldout

Contains reference to objects inside the character object.

#### Customization Foldout

Parameters here is mainly for tweaking the character appearance. The customization is mainly done by changing the materials here.  Can be changed both in editor and runtime.

<table data-header-hidden><thead><tr><th width="179.5"></th><th></th></tr></thead><tbody><tr><td>Blink Interval</td><td>The interval range for the character to play an eye blink animation.</td></tr><tr><td> </td><td></td></tr><tr><td>Hat Material</td><td>Material of the character’s hat</td></tr><tr><td>Hair Material</td><td>Material of the character’s hair</td></tr><tr><td>Eye Material</td><td>Material of the character’s eye</td></tr><tr><td>Eye Base Material</td><td><p>Material of the character’s eye shape.</p><p>You only need to change this when changing the character’s gender.</p></td></tr><tr><td>Facewear Material</td><td>Material of the character’s facewear.</td></tr><tr><td>Cloth Material</td><td>Material of the character’s cloth.</td></tr><tr><td>Pants Material</td><td>Material of the character’s pants.</td></tr><tr><td>Socks Material</td><td>Material of the character’s socks.</td></tr><tr><td>Shoes Material</td><td><p>Material of the character’s shoes.</p><p>This will be displayed behind the character’s pants.</p></td></tr><tr><td>Back Material</td><td>Material of the object the character carries on the back.</td></tr><tr><td>Body Material</td><td><p>Material of the character’s body.</p><p>You need to change this when changing the character’s gender.</p><p>Also, special character presets would use their specific body material, like Vampire or Zombie.</p></td></tr><tr><td> </td><td></td></tr><tr><td>Clip Hair</td><td><p>Hide part of the character’s hair.</p><p>When wearing certain hats, you need to enable this.</p></td></tr><tr><td>Hide Hair</td><td>Completely hide the character’s hair.</td></tr><tr><td>Shoes in Front</td><td>Whether to display shoes in front of the character’s pants.</td></tr></tbody></table>

#### Runtime Foldout

Parameters here should only be changed at runtime except `Facing`.

<table data-header-hidden><thead><tr><th width="179.5"></th><th></th></tr></thead><tbody><tr><td>Facing</td><td><p>The character’s facing.</p><p>Can be changed in editor to set the character’s initial facing.</p></td></tr><tr><td>Alpha</td><td>Controls the transparency of the entire character.</td></tr><tr><td>Is Dead</td><td><p>Whether the character is dead.</p><p>Turning this on will only make the character appear dead on the graphic side. For making the character truly dead, turn on the <code>Is Dead</code> on the <code>Pixel Character Controller</code> script.</p></td></tr><tr><td>Expression</td><td>The character’s expression.</td></tr><tr><td>Injured Front</td><td>Play <code>Injured Front</code> animation.</td></tr><tr><td>Inj<em>ured</em> Back</td><td>Play <code>Injured Back</code> animation.</td></tr><tr><td>Detach Weapon</td><td><p>Detach weapon to a separated object from the character.</p><p>Returns the detached weapon game object.</p></td></tr><tr><td>Clear Weapon</td><td>Clear out everything in the weapon slot.</td></tr></tbody></table>

### Pixel Character Controller

Script for controlling the character’s movement.

It will modify some of the `Facing` parameters in the `Pixel Character` script and parameters in the `Animator` to control animation.

#### **Movement Foldout**

Parameters for the character’s movement.

<table data-header-hidden><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td><em>Gr</em>ound Check Layer Mask</td><td>Objects under this layer mask will be consider ground the character can stand on.</td></tr><tr><td> </td><td></td></tr><tr><td>Walks Speed M<em>ax</em></td><td>Max walking speed.</td></tr><tr><td>Walks Ac<em>c</em></td><td>Walking Acceleration.</td></tr><tr><td> </td><td></td></tr><tr><td>Run Speed Max</td><td>Max running speed.</td></tr><tr><td>Run <em>Ac</em>c</td><td>Running Acceleration.</td></tr><tr><td> </td><td></td></tr><tr><td>Crouch Speed Max</td><td>Max move speed while crouching.</td></tr><tr><td>Crouch Acc</td><td>Crouching acceleration.</td></tr><tr><td> </td><td></td></tr><tr><td>Crawl Speed Max</td><td>Max move speed while crawling.</td></tr><tr><td>Crawl Acc</td><td>Crawling acceleration.</td></tr><tr><td> </td><td></td></tr><tr><td>Air Speed Ma<em>x</em></td><td>Max move speed while in air</td></tr><tr><td>Air Acc</td><td>Air acceleration</td></tr><tr><td> </td><td></td></tr><tr><td>Ground Drag</td><td>Braking acceleration (from movement to still) while on ground</td></tr><tr><td>Air Drag</td><td>Braking acceleration (from movement to still) while in air</td></tr><tr><td> </td><td></td></tr><tr><td>Jump Enabled</td><td>Whether the character can jump.</td></tr><tr><td>Jump Speed</td><td>Speed applied to the character when jump.</td></tr><tr><td>Jump Cooldown</td><td>Time needed to be able to jump again after landing.</td></tr><tr><td>Jump Tolerance</td><td>When character is off ground and inside this time, the character is still able to jump.</td></tr><tr><td>Jump Gravity Multiplier</td><td><p>Gravity multiplier when character is jumping.</p><p>Should be within <code>[0.0,1.0]</code>, set it to lower value so that the longer you press the jump button, the higher the character can jump.</p></td></tr><tr><td>Fall Gravity Multiplier</td><td><p>Gravity multiplier when character is falling.</p><p>Should be equal or greater than <code>1.0</code></p></td></tr><tr><td> </td><td></td></tr><tr><td>Dash Enabled</td><td>Whether the character can dash.</td></tr><tr><td>Dash Spe<em>ed Start</em></td><td>Speed when dash starts.</td></tr><tr><td>Dash Speed Max</td><td>Max move speed while dashing.</td></tr><tr><td>Dash Acc</td><td>Dash acceleration.</td></tr><tr><td>Dash Time</td><td>Time the dash state will last.</td></tr><tr><td>Dash Cooldown</td><td>Time it takes for the character to be able to dash again after exiting dash state.</td></tr><tr><td> </td><td></td></tr><tr><td>Dodge Enabled</td><td>Whether the character can dodge.</td></tr><tr><td>Dodge Speed Mul</td><td>Dodge speed multiplier</td></tr><tr><td>Dodg<em>e</em> Cooldown</td><td>Time it takes for the character to be able to dodge again after exiting dodge state.</td></tr><tr><td> </td><td></td></tr><tr><td>Swim Enabled</td><td><p>Whether the character can swim.</p><p>When disabled the character will ignore the water.</p></td></tr><tr><td>Swim Speed Max</td><td>Max swimming speed.</td></tr><tr><td>Swim Speed Fast Max</td><td>Max swimming speed when in fast moving mode (when the run key is down).</td></tr><tr><td>Swim Acc</td><td>Swim acceleration.</td></tr><tr><td>Swim Buoyancy Speed</td><td>The speed applied to the character as buoyancy when in water.</td></tr><tr><td>Keep in Water Depth When Diving</td><td><p>Whether to automatically keep current in water depth when diving.</p><p>When disabled the character will always try to float to the water surface.</p></td></tr><tr><td></td><td></td></tr><tr><td>Ladder Climb Enabled</td><td>Whether the character can climb ladder.</td></tr><tr><td>Ladder Climb Speed</td><td>Ladder climbing speed.</td></tr><tr><td>Ladder Climb Speed Fast</td><td>Ladder climbing speed when the run key (by default is <kbd>SHIFT</kbd>) is pressed.</td></tr><tr><td> </td><td></td></tr><tr><td>Ledge Climb Enabled</td><td>Whether the character can climb ledge.</td></tr></tbody></table>

#### Attack Foldout

Parameters for the character’s attack action.

<table data-header-hidden><thead><tr><th width="229.5"></th><th></th></tr></thead><tbody><tr><td>Attack Action</td><td>Attack action to perform whether primary attack key (by default is <kbd>LMB</kbd>) is pressed.</td></tr><tr><td>Attack Action Melee</td><td>Attack action to perform whether melee attack key (by default is <kbd>V</kbd>) is pressed, or when the character is in a state when primary attack action is not available, like when crawling or climbing ladder.</td></tr><tr><td> </td><td></td></tr><tr><td>Attack Speed Mul</td><td><p>Speed multiplier of the attack animation.</p><p>You can use this to make the character attack quicker or slower. Default value is <code>1.0</code></p></td></tr><tr><td>Attack Cooldown</td><td><p>Time needed to be able to attack again after last attack action ended.</p><p>Default value is <code>0.0</code>, means no cooldown.</p></td></tr><tr><td> </td><td></td></tr><tr><td>Throw Force</td><td><p>When using <code>Throw</code> attack action, the character will throw out the weapon it is holding.</p><p>This defines the force applied to the thrown weapon.</p></td></tr><tr><td>Throw Angular Speed</td><td>The angular speed applied to the thrown weapon.</td></tr><tr><td> </td><td></td></tr><tr><td>Projectile Speed</td><td>The speed applied the projectile when using <code>Cast</code> or <code>Archery</code> attack action.</td></tr><tr><td>Projectile Prefab</td><td>The prefab of the projectile to be instantiate when using <code>Cast</code> or <code>Archery</code> attack action.</td></tr></tbody></table>

#### Event Foldout

This foldout contains some Unity events that you can use to trigger your own function.

A typical use case is to play sound effects when curtain event happens.

<table data-header-hidden><thead><tr><th width="229.5"></th><th></th></tr></thead><tbody><tr><td>On Footstep</td><td>When the character’s foot touches the ground in animation like walk or run.</td></tr><tr><td> </td><td></td></tr><tr><td>On Jump</td><td>When the character jump away from ground.</td></tr><tr><td><em>On</em> Land</td><td>When the character land on the ground from air.</td></tr><tr><td> </td><td></td></tr><tr><td><em>On</em> Dodge Start</td><td>When dodge action starts.</td></tr><tr><td><em>On</em> Dodge End</td><td>When dodge action ends.</td></tr><tr><td> </td><td></td></tr><tr><td>On Attack Start</td><td>When attack action starts.</td></tr><tr><td>On Attack Hit</td><td>When attack action is supposed to hit the target. Damage to the target can be applied at this event.</td></tr><tr><td>On Attack End</td><td>When attack action ends</td></tr><tr><td> </td><td> </td></tr><tr><td>On Bow Pull</td><td>When using <code>Archery</code> attack action, the character start pulling the bow string.</td></tr><tr><td>On Bow Shoot</td><td>When using <code>Archery</code> attack action, the character release the bow string and the arrow is shot.</td></tr><tr><td> </td><td></td></tr><tr><td>On Throw</td><td>When using <code>Throw</code> attack action, the character throws out the holding weapon.</td></tr></tbody></table>

#### Input Foldout

Parameters for receiving inputs from input scripts.

If you are going to use your own input scripts, you need to modify these parameters in your scripts.

Only available at runtime.

<table data-header-hidden><thead><tr><th width="229.5"></th><th></th></tr></thead><tbody><tr><td>Input Move</td><td>movement input, x for horizontal, y for vertical, x and y should be in <code>[-1.0, 1.0]</code></td></tr><tr><td>Input Run</td><td>Run input, when enabled the character will run instead of walk.</td></tr><tr><td>Input Dash</td><td>Dash input, when triggered the character will enter dash state.</td></tr><tr><td>Input Dodge</td><td>Dodge input, when triggered the character will enter dodge state.</td></tr><tr><td>Input Crouch</td><td>Crouch input, when enabled the character will be crouching.</td></tr><tr><td>Input Crawl</td><td>Crawl input, when enabled the character will be crawling. Will override crouch input.</td></tr><tr><td>Input jump</td><td><p>Jump input, when triggered the character will start to jump.</p><p>When continuously enabled the character will jump higher.</p></td></tr><tr><td>Input Attack</td><td>Primary attack input, will trigger the attack action when available.</td></tr><tr><td>Input Melee</td><td>Melee attack input, will trigger the melee attack action.</td></tr><tr><td>Input Look</td><td>Look input, when enabled the character will look at the position defined by <code>Input Target</code></td></tr><tr><td>Input Target</td><td>This is a world space <code>Vector2</code> position that defines the target the character should look at or point at when performing curtain attack action.</td></tr></tbody></table>

#### Debug Foldout

Parameters for switching debug gizmos display.

#### Runtime Foldout

Parameters here should only be changed at runtime.

Most parameters here is read only and just for exposing states of the controller.

### Pixel Character Input Mouse and Keyboard

This script will read mouse and keyboard input and modify parameters in the `Input` foldout of the `Pixel Character Controller` script.

If you are going to use your own input script or let an AI to control the character, just remove this script.

It is also a good example for showing how to feed input to the `Pixel Character Controller` script.

| *Is Dead* | Is the character dead? if yes, plays dead animation and disable control. |
| --------- | ------------------------------------------------------------------------ |

### Pixel Character Audio

A placeholder script for character audio. It is not added to the character by default.

You can use this script as a reference and foundation if you intend to add audio for the character.


# CUSTOMIZATION

### Overview

In this part we will go through the ways to customize different parts of the character.

Most of the customization is done by changing material in `Customization` foldout of the `Pixel Character` script. It can be done both in editor and runtime.

You can check the character presets to see how their customizations are set up.

<figure><img src="/files/lpUIweEz7K7dnFlZOlxr" alt="" width="375"><figcaption></figcaption></figure>

### Gender

By changing the `Body Material` and `Eye Base Material` to corresponding material.

Also, pick a hair material to match the gender.

### Skin Tone

By changing the `Skin Tint` parameter in the `Body Material` of the character.

### Hairstyle & Hair Color

By changing the `Hair Material`.

Notes that not every hairstyle & hair color combination has a material created in advance, but you can easily create your own:

Duplicate a hair material and change the `Main Texture` for hairstyle, `Ramp Texture` for hair color.

<figure><img src="/files/8l3irrjLygf3qM5R7HpO" alt="" width="303"><figcaption></figcaption></figure>

### Hat

By changing the `Hat Material`.

When using certain hat, you also need to enable the `Clip Hair` or `Hide Hair` to hide part of the hair outside the hat.

### Facewear

By changing the `Facewear Material`.

### Cloth

By changing the `Cloth Material`.

### Pants

By changing the `Pants Material`.

### Socks

By changing the `Socks Material`.

### Shoes

By changing the `Shoes Material` .

Also, turn `Shoes In Front` on or off based on whether the shoes should be displayed in front of the character’s pants.

### Back

By changing the `Back Material`.

### Weapon

By dragging one of the weapon prefabs in `Cainos\Customizable Pixel Character\Prefab\Weapon` into the `Weapon Slot`.

<figure><img src="/files/dXEcNsmWf2INRj7Nc55N" alt="" width="267"><figcaption></figcaption></figure>


# INTERACTABLE OBJECTS

### Ladder

A ladder the character can climb onto.

It needs a `Box Collider` with `Is Trigger` enabled which defines the area of the ladder.

And a `Ladder` script with the `Direction` set to the ladder’s direction (`Left` or `Right`).

The `Climb Pos` is a transform inside the ladder object which defines the character’s position when climbing the ladder.

<div><figure><img src="/files/GTe2PRQmLJx2NdpZmld4" alt="" width="287"><figcaption></figcaption></figure> <figure><img src="/files/fPIPR720el7rTQFolqku" alt="" width="375"><figcaption></figcaption></figure></div>

### Platform

One-way platform that the character can jump onto and get down from it.

When standing on a platform and keep pressing down key, the character can directly get down from the platform.

It needs a collider with `Used By Effector` enabled, a `Platform Effector 2D` with `Collider Mask` set to exclude the player layer, and a `Platform` script.

<div><figure><img src="/files/MP5eBTM5FTaBqol0xkSO" alt="" width="279"><figcaption></figcaption></figure> <figure><img src="/files/aa7ANoC4AvwRrZjcLYoc" alt="" width="343"><figcaption></figcaption></figure></div>


# MAKING YOUR OWN ANIMATIONS

### Overview

Below is a short tutorial for making new animation for characters inside Unity.

### Basic

Select any one of the character prefabs and go into Prefab Editing mode.

Select `Animator` in the `Hierarchy`, create a new clip in the Animation window. Then you can start keying your animation.

<figure><img src="/files/3AyNj1dRwsj6dav3p0sr" alt="" width="563"><figcaption></figcaption></figure>

You should only key on objects under the `Animator` object. All the character’s bones are in the `Rig` hierarchy.

### Bone Display

You can use the `Bone Renderer` script of Unity’s `Animation Rigging` package (available in Package Manager) for displaying and easy selecting bones in the scene.

<div><figure><img src="/files/e6y18YHKvb10nknTd8AA" alt="" width="172"><figcaption></figcaption></figure> <figure><img src="/files/J2fEKLzkDqbWK4fKRdT9" alt="" width="210"><figcaption></figcaption></figure></div>

* Add a `Bone Renderer` script to the character and click on the lock button on the top-right corner of the Inspector window.
* Right click on `Rig` object inside the character hierarchy and select `Select Children`.
* Drag all the objects selected to the `Transforms` list of the `Bone Renderer` script.

Some of the Rig objects are just helper objects. For example `Rig`, `Rig LPlatform`, `Rig RPlatform`. You can delete them from the `Transforms` list to stop them from being displayed.

As the `Bone Renderer` cannot properly display end bone’s length correctly. You can manually and a new object to the end bone and place it at the end position, then drag it to the `Transforms` list of the `Bone Renderer` to force the end bone to be displayed with a proper length.

<figure><img src="/files/F2PJaCsXEFyuSQ3sbnS5" alt="" width="375"><figcaption></figcaption></figure>

### Animator Setup

When your animation is done, you need to put the clip into the character’s `Animator Controller`.

In this case we made a kick animation, so we add a new layer in the `Animator` called `Kick`, a new trigger parameter call `Kick` and setup the animation state as the picture below.

\
We use an empty state (with no motion clip) as the entry state. When `Kick` parameter is triggered, it transits to the `Kick` state with the animation clip we just made. When the `Kick` animation finish playing, it goes back to the `Empty` state.

<div><figure><img src="/files/7dCLTT9Q0wtoCXHJGpug" alt=""><figcaption></figcaption></figure> <figure><img src="/files/4tySGkhOzCV04k9qYd51" alt=""><figcaption></figcaption></figure></div>

### Scripting

Then we need to trigger the `Kick` parameter with our code. You can put the code anywhere you like. In this case, we put it in the `Pixel Character Controller` script.

Then, we are able to trigger the kick animation by the `Kick` function or the `Kick` button in the Inspector.

<div><figure><img src="/files/JizqzkMutv8nCFOyB43c" alt=""><figcaption></figcaption></figure> <figure><img src="/files/yPQP0ce2yr3kUa78dvBi" alt=""><figcaption></figcaption></figure></div>

### Create a Specific Prefab for Making Animation

The weapon object placed inside `Weapon Slot` is syncing its position with `Rig Weapon` bone through script in runtime. So, in the editor, the weapon object will not move with the `Rig Weapon` bone. This brings inconvenience when making animation.

To solve this, simply drag the weapon object into the `Rig Weapon`.

As mentioned above, there are many modifications we may need to do to the character prefab to prepare it for making animation.

So, my suggestion is that you copy the character prefab you want to make animation for and make your modifications to the clone instead of directly to the prefab you are going to use in game.

Animations created in any one of the character prefabs are also compatible in other characters as they share the same rig structure.


# OVERVIEW

### PIXEL ART PLATFORMER - DUNGEON

Thanks for using this asset pack.

For any questions, please email to [*support@cainos.net*](mailto:support@cainos.net)


# 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`.

![](/files/roVAmp0Li4QxQPzk1w1c)

### Universal Render Pipeline

The demo scene requires `Universal Render Pipeline` 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 Platformer – Dungeon/Rendering`

### Shader Errors

After the `Universal Render Pipeline` is properly installed, if you get any shader errors, just select `Cainos/Pixel Art Platformer – Dungeon/Shader` in the `Project` window, right click and select `Reimport`.

### URP 2D Lighting Support

By default, the demo scene uses URP 3D lighting. It can be switched to use URP 2D lighting by simply importing `Cainos/Pixel Art Platformer – Dungeon/Patch - URP 2D Lit`.

After importing, please reopen the demo scene for the changes to take effects. If the demo scene appears very dark after importing, just try importing the patch once again and reload the scene.

### Using Post Processing

Using post processing will significantly improve the look of the scene.

The demo scene already has post processing setup properly. But if you are going to start with a new scene, consider adding it to the scene.

You can find the post processing profile used in the demo scene at `Cainos/Pixel Art Platformer – Dungeon/ Rendering/Post Processing Profile`.

Please read this document for more details: [Post Processing in URP](https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@17.0/manual/integration-with-post-processing.html)

Below is the comparison of results with versus without post processing:

![](/files/4jcBF81ZvlepHgoW7wfM)

![](/files/ZN0Qc2p0BZK5wtgzmnuP)


# CHANGLOG

### 1.1.5

* Some minor bugs fixed.

### 1.1.4

* Fix some minor issues in Unity 6.

### 1.1.3

* Some minor bugs fixed.

### 1.1.2

* Some minor bugs fixed.

### 1.1.1

* Some minor bugs fixed.
* Add ducument.

### 1.1.0

* Add URP 2D lighting support.

### 1.0.3

* Tileset collider shape improvements.
* Editor scripts improvements.
* Some minor bugs fixed.

### 1.0.2

* Some minor bugs fixed.

### 1.0.1

* Some minor bugs fixed.

### 1.0.0

* First release


# OVERVIEW

### Pixel Art Monster - Dungeon <a href="#hlk177381624" id="hlk177381624"></a>

Thanks for using this asset pack. For any question, please email to [*support@cainos.net*](mailto:support@cainos.net)

### Monster Control

* <kbd>A</kbd> and<kbd>D</kbd> to move left and right.
* <kbd>W</kbd> and<kbd>S</kbd> to move up and down for flying monsters.
* Hold <kbd>SHIFT</kbd> to run.
* <kbd>SPACE</kbd> to jump.
* <kbd>LMB</kbd> to attack.
* <kbd>K</kbd> to kill or revive.
* <kbd>\[</kbd> and <kbd>]</kbd> to trigger hit animation.


# SETUP GUIDE

### Animation Event and Event Receiver

There are animation events already set up as `On Footstep` and `On Attack` at the monster’s animation files.

At the `Animator` object inside a monster prefab, there is a `Animation Event Receiver` script attached to it, which will receive these events and can be used to trigger some functions when the event is fired.

For example, in the `PF Skeleton – Archer` prefab, the `On Attack` event is used to trigger the `Launch` function of the `Projectile Launcher` script, so the archer skeleton can actually shoot an arrow.

<img src="/files/5p3yZTzsAge6HBfuRBTB" alt="" width="262">

### About Monster Prefabs

For every kind of monster, there is only one original prefab, and the skin variations are set up as prefab variant of that original prefab.

### Custom Sort Axis

It is recommended that you set `Transparency Sort Mode` to `Custom Axis` and `Transparency Sort Axis` to `[0,0,1]` at the graphics settings.

<img src="/files/1L64iwOZVtEyxgYE3472" alt="" width="375">

### Sorting Order Glitch with Multiple Monster

You may see some glitch when two monsters are too close. It happens when the two monsters take up the same z space. Give them different z position value will solve the problem.

You can set the monster’s z scale to a smaller value like 0.1 (but avoid setting it to 0), so that it takes up less z space.

![When the two monster are too close, and their position.z values are all at \[0.0\]. You can see their sprites got mixed together](/files/K6SH8isIdgZm7r0EiskW) ![Give them different position.z values. Displayed in 3D view](/files/zFFOzJrFaydTEXlH1VR1)

<img src="/files/bY78XTi82ezqdzfwAsOY" alt="Now they are properly displayed" width="488">

### Skin Weights

For best animation quality, in `Project Settings/Quality`, `Skin Weights` should be set to at least `2 Bones`.

<img src="/files/fcen9k6QFjf0inqrD9x1" alt="" width="375">

### 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`

<figure><img src="/files/2wsZ9Gd8EPFOwp5FtAbK" alt="" width="375"><figcaption></figcaption></figure>

### Universal Render Pipeline 2D Lighting

Import files from `Patch - URP 2D Lit` located at the root folder of the asset.

It will replace current monster shaders and some materials with URP 2D Lighting supported version.

### Universal Render Pipeline 3D Lighting

Import files from `Patch - URP Lit` located at the root folder of the asset.

It will replace current monster shaders and some materials with URP 3D Lit supported version.


# SCRIPT REFERENCE

### Overview

First, just play around in the demo scene to see each monster and their skin variations.

Drag and drop one of the monster prefabs in `Cainos\Pixel Art Monster - Dungeon\Prefab` into your scene and then you can control it with your mouse and keyboard.

For every monster prefab, there are 3 scripts attached to it:

<table data-header-hidden><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Pixel Monster</td><td>Controlling the appearance and animation of the monster.</td></tr><tr><td>Monster Controller</td><td>Controlling the movement of the monster.</td></tr><tr><td>Monster Input Mouse and Keyboard</td><td>Reading mouse and keyboard input and feed into the Monster Controller script</td></tr></tbody></table>

Generally, you would let an AI rather than players to control the monsters. In this case, remove the `Monster Input Mouse and Keyboard` component and let your AI to feed in the input values to the controller script, or you can only keep the `Pixel Monster` component and take full control of the monster’s movement by yourself.

### Pixel Monster

Script for controlling the appearance and animation of the monster.

Properties in the `Runtime` foldout should only be modified in the runtime except `Facing`.

Some properties in the `Runtime` foldout will be modified by `Monster Controller` script.

<table data-header-hidden data-search="true"><thead><tr><th width="229.5"></th><th></th></tr></thead><tbody><tr><td>Renderers</td><td>Reference to all the renderers inside the monster prefab.</td></tr><tr><td>Animator</td><td>Reference to the animator object inside the monster prefab.</td></tr><tr><td>Fx</td><td><p>Reference to the object that contain special effects inside the monster prefab.</p><p>Can be left empty.</p></td></tr><tr><td>Die Fx Prefab</td><td><p>The special effects object to instantiate when the monster dies.</p><p>Can be left empty.</p></td></tr><tr><td></td><td></td></tr><tr><td>Alpha</td><td>Controls the transparency of the entire monster.</td></tr><tr><td>Facing</td><td><p>The monster’s facing.</p><p>Can be changed in editor to set the character’s initial facing.</p></td></tr><tr><td>Is Hiding</td><td><p>Is the monster hiding.</p><p>Only works for Mimic.</p></td></tr><tr><td>Is Grounded</td><td>Is the monster on ground.</td></tr><tr><td>Is Dead</td><td><p>Is the monster dead?</p><p>Turn this on will only let the monster play the die animation. If you also want to stop the monster’s movement. Turn on the [Is Dead] property of the controller script.</p></td></tr><tr><td>Moving Blend</td><td><p>Moving animation blend.</p><p>0.0: Idle     0.5: Walk     1.0: Run</p></td></tr><tr><td></td><td></td></tr><tr><td>Attack</td><td>Play attack animation.</td></tr><tr><td>Injured Front</td><td>Play <code>Injured Front</code> animation.</td></tr><tr><td>Injured Back</td><td>Play <code>Injured Back</code> animation.</td></tr></tbody></table>

### Monster Controller

Script for controlling the monster’s movement.

It will modify some of the parameters in the `Pixel Character` script to control animation.

<table data-header-hidden><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Default Movement</td><td>Default movement type, walk or run.</td></tr><tr><td>Walks Speed Max</td><td>Max walking speed.</td></tr><tr><td>Walks Acc</td><td>Walking Acceleration.</td></tr><tr><td>Run Speed Max</td><td>Max running speed.</td></tr><tr><td>Run Acc</td><td>Running Acceleration.</td></tr><tr><td>Air Speed Max</td><td>Max move speed while in air.</td></tr><tr><td>Air Acc</td><td>Air acceleration.</td></tr><tr><td>Ground Brake Acc</td><td><p>Braking acceleration while on ground.</p><p>Applied when there is no movement input.</p></td></tr><tr><td>Air Brake Acc</td><td><p>Braking acceleration while in air.</p><p>Applied when there is no movement input.</p></td></tr><tr><td>Jump Speed</td><td>Speed applied to the character when jump.</td></tr><tr><td>Jump Cooldown</td><td>Time needed to be able to jump again after landing.</td></tr><tr><td>Jump Delay</td><td><p>Time it takes from the moment the jump input is fired to the moment the monster actually jumps.</p><p>During this time, the jump prepare animation will be played to achieve a more realistic jump behavior, and you will need to press the key for a little while until the monster actually jump.</p><p>If you do not need this, you can set it to 0.</p></td></tr><tr><td>Jump Gravity Multiplier</td><td><p>Gravity multiplier when the monster is jumping.</p><p>Set it to lower value so that the longer you press the jump button, the higher the monster can jump.</p></td></tr><tr><td>Fall Gravity Multiplier</td><td>Gravity multiplier when monster is falling.</td></tr><tr><td>Moving Blend Transition Speed</td><td>The transition speed when modifying the <code>Moving Blend</code> property in <code>Pixel Monster</code> script.</td></tr><tr><td>Ground Check Size</td><td>Size of the box on character's bottom to determine whether the character is on ground.</td></tr><tr><td>Can Attack in Air</td><td>Can the monster perform attack action while in air.</td></tr><tr><td>Can Attack When Moving</td><td><p>Can the monster perform attack action while moving.</p><p>When turned off, it also forbids the monster to move while in attack animation.</p></td></tr><tr><td></td><td></td></tr><tr><td>Input Move</td><td>Movement input, x for horizontal, y for vertical, x and y should be in <code>[-1.0, 1.0]</code>.</td></tr><tr><td>Input Move Modifier</td><td>Input to switch between walk and run.</td></tr><tr><td>Input Jump</td><td>Jump input.</td></tr><tr><td>Input Attack</td><td>Attack input.</td></tr><tr><td>Is Dead</td><td><p>Is the monster dead?</p><p>When turned on, it will also turn on the <code>Is Dead</code> property on <code>Pixel Monster</code> script and stop the monster’s movement.</p></td></tr></tbody></table>

### Monster Flying Controller

Same as `Monster Controller` script, but for monsters that can fly.

<table data-header-hidden><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Speed Max</td><td>Max moving speed.</td></tr><tr><td>Acc</td><td>Moving Acceleration.</td></tr><tr><td>Brake Acc</td><td><p>Braking acceleration</p><p>Applied when there is no movement input.</p></td></tr><tr><td>Ground Check Size</td><td>Size of the box on character's bottom to determine whether the character is on ground.</td></tr><tr><td>Moving Blend Transition Speed</td><td>The transition speed when modifying the <code>Moving Blend</code> property in <code>Pixel Monster</code> script.</td></tr><tr><td>Dead Gravity Scale</td><td><p>Gravity scale when the character is dead.</p><p>Flying monsters will have their gravity scale set to 0 when there are alive.</p><p>So, this parameter actually controls whether the flying monster should fall to the ground when it is dead.</p></td></tr><tr><td></td><td></td></tr><tr><td>Input Move</td><td>Movement input, x for horizontal, y for vertical, x and y should be in <code>[-1.0, 1.0]</code>.</td></tr><tr><td>Input Attack</td><td>Attack input.</td></tr><tr><td>Is Dead</td><td><p>Is the monster dead?</p><p>When turned on, it will also turn on the <code>Is Dead</code> property on <code>Pixel Monster</code> script and stop the monster’s movement.</p></td></tr></tbody></table>

### Monster Input Mouse and Keyboard

Script for feeding player inputs to `Monster Controller` script using mouse and keyboard.


# BLENDER SOURCE FILES

### Requirements

Blender versio&#x6E;**:** 5.0.1 or later.

Open the provided Blender source files using a supported version to avoid compatibility issues.

<figure><img src="/files/NNwvW39ZQfAUjFAh6AgO" alt="" width="563"><figcaption></figcaption></figure>

### Animation Naming

Animation names describe the clip type, target frame range, and whether the animation loops.

Example: `Walk 30L`

* `Walk` is the animation name.
* `30` indicates a target frame range of **0–30**.
* `L` indicates that the animation is designed to **loop**.

Some animations contain keyframes outside the target frame range. These are offset loop frames used to create secondary motion. When configuring the clip in your game engine, ensure that only the specified target frame range is used.

### Jump Animations

The jump animation is divided into several clips so the game engine can select the appropriate animation based on the character’s current state.

<table><thead><tr><th width="160.3333740234375">Clip</th><th>Usage</th></tr></thead><tbody><tr><td>Jump Prepare</td><td>Played while the character prepares to jump.</td></tr><tr><td>Air Up</td><td>Played while the character is moving upward.</td></tr><tr><td>Air Down</td><td>Played while the character is falling.</td></tr><tr><td>Land</td><td>Played when the character touches the ground.</td></tr></tbody></table>

Some characters include two variants of the upward-motion animation:

<table><thead><tr><th width="159.77777099609375">Clip</th><th>Usage</th></tr></thead><tbody><tr><td>Air Up Idle</td><td>Used when the character is moving upward without moving forward.</td></tr><tr><td>Air Up Move</td><td>Used when the character is moving upward while also moving forward.</td></tr></tbody></table>

These clips should be selected according to the character’s movement and jump state in the game engine.

The `Jump Full` clip combines the complete jump sequence:

* Jump Prepare
* Air Up
* Air Down
* Land

This clip includes vertical movement on the root bone. It is intended primarily for preview and demonstration purposes and is generally not used in the game engine.

### Recommended Unity Export Settings

Use the following settings when exporting the character and animations for Unity:

<figure><img src="/files/2mEbWMeJJgJKXvri6nL5" alt="" width="284"><figcaption></figcaption></figure>

### Unity Import Settings

After importing the exported file into Unity:

* Open its import settings.
* Enable `Bake Axis Conversion` in the `Import Settings`
* Configure each animation clip to use only its specified target frame range.
* Enable looping for animation names ending in `L`.

<figure><img src="/files/WlixsNQqqXvxbkQisiIx" alt="" width="563"><figcaption></figcaption></figure>


# OVERVIEW

### Pixel Art Top Down - Basic

Thank you for using this asset pack.

For any questions, please email to [*support@cainos.net*](mailto:support@cainos.net)


# SETUP GUIDE

### Import

The asset is uploaded as a complete project to included some project settings. It is recommended to import it into an empty project first.

### Custom Sort Axis <a href="#custom-sort-axis" id="custom-sort-axis"></a>

The `Transparency Sort Mode` should be set to `Custom Axis` and `Transparency Sort Axis` to `(0,1,1)` at the Graphics settings.

<figure><img src="/files/69jEnKZ43Tf3FoBIIUiA" alt="" width="375"><figcaption></figcaption></figure>

### Color Space

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

You can find it in `Project Settings/Player/Other Settings`.

<img src="/files/LmZcArRCIJ3epD7qKPaK" alt="" width="375">

### 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`

<figure><img src="/files/Nm0moIkJ7oQOsYl6HWAz" alt="" width="375"><figcaption></figcaption></figure>


# SORTING LAYERS

### Overview

As you can see, the demo scene has platforms of different height levels. To make them sorted correctly, each height level is put at a different `Sorting Layer`. Inside each `Sorting Layer`, objects also have different `Order in Layer` values.

<img src="/files/L03VLZjxK2IDYcNDLzkT" alt="" width="375">

For collision to work correctly in each height level, objects in different `Sorting Layer` should also be put into corresponding `Layer`.

In order to make the player object able to travel between different layers. There is a `Edge Collider 2D`  with `Stair Layer Trigger`  script attached. When the player object touches the trigger, it will be sent to the layer and sorting layer defined in the script.

<figure><img src="/files/ejMxCvlBHa9vD6Wo6cQe" alt="" width="375"><figcaption></figcaption></figure>

### Import Tags & Layers Settings

The demo scene needs proper tags & layers settings to work properly. In order to include the tags & layers settings, the asset is uploaded as a complete project. On import, you should be able to see the project settings included.

If you did not import the tags & layers settings on import, you can still set it by clicking the slider icon at the top right corner of the Tags & Layers settings and select the preset included in the asset.

<div><img src="/files/AYjFNQs6h1ihbdsIhKzj" alt="" width="279"> <img src="/files/tYrk8tnmPolTcN5jzE1h" alt="" width="344"></div>

<div><img src="/files/s9JN25eBP3cRvIZIDJUj" alt="" width="352"> <img src="/files/fNimuZi6a2Kfv3REEyIQ" alt="" width="269"></div>


# CHANGELOG

### 1.2.0

* Add stairs in west and east direction.
* Stairs Layer Trigger improvement.
* Add URP 2D Lit support in Unity 6.

### 1.1.2

* Some minor issues fixed.

### 1.1.1

* Some minor issues fixed.

### 1.1.0

* Add URP 2D Lit support.
* Some minor issues fixed.

### 1.0.1

* Add Tags & Layers settings as preset.
* Updated document.

### 1.0.0

* First Release


# OVERVIEW

### PIXEL ART TOP DOWN – VILLAGE <a href="#hlk195901108" id="hlk195901108"></a>

Thanks for using this asset pack.

For any questions, please email to [*support@cainos.net*](mailto:support@cainos.net)


# 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`.

<img src="/files/oA5vJ3Ix8H3KZP0G47sm" alt="" width="375">

### 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]`.

<img src="/files/MYPtdtvtMF5X8ESuctCY" alt="" width="375">

### 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 [Top Down Pixel Water](#top-down-pixel-water) 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` .                        &#x20;

<figure><img src="/files/LdMhn9IbeQ6pJ6lQtuyy" alt="" width="563"><figcaption></figcaption></figure>

### 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` .

<figure><img src="/files/juB76YiQCjhcVV9NoKLm" alt="" width="375"><figcaption></figcaption></figure>

### Pixel Aligned Placement

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

<img src="/files/ZeAFJDWJrVJGB6mahxxa" alt="" width="300">

### 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` 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.

<figure><img src="/files/iaiYSmZbmgb0CAAHpnix" alt="" width="375"><figcaption></figcaption></figure>

<img src="/files/XO0TlaYXkiNHu8nysKzv" alt="" width="375">

### 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.

<div data-full-width="false"><figure><img src="/files/c9o61snRVOFMvNAdlN8f" alt="" width="375"><figcaption></figcaption></figure></div>

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.

<figure><img src="/files/fJc0lT7gHWTYNfHSXW6V" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/xDDszGhqIYlRc5zl7O8x" alt="" width="375"><figcaption></figcaption></figure>

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


# 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.

![](/files/26DBhjftCpUQ8CBnkicR)

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.

<img src="/files/tc1XuoTv1d3ZbUWrJ6mq" alt="" width="375">

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

<div><img src="/files/kknYvqzcSFZvY93pJmxH" alt="" width="521"> <img src="/files/LaGd1YrODaaFIpnpIbSa" alt="" width="524"></div>

### No Collision Tile

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

<img src="/files/LuDYZtcdnfYJIphJLeWT" alt="" width="563">

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

<img src="/files/toa79EeSmoqIQ9gynXXJ" alt="" width="375">


# 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](https://assetstore.unity.com/packages/tools/visual-scripting/amplify-shader-editor-68570). If you own this asset, you can open the shader as a graph to see how it is made.

<div><figure><img src="/files/iaiYSmZbmgb0CAAHpnix" alt=""><figcaption></figcaption></figure> <figure><img src="/files/INPLnbXX5gF7XcabhFwj" alt=""><figcaption></figcaption></figure></div>

### 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`.

<div><figure><img src="/files/oYHdafqXmVxwd7bPCoHS" alt=""><figcaption><p>Terrain Tex</p></figcaption></figure> <figure><img src="/files/TkvsDuEzLcUHNcAdFx9q" alt=""><figcaption><p>Terrain Blurred Tex Overlayed by Terrain Tex</p></figcaption></figure></div>

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.

<figure><img src="/files/GUb4ks0yK5jcw3vVFBoz" alt="" width="375"><figcaption><p>Water Color</p></figcaption></figure>

### 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.

<figure><img src="/files/4zpGIdiCSLdz1uWqZt4a" alt="" width="375"><figcaption><p>Water Color with Shore Line</p></figcaption></figure>

### 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`.

<div><figure><img src="/files/V5UsTm9V8ErdKDk2VssC" alt=""><figcaption><p>Under Water Mask Tex</p></figcaption></figure> <figure><img src="/files/p9gMu2IUWiENzFpwju6F" alt=""><figcaption><p>Under Water Content</p></figcaption></figure></div>

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.

<div><figure><img src="/files/YVwRYhq8IA216jsQ0Szw" alt=""><figcaption><p>Under Water Content with Noice Distortion </p></figcaption></figure> <figure><img src="/files/Xo1dxU26GyOADKgFUrAG" alt=""><figcaption><p>Masked by Under Water Mask Tex</p></figcaption></figure></div>

<figure><img src="/files/WadjU09avaZc9UAxJJnE" alt="" width="375"><figcaption><p>Blended with Water Color and Shore line</p></figcaption></figure>

### 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).

<div><figure><img src="/files/tnlOofzTUTnEZzpIRMeH" alt=""><figcaption><p>Foam Texture with Modified UV</p></figcaption></figure> <figure><img src="/files/9Gp5mkGKH2cncWJU6ZPD" alt=""><figcaption><p>Disturb Noise</p></figcaption></figure></div>

<div><figure><img src="/files/ENvkjKmuqe3U540Xx5h5" alt=""><figcaption><p>Mask for the Foam</p></figcaption></figure> <figure><img src="/files/ljU7pRZflNh4NzJGhukg" alt=""><figcaption><p>Final Result</p></figcaption></figure></div>

### 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.

<div><figure><img src="/files/hmrMUdcfhTTZglAJh0uu" alt=""><figcaption><p>Noise 1</p></figcaption></figure> <figure><img src="/files/0eLBGKVdWDFcpri8CDPO" alt=""><figcaption><p>Noise 2</p></figcaption></figure></div>

<div><figure><img src="/files/x8N7fMbVBiMyrLBxEsEx" alt=""><figcaption><p>Two Noise Multiplied Together and Powered by 6.5</p></figcaption></figure> <figure><img src="/files/EKKoxrAD45MGOY2E16Gk" alt=""><figcaption><p>Stepped by 0.3</p></figcaption></figure></div>

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

<div><figure><img src="/files/XI4uD6daLvNmEMgfqnva" alt=""><figcaption><p>Final Water Effect</p></figcaption></figure> <figure><img src="/files/1H5reUOLhpyHbUw7dWn9" alt=""><figcaption><p>With Other Scene Objects</p></figcaption></figure></div>


# 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.


# OVERVIEW

### PIXEL ART PLATFORMER – VILLAGE HOUSE

Thanks for using this asset pack.

For any questions, please email to [*support@cainos.net*](mailto:support@cainos.net)


# SETUP GUIDE

### About Materials

The demo scene makes use of 3 materials with special shaders to draw shadows on house sprites.

<table><thead><tr><th width="229.5"></th><th></th></tr></thead><tbody><tr><td>MT Village House – Component</td><td><p>Common house sprites use this material.</p><p>It makes sure shadow sprites only get drawn within visible areas of house sprites.</p></td></tr><tr><td>MT Village House – Component – No Shadow</td><td><p>House sprites that should never be covered by shadow use this material.</p><p>Shadow sprites will not get drawn upon sprites with this material.</p></td></tr><tr><td>MT Village House – Shadow</td><td><p>Shadow sprites use this material.</p><p>It works together with the two materials above to mask shadows inside house sprites and make sure shadows only get drawn once.</p></td></tr></tbody></table>

You can change the shadow color globally with the `Tint` parameter of the material.

### House Presets

In `Assets/Cainos/Pixel Art Platformer - Village House/Texture/House Preset` you can find house presets in single image, in case you do not want to use the prefab ones.

### Custom Sort Axis

It is recommended that you set `Transparency Sort Mode` to `Custom Axis` and `Transparency Sort Axis` to `(0,0,1)` at the graphics settings.

<img src="/files/9zQdCG0DtXw8t5hCjNJP" alt="" width="375">

### 2D Lighting

Import `Patch - URP 2D Lit` located at the root folder of the asset. It will replace current shaders and some materials with URP 2D Lighting supported version.

At the `MT Village House – Shadow` material, make sure its render queue value is higher than the render queue value of the two component materials.

As the component materials have render queue value of 3000. We set the shadow material’s render queue to 3001.

<img src="/files/lUMwAwfXnDimhnDMLjEI" alt="" width="375">

<img src="/files/IjULAEU7EzWTxma4TQwM" alt="" width="375">


# OVERVIEW

### Interactive Pixel Water

Thanks for using this asset pack.

For any question, feel free to please email to [*support@cainos.net*](mailto:support@cainos.net)

### Quick Tutorial

Drag and drop the water prefab in `Cainos\Interactive Pixel Water` into the scene, adjust the size of the water area with the handles at the corners.

For more advanced configuration of the water, you can check the water presets at `Cainos\Interactive Pixel Water\Prefab` for reference.

If you change any of the paramters of the `Pixel Water` script from code, remember to call `Refresh()` to make the changes to take effect.


# SETUP GUIDE

### Lighting Support for URP and URP 2D

By default, the water shaders are in built-in unlit type. Import the `Patch - URP Lit` to add lighting support for normal 3D lights in URP.

For URP 2D Lighting, please import the patch version that corresponds to your Unity version:

* Before Unity 6: Import `Patch - URP 2D Lit`
* Unity 6.0 to 6.2: Import `Patch - URP 2D Lit - Unity 6.0 to 6.2`
* Unity 6.3 and later: Import `Patch - URP 2D Lit - Unity 6.3`

In Unity 6, you should also turn off the `Compatibility Mode` in `Project Settings>Graphics`, as the water rendering depends on the Render Graph.

<figure><img src="/files/jqVaG25eYbRaiVwfJARK" alt="" width="563"><figcaption></figcaption></figure>

After importing the patch, you need to add a `Pixel Water Renderer Feature` to your current Universal Rnder Pipeline Asset, and set the `Behind Water Mask` to the layers you want to be shown behind the water.

Be noted, you must not include the water layer in the `Behind Water Mask`.

### Change Water Area Size with Handles

You can drag the four white square handles at the corners to change the size of the water.

For the handles to be displayed, you need to select the water object and have the gizmos visibilty toggle on (the top right highlighted button).

Please do not selec the Rect Tool (left highlighted button) while using the size handles. The handles of the Rect Tool will overlap with the size handles.

<figure><img src="/files/2ETiOc64893gWWWqyQof" alt="" width="563"><figcaption></figcaption></figure>

### Custom Sort Axis&#xD;

It is recommended that you set `Transparency Sort Mode` to `Custom Axis` and `Transparency Sort Axis` to `(0,0,1)` at the Graphics settings.

<figure><img src="/files/snX5icmPtEtg8FXnnIw6" alt="" width="375"><figcaption></figcaption></figure>

### Color Space

It is recommended to use `Linear` color space with this asset. You can find it in `Project Settings/Player/Other Settings`.

<figure><img src="/files/uuUAoHXHxn77awaHDONu" alt="" width="375"><figcaption></figcaption></figure>


# SCRIPT REFERENCE

### Pixel Water

#### Basic Foldout

These settings control the size and interaction layers of the water body.

<table data-header-hidden><thead><tr><th width="179"></th><th></th></tr></thead><tbody><tr><td>Size</td><td><p>A <code>Vector2</code> controlling the width (X) and maximum height (Y) of the water area.</p><p>Modifying this regenerates the mesh.</p></td></tr><tr><td>Fill</td><td><p>A float (0 to 1) representing the vertical fill percentage. </p><p><code>1.0</code> is full height defined by <code>Size.y</code>, while lower values lower the water surface level</p></td></tr><tr><td></td><td></td></tr><tr><td>Interaction Layer Mask</td><td>Defines which layers contain non-trigger colliders that can physically interact with the water (create waves, splashes, etc.).</td></tr><tr><td>Interaction Trigger Layer Mask</td><td>Defines which layers contain trigger colliders that can interact with the water.</td></tr></tbody></table>

#### Rendering Foldout

These parameters control the visual appearance of the water, passed directly to the shader.

<table data-header-hidden><thead><tr><th width="179.5"></th><th></th></tr></thead><tbody><tr><td>Water Color Enabled</td><td><p>Toggles the water color.</p><p>When off the water itself will be transparent</p></td></tr><tr><td>Water Color Shallow</td><td><p>The color gradient from the water surface (shallow) to the bottom (deep).</p><p>The color is blended using alpha blend.</p></td></tr><tr><td>Water Color Deep</td><td><p>The color gradient from the water surface (shallow) to the bottom (deep).</p><p>The color is blended using alpha blend.</p></td></tr><tr><td></td><td></td></tr><tr><td>Underwater Tint Enabled</td><td>Toggles the tint applied to the content behind the water.</td></tr><tr><td>Underwater Tint Shallow</td><td><p>The color tint applied to content behind the water, grading from surface (shallow) to bottom (deep).</p><p>The color is blended using multiply.</p></td></tr><tr><td>Underwater Tint Deep</td><td><p>The color tint applied to content behind the water, grading from surface (shallow) to bottom (deep).</p><p>The color is blended using multiply.</p></td></tr><tr><td></td><td></td></tr><tr><td>Surface Enabled</td><td><p>Toggles the rendering of the surface line at the top of the water.</p><p>The surface line is divided into upper and lower part.</p></td></tr><tr><td>Surface Color Upper</td><td>Color of the upper part of the surface line.</td></tr><tr><td>Surface Color Lower</td><td>Color of the lowerpart of the surface line.</td></tr><tr><td>Surface Thickness Upper</td><td>Controls how thick the upper surface line is rendered.</td></tr><tr><td>Surface Thickness Lower </td><td>Controls how thick the lower surface line is rendered.</td></tr><tr><td>Surface Distortion Mul</td><td>Multiplier for the distortion effect of the surface line.</td></tr><tr><td> </td><td></td></tr><tr><td>Distortion Enabled</td><td>Toggles the refraction/distortion effect of the behind water content.</td></tr><tr><td>Distortion Speed</td><td>Controls the animation speed of the effect.</td></tr><tr><td>Distortion Scale</td><td>Controls the texture scale of the effect.</td></tr><tr><td>Distortion Strength</td><td>Controls the intensity of the effect.</td></tr><tr><td></td><td></td></tr><tr><td>Blur Enabled</td><td>Toggles the blur effect for the behind water content.</td></tr><tr><td>Blur Amount Shallow</td><td>The blur effect intensity, grading from surface (shallow) to bottom (deep).</td></tr><tr><td>Blur Amount Deep</td><td>The blur effect intensity, grading from surface (shallow) to bottom (deep).</td></tr><tr><td></td><td></td></tr><tr><td>Light Shaft Enabled</td><td>Toggles the effect of light beams shining down into the water.</td></tr><tr><td>Light Shaft Color</td><td><p>The color and transparency of the light beams.</p><p>The color is blended using add mode.</p></td></tr><tr><td>Light Shaft Scale</td><td>Controls the size of the light rays.   </td></tr><tr><td>Light Shaft Power</td><td>The power applied to the alpha of the light rays.</td></tr><tr><td>Light Shaft Tilt</td><td>Controls the angle of the light rays.   </td></tr><tr><td>Light Shaft Depth</td><td>Controls the fade-depth of the light rays.   </td></tr><tr><td>Light Shaft Speed</td><td>Controls the animation speed of the light rays. </td></tr><tr><td></td><td></td></tr><tr><td>Wave Enabled</td><td>Toggles the physics-based spring simulation for surface waves.</td></tr><tr><td>Wave Influence Mul</td><td>Multiplier for how much an object's velocity (X and Y) impacts the water surface to create waves.</td></tr><tr><td>Wave Influence Decay Depth</td><td>The depth at which an object no longer creates surface waves (objects deep underwater won't disturb the surface).</td></tr><tr><td>Wave Tension</td><td><p>Controls the stiffness of the wave.</p><p>Higher values make the water surface snap back to rest position faster.</p></td></tr><tr><td>Wave Damping</td><td><p>Controls friction of the wave.</p><p>Higher values make waves settle and stop oscillating faster.</p><p>Avoid setting it to near zero.</p></td></tr><tr><td>Wave Spread</td><td>Controls how fast a wave ripple travels to neighboring vertices.</td></tr><tr><td>Wave Spread Iteration</td><td>The quality/smoothness of the wave propagation calculation (higher is more accurate but more expensive).</td></tr><tr><td>Wave Speed Mul</td><td>Global speed multiplier for the wave physics simulation.</td></tr><tr><td>Wave Velocity Limit</td><td>Clamps the maximum speed of the wave.</td></tr><tr><td>Wave Limit</td><td>Clamps the maximum amplitude of the wave.</td></tr><tr><td></td><td></td></tr><tr><td>Ambient Wave Enabled</td><td>Toggles the constant background waves.</td></tr><tr><td>Ambient Wave Mul</td><td>Global intensity multiplier for the ambient wave.</td></tr><tr><td>Ambient Wave Speed</td><td>Parameters that allow layering up to 4 different wave noises (x, y, z, w) for complex, non-repeating surface wave motion.</td></tr><tr><td>Ambient Wave Frequency</td><td>Parameters that allow layering up to 4 different wave noises (x, y, z, w) for complex, non-repeating surface wave motion.</td></tr><tr><td>Ambient Wave Amplitude</td><td>Parameters that allow layering up to 4 different wave noises (x, y, z, w) for complex, non-repeating surface wave motion.</td></tr></tbody></table>

#### FX Foldout

Controls particle and prefab instantiation when objects interact with the water.

<table data-header-hidden><thead><tr><th width="179.5"></th><th></th></tr></thead><tbody><tr><td>Bubble Enabled</td><td>Toggles bubble effect generation.</td></tr><tr><td>Bubble Duration Mul</td><td>Multiplier for bubble emit duration.</td></tr><tr><td>Bubble Amount Mul</td><td>Multiplier for bubble emit amount.</td></tr><tr><td>Bubble Color Outline</td><td>The outline color of the generated bubble.</td></tr><tr><td>Bubble Color Fill</td><td>The fill color of the generated bubble.</td></tr><tr><td>Bubble Prefab</td><td>The prefab instantiated to create bubbles. (must contain <code>PixelWaterBubble</code> script).</td></tr><tr><td></td><td></td></tr><tr><td>Splash Enabled</td><td>Toggles splash effect generation.</td></tr><tr><td>Splash On Enter</td><td>Whether to generate splash when objects enter the water.</td></tr><tr><td>Splash On Exit</td><td>Whether to generate splash when objects exit the water.</td></tr><tr><td>Splash Color Light</td><td>The color of the lighter part of the splash.</td></tr><tr><td>Splash Color Dark</td><td>The color of the darker part of the splash.</td></tr><tr><td>Splash Color Outline</td><td>The outline color of the splash</td></tr><tr><td>Splash Configs</td><td><p>A list of <code>SplashConfig</code> objects defining different splash types based on object size.</p><p></p><ul><li>Size Range: The object size range (min/max) that triggers this specific splash.   </li><li>Min Speed: Minimum entry velocity required to trigger this splash.   </li><li>Min Depth: Minimum water depth required.   </li><li>Splash Prefab: The visual prefab to spawn.</li></ul></td></tr><tr><td></td><td></td></tr><tr><td>Surface Particle Enabled</td><td><p>Toggles continuous particles on the water surface.</p><p>For example, surface bubble and spark of the lava preset.</p></td></tr><tr><td>Surface Particle Configs</td><td><p>A list of <code>ParticleConfig</code> objects defining particle systems used as the surface particle.</p><p>The script automatically changes their emission shape to match the water surface.</p><p></p><ul><li>Particle System: The particle system to control.</li><li>Emit Mul Per Unit: The emit rate multiplier per unit to ensure if you make the water area larger, the surface particle also emit more particles.</li></ul></td></tr><tr><td></td><td></td></tr><tr><td>In Water Particle Enabled</td><td><p>Toggles continuous particles inside the water volume</p><p>For example, the floating debris in the muddy preset.</p></td></tr><tr><td>In Water Particle Configs</td><td><p>A list of <code>ParticleConfig</code> objects defining particle systems used as the surface particle.</p><p>The script automatically changes their emission shape to match the water surface.</p><ul><li>Particle System: The particle system to control.</li><li>Emit Mul Per Unit: The emit rate multiplier per unit to ensure if you make the water area larger, the surface particle also emit more particles.</li></ul></td></tr></tbody></table>

#### Physics **Foldout**

Controls the custom drag (resistance) applied to objects inside the water.

<table data-header-hidden><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Drag Enabled</td><td><p>Toggles the custom drag force.</p><p>Note that we do not use the standard Unity <code>BuoyancyEffector2D</code> drag here, as this custom implementation scale with the velocity, making it more physically correct.</p></td></tr><tr><td> Drag Linear</td><td>How much linear velocity is slowed down.</td></tr><tr><td>Drag Angular</td><td>How much rotation (angular velocity) is slowed down.</td></tr></tbody></table>

#### Event Foldout

This foldout contains some Unity events that you can use to trigger your own function.

<table data-header-hidden><thead><tr><th width="229.5"></th><th></th></tr></thead><tbody><tr><td>On Splash</td><td><p>A Unity Event <code>(int level, Vector3 position)</code> invoked whenever a splash occurs.</p><p>You can hook sound effects or other scripts to this event.</p></td></tr></tbody></table>

### Pixel Water Renderer Feature

<table data-header-hidden><thead><tr><th width="230"></th><th></th></tr></thead><tbody><tr><td>Behind Water Mask</td><td><p>The layer mask of the objects that need to be rendered behind the water.</p><p>You must not include the water itself in this layer mask.</p></td></tr><tr><td>Background Color</td><td>The color to use if there is nothing behind the water.</td></tr><tr><td>Downsample</td><td>Downsample rate for capturing the behind water texture.<br>Higher value improves performance but make behind water content more blury.</td></tr></tbody></table>


# Page


# Page


# Page


# Page


# Page


