Pular para o conteúdo

Guia

Como usar

Do catálogo para o jogo em poucos minutos. Cada efeito é uma folha de 16 quadros com a luz e a tinta separadas; a cor entra no shader.

Godot 4
A folha de 2 canais, a cena .tscn com o AnimatedSprite2D pronto, o shader de cor e um script curto que toca o efeito do jeito certo.
Folha colorida
PNG com os 16 quadros numa grade 4 × 4, já na cor e no estilo que você escolheu. Serve em qualquer motor.
Folha de 2 canais
A folha original: luz no vermelho, tinta no verde. Com ela a cor muda dentro do jogo. Vem com a rampa explicada.
Aseprite e JSON
Folha colorida com o JSON de quadros e tags, no formato que Phaser, GameMaker, Defold e o próprio Aseprite leem.
Quadros soltos
16 PNG separados, para quem monta a animação na mão.
GIF
Para mostrar o efeito num post, devlog ou Discord.

  1. Arraste a pasta do efeito para dentro do projeto, por exemplo res://efeitos/selo/.
  2. Instancie a cena selo.tscn onde o efeito acontece. Ela toca sozinha.
  3. Troque a cor quando quiser, até no meio da partida:
GDScript
# cria o efeito no lugar do acerto e pinta de vermelho
var efeito = preload("res://efeitos/corte/corte.tscn").instantiate()
efeito.position = alvo.global_position
efeito.material.set_shader_parameter("tinta", Color("#F0524F"))
add_child(efeito)

O jeito de tocar já vem resolvido pelo tipo do efeito:

  • Golpe toca uma vez e o nó se apaga sozinho no fim. Para reaproveitar, desligue sumir_no_fim no inspetor e chame play().
  • Laço toca sem parar. Para sumir, anime modulate.a até 0.
  • Entra e fica se desenha (animação entra) e depois fica aceso, indo e voltando (animação fica).

Cada instância tem o próprio material, então dez cópias da mesma cena podem ter dez cores. Importe a folha como está (Lossless, o padrão do 2D) e não use compressão de VRAM nela: borra os dois canais.

O pacote da Unity chega junto com o pacote de 20/11: a folha já fatiada em 16 sprites, o shader de cor, o material e um prefab com o Animator. A troca de cor fica assim:

C#
efeito.GetComponent<SpriteRenderer>().material.SetColor("_Tinta", new Color32(240, 82, 79, 255));

Até lá, a folha colorida funciona em qualquer projeto da Unity como uma folha de sprites comum (Sprite Mode Multiple, grade de 4 × 4).

Phaser, GameMaker, Defold, LÖVE, RPG Maker, Construct: baixe a folha colorida com o JSON do Aseprite. As tags já dizem como tocar (golpe, laco, ou entra e fica em vai e volta). Para trocar a cor dentro do jogo, use a folha de 2 canais e a rampa abaixo no shader do seu motor.

É a mesma conta do navegador e do pacote do Godot. Luz e tinta vão de 0 a 1; tinta é a cor escolhida.

tinta_haljoy.gdshader (Godot 4)
shader_type canvas_item;
// Haljoy Studio: a folha guarda a luz no vermelho e a tinta no verde.
// Esta rampa pinta as duas na cor escolhida; troque "tinta" a qualquer hora, ate no meio da partida.

uniform vec4 tinta : source_color = vec4(0.91, 0.76, 0.42, 1.0);
uniform int estilo : hint_range(0, 2) = 0; // 0 pintado, 1 cel, 2 pixel
uniform float pixels_por_quadro = 64.0; // so no estilo pixel
uniform vec2 grade = vec2(4.0, 4.0); // colunas e linhas da folha

void fragment() {
	vec2 uv = UV;
	if (estilo == 2) {
		vec2 n = grade * pixels_por_quadro;
		uv = (floor(uv * n) + 0.5) / n;
	}
	vec2 t = texture(TEXTURE, uv).rg;
	float luz = t.r;
	float tin = t.g;
	if (estilo > 0) {
		luz = luz < 0.16 ? 0.0 : (luz < 0.5 ? 0.42 : (luz < 0.84 ? 0.78 : 1.0));
		tin = step(0.42, tin);
	}
	vec3 cor = tinta.rgb;
	vec3 borda = cor * 0.38;
	vec3 corpo = mix(borda, cor, smoothstep(0.12, 0.55, luz));
	vec3 col = mix(corpo, vec3(1.0, 0.985, 0.95), smoothstep(0.78, 0.95, luz));
	float aL = clamp(luz * 1.6, 0.0, 1.0);
	float aT = smoothstep(0.05, 0.4, tin);
	vec3 tc = vec3(0.035, 0.04, 0.06) + cor * 0.035;
	float a = aL + aT * (1.0 - aL);
	vec3 pre = col * aL + tc * aT * (1.0 - aL);
	COLOR = vec4(a > 0.0 ? pre / a : vec3(0.0), a * tinta.a * COLOR.a);
}

No cel e no pixel, a luz vira 4 tons e a tinta vira 0 ou 1 antes da rampa. No pixel, a amostra cai no centro de cada célula da grade.

  • Velocidade. No catálogo os efeitos tocam devagar para você ver o traço. No jogo, um golpe costuma ficar melhor entre 24 e 30 quadros por segundo.
  • Tamanho. 256 px por quadro aguenta ampliar até umas 2 vezes sem perder o traço. Para pixel art, use o estilo pixel e filtro Nearest.
  • Cor por elemento. Uma folha serve para fogo, gelo e veneno: guarde as cores do seu jogo numa lista e troque no momento do golpe.
  • Custo. Cada efeito é uma folha e um material: uma chamada de desenho, leve até em celular.

Ficou alguma dúvida? Os efeitos estão no catálogo, e os preços na página da pré-venda.