This is from the Ootake emulator (a PC engine emulator), is really weird, pixels look like a mosaic, never this outside this emulator, I don’t know what it is but it is beautiful, seriously you need to see this thing moving.
Anyone can tell what this is and how can I replicate this for my 2D game?
EDIT: Apparently is some kind of scanline effect, I turned it off and it looks normal now
The question is, how can I replicate this?
Assuming your game is pixel-perfect (which it really ought to be if you’re considering scan lines), then you can probably just overlay the whole screen using a multiplicative shader.
I’m not an expert but I think it could probably be done even if the game is not pixel perfect, knowing how many pixel there are per unit you could probably calculate how many lines you need.
Right, I was ambiguous: I meant that your game conforms to some sort of regular grid which you then map to the screen. That second mapping doesn’t have to be perfectly aligned with pixel boundaries.
Oh ok, I understand, by the way I found this:
//#<!--
//# CRT-simple shader
//#
//# Copyright (C) 2011 DOLLS. Based on cgwg's CRT shader.
//#
//# This program is free software; you can redistribute it and/or modify it
//# under the terms of the GNU General Public License as published by the Free
//# Software Foundation; either version 2 of the License, or (at your option)
//# any later version.
//# -->
Shader "Custom/CRT"
{
Properties
{
_MainTex ("Base (RGB)", 2D) = "white" {}
}
SubShader
{
Pass
{
CGPROGRAM
#pragma vertex vert_img
#pragma fragment frag
#include "UnityCG.cginc"
#define CURVATURE
#pragma target 3.0
#define PI 3.141592653589
uniform sampler2D _MainTex;
uniform float2 _InputSize;
uniform float2 _OutputSize;
uniform float2 _TextureSize;
uniform float2 _One;
uniform float2 _Texcoord;
uniform float _Factor;
uniform float _Distortion; // 0.1f
uniform float _InputGamma; // 2.4f
uniform float _OutputGamma; //2.2f
float2 RadialDistortion(float2 coord)
{
coord *= _TextureSize / _InputSize;
float2 cc = coord - 0.5f;
float dist = dot(cc, cc) * _Distortion;
return (coord + cc * (1.0f + dist) * dist) * _InputSize / _TextureSize;
}
float4 ScanlineWeights(float distance, float4 color)
{
float4 width = 2.0f + 2.0f * pow(color, float4(4.0f, 4.0f, 4.0f, 4.0f));
float4 weights = float4(distance / 0.3f, distance / 0.3f, distance / 0.3f, distance / 0.3f);
return 1.4f * exp(-pow(weights * rsqrt(0.5f * width), width)) / (0.6f + 0.2f * width);
}
float4 frag(v2f_img i) : COLOR
{
_Texcoord = i.uv;
_One = 1.0f / _TextureSize;
_OutputSize = _TextureSize;
_InputSize = _TextureSize;
_Factor = _Texcoord.x * _TextureSize.x * _OutputSize.x / _InputSize.x;
float4 ScreenGamma = pow(tex2D(_MainTex, _Texcoord), _InputGamma);
#ifdef CURVATURE
float2 xy = RadialDistortion(_Texcoord);
#else
float2 xy = _Texcoord;
#endif
float2 ratio = xy * _TextureSize - float2(0.5f, 0.5f);
float2 uvratio = frac(ratio);
xy.y = (floor(ratio.y) + 0.5f) / _TextureSize;
float4 col = tex2D(_MainTex, xy);
float4 col2 = tex2D(_MainTex, xy + float2(0.0f, _One.y));
float4 weights = ScanlineWeights(uvratio.y, col);
float4 weights2 = ScanlineWeights(1.0f - uvratio.y, col2);
float3 res = (col * weights + col2 * weights2).rgb;
float3 rgb1 = float3(1.0f, 0.7f, 1.0f);
float3 rgb2 = float3(0.7f, 1.0f, 0.7f);
float3 dotMaskWeights = lerp(rgb1, rgb2, floor(fmod(_Factor, 2.0f)));
res *= dotMaskWeights;
return float4(pow(res, float3(1.0f / _OutputGamma, 1.0f / _OutputGamma, 1.0f / _OutputGamma)), 1.0f);
}
ENDCG
}
}
}
its a similar effect.
Also I have the source code (is open source) of the emulator, and I think I have the scanline effect code isolated but I’m not sure since its in C++ and the comments are in Japanese. If anyone wants to take a peek I can post the code. Maybe that way we could check how the guy did it.
there is a scanline image effect in my “Aubergines Postprocess shaders” pack in the assetstore which does what you want.
Basically the pixel in the game world is actually represented by a small grid of pixels, like maybe 4x4 pixels… then this allows you to adjust the color of different parts of the pixel like the outline or to maybe shade it with a gradient. Each pixel then becomes kind of a tile. You could do it with a tile-engine type of shader, or with a shader that calculates variations in color on the fly based on the fragment coordinates, or as mentioned above you could just overlay a pre-drawn texture on top of the scene in multiply mode to darken each of the subpixels. I’ve seen a few games that do something very similar.