diff --git a/content/getting_started/examples/how_to_install.png b/content/getting_started/examples/how_to_install.png new file mode 100644 index 0000000..0e7e02d Binary files /dev/null and b/content/getting_started/examples/how_to_install.png differ diff --git a/content/getting_started/examples/index.md b/content/getting_started/examples/index.md index 03878f3..f5f6a67 100644 --- a/content/getting_started/examples/index.md +++ b/content/getting_started/examples/index.md @@ -4,8 +4,13 @@ weight = 3 date= 2024-10-19 +++ -ProPixelizer comes with a number of example scenes to showcase features and show you how to use the package, which can be found in the `ProPixelizer/ExampleAssets` folder. +ProPixelizer comes with a number of example scenes to showcase features and show you how to use the package, which can be imported into your project via Unity's Package Manager. +From `Packages: in project`, select the ProPixelizer package, click `Samples` tab and then press 'import'. + +![Example of how to install samples](how_to_install.png) + Each example scene also contains a 'readme' in the scene heirachy, which you can inspect to find out more information or further suggestions. +The examples are described below. {% example_showcase(name = "Simple", image="simple.png") %} A simple scene showing a few different ProPixelizer materials. If you see this scene correctly, you've successfully installed ProPixelizer! diff --git a/content/technical_details/_index.md b/content/technical/_index.md similarity index 74% rename from content/technical_details/_index.md rename to content/technical/_index.md index 7fa85c6..3891f33 100644 --- a/content/technical_details/_index.md +++ b/content/technical/_index.md @@ -3,4 +3,5 @@ title = "Technical Reference" sort_by = "weight" weight = 4 insert_anchor_links = "right" +aliases = ["/technical_details"] +++ \ No newline at end of file diff --git a/content/technical/objectrendersnapable/anglesnap.gif b/content/technical/objectrendersnapable/anglesnap.gif new file mode 100644 index 0000000..76e6138 Binary files /dev/null and b/content/technical/objectrendersnapable/anglesnap.gif differ diff --git a/content/technical/objectrendersnapable/index.md b/content/technical/objectrendersnapable/index.md new file mode 100644 index 0000000..e973878 --- /dev/null +++ b/content/technical/objectrendersnapable/index.md @@ -0,0 +1,20 @@ ++++ +title = "Object Render Snapable" +weight = 21 ++++ + +The `Object Render Snapable` MonoBehavior allows the position of objects to be snapped before rendering the frame. Coupled with a [ProPixelizer Camera](@/technical/propixelizer_camera/index.md) this can be used to [eliminate pixel creep](@/usage/eliminate_pixel_creep/index.md). Snapping of object view angles is also supported, allowing you to easily create the look of hand drawn pixel art which typically restricts the number of view directions. The original positions and angles are restored after camera rendering is complete. + +![Object Render Snapable preview](ors.png) + +### Snapping + +- `Snap Position`: enables or disables snapping of the object's position. +- `Snap Euler Angles`: enables or disables snapping of the object's rotation. A number of different strategies are available: + - `World Space Rotation`: the euler angles describing the rotation of the object in world space are snapped to the desired `Angle Resolution`. + - `Camera Space Y`: the euler angles describing the rotation of the object are snapped in world space for x and z, and camera space for the Y-axis. For a camera that rotates freely around the y-axis, this will allow objects to appear with a restricted number of view directions, as shown in the gif below. + + + +### Pixel Alignment + diff --git a/content/technical/objectrendersnapable/ors.png b/content/technical/objectrendersnapable/ors.png new file mode 100644 index 0000000..ea0cb4d Binary files /dev/null and b/content/technical/objectrendersnapable/ors.png differ diff --git a/content/technical/propixelizer_camera/camera.png b/content/technical/propixelizer_camera/camera.png new file mode 100644 index 0000000..07bbfaa Binary files /dev/null and b/content/technical/propixelizer_camera/camera.png differ diff --git a/content/technical/propixelizer_camera/index.md b/content/technical/propixelizer_camera/index.md new file mode 100644 index 0000000..5469af5 --- /dev/null +++ b/content/technical/propixelizer_camera/index.md @@ -0,0 +1,33 @@ ++++ +title = "ProPixelizer Camera" +weight = 10 ++++ + +The `ProPixelizerCamera` is a MonoBehavior that should be added to camera objects in your scene. It provides additional control over ProPixelizer's rendering, and performs the position and angle snapping required to [eliminate creep](@/usage/eliminate_pixel_creep/index.md). There are a number of properties available: + + + +### Pixelization + +The `Pixelization Filter` controls what objects should be pixelated, allowing you to switch between 'hybrid' styles (where only some objects are pixelated) and full screen pixelization. +- `Full Scene` pixelates the entire scene. +- `Only ProPixelizer` will only pixelate ProPixelizer materials and shaders, including ones you create [using the ShaderGraph SubTarget](@/usage/shadergraph/index.md). + +Additionally, when operating with `Full Scene` additional options are available: +- `Use Pixel Art Upscaling` will enable or disable use of a pixel art upscaling filter when blitting the low-res target back to the screen. This can be useful to reduce [shimmer artefacts](@/tips_and_tricks/artefacts/index.md) +- You may choose between a two methods of rendering the low-res target. The `Virtual` camera path is faster, and works by redirecting URP's opaque, transparents and skybox calls into the ProPixelizer low-res target, but may have compatibility issues with other assets. The `Subcamera` path uses a second camera to render the scene at low resolution; it is more widely compatible, but less performant. + +### Pixel size + +There are several `Mode`s available to determine the pixelization of the low resolution target. +- `World Space Pixel Size` allows you to specify the size of a low-res pixel in world units. This size will be maintained for different camera orthographic sizes and screen resolutions. This is useful for your objects, characters and world to maintain the same apparent pixelization as you freely pan and zoom the view around them. +- `Fixed Downscaling Ratio` defines the low-res target resolution as a fixed multiple of the screen resolution. Note that changes in screen resolution will change the apparent pixelisation of the object. +- `Fixed Target Resolution` allows you to define a fixed height of the low-res target. This is useful if emulating a specific hardware, for example '320p'. + +### Fullscreen options + +The `Fullscreen Color Grading LUT` allows you to apply color grading and dithering to the entire scene by specifying a color palette LUT. You can use ProPixelizer to create your own. These properties can be specified for individual cameras. _Note: It's still my firm belief that dithering looks better when applied at the object level, so that the dither pattern can move with the object. ProPixelizer now supports both of these approaches, so don't take my word for it - decide for yourself what you like best!_ + +### Render Feature overrides + +These settings can override specific properties of the render feature for each camera, for example to disable ProPixelizer or [pixel expansion](@/usage/pixelization/index.md) for a camera. \ No newline at end of file diff --git a/content/technical/render_feature/index.md b/content/technical/render_feature/index.md new file mode 100644 index 0000000..f6ce149 --- /dev/null +++ b/content/technical/render_feature/index.md @@ -0,0 +1,32 @@ ++++ +title = "ProPixelizer Render Feature" +weight = 1 ++++ + +ProPixelizer's Render Feature adds rendering instructions and passes that are required for ProPixelizer to work. +The settings provide additional controls to tweak ProPixelizer to your needs, as described below: + +![Render Feature Inspector View](render_feature.png) + +### Pixelization + +These properties configure the methods ProPixelizer uses to pixelate the scene. + +- `Use Pixel Expansion`: allows pixelated objects to move with apparent sub-pixel motion relative to one another, without pixel creep. I created the method specifically for ProPixelizer, and an overview of how it works can be found here, under Attempt 3. It requires an additional post-process shader to be applied to the scene, but the smooth sub-pixel motion can make certain games feel more responsive. + +### Outline Detection Controls + +These properties configure properties of the outline and edge detection shaders. + +- `Use Depth Testing for ID Outlines`: when enabled, outlines will only be drawn for edge pixels that are in front of their neighbors. This helps achieve the feel of a hand-drawn sprite, for which the outline would not change depending on the geometry in front of it. A comparison of the two settings is shown in the image here; take particular notice of the darker outline drawn over the vehicle inside the red box when Depth Test is off. The `Depth Test Threshold` can be adjusted to make ProPixelizer more or less sensitive to depth testing of ID outlines. +- `Use Normals For Edge Detection`: enables detection of edges (creases and ridges) using the scene normals. The `Normal Edge Detection Threshold` can be adjusted to change the sensitivity of the edge detection kernel. +- `Use Depth Testing for Edge Outlines`: controls whether depth testing should also be used for edges, enabling correct edge detection of objects like staircases. + +### Editor Scene Tab + +- `Editor Pixel Expansion`: when false, disables pixel expansion in the Editor's Scene tab only. + +### Debugging + +- `Generate Warnings`: allows you to disable warnings generated by ProPixelizer. + diff --git a/content/technical_details/render_feature/render_feature.png b/content/technical/render_feature/render_feature.png similarity index 100% rename from content/technical_details/render_feature/render_feature.png rename to content/technical/render_feature/render_feature.png diff --git a/content/technical/ubershader/index.md b/content/technical/ubershader/index.md new file mode 100644 index 0000000..b01a797 --- /dev/null +++ b/content/technical/ubershader/index.md @@ -0,0 +1,48 @@ ++++ +title = "Uber Shader" +weight = 20 ++++ + +The Uber shader is a general purpose object shader provided with ProPixelizer that can be used for a wide variety of visual styles. The shader itself is authored in ShaderGraph using the [ProPixelizer SubTarget](@/usage/shadergraph/index.md), located at `ProPixelizer/ShaderGraph/ProPixelizerUberShader.shadergraph`. Don't forget that you can copy and modify this shadergraph to tweak the shader to your own requirements! + +**Note:** _Previous versions of ProPixelizer featured the `PixelizedWithOutline` shader. The Uber shader is a drop-in replacement shader, which has all the features of the old shader while adding many more, eg. Forward+ support, Hybrid renderer support, GPU Instancing. It is recommended to upgrade your `PixelizedWithOutline` materials to the Uber shader._ + +![Uber shader inspector view](uber.png) + +### ProPixelizer Properties + +These properties are present for all [ProPixelizer SubTarget](@/usage/shadergraph/index.md) materials, and control aspects of the cel shading and pixelisation. + +**Appearance:** + +- `Use Color Grading`: when enabled, the material applies the given `Palette` look-up-table, which allows you to apply color palettes and dithering to your object. The `Palette` texture property is a texture look-up table (LUT) used for the color grading. A number of LUTs to emulate well-known devices (eg NES, PAL, GameBoy) are shipped with ProPixelizer, and ProPixelizer provides tools to [create your own](@/usage/palette_tools/index.md). The LUT can also include color dither patterns as demonstrated here. +- `Use Dithering`: toggles whether partial alpha (in the range 0 to 1) should be ignored or drawn as dithered transparency. + +**Lighting:** + +- `Lighting Ramp`: a texture ramp used for cell shading, which helps give a pixel-art aesthetic. When rendering the object, the value of the lit HSV color is used as a coordinate to sample the lighting ramp. +- `Ambient Light`: fine control over ambient lighting conditions. The `Constant Weight` slider can be used to adjust between only using scene ambient light (0), which uses spherical harmonics, and only using the `Constant Color` (1). Some hand-drawn pixel art styles implicitly assume a fixed constant ambient light, so this option provides an ability to fine tune between those styles and 3D pixel art where ambient light can be included in the object shading. + +**Pixelization** + +- `Pixel size`: Controls the size of one 'macropixel' when `Use Pixel Expansion` is enabled (see more information [here](@/usage/pixelization/index.md)). + +**Outline** + +- `ID`: A unique integer in the range (0, 255). Outlines are drawn when pixels have an ID different to those around them. If two objects should have outlines when they meet, give them different IDs (eg, two enemies). If they should not have outlines (eg, a character and their equipment), give them the same ID. + +### Surface Inputs + +These closely match similar properties from the URP Lit shader. + +- `Albedo` texture and `Color`: define the base color of the model before lighting calculations, and default to white if unassigned. The alpha channel of the `Albedo` texture is used for alpha clipping. +- `Normal Map`: an optional normal map to add shading detail to the model. In general, I find that cel shading in pixel art tends to work best without normal maps and using smooth shading on models, but there are some situations (eg. scenery) where normal maps can be useful. +- `Emission` texture and `Emission Color`: provide unlit colors for your material. Think laser beams, red eyes on skeletons, etc - anything you want to be bright even when in darkness. The color is an HDR property to support bloom post processing. +- `DiffuseVertexColorWeight` and `EmissiveVertexColorWeight`: these sliders control whether any vertex colors in the mesh should be used to additionally tint the lit and unlit colors of the mesh. Unity's particle system uses vertex color for 'per particle' coloring. Some Synty models have black vertex colors on some mesh areas. +- `Alpha Clip Threshold`: the minimum alpha value of the `Albedo` and `Color` required to draw parts of the mesh. + +**Outline properties**, for more information on available outline types see [the outline section](@/usage/outlines/index.md). + +- `Outline Color`: the color to use for the silhouette outline, with outline strength controlled by the alpha the alpha value; alpha values of 0 can be used for invisible outlines, 1.0 can be used for block color, and fractions to blend with the unoutlined color. +- `Edge Highlight`: lightens or darken edges detected by inspection of scene normals. Requires that 'Use Normals For Edge Detection' is enabled on the Render Feature. Color values less than 0.5 will darken edges, color values above 0.5 will lighten edges, and values of 0.5 will make no difference. +- `Edge Bevel Weight`: Controls the strength of edge bevelling, which changes the mesh normals along detected edges to enable light-reactive edges. \ No newline at end of file diff --git a/content/technical/ubershader/uber.png b/content/technical/ubershader/uber.png new file mode 100644 index 0000000..46d4c8b Binary files /dev/null and b/content/technical/ubershader/uber.png differ diff --git a/content/technical_details/propixelizer_camera/index.md b/content/technical_details/propixelizer_camera/index.md deleted file mode 100644 index 76bec3b..0000000 --- a/content/technical_details/propixelizer_camera/index.md +++ /dev/null @@ -1,11 +0,0 @@ -+++ -title = "ProPixelizer Camera MonoBehaviour" -+++ - -The Pixelization Filter controls what objects should be pixelated. -- Full Scene allows you to pixelate the entire render. -- Only ProPixelizer will only pixelate ProPixelizer materials. -- Layers will pixelate any objects on the given layer mask. When using Layers, ProPixelizer materials must be on the pixelated layers to draw properly. - - -Fullscreen Options allow you to apply Color Grading or dithering to the entire scene by specifying a color palette (you can use ProPixelizer to create your own). These can also be overriden for individual cameras. Note: It's still my firm belief that dithering looks better when applied at the object level, so that the dither pattern can move with the object. ProPixelizer now supports both of these approaches, so don't take my word for it - decide for yourself what you like best! \ No newline at end of file diff --git a/content/technical_details/render_feature/index.md b/content/technical_details/render_feature/index.md deleted file mode 100644 index 6e41e2f..0000000 --- a/content/technical_details/render_feature/index.md +++ /dev/null @@ -1,22 +0,0 @@ -+++ -title = "The ProPixelizer Render Feature" -weight = 1 -+++ - -ProPixelizer's Render Feature adds rendering instructions and passes that are required for ProPixelizer to work. -The settings provide additional controls to tweak ProPixelizer to your needs, as described below: - -![Render Feature Inspector View](render_feature.png) - -The **Pixelization** group configures the methods ProPixelizer uses to pixelate the scene. - -- `Use Pixel Expansion` allows pixelated objects to move with apparent sub-pixel motion relative to one another, without pixel creep. I created the method specifically for ProPixelizer, and an overview of how it works can be found here, under Attempt 3. It requires an additional post-process shader to be applied to the scene, but the smooth sub-pixel motion can make certain games feel more responsive. - -The **Outline Detection Controls** configure properties of the outline and edge detection shaders. - -- `Use Depth Testing for ID Outlines`: When enabled, outlines will only be drawn for edge pixels that are in front of their neighbors. This helps achieve the feel of a hand-drawn sprite, for which the outline would not change depending on the geometry in front of it. A comparison of the two settings is shown in the image here; take particular notice of the darker outline drawn over the vehicle inside the red box when Depth Test is off. - -The Editor Scene Tab gives you options to change the behavior of ProPixelizer in the Editor's Scene tab only. - -Debugging allows you to disable warnings generated by ProPixelizer. - diff --git a/content/technical_details/ubershader/index.md b/content/technical_details/ubershader/index.md deleted file mode 100644 index 5d64528..0000000 --- a/content/technical_details/ubershader/index.md +++ /dev/null @@ -1,37 +0,0 @@ -+++ -title = "The Uber Shader" -+++ - -The PixelizedWithOutline material adds all passes required to draw and outline the object. It uses a custom editor inspector and categorizes the shader properties as follows: - -- Appearance: Properties for albedo maps, normals maps, emission maps, and whether to color grade the object using a palette. - - The Albedo is the base color of the object, further tinted by the Color. The alpha values of these control dithered transparency. - - Use Color Grading toggles color grading. The Palette texture property is a texture look-up table (LUT) used for the color grading. A number of LUTs to emulate well-known devices (eg NES, PAL, GameBoy) are shipped with ProPixelizer. - - You can create your own palettes by using a palette asset (Right Click -> Create -> ProPixelizer -> Palette) which is used to generate the LUTs. The LUT can also include color dither patterns as demonstrated here. For more information, see the Color palettes and dither patterns section of the user guide below. - - Emission and Emission Color can be used to provide unlit colors for your material. Think of laser beams, red eyes on skeletons, etc. - - Diffuse and Emissive Vertex Color Weight control how the model's vertex coloring is included in the calculation. Unity's particle system uses vertex color for 'per particle' coloring. Some Synty models have black vertex colors on some mesh areas. - - Use Dithered Transparency toggles whether partial alpha (in the range 0 to 1) should be ignored or drawn as dithered transparency. - - Alpha Clip Threshold specifies a minimum alpha value required to draw parts of the mesh. - - Lighting: Shadow and lighting ramp. - - Lighting Ramp is a texture ramp used for cell shading, which helps give a pixel-art aesthetic. When rendering the object, the calculated color Value is used as to sample the lighting ramp. - - Ambient Light provides additional light to the object. You can control a blend between block color and scene ambient color/spherical harmonics. This can be helpful to tweak the appearance, in conjunction with the color grading. - - Pixelize: Properties to pixelate the object. - - Pixel size in the range 1-5. This sets the size of one 'macropixel' in screen pixels. - - Outline: Outline related properties. - - ID: A number. Outlines are drawn when pixels have an ID different to those around them. If two objects should have outlines when they meet, give them different IDs (eg, two enemies). If they should not have outlines (eg, a character and their equipment), give them the same ID. The value should be an integer in the range (0, 255). - - Outline Color: The color to use for the outline. The alpha value controls blending with the scene color. Alpha values of 0 can be used for invisible outlines, 1.0 can be used for block color, and fractions to blend with the appearance material color. - - Edge Highlight: This property is used to lighten or darken edges detected by inspection of scene normals. To use it, make sure that 'Use Normals For Edge Detection' is enabled on the Pixelisation Feature of your Forward Renderer Asset. Color values less than 0.5 will darken edges, color values above 0.5 will lighten edges, and values of 0.5 will make no difference. \ No newline at end of file diff --git a/content/tips_and_tricks/_index.md b/content/tips_and_tricks/_index.md new file mode 100644 index 0000000..eab3453 --- /dev/null +++ b/content/tips_and_tricks/_index.md @@ -0,0 +1,6 @@ ++++ +title = "Tips and tricks" +sort_by = "weight" +weight = 5 +insert_anchor_links = "right" ++++ \ No newline at end of file diff --git a/content/tips_and_tricks/artefacts/creep.gif b/content/tips_and_tricks/artefacts/creep.gif new file mode 100644 index 0000000..de384c0 Binary files /dev/null and b/content/tips_and_tricks/artefacts/creep.gif differ diff --git a/content/tips_and_tricks/artefacts/index.md b/content/tips_and_tricks/artefacts/index.md new file mode 100644 index 0000000..8d63b62 --- /dev/null +++ b/content/tips_and_tricks/artefacts/index.md @@ -0,0 +1,78 @@ ++++ +title = "Common artefacts" +description = "Avoiding artefacts in 3D pixel art" +weight = 50 ++++ + +Pixel art is a popular art style, but also highly perfectionist! Even a few small errors can greatly degrade the appearance of good pixel art. Here, I describe some common artefacts that occur when using 3d objects to create pixel art, and what you can do to fix them. + +## Creep + +Creep is the most well-known 3D pixel art artefact. Visually, the object appears to change shape and form as it moves relative to the camera. This can occur due to object movement, or for stationary objects because the camera is moving. The underlying cause is because the object is rasterized differently to the screen each time, resulting in an inconsistent set of pixels being drawn, which is most commonly due to sub-pixel motion of the object. The result is a visually distracting artefact, which is particularly noticeable in outlines. + +{% article_image(image="creep.gif", gif=true, title="Pixel creep") %} +The object's pixel composition appears to change, creating a visually distracting artefact. +{% end %} + +### How to fix it? + +ProPixelizer provides functionality for correctly handling sub-pixel relative object motion as described in [this section](@/usage/eliminate_pixel_creep/index.md). + +{% article_image(image="no_creep.gif", gif=true, title="No creep") %} +Pixel creep removed through snapping of relative object motion. +{% end %} + +## Jaggies + +A hallmark of pixel art is clean edges, with straight lines parallel to the horizontal axes creating perfect 'staircases' of 2x1 pixels. An interrupted staircase is usually called a _jaggie_. + +{% article_image(image="jaggies.png", title="Jaggies") %} +An otherwise perfect 2x1 edge staircase is interrupted by the presence of a 1x1 pixel. +{% end %} + +### How to fix it? + +{% article_image(image="staircase.png", title="Fixed") %} +Fixing the camera rotation aligns the edges of the object correctly to allow perfect staircases to be rendered. ProPixelizer's edge detection kernels are optimised to give you correct staircases. +{% end %} + +Check that you are using the correct projection for your orthographic camera. The easiest way to debug this is to place a cube in the scene directly in front of your camera. The camera should be first rotated 45 degrees about the vertical, and then tilted 30 degrees below horizontal (for example, use a rotation value in the transform of `(30, 45, 0)`, as in the ProPixelizer example scenes). The edges of your cube will then be pointing in a direction with a ratio of 2 pixels up/down for every one pixel across. + +Jaggies can also result when pixelating by rendering to a low-resolution target. If the target is upscaled onto the screen by a non-integer multiple, aliasing of the low-resolution target will occur, causing rows and columns of pixels to be of different sizes and interrupting the staircase. ProPixelizer provides a pixel art antialiasing filter to mitigate this effect. It also provides useful functions to set your low-res target resolution to an integer ratio of the screen resolution. + +## Moire pattern + +A [Moiré pattern](https://en.wikipedia.org/wiki/Moir%C3%A9_pattern) is an optical illusion that is formed when two repeating patterns of different scale overlap. The mixture of these two patterns produces a third pattern, which is often unintended and can be visually distracting. These patterns are the reasons why pinstripe clothes and other textiles are not worn on television! + +The general concept is shown below. In the first row we see a pattern consisting of bars, 6 pixels wide and repeating every 12 pixels. In the second row, we see bars 7 pixels wide and repeating every 14 pixels. The third row shows what happens when these patterns are overlaid; a new periodic pattern can be seen, with the repeating element shown by the red bar. The periodicity is equal to the lowest common multiple of the two original patterns, which in this case is 84 pixels. + +{% article_image(image="moire_example.png", title="Moire patterns") %} +The periodic patterns in the top two rows combine to produce a Moiré pattern shown in the third row. +{% end %} + +So what is the issue? Well, periodic patterns appear in pixel art more often than you may at first realise! [Ordered dithering](https://en.wikipedia.org/wiki/Dither) - in which two different colors are interleaved to approximate a third - is a popular technique and a hallmark of certain pixel art styles. +A Moiré pattern can occur when dithered objects are drawn one on texture, which is then scaled and displayed on the screen at non-integer zoom. For 3D pixel art, this situation can occur when the pixelated, low resolution target is rescaled and presented on the screen. Movement of the objects or camera can cause these patterns to shimmer in a very distracting manner. + +{% article_image(image="moire_cubes.png", title="Moire patterns in a pixel art scene") %} +Rescaling the low-resolution render to match the screen has resulted in a visually distracting Moiré pattern. The red box highlights one element of the repeating pattern. +{% end %} + +The issue is particularly bad whenever + +### How to fix it? + +There are two different approaches you can take to fix this: + +**Option 1: Make sure your pixels are large** and take up a large number of screen pixels. This doesn't technically fix the pattern, but it makes it less perceptible. However, this fix is not appropriate for all styles. In ProPixelizer you can do this by either increasing the `Pixel Size` on the `ProPixelizer Camera` monobehavior when using `World Space Pixel Size` mode, or by reducing the camera's `orthographic size` to reduce the camera field of view. However, this approach is only appropriate for certain pixel art styles. + + +{% article_image(image="moire_cubes_large_pixels.png") %} +Moire patterns are less visible when the pixel sizes are large. +{% end %} + +**Option 2: Make sure your pixels are an integer number of screen pixels.** This approach completely eradicates the Moiré pattern by allowing the low resolution texture to perfectly scale into the screen texture without any interpolation or aliasing artefacts. + + + + +## Shimmer diff --git a/content/tips_and_tricks/artefacts/jaggies.png b/content/tips_and_tricks/artefacts/jaggies.png new file mode 100644 index 0000000..d5e2a70 Binary files /dev/null and b/content/tips_and_tricks/artefacts/jaggies.png differ diff --git a/content/tips_and_tricks/artefacts/moire_cubes.png b/content/tips_and_tricks/artefacts/moire_cubes.png new file mode 100644 index 0000000..b3e353f Binary files /dev/null and b/content/tips_and_tricks/artefacts/moire_cubes.png differ diff --git a/content/tips_and_tricks/artefacts/moire_cubes_large_pixels.png b/content/tips_and_tricks/artefacts/moire_cubes_large_pixels.png new file mode 100644 index 0000000..9c31458 Binary files /dev/null and b/content/tips_and_tricks/artefacts/moire_cubes_large_pixels.png differ diff --git a/content/tips_and_tricks/artefacts/moire_example.png b/content/tips_and_tricks/artefacts/moire_example.png new file mode 100644 index 0000000..8cd8511 Binary files /dev/null and b/content/tips_and_tricks/artefacts/moire_example.png differ diff --git a/content/tips_and_tricks/artefacts/moire_pattern.gif b/content/tips_and_tricks/artefacts/moire_pattern.gif new file mode 100644 index 0000000..a6c55fa Binary files /dev/null and b/content/tips_and_tricks/artefacts/moire_pattern.gif differ diff --git a/content/tips_and_tricks/artefacts/no_creep.gif b/content/tips_and_tricks/artefacts/no_creep.gif new file mode 100644 index 0000000..7f63032 Binary files /dev/null and b/content/tips_and_tricks/artefacts/no_creep.gif differ diff --git a/content/tips_and_tricks/artefacts/staircase.png b/content/tips_and_tricks/artefacts/staircase.png new file mode 100644 index 0000000..566fe41 Binary files /dev/null and b/content/tips_and_tricks/artefacts/staircase.png differ diff --git a/content/usage/overview/index.md b/content/usage/overview/index.md index 7b5e318..2b6f76a 100644 --- a/content/usage/overview/index.md +++ b/content/usage/overview/index.md @@ -5,7 +5,7 @@ weight = 1 The ProPixelizer package includes a number of things to achieve perfect pixelisation in your game. -- A [ProPixelizerUberShader](@/technical_details/ubershader/index.md) which provides control over pixelisation, color grading, outlines, cel shading and more. +- A [ProPixelizerUberShader](@/technical/ubershader/index.md) which provides control over pixelisation, color grading, outlines, cel shading and more. - A [ShaderGraph SubTarget](@/usage/shadergraph/index.md) and examples if you want to create your own shaders. - The [ProPixelizerCamera](@/usage/camera_setup/index.md) MonoBehavior for controlling ProPixelizer's pixelisation. - Easy methods to [Remove Pixel Creep](@/usage/eliminate_pixel_creep/index.md) to create crisp looking 3D pixel art. diff --git a/content/versions/changelog/index.md b/content/versions/changelog/index.md index 8459886..53feaf3 100644 --- a/content/versions/changelog/index.md +++ b/content/versions/changelog/index.md @@ -13,12 +13,18 @@ weight = 10 - **Added** depth testing to normal-derived edges (e.g. to reveal steps) - **Added** Automatic rescaling to preserve world-space pixel size when zooming. - **Added** Automatic rescaling to preserve world-space pixel size when changing screen resolution. -- **Added** ProPixelizer SubTarget for ShaderGraph (for advanced users). +- **Added** ProPixelizer SubTarget for ShaderGraph - use it like a lit shadergraph, all pixelisation/dithering/color grading/cel shading/outlines are handled for you. Provides per-pixel control over outlines. +- **Added** Support for Forward+ rendering path. +- **Added** Support for Baked lighting. +- **Added** Support for Mixed lighting. +- **Added** Support for GPU Instancing. +- **Added** Support for Hybrid renderer. +- **Added** HDR Support for emissive lighting. - **Added** 'Bevel' edge highlight option (where edges use average surrounding normal for lighting). - **Added** Automatic world-space pixel alignment of static and unmoving objects. - **Added** Screen resolution movement for low res targets ('camera subpixel motion'). - **Added** Lots of new example content and notes, showing you how to get the most out of ProPixelizer! -- **Added** Support for Forward+ rendering path. + - **New Documentation** rewritten from scratch using Zola. - Reduced the number of material keywords and changed some to shader_feature_local, which should give faster compile times. - **Fixed** Depth buffer post-processing effects in 2022. diff --git a/content/versions/updating_from_prev/index.md b/content/versions/updating_from_prev/index.md index 6c3c63f..94d0761 100644 --- a/content/versions/updating_from_prev/index.md +++ b/content/versions/updating_from_prev/index.md @@ -6,8 +6,12 @@ date= 2024-10-19 ## Updating to v2.0 -- Version 2.0 adds a lot of new features, and much of the package has been rewritten. Despite this, you shouldn't need to make any changes to your project! -- PixelizedWithOutline is functional, but deprecated. I now recommend using the **UberShader**; it does all the same things but also supports more functionality like the DOTS renderer and GPU instancing. +- Please delete the old install from your projects `Assets` folder before importing the new version. A modal window will warn you that import failed if you do not. ProPixelizer has now moved to the Packages folder. +- Version 2.0 adds a lot of new features, and much of the package has been rewritten. Despite this, you shouldn't need to make any changes to your project! I have maintained asset GUIDs, so Unity will automatically incorporate the new versions of any files into your project, even if they have been renamed. +- If you were using the ProPixelizer Render Pipeline Asset, you will find it is now included in the package samples, and so you'll need to import the samples into your project to continue using it. +- There are _many_ new features. The sample scenes give different examples of these; they all contain `readme`s in the scene heirachy with detailed further information. I strongly recommend that you import these scenes and look through them to understand what ProPixelizer can now do. +- PixelizedWithOutline is now deprecated and you should use the **UberShader** as a replacement; it does all the same things, but supports additional functionality like the DOTS renderer and GPU instancing. If you want to update your materials, you can do this easily using a button on the material inspector. +- Given the changes to the rendering API in Unity 6 (RenderGraph), I had to drop support for some of the legacy editors to focus efforts on newer features. This version drops support for 2020 and 2021, but maintains support for 2022 LTS. _All previous versions of ProPixelizer are available on the ProPixelizer git repository, contact me if you would like access and I will gladly assist._ ## Updating to v1.8 diff --git a/content/welcome/_index.md b/content/welcome/_index.md index 10078b1..4deab7e 100644 --- a/content/welcome/_index.md +++ b/content/welcome/_index.md @@ -12,9 +12,9 @@ Welcome to ProPixelizer's documentation! - For setting up a new project, see the [Quick Start](@/getting_started/quickstart/index.md) guide. - Check out the [examples](@/getting_started/examples/index.md) for hands-on demos. - For a more detailed description of how to use the package, start with the [overview](@/usage/overview/index.md). +- You can also search the documentation using the icon in the top right. I hope you enjoy using ProPixelizer. Please do message me if you have any questions or problems. I'm always very pleased to hear what you make with it! -Cheers, - -Elliot \ No newline at end of file +Cheers! +
Elliot \ No newline at end of file diff --git a/templates/shortcodes/article_image.md b/templates/shortcodes/article_image.md index 4b90a73..65a3bff 100644 --- a/templates/shortcodes/article_image.md +++ b/templates/shortcodes/article_image.md @@ -5,5 +5,6 @@ {% set image = resize_image(path=page.colocated_path ~ image, height=600, width=600, op="fit") %} {% endif %} -
Above: {{ body }}
+ +
{% if title %}{{ title }}: {% else %}Above: {% endif %}{{ body }}
\ No newline at end of file