@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: 'penukar-palet-piksel-art',
|
|
6
|
+
title: 'Penukar Palet Piksel Art',
|
|
7
|
+
description: 'Kurangi warna sprite dan spritesheet ke palet konsol klasik atau warna hex kustom langsung di peramban Anda.',
|
|
8
|
+
ui: {
|
|
9
|
+
uploadTitle: 'Tarik sprite atau spritesheet ke sini',
|
|
10
|
+
uploadHint: 'PNG, JPEG, atau WebP diproses di perangkat Anda',
|
|
11
|
+
chooseImage: 'Pilih gambar',
|
|
12
|
+
replaceImage: 'Ganti gambar',
|
|
13
|
+
paletteTitle: 'Pilih palet',
|
|
14
|
+
gameBoyPalette: 'Game Boy',
|
|
15
|
+
nesPalette: 'Inspirasi NES',
|
|
16
|
+
pico8Palette: 'PICO-8',
|
|
17
|
+
commodore64Palette: 'Commodore 64',
|
|
18
|
+
dawnBringerPalette: 'DawnBringer 16',
|
|
19
|
+
customPalette: 'Warna kustom',
|
|
20
|
+
customPaletteHint: 'Pisahkan kode hex dengan koma, spasi, atau baris baru.',
|
|
21
|
+
applyCustomPalette: 'Terapkan palet',
|
|
22
|
+
resetCustomPalette: 'Atur ulang',
|
|
23
|
+
sourcePreview: 'Asli',
|
|
24
|
+
resultPreview: 'Hasil pembatasan',
|
|
25
|
+
waitingForImage: 'Menunggu gambar',
|
|
26
|
+
uploadToPreview: 'Unggah gambar untuk melihat pratinjau',
|
|
27
|
+
resultEmpty: 'Versi asli dan hasil pembatasan palet akan tampil berdampingan.',
|
|
28
|
+
downloadPng: 'Unduh PNG',
|
|
29
|
+
downloadDisabled: 'Unggah gambar untuk mengaktifkan ekspor.',
|
|
30
|
+
colorCount: 'Warna asal',
|
|
31
|
+
mappedCount: 'Warna terpakai',
|
|
32
|
+
imageSize: 'Ukuran gambar',
|
|
33
|
+
paletteCount: 'warna palet',
|
|
34
|
+
preserveAlpha: 'Pertahankan transparansi',
|
|
35
|
+
zoomLabel: 'Zom',
|
|
36
|
+
processing: 'Memetakan piksel',
|
|
37
|
+
invalidPalette: 'Tambahkan setidaknya satu kode hex yang valid',
|
|
38
|
+
invalidImage: 'Pilih gambar PNG, JPEG, atau WebP',
|
|
39
|
+
readyStatus: 'Siap',
|
|
40
|
+
dropActive: 'Lepaskan untuk memuat',
|
|
41
|
+
mappedSummary: 'Memetakan {source} warna asal ke {mapped} warna palet',
|
|
42
|
+
},
|
|
43
|
+
seo: [
|
|
44
|
+
{
|
|
45
|
+
type: 'title',
|
|
46
|
+
level: 2,
|
|
47
|
+
text: 'Ubah Sprite Penuh Warna Menjadi Palet Retro',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
type: 'paragraph',
|
|
51
|
+
html: 'Palet warna terbatas memberikan identitas visual yang konsisten pada sprite Anda. Pembatas warna peramban ini memungkinkan Anda membandingkan gambar asli dengan versi tereduksi saat Anda bereksperimen dengan Game Boy, inspirasi NES, PICO-8, Commodore 64, DawnBringer 16, dan palet kustom.',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
type: 'title',
|
|
55
|
+
level: 2,
|
|
56
|
+
text: 'Cara Kerja Pemetaan Warna Terdekat',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'paragraph',
|
|
60
|
+
html: 'Alat ini membaca saluran merah, hijau, dan biru untuk setiap piksel yang terlihat dan membandingkan warna tersebut dengan setiap warna pada palet terpilih. Alat memilih entri palet dengan jarak RGB kuadrat terkecil, lalu menuliskan warna pengganti ke penyangga kanvas baru. Saluran alfa dijaga terpisah sehingga piksel transparan tetap transparan dan tepi semi-transparan mempertahankan opasitas aslinya saat opsi Pertahankan transparansi aktif.',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
type: 'comparative',
|
|
64
|
+
columns: 2,
|
|
65
|
+
items: [
|
|
66
|
+
{
|
|
67
|
+
title: 'Pembatasan Palet',
|
|
68
|
+
description: 'Setiap warna asal digantikan oleh contoh warna terdekat yang tersedia.',
|
|
69
|
+
points: [
|
|
70
|
+
'Cepat dan terprediksi untuk sprite, ikon, ubin, dan antarmuka',
|
|
71
|
+
'Menjaga dimensi asli dan posisi piksel secara tepat',
|
|
72
|
+
'Memudahkan peninjauan anggaran warna yang telah ditentukan',
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: 'Pertukaran Palet (Palette Swapping)',
|
|
77
|
+
description: 'Karya seni yang sama dapat dipetakan ulang ke himpunan warna terpilih lainnya.',
|
|
78
|
+
points: [
|
|
79
|
+
'Sangat baik untuk variasi kostum, bioma, dan kondisi kerusakan',
|
|
80
|
+
'Daftar hex kustom memungkinkan Penyesuaian dengan arahan seni Anda',
|
|
81
|
+
'Berkas PNG yang diunduh siap diimpor kembali ke editor Anda',
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
type: 'title',
|
|
88
|
+
level: 2,
|
|
89
|
+
text: 'Memilih Palet untuk Piksel Art',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
type: 'table',
|
|
93
|
+
headers: ['Palet', 'Warna', 'Kecocokan', 'Hal yang Perlu Diperhatikan'],
|
|
94
|
+
rows: [
|
|
95
|
+
['Game Boy', '4', 'Gaya monokrom konsol genggam dan studi nilai yang kuat', 'Rentang nilai yang sempit dapat menggabungkan bahan yang berdekatan'],
|
|
96
|
+
['Inspirasi NES', '16', 'Sprite arcade tebal, karakter, dan ubin', 'Warna yang sangat terang dapat mendominasi detail kecil'],
|
|
97
|
+
['PICO-8', '16', 'Piksel art modern dengan aksen jenuh', 'Rona yang sangat jenuh membutuhkan kontras yang disengaja'],
|
|
98
|
+
['Commodore 64', '16', 'Adegan retro lembut dan estetika game komputer', 'Kontras rendah diuntungkan oleh siluet yang jelas'],
|
|
99
|
+
['DawnBringer 16', '16', 'Palet serbaguna pilihan untuk piksel art umum', 'Gradasi warna tetap membutuhkan arah pencahayaan yang jelas'],
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
type: 'title',
|
|
104
|
+
level: 2,
|
|
105
|
+
text: 'Alur Kerja Praktis untuk Spritesheet',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
type: 'paragraph',
|
|
109
|
+
html: 'Mulailah dengan karya seni asal terbesar yang nyaman Anda edit, lalu unggah sprite atau spritesheet yang diekspor di sini. Pilih prasetel untuk menentukan arah visual, atau tempelkan daftar kustom dari pustaka palet. Periksa kedua kanvas pada pembesaran tinggi untuk melihat fitur wajah yang hilang, garis luar yang menyatu, dan sorotan yang tidak lagi terpisah dari warna dasarnya. Jika hasilnya terlihat buram, coba palet dengan langkah nilai yang lebih kuat atau tambahkan satu warna aksen ke daftar kustom.',
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
type: 'tip',
|
|
113
|
+
title: 'Jaga Palet Tetap Terarah',
|
|
114
|
+
html: 'Daftar warna yang lebih besar tidak secara otomatis lebih baik. Mulailah dengan 4 hingga 16 warna, tentukan tugas untuk setiap warna, dan cadangkan nilai terang untuk titik fokus atau sorotan yang jelas. Algoritma warna terdekat mempertahankan posisi piksel, tetapi tidak dapat menentukan warna mana yang harus membawa hierarki visual sprite Anda.',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
type: 'title',
|
|
118
|
+
level: 2,
|
|
119
|
+
text: 'Daftar Periksa Ekspor Piksel Art',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'diagnostic',
|
|
123
|
+
variant: 'info',
|
|
124
|
+
title: 'Sebelum Mengimpor PNG Terbatas',
|
|
125
|
+
html: 'Periksa hasil pada skala 100 persen dan pada skala akhir dalam game, pastikan tepi transparan tetap bersih, verifikasi bahwa siluet penting tetap terbaca, dan simpan berkas asal di samping hasil ekspor agar Anda dapat merevisi palet tanpa memulai dari awal.',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'glossary',
|
|
129
|
+
items: [
|
|
130
|
+
{
|
|
131
|
+
term: 'Kuantisasi Warna',
|
|
132
|
+
definition: 'Proses pengurangan himpunan warna asal yang besar ke himpunan warna terbatas yang ditentukan.',
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
term: 'Gradasi Palet',
|
|
136
|
+
definition: 'Urutan warna gelap, sedang, dan terang teratur yang digunakan untuk memberi bayangan pada satu permukaan.',
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
term: 'Palet Terindeks',
|
|
140
|
+
definition: 'Tabel warna ringkas di mana piksel merujuk pada entri dalam daftar alih-alih menyimpan nilai warna penuh.',
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
faq: [
|
|
146
|
+
{
|
|
147
|
+
question: 'Apakah penukar palet mengunggah gambar saya?',
|
|
148
|
+
answer: 'Tidak. Gambar didekodekan ke dalam kanvas di peramban Anda, dipetakan secara lokal dengan JavaScript, dan diekspor langsung sebagai PNG. Alat tidak memiliki langkah pengunggahan.',
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
question: 'Dapatkah saya menggunakan palet sendiri?',
|
|
152
|
+
answer: 'Ya. Tempelkan kode hex 6 digit atau 3 digit ke dalam bidang Warna kustom, dipisahkan oleh koma, spasi, atau baris baru, lalu pilih Terapkan palet.',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
question: 'Apakah alat ini mengubah ukuran sprite atau spritesheet saya?',
|
|
156
|
+
answer: 'Tidak. Hasil keluaran mempertahankan lebar asal, tinggi, posisi piksel, dan nilai alfa saat opsi Pertahankan transparansi aktif.',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
question: 'Algoritma apa yang digunakan?',
|
|
160
|
+
answer: 'Setiap piksel yang terlihat ditetapkan ke warna terdekat dalam palet yang dipilih menggunakan jarak Euklides kuadrat dalam ruang RGB. Ini cepat, deterministik, dan mudah dipratinjau, tetapi tidak menerapkan dithering atau koreksi warna Lab perseptual.',
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
howTo: [
|
|
164
|
+
{
|
|
165
|
+
name: 'Muat sprite',
|
|
166
|
+
text: 'Tarik sprite atau spritesheet berformat PNG, JPEG, atau WebP ke dalam area kerja, atau gunakan Pilih gambar.',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
name: 'Pilih palet',
|
|
170
|
+
text: 'Pilih prasetel klasik atau masukkan warna hex Anda sendiri. Hasilnya diperbarui seketika saat palet diterapkan.',
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
name: 'Bandingkan dan ekspor',
|
|
174
|
+
text: 'Periksa kanvas asli dan kanvas hasil pembatasan, sesuaikan pembesaran pratinjau, dan unduh hasilnya sebagai berkas PNG.',
|
|
175
|
+
},
|
|
176
|
+
],
|
|
177
|
+
schemas: [
|
|
178
|
+
{
|
|
179
|
+
'@context': 'https://schema.org',
|
|
180
|
+
'@type': 'SoftwareApplication',
|
|
181
|
+
name: 'Penukar Palet Piksel 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: 'Apakah penukar palet mengunggah gambar saya?',
|
|
193
|
+
acceptedAnswer: {
|
|
194
|
+
'@type': 'Answer',
|
|
195
|
+
text: 'Tidak. Gambar diproses secara lokal di peramban dan diekspor langsung sebagai PNG.',
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
'@type': 'Question',
|
|
200
|
+
name: 'Dapatkah saya menggunakan palet sendiri?',
|
|
201
|
+
acceptedAnswer: {
|
|
202
|
+
'@type': 'Answer',
|
|
203
|
+
text: 'Ya. Masukkan kode hex ke bidang Warna kustom dan terapkan palet.',
|
|
204
|
+
},
|
|
205
|
+
},
|
|
206
|
+
],
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
'@context': 'https://schema.org',
|
|
210
|
+
'@type': 'HowTo',
|
|
211
|
+
name: 'Cara membatasi warna sprite ke palet retro',
|
|
212
|
+
step: [
|
|
213
|
+
{ '@type': 'HowToStep', name: 'Muat sprite', text: 'Tarik gambar ke dalam area kerja.' },
|
|
214
|
+
{ '@type': 'HowToStep', name: 'Pilih palet', text: 'Pilih prasetel atau masukkan warna hex Anda.' },
|
|
215
|
+
{ '@type': 'HowToStep', name: 'Bandingkan dan ekspor', text: 'Periksa hasilnya dan unduh berkas 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: 'cambia-tavolozza-pixel-art',
|
|
6
|
+
title: 'Cambia Tavolozza per Pixel Art',
|
|
7
|
+
description: 'Riduci sprite e fogli di sprite alle tavolozze di console classiche o a una lista personalizzata di colori esadecimali nel browser.',
|
|
8
|
+
ui: {
|
|
9
|
+
uploadTitle: 'Trascina uno sprite o foglio di sprite',
|
|
10
|
+
uploadHint: 'PNG, JPEG o WebP elaborati direttamente sul tuo dispositivo',
|
|
11
|
+
chooseImage: 'Scegli immagine',
|
|
12
|
+
replaceImage: 'Sostituisci immagine',
|
|
13
|
+
paletteTitle: 'Scegli tavolozza',
|
|
14
|
+
gameBoyPalette: 'Game Boy',
|
|
15
|
+
nesPalette: 'Ispirata al NES',
|
|
16
|
+
pico8Palette: 'PICO-8',
|
|
17
|
+
commodore64Palette: 'Commodore 64',
|
|
18
|
+
dawnBringerPalette: 'DawnBringer 16',
|
|
19
|
+
customPalette: 'Colori personalizzati',
|
|
20
|
+
customPaletteHint: 'Separa i valori esadecimali con virgole, spazi o a capo.',
|
|
21
|
+
applyCustomPalette: 'Applica tavolozza',
|
|
22
|
+
resetCustomPalette: 'Ripristina',
|
|
23
|
+
sourcePreview: 'Originale',
|
|
24
|
+
resultPreview: 'Risultato ridotto',
|
|
25
|
+
waitingForImage: 'In attesa di un immagine',
|
|
26
|
+
uploadToPreview: 'Carica un immagine per la prima vista',
|
|
27
|
+
resultEmpty: 'Le versioni originale e ridotta appariranno affiancate.',
|
|
28
|
+
downloadPng: 'Scarica PNG',
|
|
29
|
+
downloadDisabled: 'Carica un immagine per abilitare l esportazione.',
|
|
30
|
+
colorCount: 'Colori originali',
|
|
31
|
+
mappedCount: 'Colori usati',
|
|
32
|
+
imageSize: 'Dimensione immagine',
|
|
33
|
+
paletteCount: 'colori tavolozza',
|
|
34
|
+
preserveAlpha: 'Conserva trasparenza',
|
|
35
|
+
zoomLabel: 'Zoom',
|
|
36
|
+
processing: 'Mappatura pixel in corso',
|
|
37
|
+
invalidPalette: 'Aggiungi almeno un colore esadecimale valido',
|
|
38
|
+
invalidImage: 'Scegli un immagine PNG, JPEG o WebP',
|
|
39
|
+
readyStatus: 'Pronto',
|
|
40
|
+
dropActive: 'Rilascia per caricare',
|
|
41
|
+
mappedSummary: 'Mappati {source} colori originali in {mapped} colori tavolozza',
|
|
42
|
+
},
|
|
43
|
+
seo: [
|
|
44
|
+
{
|
|
45
|
+
type: 'title',
|
|
46
|
+
level: 2,
|
|
47
|
+
text: 'Trasforma uno Sprite a Colori in una Tavolozza Retro Deliberata',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
type: 'paragraph',
|
|
51
|
+
html: 'Una tavolozza limitata è molto più di una restrizione tecnica. Dona a uno sprite un vocabolario cromatico coerente, fa percepire gli elementi di una scena come appartenenti al medesimo mondo e suggerisce il carattere visivo di una specifica console o architettura fantasy. Questo strumento di cambio tavolozza nel browser ti consente di confrontare l immagine originale con una versione ridotta mentre sperimenti con Game Boy, ispirate al NES, PICO-8, Commodore 64, DawnBringer 16 e tavolozze personalizzate.',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
type: 'title',
|
|
55
|
+
level: 2,
|
|
56
|
+
text: 'Come Funziona la Mappatura al Colore Più Vicino',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'paragraph',
|
|
60
|
+
html: 'Lo strumento legge i canali rosso, verde e blu di ogni pixel visibile e confronta quel colore con ciascun valore presente nella tavolozza selezionata. Sceglie l elemento della tavolozza con la minore distanza RGB al quadrato e scrive il colore sostitutivo in un nuovo buffer di canvas. Il canale alfa viene mantenuto separato, in modo che i pixel trasparenti rimangano tali e i bordi parzialmente trasparenti conservino la loro opacità originale quando l opzione Conserva trasparenza è attiva.',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
type: 'comparative',
|
|
64
|
+
columns: 2,
|
|
65
|
+
items: [
|
|
66
|
+
{
|
|
67
|
+
title: 'Riduzione tavolozza',
|
|
68
|
+
description: 'Ogni colore originale viene sostituito dal campione disponibile più vicino.',
|
|
69
|
+
points: [
|
|
70
|
+
'Veloce e prevedibile per sprite, icone, elementi di mappa e interfacce',
|
|
71
|
+
'Conserva accuratamente le dimensioni e le posizioni originali dei pixel',
|
|
72
|
+
'Rende semplice la verifica e il controllo di un budget cromatico stabilito',
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: 'Cambio tavolozza (Palette Swapping)',
|
|
77
|
+
description: 'La stessa illustrazione può essere rimappata su un altro insieme di colori scelto con cura.',
|
|
78
|
+
points: [
|
|
79
|
+
'Utile per costumi alternativi, variazioni di ambientazione e stati di danno',
|
|
80
|
+
'Le liste esadecimali personalizzate permettono di adeguarla alla propria direzione artistica',
|
|
81
|
+
'Il file PNG scaricato è subito pronto per essere reimportato nel tuo editor',
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
type: 'title',
|
|
88
|
+
level: 2,
|
|
89
|
+
text: 'Scegliere una Tavolozza per la Pixel Art',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
type: 'table',
|
|
93
|
+
headers: ['Tavolozza', 'Colori', 'Uso consigliato', 'Aspetti da valutare'],
|
|
94
|
+
rows: [
|
|
95
|
+
['Game Boy', '4', 'Stile monocromatico portatile e studi di valori ben definiti', 'La gamma ristretta di valori può fondere materiali con tonalità simili'],
|
|
96
|
+
['Ispirata al NES', '16', 'Sprite arcade ben marcati, personaggi e elementi di mappa', 'I colori molto luminosi possono sovrastare i dettagli più piccoli'],
|
|
97
|
+
['PICO-8', '16', 'Pixel art moderna con accenti cromatici saturi', 'Le tonalità molto sature richiedono un contrasto intenzionale'],
|
|
98
|
+
['Commodore 64', '16', 'Scene retro morbide ed estetica da computer classico', 'Il basso contrasto trae vantaggio da sagome ben definite'],
|
|
99
|
+
['DawnBringer 16', '16', 'Tavolozza versatile e selezionata a mano per pixel art generale', 'Le rampe di colore richiedono comunque una direzione della luce chiara'],
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
type: 'title',
|
|
104
|
+
level: 2,
|
|
105
|
+
text: 'Flusso di Lavoro Pratico per Fogli Sprite',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
type: 'paragraph',
|
|
109
|
+
html: 'Inizia con l immagine di origine più grande che riesci a modificare comodamente, quindi carica lo sprite o il foglio sprite esportato qui. Seleziona una preimpostazione per definire lo stile oppure incolla una lista personalizzata da una libreria di colori. Ispeziona le due tele a un livello di zoom più elevato per verificare se si sono persi dettagli del volto, contorni uniti o punti di luce che non si staccano più dal colore di base. Se il risultato appare poco definito, prova una tavolozza con stacchi di valore più marcati o aggiungi un colore di accento deliberato alla lista.',
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
type: 'tip',
|
|
113
|
+
title: 'Mantenere una Tavolozza Intenzionale',
|
|
114
|
+
html: 'Una lista di colori più ampia non è automaticamente migliore. Inizia con 4-16 colori, assegna a ogni colore un ruolo preciso e riserva i valori più luminosi per i punti focali o i punti di luce più importanti. L algoritmo del colore più vicino conserva la posizione dei pixel, ma non può decidere quali colori debbano guidare la gerarchia visiva del tuo sprite.',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
type: 'title',
|
|
118
|
+
level: 2,
|
|
119
|
+
text: 'Lista di Controllo per l Esportazione in Pixel Art',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'diagnostic',
|
|
123
|
+
variant: 'info',
|
|
124
|
+
title: 'Prima di Importare il File PNG Ridotto',
|
|
125
|
+
html: 'Controlla il risultato al 100% di scala e alle dimensioni finali all interno del gioco, conferma che i bordi trasparenti siano puliti, verifica che le sagome principali rimangano ben leggibili e conserva il file sorgente originale accanto al file esportato per poter modificare la tavolozza senza dover ricominciare da capo.',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'glossary',
|
|
129
|
+
items: [
|
|
130
|
+
{
|
|
131
|
+
term: 'Quantizzazione del colore',
|
|
132
|
+
definition: 'Il processo di riduzione di un ampio insieme di colori originali a un insieme più piccolo e definito.',
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
term: 'Rampa di colore',
|
|
136
|
+
definition: 'Una sequenza ordinata di toni scuri, medi e chiari utilizzata per ombreggiare una superficie o un materiale.',
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
term: 'Tavolozza indicizzata',
|
|
140
|
+
definition: 'Una tabella di colori compatta in cui i pixel fanno riferimento a indici di una lista condivisa anziché memorizzare ogni volta i colori completi.',
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
faq: [
|
|
146
|
+
{
|
|
147
|
+
question: 'Lo strumento carica le mie immagini su un server?',
|
|
148
|
+
answer: 'No. L immagine viene decodificata in una tela nel tuo browser, mappata localmente in JavaScript ed esportata direttamente come PNG. Lo strumento non richiede alcun passaggio di caricamento esterno.',
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
question: 'Posso usare una mia tavolozza personalizzata?',
|
|
152
|
+
answer: 'Sì. Incolla valori esadecimali a 6 o 3 cifre nel campo Colori personalizzati, separati da virgole, spazi o a capo, quindi seleziona Applica tavolozza.',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
question: 'La dimensione del mio sprite viene modificata?',
|
|
156
|
+
answer: 'No. Il file scaricato mantiene la larghezza, l altezza, le posizioni dei pixel e i valori alfa originali quando l opzione Conserva trasparenza è attiva.',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
question: 'Quale algoritmo viene utilizzato?',
|
|
160
|
+
answer: 'Ogni pixel visibile viene assegnato al colore più vicino nella tavolozza selezionata utilizzando la distanza euclidea al quadrato nello spazio RGB. È un metodo rapido, deterministico e facile da previsualizzare, che non applica dithering o correzione cromatica percettiva Lab.',
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
howTo: [
|
|
164
|
+
{
|
|
165
|
+
name: 'Carica uno sprite',
|
|
166
|
+
text: 'Trascina uno sprite o foglio sprite PNG, JPEG o WebP nell area di lavoro, oppure usa il pulsante Scegli immagine.',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
name: 'Scegli una tavolozza',
|
|
170
|
+
text: 'Seleziona una preimpostazione classica o inserisci i tuoi colori esadecimali. Il risultato si aggiorna immediatamente.',
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
name: 'Confronta ed esporta',
|
|
174
|
+
text: 'Ispeziona la tela originale e quella con la tavolozza ridotta, regola lo zoom e scarica il risultato in formato PNG.',
|
|
175
|
+
},
|
|
176
|
+
],
|
|
177
|
+
schemas: [
|
|
178
|
+
{
|
|
179
|
+
'@context': 'https://schema.org',
|
|
180
|
+
'@type': 'SoftwareApplication',
|
|
181
|
+
name: 'Cambia Tavolozza per 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: 'Lo strumento carica le mie immagini su un server?',
|
|
193
|
+
acceptedAnswer: {
|
|
194
|
+
'@type': 'Answer',
|
|
195
|
+
text: 'No. L immagine viene elaborata localmente nel browser ed esportata direttamente in PNG.',
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
'@type': 'Question',
|
|
200
|
+
name: 'Posso usare una mia tavolozza personalizzata?',
|
|
201
|
+
acceptedAnswer: {
|
|
202
|
+
'@type': 'Answer',
|
|
203
|
+
text: 'Sì. Inserisci i codici esadecimali nel campo Colori personalizzati e applica la tavolozza.',
|
|
204
|
+
},
|
|
205
|
+
},
|
|
206
|
+
],
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
'@context': 'https://schema.org',
|
|
210
|
+
'@type': 'HowTo',
|
|
211
|
+
name: 'Come ridurre uno sprite a una tavolozza retro',
|
|
212
|
+
step: [
|
|
213
|
+
{ '@type': 'HowToStep', name: 'Carica uno sprite', text: 'Trascina un file nell area di lavoro.' },
|
|
214
|
+
{ '@type': 'HowToStep', name: 'Scegli una tavolozza', text: 'Seleziona una preimpostazione o inserisci i tuoi colori.' },
|
|
215
|
+
{ '@type': 'HowToStep', name: 'Confronta ed esporta', text: 'Ispeziona il risultato e scarica il file 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
|
+
};
|