テキストをポスタライズされたグラデーションで装飾
テキスト描画時のグラデーションに減色シェーダを適用します。特にピクセルフォントと組み合わせることで、レトロ風な装飾ができそうです。
https://gyazo.com/c2bcd1d83360aaafcbe7a1d8e75c739d
「x16y32pxGridGazer」フォントを使用させていただきました。
code:text_gradation_posterize.cpp
# include <Siv3D.hpp> // Siv3D v0.6.16
void DrawTextWithPosterizedGradation(AssetNameView fontName, StringView text, int32 size, const Vec2& pos, const ColorF& colorTop, const ColorF& colorBottom)
{
// 文字単位の描画に減色シェーダを適用
ScopedCustomShader2D shader{ PixelShaderAsset(U"TextGradation") };
ScopedRenderStates2D renderState{ SamplerState::ClampNearest };
const Vec2 basePos = pos;
Vec2 penPos{ basePos.asPoint() };
const double scale = size / (double)FontAsset(fontName).height();
for (const auto glyph : FontAsset(fontName).getGlyphs(text))
{
const Vec2 offset = glyph.getOffset() * scale;
glyph.texture.scaled(scale).draw(penPos + offset, Arg::top = colorTop, Arg::bottom = colorBottom);
penPos.x += glyph.xAdvance * scale;
}
}
void Main()
{
Scene::SetBackground(ColorF{ 0.05 });
Scene::SetTextureFilter(TextureFilter::Nearest);
constexpr Size SceneSize{ 400, 300 };
Window::Resize(SceneSize);
Scene::SetResizeMode(ResizeMode::Keep);
Window::Resize(SceneSize * 2);
FontAsset::Register(U"Font1", FontMethod::Bitmap, 32, U"font/x16y32pxGridGazer.ttf", FontStyle::Bitmap);
PixelShaderAsset::Register(U"TextGradation", HLSL{ U"shader/posterize_input.hlsl", U"PS" });
while (System::Update())
{
const String text = U"Hello, Siv3D!";
const auto region = FontAsset(U"Font1")(text).regionAt(64, Scene::CenterF());
DrawTextWithPosterizedGradation(U"Font1", text, 64, region.pos, HSV(360 * Periodic::Sawtooth0_1(3s), 0.9, 0.9), HSV(180 + 360 * Periodic::Sawtooth0_1(3s), 0.85, 0.8));
}
}
code:posterize_input.hlsl
//
// Textures
//
Texture2D g_texture0 : register(t0);
SamplerState g_sampler0 : register(s0);
namespace s3d
{
//
// VS Output / PS Input
//
struct PSInput
{
float4 position : SV_POSITION;
float4 color : COLOR0;
float2 uv : TEXCOORD0;
};
}
//
// Constant Buffer
//
cbuffer PSConstants2D : register(b0)
{
float4 g_colorAdd;
float4 g_sdfParam;
float4 g_sdfOutlineColor;
float4 g_sdfShadowColor;
float4 g_internal;
}
float4 PS(s3d::PSInput input) : SV_TARGET
{
const float step = 8; //減色の度合い
float4 texColor = g_texture0.Sample(g_sampler0, input.uv);
input.color.rgb = round(input.color.rgb * step) / step;
return (texColor * input.color) + g_colorAdd;
}