@jjlmoya/utils-games-development 1.55.0 → 1.57.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 +5 -1
- package/src/index.ts +1 -0
- package/src/tests/contrast_legibility.test.ts +56 -10
- package/src/tests/locale_completeness.test.ts +2 -2
- package/src/tests/runtime_registry.test.ts +27 -0
- package/src/tests/tool_validation.test.ts +2 -2
- package/src/tool/localizationSanitizer/localization-sanitizer.css +4 -2
- package/src/tool/pixelArtPaletteSwapper/app-client.ts +234 -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 +201 -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/client.ts +9 -2
- package/src/tool/retroSfxGenerator/logic.test.ts +21 -0
- package/src/tool/retroSfxGenerator/logic.ts +1 -1
- package/src/tool/retroSfxGenerator/retro-sfx-generator.css +10 -4
- package/src/tools.ts +2 -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: 'konwerter-palety-pixel-art',
|
|
6
|
+
title: 'Konwerter Palety dla Pixel Artu',
|
|
7
|
+
description: 'Redukuj kolory spritów i arkuszy grafik do klasycznych palet konsolowych lub własnej listy kolorów hex bezpośrednio w przeglądarce.',
|
|
8
|
+
ui: {
|
|
9
|
+
uploadTitle: 'Przeciągnij sprite lub arkusz grafik',
|
|
10
|
+
uploadHint: 'Pliki PNG, JPEG lub WebP są przetwarzane na Twoim urządzeniu',
|
|
11
|
+
chooseImage: 'Wybierz obraz',
|
|
12
|
+
replaceImage: 'Zamień obraz',
|
|
13
|
+
paletteTitle: 'Wybierz paletę',
|
|
14
|
+
gameBoyPalette: 'Game Boy',
|
|
15
|
+
nesPalette: 'Inspirowana NES',
|
|
16
|
+
pico8Palette: 'PICO-8',
|
|
17
|
+
commodore64Palette: 'Commodore 64',
|
|
18
|
+
dawnBringerPalette: 'DawnBringer 16',
|
|
19
|
+
customPalette: 'Własne kolory',
|
|
20
|
+
customPaletteHint: 'Rozdziel wartości hex przecinkami, spacjami lub nowymi liniami.',
|
|
21
|
+
applyCustomPalette: 'Zastosuj paletę',
|
|
22
|
+
resetCustomPalette: 'Zresetuj',
|
|
23
|
+
sourcePreview: 'Oryginał',
|
|
24
|
+
resultPreview: 'Zredukowany wynik',
|
|
25
|
+
waitingForImage: 'Oczekiwanie na obraz',
|
|
26
|
+
uploadToPreview: 'Prześlij obraz, aby zobaczyć podgląd',
|
|
27
|
+
resultEmpty: 'Wersja oryginalna i zredukowana pojawią się obok siebie.',
|
|
28
|
+
downloadPng: 'Pobierz PNG',
|
|
29
|
+
downloadDisabled: 'Prześlij obraz, aby odblokować eksport.',
|
|
30
|
+
colorCount: 'Kolory źródłowe',
|
|
31
|
+
mappedCount: 'Użyte kolory',
|
|
32
|
+
imageSize: 'Rozmiar obrazu',
|
|
33
|
+
paletteCount: 'kolorów w palecie',
|
|
34
|
+
preserveAlpha: 'Zachowaj przezroczystość',
|
|
35
|
+
zoomLabel: 'Powiększenie',
|
|
36
|
+
processing: 'Mapowanie pikseli',
|
|
37
|
+
invalidPalette: 'Dodaj przynajmniej jeden poprawny kod hex',
|
|
38
|
+
invalidImage: 'Wybierz obraz w formacie PNG, JPEG lub WebP',
|
|
39
|
+
readyStatus: 'Gotowe',
|
|
40
|
+
dropActive: 'Upuść, aby wczytać',
|
|
41
|
+
mappedSummary: 'Zmapowano {source} kolorów źródłowych na {mapped} kolorów palety',
|
|
42
|
+
},
|
|
43
|
+
seo: [
|
|
44
|
+
{
|
|
45
|
+
type: 'title',
|
|
46
|
+
level: 2,
|
|
47
|
+
text: 'Zamień Pełnokolorowy Sprite w Przemyślaną Retropaletę',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
type: 'paragraph',
|
|
51
|
+
html: 'Ograniczona paleta to coś więcej niż tylko techniczne ograniczenie. Nadaje spritowi spójną język kolorów, sprawia, że elementy sceny pasują do siebie i przywołuje wizualny charakter konkretnej konsoli lub klasycznego sprzętu. Ten konwerter palet w przeglądarce pozwala porównać obraz źródłowy z wersją zredukowaną podczas eksperymentowania z paletami Game Boy, inspirowanymi NES, PICO-8, Commodore 64, DawnBringer 16 oraz własnymi zestawami kolorów.',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
type: 'title',
|
|
55
|
+
level: 2,
|
|
56
|
+
text: 'Jak Działa Mapowanie do Najbliższego Koloru',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'paragraph',
|
|
60
|
+
html: 'Narzędzie odczytuje kanały czerwony, zielony i niebieski dla każdego widocznego piksela i porównuje ten kolor z każdym kolorem w wybranej palecie. Wybiera element palety o najmniejszej kwadratowej odległości RGB, a następnie zapisuje zastępczy kolor w nowym buforze płótna. Kanał alfa jest traktowany oddzielnie, dzięki czemu przezroczyste piksele pozostają przezroczyste, a półprzezroczyste krawędzie zachowują swoją oryginalną przezroczystość, gdy włączona jest opcja Zachowaj przezroczystość.',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
type: 'comparative',
|
|
64
|
+
columns: 2,
|
|
65
|
+
items: [
|
|
66
|
+
{
|
|
67
|
+
title: 'Redukcja palety',
|
|
68
|
+
description: 'Każdy kolor źródłowy jest zastępowany najbliższą dostępną próbką barwy.',
|
|
69
|
+
points: [
|
|
70
|
+
'Szybkie i przewidywalne dla spritów, ikon, kafli i elementów interfejsu',
|
|
71
|
+
'Zachowuje dokładnie oryginalne wymiary i pozycje pikseli',
|
|
72
|
+
'Ułatwia kontrolę i przegląd ustalonego budżetu kolorów',
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: 'Palette Swapping',
|
|
77
|
+
description: 'Ta sama grafika może zostać zmapowana na inny, starannie dobrany zestaw kolorów.',
|
|
78
|
+
points: [
|
|
79
|
+
'Przydatne dla alternatywnych strojów, biomów i stanów uszkodzeń',
|
|
80
|
+
'Niestandardowe listy hex pozwalają dopasować się do własnej wizji artystycznej',
|
|
81
|
+
'Pobrany plik PNG jest od razu gotowy do zaimportowania w Twoim edytorze',
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
type: 'title',
|
|
88
|
+
level: 2,
|
|
89
|
+
text: 'Wybór Palety dla Pixel Artu',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
type: 'table',
|
|
93
|
+
headers: ['Paleta', 'Kolory', 'Zastosowanie', 'Na co uważać'],
|
|
94
|
+
rows: [
|
|
95
|
+
['Game Boy', '4', 'Monochromatyczny klimat konsoli przenośnej i wyraźne studia wartości', 'Mały zakres wartości może zlewać blisko położone materiały'],
|
|
96
|
+
['Inspirowana NES', '16', 'Wyraziste grafiki arcade, postacie i kafle', 'Bardzo jasne kolory mogą przytłaczać drobne detale'],
|
|
97
|
+
['PICO-8', '16', 'Nowoczesny pixel art z nasyconymi akcentami kolorystycznymi', 'Silnie nasycone odcienie wymagają przemyślanego kontrastu'],
|
|
98
|
+
['Commodore 64', '16', 'Stonowane sceny retro i estetyka gier komputerowych', 'Niski kontrast zyskuje przy zastosowaniu wyrazistych sylwetek'],
|
|
99
|
+
['DawnBringer 16', '16', 'Wszechstronna, starannie dobrana paleta do ogólnego pixel artu', 'Rampy kolorów wciąż wymagają świadomego kierunku światła'],
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
type: 'title',
|
|
104
|
+
level: 2,
|
|
105
|
+
text: 'Praktyczny Przebieg Pracy z Arkuszami Grafik',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
type: 'paragraph',
|
|
109
|
+
html: 'Zacznij od największej grafiki źródłowej, jaką możesz wygodnie edytować, a następnie prześlij wyeksportowany sprite lub arkusz grafik tutaj. Wybierz gotowy zestaw, aby ustalić kierunek, lub wklej niestandardową listę z biblioteki palet. Sprawdź oba płótna przy większym powiększeniu pod kątem utraconych rysów twarzy, połączonych konturów i refleksów, które nie odcinają się już od koloru bazowego. Jeśli wynik wydaje się nieczytelny, wypróbuj paletę z wyraźniejszymi skokami wartości lub dodaj jeden przemyślany kolor akcentujący do listy.',
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
type: 'tip',
|
|
113
|
+
title: 'Świadomie Dobieraj Paletę',
|
|
114
|
+
html: 'Większa lista kolorów nie jest automatycznie lepsza. Zacznij od 4 do 16 kolorów, przypisz każdemu kolorowi określone zadanie i zarezerwuj najjaśniejsze wartości dla punktów centralnych lub czytelnych refleksów. Algorytm najbliższego koloru zachowuje pozycje pikseli, ale nie decyduje o tym, które kolory powinny budować hierarchię wizualną Twojego sprita.',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
type: 'title',
|
|
118
|
+
level: 2,
|
|
119
|
+
text: 'Lista Kontrolna Eksportu Pixel Artu',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'diagnostic',
|
|
123
|
+
variant: 'info',
|
|
124
|
+
title: 'Przed Zaimportowaniem Zredukowanego Pliku PNG',
|
|
125
|
+
html: 'Sprawdź wynik w skali 100 procent oraz w ostatecznej skali w grze, upewnij się, że przezroczyste krawędzie pozostają czyste, zweryfikuj czytelność ważnych sylwetek i zachowaj oryginalny plik źródłowy obok wyeksportowanego, aby móc dostosować paletę bez zaczynania od zera.',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'glossary',
|
|
129
|
+
items: [
|
|
130
|
+
{
|
|
131
|
+
term: 'Kwantyzacja koloru',
|
|
132
|
+
definition: 'Proces redukcji dużego zestawu kolorów źródłowych do mniejszego, zdefiniowanego zbioru.',
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
term: 'Rampa kolorów',
|
|
136
|
+
definition: 'Uporządkowany ciąg ciemnych, średnich i jasnych odcieni używany do cieniowania powierzchni.',
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
term: 'Paleta indeksowana',
|
|
140
|
+
definition: 'Kompaktowa tabela kolorów, w której piksele odwołują się do wpisów na wspólnej liście zamiast wielokrotnie zapisywać pełne kolory.',
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
faq: [
|
|
146
|
+
{
|
|
147
|
+
question: 'Czy konwerter palet przesyła moje obrazy na serwer?',
|
|
148
|
+
answer: 'Nie. Obraz jest dekodowany na płótnie w Twojej przeglądarce, mapowany lokalnie w JavaScript i eksportowany bezpośrednio jako PNG. Narzędzie nie posiada kroku przesyłania na serwer.',
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
question: 'Czy mogę użyć własnej palety?',
|
|
152
|
+
answer: 'Tak. Wklej 6-cyfrowe lub 3-cyfrowe kody hex w polu Własne kolory, rozdzielając je przecinkami, spacjami lub nowymi liniami, a następnie wybierz Zastosuj paletę.',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
question: 'Czy narzędzie zmienia rozmiar mojego sprita lub arkusza grafik?',
|
|
156
|
+
answer: 'Nie. Plik wynikowy zachowuje oryginalną szerokość, wysokość, pozycje pikseli i wartości alfa, gdy opcja Zachowaj przezroczystość jest włączona.',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
question: 'Jaki algorytm jest używany?',
|
|
160
|
+
answer: 'Każdy widoczny piksel jest przypisywany do najbliższego koloru w wybranej palecie przy użyciu kwadratowej odległości euklidesowej w przestrzeni RGB. Jest to metoda szybka, deterministyczna i łatwa w podglądzie, ale nie stosuje ditheringu ani korekcji perceptualnej Lab.',
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
howTo: [
|
|
164
|
+
{
|
|
165
|
+
name: 'Załaduj sprite',
|
|
166
|
+
text: 'Przeciągnij sprite lub arkusz grafik w formacie PNG, JPEG lub WebP do obszaru roboczego lub użyj przycisku Wybierz obraz.',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
name: 'Wybierz paletę',
|
|
170
|
+
text: 'Wybierz klasyczny zestaw lub wprowadź własne kolory hex. Wynik aktualizuje się natychmiast po zastosowaniu palety.',
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
name: 'Porównaj i wyeksportuj',
|
|
174
|
+
text: 'Sprawdź płótno oryginalne i zredukowane, dostosuj powiększenie podglądu i pobierz wynik jako plik PNG.',
|
|
175
|
+
},
|
|
176
|
+
],
|
|
177
|
+
schemas: [
|
|
178
|
+
{
|
|
179
|
+
'@context': 'https://schema.org',
|
|
180
|
+
'@type': 'SoftwareApplication',
|
|
181
|
+
name: 'Konwerter Palety dla Pixel Artu',
|
|
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: 'Czy konwerter palet przesyła moje obrazy na serwer?',
|
|
193
|
+
acceptedAnswer: {
|
|
194
|
+
'@type': 'Answer',
|
|
195
|
+
text: 'Nie. Obraz jest przetwarzany lokalnie w przeglądarce i eksportowany bezpośrednio jako PNG.',
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
'@type': 'Question',
|
|
200
|
+
name: 'Czy mogę użyć własnej palety?',
|
|
201
|
+
acceptedAnswer: {
|
|
202
|
+
'@type': 'Answer',
|
|
203
|
+
text: 'Tak. Wklej kody hex w polu Własne kolory i kliknij Zastosuj paletę.',
|
|
204
|
+
},
|
|
205
|
+
},
|
|
206
|
+
],
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
'@context': 'https://schema.org',
|
|
210
|
+
'@type': 'HowTo',
|
|
211
|
+
name: 'Jak zredukować sprite do retropalety',
|
|
212
|
+
step: [
|
|
213
|
+
{ '@type': 'HowToStep', name: 'Załaduj sprite', text: 'Przeciągnij plik do obszaru roboczego.' },
|
|
214
|
+
{ '@type': 'HowToStep', name: 'Wybierz paletę', text: 'Wybierz zestaw lub wprowadź kolory hex.' },
|
|
215
|
+
{ '@type': 'HowToStep', name: 'Porównaj i wyeksportuj', text: 'Sprawdź wynik i pobierz plik 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: '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
|
+
};
|