@jjlmoya/utils-games-development 1.54.0 → 1.56.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/entries.ts +7 -1
- package/src/index.ts +2 -0
- package/src/tests/contrast_legibility.test.ts +291 -0
- package/src/tests/locale_completeness.test.ts +2 -2
- package/src/tests/tool_validation.test.ts +2 -2
- package/src/tool/itchioGameTester/itchio-game-tester.css +3 -3
- package/src/tool/localizationSanitizer/localization-sanitizer.css +17 -15
- package/src/tool/pixelArtPaletteSwapper/app-client.ts +229 -0
- package/src/tool/pixelArtPaletteSwapper/bibliography.astro +6 -0
- package/src/tool/pixelArtPaletteSwapper/bibliography.ts +16 -0
- package/src/tool/pixelArtPaletteSwapper/component.astro +153 -0
- package/src/tool/pixelArtPaletteSwapper/entry.ts +28 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/de.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/en.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/es.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/fr.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/id.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/it.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/ja.ts +225 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/ko.ts +225 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/nl.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/pl.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/pt.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/ru.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/sv.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/tr.ts +233 -0
- package/src/tool/pixelArtPaletteSwapper/i18n/zh.ts +225 -0
- package/src/tool/pixelArtPaletteSwapper/index.ts +12 -0
- package/src/tool/pixelArtPaletteSwapper/logic.test.ts +43 -0
- package/src/tool/pixelArtPaletteSwapper/logic.ts +171 -0
- package/src/tool/pixelArtPaletteSwapper/pixel-art-palette-swapper.css +728 -0
- package/src/tool/pixelArtPaletteSwapper/seo.astro +15 -0
- package/src/tool/pixelArtPaletteSwapper/ui.ts +35 -0
- package/src/tool/retroSfxGenerator/bibliography.astro +6 -0
- package/src/tool/retroSfxGenerator/bibliography.ts +16 -0
- package/src/tool/retroSfxGenerator/client.ts +263 -0
- package/src/tool/retroSfxGenerator/component.astro +146 -0
- package/src/tool/retroSfxGenerator/entry.ts +27 -0
- package/src/tool/retroSfxGenerator/i18n/de.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/en.ts +224 -0
- package/src/tool/retroSfxGenerator/i18n/es.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/fr.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/id.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/it.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/ja.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/ko.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/nl.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/pl.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/pt.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/ru.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/sv.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/tr.ts +211 -0
- package/src/tool/retroSfxGenerator/i18n/zh.ts +211 -0
- package/src/tool/retroSfxGenerator/index.ts +11 -0
- package/src/tool/retroSfxGenerator/logic.test.ts +61 -0
- package/src/tool/retroSfxGenerator/logic.ts +214 -0
- package/src/tool/retroSfxGenerator/retro-sfx-generator.css +435 -0
- package/src/tool/retroSfxGenerator/seo.astro +15 -0
- package/src/tool/retroSfxGenerator/ui.ts +41 -0
- package/src/tool/saveFileEditor/game-save-file-editor.css +5 -5
- package/src/tool/spriteSheetPacker/sprite-sheet-packer.css +5 -5
- package/src/tool/steamBbcodeTranslator/steam-bbcode-translator.css +8 -8
- package/src/tool/steamCapsuleGenerator/steam-capsule-generator.css +6 -6
- package/src/tools.ts +4 -0
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
2
|
+
import type { PixelArtPaletteSwapperUI } from '../ui';
|
|
3
|
+
|
|
4
|
+
export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
|
|
5
|
+
slug: 'troca-paleta-pixel-art',
|
|
6
|
+
title: 'Troca de Paleta para Pixel Art',
|
|
7
|
+
description: 'Reduza sprites e folhas de sprites para paletas clássicas de consoles ou uma lista personalizada de cores hexadecimais no navegador.',
|
|
8
|
+
ui: {
|
|
9
|
+
uploadTitle: 'Arraste um sprite ou folha de sprites',
|
|
10
|
+
uploadHint: 'PNG, JPEG ou WebP processados no seu dispositivo',
|
|
11
|
+
chooseImage: 'Escolher imagem',
|
|
12
|
+
replaceImage: 'Substituir imagem',
|
|
13
|
+
paletteTitle: 'Escolher paleta',
|
|
14
|
+
gameBoyPalette: 'Game Boy',
|
|
15
|
+
nesPalette: 'Inspirada no NES',
|
|
16
|
+
pico8Palette: 'PICO-8',
|
|
17
|
+
commodore64Palette: 'Commodore 64',
|
|
18
|
+
dawnBringerPalette: 'DawnBringer 16',
|
|
19
|
+
customPalette: 'Cores personalizadas',
|
|
20
|
+
customPaletteHint: 'Separa valores hexadecimais por vírgulas, espaços ou quebras de linha.',
|
|
21
|
+
applyCustomPalette: 'Aplicar paleta',
|
|
22
|
+
resetCustomPalette: 'Redefinir',
|
|
23
|
+
sourcePreview: 'Original',
|
|
24
|
+
resultPreview: 'Resultado reduzido',
|
|
25
|
+
waitingForImage: 'Aguardando uma imagem',
|
|
26
|
+
uploadToPreview: 'Envie uma imagem para visualizar',
|
|
27
|
+
resultEmpty: 'As versões original e reduzida aparecerão lado a lado.',
|
|
28
|
+
downloadPng: 'Baixar PNG',
|
|
29
|
+
downloadDisabled: 'Envie uma imagem para habilitar a exportação.',
|
|
30
|
+
colorCount: 'Cores originais',
|
|
31
|
+
mappedCount: 'Cores usadas',
|
|
32
|
+
imageSize: 'Tamanho da imagem',
|
|
33
|
+
paletteCount: 'cores da paleta',
|
|
34
|
+
preserveAlpha: 'Preservar transparência',
|
|
35
|
+
zoomLabel: 'Zoom',
|
|
36
|
+
processing: 'Mapeando pixels',
|
|
37
|
+
invalidPalette: 'Adicione pelo menos uma cor hexadecimal válida',
|
|
38
|
+
invalidImage: 'Escolha uma imagem PNG, JPEG ou WebP',
|
|
39
|
+
readyStatus: 'Pronto',
|
|
40
|
+
dropActive: 'Solte para carregar',
|
|
41
|
+
mappedSummary: 'Mapeadas {source} cores originais para {mapped} cores da paleta',
|
|
42
|
+
},
|
|
43
|
+
seo: [
|
|
44
|
+
{
|
|
45
|
+
type: 'title',
|
|
46
|
+
level: 2,
|
|
47
|
+
text: 'Converta um Sprite Colorido em uma Paleta Retro Definida',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
type: 'paragraph',
|
|
51
|
+
html: 'Uma paleta limitada é muito mais do que uma restrição técnica. Ela dá ao sprite um vocabulário de cores coerente, faz com que os elementos de uma cena pareçam pertencer ao mesmo universo e sugere o caráter visual de um console ou hardware clássico específico. Este alterador de paleta no navegador permite comparar a imagem original com uma versão reduzida enquanto você experimenta com Game Boy, inspiradas no NES, PICO-8, Commodore 64, DawnBringer 16 e listas personalizadas.',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
type: 'title',
|
|
55
|
+
level: 2,
|
|
56
|
+
text: 'Como Funciona o Mapeamento pela Cor Mais Próxima',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'paragraph',
|
|
60
|
+
html: 'A ferramenta lê os canais vermelho, verde e azul de cada pixel visível e compara essa cor com cada valor presente na paleta selecionada. Ela escolhe a entrada da paleta com a menor distância RGB ao quadrado e escreve a cor de substituição em um novo buffer de tela. O canal alfa é mantido separado, de modo que os pixels transparentes permanecem transparentes e as bordas parcialmente transparentes conservam sua opacidade original quando a opção Preservar transparência está ativa.',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
type: 'comparative',
|
|
64
|
+
columns: 2,
|
|
65
|
+
items: [
|
|
66
|
+
{
|
|
67
|
+
title: 'Redução de paleta',
|
|
68
|
+
description: 'Cada cor original é substituída pela amostra disponível mais próxima.',
|
|
69
|
+
points: [
|
|
70
|
+
'Rápido e previsível para sprites, ícones, elementos de mapas e interfaces',
|
|
71
|
+
'Conserva exatamente as dimensões e as posições dos pixels originais',
|
|
72
|
+
'Facilita a verificação e o controle de um orçamento de cores estabelecido',
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: 'Troca de paleta (Palette Swapping)',
|
|
77
|
+
description: 'A mesma ilustração pode ser remapeada para outro conjunto de cores cuidadosamente escolhido.',
|
|
78
|
+
points: [
|
|
79
|
+
'Útil para trajes alternativos, variações de biomas e estados de dano',
|
|
80
|
+
'Listas hexadecimais personalizadas permitem adequar-se à sua própria direção artística',
|
|
81
|
+
'O arquivo PNG baixado está pronto para ser reimportado no seu editor',
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
type: 'title',
|
|
88
|
+
level: 2,
|
|
89
|
+
text: 'Escolhendo uma Paleta para Pixel Art',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
type: 'table',
|
|
93
|
+
headers: ['Paleta', 'Cores', 'Uso recomendado', 'Aspectos a considerar'],
|
|
94
|
+
rows: [
|
|
95
|
+
['Game Boy', '4', 'Estilo monocromático portátil e estudos de valores bem definidos', 'A gama reduzida de valores pode fundir materiais com tonalidades próximas'],
|
|
96
|
+
['Inspirada no NES', '16', 'Sprites marcantes estilo arcade, personagens e cenários', 'Cores muito brilhantes podem se sobrepor a detalhes pequenos'],
|
|
97
|
+
['PICO-8', '16', 'Pixel art moderno com acentos de cores saturadas', 'Tonalidades muito saturadas exigem um contraste intencional'],
|
|
98
|
+
['Commodore 64', '16', 'Cenas retro suaves e estética de computadores clássicos', 'Baixo contraste se beneficia de silhuetas bem definidas'],
|
|
99
|
+
['DawnBringer 16', '16', 'Paleta artesanal versátil para uso geral em pixel art', 'Rampas de cores ainda exigem uma direção de luz clara'],
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
type: 'title',
|
|
104
|
+
level: 2,
|
|
105
|
+
text: 'Fluxo de Trabalho Prático para Folhas de Sprites',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
type: 'paragraph',
|
|
109
|
+
html: 'Comece com a maior imagem original que você consiga editar confortavelmente, e em seguida envie o sprite ou folha de sprites exportada para cá. Selecione uma predefinição para definir o estilo visual ou cole uma lista personalizada de uma biblioteca de cores. Inspecione ambas as telas em um nível de ampliação maior para verificar se houve perda de detalhes faciais, contornos fundidos ou pontos de luz que não se destacam mais. Se o resultado parecer apagado, tente uma paleta com saltos de valor mais acentuados ou adicione uma cor de destaque intencional.',
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
type: 'tip',
|
|
113
|
+
title: 'Mantenha uma Paleta Intencional',
|
|
114
|
+
html: 'Uma lista de cores maior não é automaticamente melhor. Comece com 4 a 16 cores, atribua uma função clara a cada cor e reserve os valores mais brilhantes para pontos focais ou destaques bem legíveis. O algoritmo da cor mais próxima preserva as posições dos pixels, mas não pode decidir quais cores devem estruturar a hierarquia visual do seu sprite.',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
type: 'title',
|
|
118
|
+
level: 2,
|
|
119
|
+
text: 'Lista de Verificação para Exportação de Pixel Art',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'diagnostic',
|
|
123
|
+
variant: 'info',
|
|
124
|
+
title: 'Antes de Importar o Arquivo PNG Reduzido',
|
|
125
|
+
html: 'Verifique o resultado em escala de 100 por cento e no tamanho final dentro do jogo, confirme se as bordas transparentes continuam limpas, verifique se as silhuetas importantes permanecem bem legíveis e conserve o arquivo original ao lado do exportado para poder ajustar a paleta sem ter que recomeçar do zero.',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'glossary',
|
|
129
|
+
items: [
|
|
130
|
+
{
|
|
131
|
+
term: 'Quantização de cor',
|
|
132
|
+
definition: 'O processo de redução de um amplo conjunto de cores originais para um conjunto menor e definido.',
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
term: 'Rampa de paleta',
|
|
136
|
+
definition: 'Uma sequência ordenada de tons escuros, médios e claros usada para sombrear uma superfície ou material.',
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
term: 'Paleta indexada',
|
|
140
|
+
definition: 'Uma tabela de cores compacta em que os pixels fazem referência a índices em uma lista compartilhada em vez de armazenar cores completas.',
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
faq: [
|
|
146
|
+
{
|
|
147
|
+
question: 'A ferramenta envia minhas imagens para um servidor?',
|
|
148
|
+
answer: 'Não. A imagem é decodificada em uma tela no seu navegador, mapeada localmente em JavaScript e exportada diretamente como PNG. A ferramenta não possui etapa de envio externo.',
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
question: 'Posso usar minha própria paleta personalizada?',
|
|
152
|
+
answer: 'Sim. Cole códigos hexadecimais de 6 ou 3 dígitos no campo Cores personalizadas, separados por vírgulas, espaços ou quebras de linha, e selecione Aplicar paleta.',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
question: 'O tamanho do meu sprite é alterado?',
|
|
156
|
+
answer: 'Não. O arquivo exportado mantém a largura, a altura, as posições dos pixels e os valores alfa originais quando a opção Preservar transparência está ativa.',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
question: 'Qual algoritmo é utilizado?',
|
|
160
|
+
answer: 'Cada pixel visível é atribuído à cor mais próxima na paleta selecionada usando a distância euclidiana ao quadrado no espaço RGB. É um método rápido, determinístico e fácil de previsualizar, que não aplica pontilhado (dithering) ou correção cromática perceptual Lab.',
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
howTo: [
|
|
164
|
+
{
|
|
165
|
+
name: 'Carregar um sprite',
|
|
166
|
+
text: 'Arraste um sprite ou folha de sprites PNG, JPEG ou WebP para a área de trabalho ou use o botão Escolher imagem.',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
name: 'Escolher uma paleta',
|
|
170
|
+
text: 'Selecione uma predefinição clássica ou insira suas próprias cores hexadecimais. O resultado é atualizado instantaneamente.',
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
name: 'Comparar e exportar',
|
|
174
|
+
text: 'Inspecione a tela original e a reduzida, ajuste a ampliação e baixe o resultado em formato PNG.',
|
|
175
|
+
},
|
|
176
|
+
],
|
|
177
|
+
schemas: [
|
|
178
|
+
{
|
|
179
|
+
'@context': 'https://schema.org',
|
|
180
|
+
'@type': 'SoftwareApplication',
|
|
181
|
+
name: 'Troca de Paleta para Pixel Art',
|
|
182
|
+
applicationCategory: 'DesignApplication',
|
|
183
|
+
operatingSystem: 'Any',
|
|
184
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
'@context': 'https://schema.org',
|
|
188
|
+
'@type': 'FAQPage',
|
|
189
|
+
mainEntity: [
|
|
190
|
+
{
|
|
191
|
+
'@type': 'Question',
|
|
192
|
+
name: 'A ferramenta envia minhas imagens para um servidor?',
|
|
193
|
+
acceptedAnswer: {
|
|
194
|
+
'@type': 'Answer',
|
|
195
|
+
text: 'Não. A imagem é processada localmente no navegador e exportada diretamente como PNG.',
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
'@type': 'Question',
|
|
200
|
+
name: 'Posso usar minha própria paleta personalizada?',
|
|
201
|
+
acceptedAnswer: {
|
|
202
|
+
'@type': 'Answer',
|
|
203
|
+
text: 'Sim. Insira códigos hexadecimais no campo Cores personalizadas e aplique a paleta.',
|
|
204
|
+
},
|
|
205
|
+
},
|
|
206
|
+
],
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
'@context': 'https://schema.org',
|
|
210
|
+
'@type': 'HowTo',
|
|
211
|
+
name: 'Como reduzir um sprite para uma paleta retro',
|
|
212
|
+
step: [
|
|
213
|
+
{ '@type': 'HowToStep', name: 'Carregar um sprite', text: 'Arraste um arquivo para a área de trabalho.' },
|
|
214
|
+
{ '@type': 'HowToStep', name: 'Escolher uma paleta', text: 'Selecione uma predefinição ou insira suas cores.' },
|
|
215
|
+
{ '@type': 'HowToStep', name: 'Comparar e exportar', text: 'Inspecione o resultado e baixe o arquivo PNG.' },
|
|
216
|
+
],
|
|
217
|
+
},
|
|
218
|
+
],
|
|
219
|
+
bibliography: [
|
|
220
|
+
{
|
|
221
|
+
name: 'MDN Canvas API',
|
|
222
|
+
url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
name: 'Lospec Palette List',
|
|
226
|
+
url: 'https://lospec.com/palette-list',
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
name: 'W3C Portable Network Graphics Specification',
|
|
230
|
+
url: 'https://www.w3.org/TR/png-3/',
|
|
231
|
+
},
|
|
232
|
+
],
|
|
233
|
+
};
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
2
|
+
import type { PixelArtPaletteSwapperUI } from '../ui';
|
|
3
|
+
|
|
4
|
+
export const content: ToolLocaleContent<PixelArtPaletteSwapperUI> = {
|
|
5
|
+
slug: 'konverter-palitry-pixel-art',
|
|
6
|
+
title: 'Конвертер Палитры для Пиксель Арта',
|
|
7
|
+
description: 'Уменьшайте палитру спрайтов и спрайтшитов до классических консольных цветов или собственных hex-значений прямо в браузере.',
|
|
8
|
+
ui: {
|
|
9
|
+
uploadTitle: 'Перетащите спрайт или спрайтшит',
|
|
10
|
+
uploadHint: 'Файлы PNG, JPEG или WebP обрабатываются локально',
|
|
11
|
+
chooseImage: 'Выбрать изображение',
|
|
12
|
+
replaceImage: 'Заменить изображение',
|
|
13
|
+
paletteTitle: 'Выберите палитру',
|
|
14
|
+
gameBoyPalette: 'Game Boy',
|
|
15
|
+
nesPalette: 'В стиле NES',
|
|
16
|
+
pico8Palette: 'PICO-8',
|
|
17
|
+
commodore64Palette: 'Commodore 64',
|
|
18
|
+
dawnBringerPalette: 'DawnBringer 16',
|
|
19
|
+
customPalette: 'Собственные цвета',
|
|
20
|
+
customPaletteHint: 'Разделяйте hex-коды запятыми, пробелами или переносами строк.',
|
|
21
|
+
applyCustomPalette: 'Применить палитру',
|
|
22
|
+
resetCustomPalette: 'Сбросить',
|
|
23
|
+
sourcePreview: 'Оригинал',
|
|
24
|
+
resultPreview: 'Ограниченный результат',
|
|
25
|
+
waitingForImage: 'Ожидание изображения',
|
|
26
|
+
uploadToPreview: 'Загрузите изображение для предпросмотра',
|
|
27
|
+
resultEmpty: 'Оригинальная и обработанная версии появятся рядом.',
|
|
28
|
+
downloadPng: 'Скачать PNG',
|
|
29
|
+
downloadDisabled: 'Загрузите изображение для экспорта.',
|
|
30
|
+
colorCount: 'Исходные цвета',
|
|
31
|
+
mappedCount: 'Использовано цветов',
|
|
32
|
+
imageSize: 'Размер изображения',
|
|
33
|
+
paletteCount: 'цветов в палитре',
|
|
34
|
+
preserveAlpha: 'Сохранять прозрачность',
|
|
35
|
+
zoomLabel: 'Масштаб',
|
|
36
|
+
processing: 'Пиксели обрабатываются',
|
|
37
|
+
invalidPalette: 'Добавьте хотя бы один корректный hex-код',
|
|
38
|
+
invalidImage: 'Выберите файл PNG, JPEG или WebP',
|
|
39
|
+
readyStatus: 'Готово',
|
|
40
|
+
dropActive: 'Отпустите для загрузки',
|
|
41
|
+
mappedSummary: 'Сконвертировано {source} исходных цветов в {mapped} цветов палитры',
|
|
42
|
+
},
|
|
43
|
+
seo: [
|
|
44
|
+
{
|
|
45
|
+
type: 'title',
|
|
46
|
+
level: 2,
|
|
47
|
+
text: 'Превратите Полноцветный Спрайт в Продуманную Ретро Палитру',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
type: 'paragraph',
|
|
51
|
+
html: 'Ограниченная палитра - это больше, чем просто техническое ограничение. Она дает спрайту узнаваемый цветовой язык, помогает элементам сцены выглядеть единым целым и передает визуальный характер конкретной ретро-консоли или классической платформы. Этот браузерный инструмент позволяет сравнивать исходное изображение с обработанным при экспериментировании с палитрами Game Boy, NES, PICO-8, Commodore 64, DawnBringer 16 и пользовательскими наборами.',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
type: 'title',
|
|
55
|
+
level: 2,
|
|
56
|
+
text: 'Как Работает Преобразование по Ближайшему Цвету',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'paragraph',
|
|
60
|
+
html: 'Инструмент считывает красный, зеленый и синий каналы каждого видимого пикселя и сравнивает этот цвет с каждым значением в выбранной палитре. Он выбирает элемент палитры с наименьшим квадратичным расстоянием RGB и записывает заменяющий цвет в новый буфер холста. Альфа-канал обрабатывается отдельно, благодаря чему прозрачные пиксели остаются прозрачными, а полупрозрачные края сохраняют свою исходную непрозрачность при включенном параметре Сохранять прозрачность.',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
type: 'comparative',
|
|
64
|
+
columns: 2,
|
|
65
|
+
items: [
|
|
66
|
+
{
|
|
67
|
+
title: 'Ограничение палитры',
|
|
68
|
+
description: 'Каждый исходный цвет заменяется ближайшим доступным образцом.',
|
|
69
|
+
points: [
|
|
70
|
+
'Быстро и предсказуемо для спрайтов, иконок, тайлов и элементов интерфейса',
|
|
71
|
+
'Точно сохраняет исходные размеры и координаты пикселей',
|
|
72
|
+
'Облегчает контроль и проверку заданного цветового бюджета',
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: 'Смена палитры (Palette Swapping)',
|
|
77
|
+
description: 'Одно и то же изображение можно перераспределить на другой тщательно подобранный набор цветов.',
|
|
78
|
+
points: [
|
|
79
|
+
'Удобно для альтернативных костюмов, смены биомов и состояний урона',
|
|
80
|
+
'Пользовательские списки hex-кодов позволяют точно следовать вашей арт-дирекции',
|
|
81
|
+
'Скачанный файл PNG сразу готов к повторному импорту в ваш графический редактор',
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
type: 'title',
|
|
88
|
+
level: 2,
|
|
89
|
+
text: 'Выбор Палитры для Пиксель Арта',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
type: 'table',
|
|
93
|
+
headers: ['Палитра', 'Цвета', 'Назначение', 'Особенности'],
|
|
94
|
+
rows: [
|
|
95
|
+
['Game Boy', '4', 'Монохромная стилистика портативной консоли и выразительная светотень', 'Узкий диапазон тонов может сливать близкие по цвету материалы'],
|
|
96
|
+
['В стиле NES', '16', 'Выразительные аркадные спрайты, персонажи и тайлы', 'Очень яркие тона могут перекрывать мелкие детали'],
|
|
97
|
+
['PICO-8', '16', 'Современный пиксель-арт с saturated акцентами', 'Насыщенные оттенки требуют продуманного контраста'],
|
|
98
|
+
['Commodore 64', '16', 'Мягкие ретро-сцены и эстетика классических компьютерных игр', 'Низкий контраст выигрывает от четких силуэтов'],
|
|
99
|
+
['DawnBringer 16', '16', 'Универсальная художественная палитра для пиксель-арта', 'Градационные рампы все еще требуют четкого направления света'],
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
type: 'title',
|
|
104
|
+
level: 2,
|
|
105
|
+
text: 'Практический Процесс Работы со Спрайтшитами',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
type: 'paragraph',
|
|
109
|
+
html: 'Начните с самого крупного исходного изображения, которое вам удобно редактировать, и загрузите экспортированный спрайт или спрайтшит сюда. Выберите пресет для задания стиля или вставьте пользовательский список из библиотеки палитр. Проверьте оба холста при большем увеличении на предмет утерянных черт лица, слившихся контуров или бликов. Если результат выглядит размытым, попробуйте палитру с более резкими шагами тонов или добавьте один акцентный цвет.',
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
type: 'tip',
|
|
113
|
+
title: 'Подходите к Палитре Осознанно',
|
|
114
|
+
html: 'Больший список цветов не означает автоматическое улучшение. Начните с 4-16 цветов, назначьте каждому цвету четкую роль и приберегите самые яркие значения для ключевых точек или читаемых бликов. Алгоритм ближайшего цвета сохраняет позиции пикселей, но не может решить, какие цвета должны выстраивать визуальную иерархию вашего спрайта.',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
type: 'title',
|
|
118
|
+
level: 2,
|
|
119
|
+
text: 'Чек-лист Экспорта Пиксель Арта',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'diagnostic',
|
|
123
|
+
variant: 'info',
|
|
124
|
+
title: 'Перед Импортом Обработанного Файла PNG',
|
|
125
|
+
html: 'Проверьте результат в масштабе 100 процентов и в итоговом игровом размере, убедитесь, что прозрачные края остаются чистыми, проверьте читаемость важных силуэтов и сохраните исходный файл рядом с экспортированным, чтобы иметь возможность скорректировать палитру без необходимости начинать заново.',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'glossary',
|
|
129
|
+
items: [
|
|
130
|
+
{
|
|
131
|
+
term: 'Квантование цвета',
|
|
132
|
+
definition: 'Процесс сокращения большого набора исходных цветов до более мелкого, четко определенного набора.',
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
term: 'Цветовая рампа',
|
|
136
|
+
definition: 'Упорядоченная последовательность темных, средних и светлых оттенков, используемая для построения объема.',
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
term: 'Индексированная палитра',
|
|
140
|
+
definition: 'Компактная таблица цветов, в которой пиксели ссылаются на индексы в общем списке вместо повторного сохранения полных значений.',
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
faq: [
|
|
146
|
+
{
|
|
147
|
+
question: 'Загружает ли инструмент мои изображения на сервер?',
|
|
148
|
+
answer: 'Нет. Изображение декодируется на холсте в вашем браузере, обрабатывается локально с помощью JavaScript и экспортируется напрямую в формат PNG. Утилита не содержит этапа загрузки на сервер.',
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
question: 'Могу ли я использовать собственную палитру?',
|
|
152
|
+
answer: 'Да. Вставьте 6-значные или 3-значные hex-коды в поле Собственные цвета, разделяя их запятыми, пробелами или переносами строк, а затем нажмите Применить палитру.',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
question: 'Изменяет ли инструмент размер спрайта или спрайтшита?',
|
|
156
|
+
answer: 'Нет. Итоговый файл сохраняет исходную ширину, высоту, координаты пикселей и значения альфа-канала при включенном параметре Сохранять прозрачность.',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
question: 'Какой алгоритм используется?',
|
|
160
|
+
answer: 'Каждый видимый пиксель сопоставляется с ближайшим цветом в выбранной палитре с использованием квадратичного евклидова расстояния в пространстве RGB. Это быстрый, детерминированный и наглядный метод, который не применяет дизеринг или перцептивную цветокоррекцию Lab.',
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
howTo: [
|
|
164
|
+
{
|
|
165
|
+
name: 'Загрузить спрайт',
|
|
166
|
+
text: 'Перетащите спрайт или спрайтшит PNG, JPEG или WebP в рабочую область или используйте кнопку Выбрать изображение.',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
name: 'Выбрать палитру',
|
|
170
|
+
text: 'Выберите классический пресет или введите собственные hex-коды. Результат обновится мгновенно при применении палитры.',
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
name: 'Сравнить и экспортировать',
|
|
174
|
+
text: 'Оцените оригинальный и обработанный холст, отрегулируйте масштаб предпросмотра и скачайте результат в формате PNG.',
|
|
175
|
+
},
|
|
176
|
+
],
|
|
177
|
+
schemas: [
|
|
178
|
+
{
|
|
179
|
+
'@context': 'https://schema.org',
|
|
180
|
+
'@type': 'SoftwareApplication',
|
|
181
|
+
name: 'Конвертер Палитры для Пиксель Арта',
|
|
182
|
+
applicationCategory: 'DesignApplication',
|
|
183
|
+
operatingSystem: 'Any',
|
|
184
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
'@context': 'https://schema.org',
|
|
188
|
+
'@type': 'FAQPage',
|
|
189
|
+
mainEntity: [
|
|
190
|
+
{
|
|
191
|
+
'@type': 'Question',
|
|
192
|
+
name: 'Загружает ли инструмент мои изображения на сервер?',
|
|
193
|
+
acceptedAnswer: {
|
|
194
|
+
'@type': 'Answer',
|
|
195
|
+
text: 'Нет. Изображение обрабатывается локально в браузере и экспортируется напрямую в PNG.',
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
'@type': 'Question',
|
|
200
|
+
name: 'Могу ли я использовать собственную палитру?',
|
|
201
|
+
acceptedAnswer: {
|
|
202
|
+
'@type': 'Answer',
|
|
203
|
+
text: 'Да. Введите hex-коды в поле Собственные цвета и нажмите Применить палитру.',
|
|
204
|
+
},
|
|
205
|
+
},
|
|
206
|
+
],
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
'@context': 'https://schema.org',
|
|
210
|
+
'@type': 'HowTo',
|
|
211
|
+
name: 'Как конвертировать спрайт в ретро палитру',
|
|
212
|
+
step: [
|
|
213
|
+
{ '@type': 'HowToStep', name: 'Загрузить спрайт', text: 'Перетащите файл в рабочую область.' },
|
|
214
|
+
{ '@type': 'HowToStep', name: 'Выбрать палитру', text: 'Выберите пресет или укажите свои цвета.' },
|
|
215
|
+
{ '@type': 'HowToStep', name: 'Сравнить и экспортировать', text: 'Оцените результат и скачайте PNG.' },
|
|
216
|
+
],
|
|
217
|
+
},
|
|
218
|
+
],
|
|
219
|
+
bibliography: [
|
|
220
|
+
{
|
|
221
|
+
name: 'MDN Canvas API',
|
|
222
|
+
url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
name: 'Lospec Palette List',
|
|
226
|
+
url: 'https://lospec.com/palette-list',
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
name: 'W3C Portable Network Graphics Specification',
|
|
230
|
+
url: 'https://www.w3.org/TR/png-3/',
|
|
231
|
+
},
|
|
232
|
+
],
|
|
233
|
+
};
|