@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: 'changeur-palette-pixel-art',
|
|
6
|
+
title: 'Changeur de Palette Pixel Art',
|
|
7
|
+
description: 'Réduisez vos sprites et feuilles de sprites aux palettes de consoles classiques ou à un ensemble personnalisé de couleurs hexadécimales directement dans votre navigateur.',
|
|
8
|
+
ui: {
|
|
9
|
+
uploadTitle: 'Déposez un sprite ou une feuille de sprites',
|
|
10
|
+
uploadHint: 'PNG, JPEG ou WebP traités directement sur votre appareil',
|
|
11
|
+
chooseImage: 'Choisir une image',
|
|
12
|
+
replaceImage: 'Remplacer l image',
|
|
13
|
+
paletteTitle: 'Choisir une palette',
|
|
14
|
+
gameBoyPalette: 'Game Boy',
|
|
15
|
+
nesPalette: 'Inspirée de la NES',
|
|
16
|
+
pico8Palette: 'PICO-8',
|
|
17
|
+
commodore64Palette: 'Commodore 64',
|
|
18
|
+
dawnBringerPalette: 'DawnBringer 16',
|
|
19
|
+
customPalette: 'Couleurs personnalisées',
|
|
20
|
+
customPaletteHint: 'Séparez les valeurs hexadécimales par des virgules, espaces ou sauts de ligne.',
|
|
21
|
+
applyCustomPalette: 'Appliquer la palette',
|
|
22
|
+
resetCustomPalette: 'Réinitialiser',
|
|
23
|
+
sourcePreview: 'Original',
|
|
24
|
+
resultPreview: 'Résultat réduit',
|
|
25
|
+
waitingForImage: 'En attente d une image',
|
|
26
|
+
uploadToPreview: 'Importez une image pour l afficher',
|
|
27
|
+
resultEmpty: 'Vos versions originale et réduite s afficheront côte à côte.',
|
|
28
|
+
downloadPng: 'Télécharger le PNG',
|
|
29
|
+
downloadDisabled: 'Importez une image pour activer l exportation.',
|
|
30
|
+
colorCount: 'Couleurs d origine',
|
|
31
|
+
mappedCount: 'Couleurs utilisées',
|
|
32
|
+
imageSize: 'Taille de l image',
|
|
33
|
+
paletteCount: 'couleurs de palette',
|
|
34
|
+
preserveAlpha: 'Conserver la transparence',
|
|
35
|
+
zoomLabel: 'Zoom',
|
|
36
|
+
processing: 'Conversion des pixels',
|
|
37
|
+
invalidPalette: 'Ajoutez au moins une couleur hexadécimale valide',
|
|
38
|
+
invalidImage: 'Choisissez une image PNG, JPEG ou WebP',
|
|
39
|
+
readyStatus: 'Prêt',
|
|
40
|
+
dropActive: 'Relâchez pour charger',
|
|
41
|
+
mappedSummary: '{source} couleurs d origine réduites à {mapped} couleurs de palette',
|
|
42
|
+
},
|
|
43
|
+
seo: [
|
|
44
|
+
{
|
|
45
|
+
type: 'title',
|
|
46
|
+
level: 2,
|
|
47
|
+
text: 'Transformez un Sprite Couleur en une Palette Retro Délibérée',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
type: 'paragraph',
|
|
51
|
+
html: 'Une palette limitée est bien plus qu une contrainte technique. Elle donne au sprite un vocabulaire de couleurs cohérent, permet aux éléments d une scène de former un tout harmonieux et évoque le caractère visuel d une console ou d une plate-forme rétro spécifique. Ce sélecteur de palette en ligne vous permet de comparer l image d origine avec sa version réduite tout en expérimentant les palettes Game Boy, NES, PICO-8, Commodore 64, DawnBringer 16 ou vos propres sélections.',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
type: 'title',
|
|
55
|
+
level: 2,
|
|
56
|
+
text: 'Fonctionnement de la Réduction par Couleur la Plus Proche',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
type: 'paragraph',
|
|
60
|
+
html: 'L outil analyse les canaux rouge, vert et bleu de chaque pixel visible et compare cette couleur avec chaque entrée de la palette sélectionnée. Il choisit la teinte ayant la plus petite distance RGB au carré, puis écrit la couleur de remplacement dans un nouveau tampon de canevas. Le canal alpha est traité séparément afin que les pixels transparents le restent et que les bords semi-transparents conservent leur opacité d origine lorsque l option Conserver la transparence est activée.',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
type: 'comparative',
|
|
64
|
+
columns: 2,
|
|
65
|
+
items: [
|
|
66
|
+
{
|
|
67
|
+
title: 'Réduction de palette',
|
|
68
|
+
description: 'Chaque couleur d origine est remplacée par la nuance disponible la plus proche.',
|
|
69
|
+
points: [
|
|
70
|
+
'Rapide et prévisible pour les sprites, icônes, tuiles et éléments d interface',
|
|
71
|
+
'Conserve scrupuleusement les dimensions et les positions des pixels d origine',
|
|
72
|
+
'Facilite le contrôle et la révision d un budget de couleurs prédéfini',
|
|
73
|
+
],
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: 'Palette Swapping',
|
|
77
|
+
description: 'Le même visuel peut être réattribué à un autre ensemble de couleurs soigneusement choisi.',
|
|
78
|
+
points: [
|
|
79
|
+
'Utile pour créer des tenues alternatives, des variations de biomes ou des états de dégâts',
|
|
80
|
+
'Les listes hex personnalisées s adaptent parfaitement à votre propre direction artistique',
|
|
81
|
+
'Le PNG téléchargé est immédiatement prêt à être réimporté dans votre éditeur',
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
type: 'title',
|
|
88
|
+
level: 2,
|
|
89
|
+
text: 'Choisir une Palette pour le Pixel Art',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
type: 'table',
|
|
93
|
+
headers: ['Palette', 'Couleurs', 'Utilisation recommandée', 'Points d attention'],
|
|
94
|
+
rows: [
|
|
95
|
+
['Game Boy', '4', 'Style monochrome console portable et études de valeurs', 'La faible plage de valeurs peut fusionner des matériaux proches'],
|
|
96
|
+
['Inspirée de la NES', '16', 'Sprites arcade expressifs, personnages et tuiles', 'Les couleurs très vives peuvent écraser les détails fins'],
|
|
97
|
+
['PICO-8', '16', 'Pixel art moderne avec des accents saturés', 'Les teintes très saturées nécessitent un contraste délibéré'],
|
|
98
|
+
['Commodore 64', '16', 'Scènes rétro douces et esthétique micro-ordinateur', 'Le faible contraste gagne à utiliser des silhouettes claires'],
|
|
99
|
+
['DawnBringer 16', '16', 'Palette polyvalente sélectionnée pour le pixel art général', 'Les rampes de couleurs nécessitent toujours une direction de lumière claire'],
|
|
100
|
+
],
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
type: 'title',
|
|
104
|
+
level: 2,
|
|
105
|
+
text: 'Flux de Travail Pratique pour Feuilles de Sprites',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
type: 'paragraph',
|
|
109
|
+
html: 'Commencez par le visuel le plus grand que vous pouvez éditer confortablement, puis importez ici le sprite ou la feuille de sprites exportée. Choisissez un préréglage pour définir une direction visuelle ou collez une liste hex personnalisée. Inspectez les deux canevas à un niveau de zoom élevé pour repérer la perte de traits du visage, les contours fusionnés ou les éclats de lumière qui ne se détachent plus. Si le résultat manque de clarté, essayez une palette avec des écarts de valeur plus marqués ou ajoutez une couleur d accentuation ciblée.',
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
type: 'tip',
|
|
113
|
+
title: 'Garder une Palette Intentionnelle',
|
|
114
|
+
html: 'Une liste de couleurs plus vaste n est pas automatiquement meilleure. Commencez avec 4 à 16 couleurs, attribuez un rôle précis à chaque teinte et réservez les valeurs les plus lumineuses aux points d intérêt ou aux reflets lisibles. L algorithme de la couleur la plus proche préserve la position des pixels, mais ne peut pas décider des couleurs qui doivent structurer la hiérarchie visuelle de votre sprite.',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
type: 'title',
|
|
118
|
+
level: 2,
|
|
119
|
+
text: 'Liste de Contrôle pour l Exportation en Pixel Art',
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
type: 'diagnostic',
|
|
123
|
+
variant: 'info',
|
|
124
|
+
title: 'Avant d Importer le Fichier PNG Réduit',
|
|
125
|
+
html: 'Vérifiez le résultat à l échelle 100% ainsi qu à l échelle finale du jeu, confirmez que les contours transparents restent nets, assurez-vous de la lisibilité des silhouettes importantes et conservez le fichier source d origine à côté de l export pour ajuster la palette sans repartir de zéro.',
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
type: 'glossary',
|
|
129
|
+
items: [
|
|
130
|
+
{
|
|
131
|
+
term: 'Quantification de couleur',
|
|
132
|
+
definition: 'Le processus consistant à réduire un large ensemble de couleurs d origine à un jeu restreint et défini.',
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
term: 'Rampe de couleur',
|
|
136
|
+
definition: 'Une suite dégradée et ordonnée de teintes sombres, moyennes et claires servant à ombrer un volume ou une surface.',
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
term: 'Palette indexée',
|
|
140
|
+
definition: 'Une table de couleurs compacte dans laquelle les pixels font référence aux entrées d une liste partagée au lieu de stocker des valeurs complètes.',
|
|
141
|
+
},
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
faq: [
|
|
146
|
+
{
|
|
147
|
+
question: 'Mes images sont-elles envoyées sur un serveur ?',
|
|
148
|
+
answer: 'Non. L image est décodée dans votre navigateur sur un canevas, convertie localement en JavaScript et exportée directement en PNG. L outil ne comporte aucune étape de téléversement.',
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
question: 'Puis-je utiliser ma propre palette ?',
|
|
152
|
+
answer: 'Oui. Collez des codes hexadécimaux à 6 ou 3 chiffres dans le champ Couleurs personnalisées, séparés par des virgules, des espaces ou des sauts de ligne, puis choisissez Appliquer la palette.',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
question: 'La taille de mon sprite est-elle modifiée ?',
|
|
156
|
+
answer: 'Non. Le fichier généré conserve la largeur, la hauteur, la position des pixels et les valeurs alpha d origine lorsque l option Conserver la transparence est active.',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
question: 'Quel algorithme est utilisé ?',
|
|
160
|
+
answer: 'Chaque pixel visible est attribué à la couleur la plus proche de la palette sélectionnée selon la distance euclidienne au carré dans l espace RGB. C est une méthode rapide, déterministe et facile à prévisualiser, qui n applique aucun tramage ni correction perceptuelle Lab.',
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
howTo: [
|
|
164
|
+
{
|
|
165
|
+
name: 'Charger un sprite',
|
|
166
|
+
text: 'Déposez un sprite ou une feuille de sprites au format PNG, JPEG ou WebP dans l espace de travail ou cliquez sur Choisir une image.',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
name: 'Sélectionner une palette',
|
|
170
|
+
text: 'Choisissez un préréglage classique ou saisissez vos propres couleurs hexadécimales. Le résultat se met à jour immédiatement.',
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
name: 'Comparer et exporter',
|
|
174
|
+
text: 'Inspectez les canevas original et réduit, ajustez le zoom de prévisualisation et téléchargez le résultat au format PNG.',
|
|
175
|
+
},
|
|
176
|
+
],
|
|
177
|
+
schemas: [
|
|
178
|
+
{
|
|
179
|
+
'@context': 'https://schema.org',
|
|
180
|
+
'@type': 'SoftwareApplication',
|
|
181
|
+
name: 'Changeur de Palette 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: 'Mes images sont-elles envoyées sur un serveur ?',
|
|
193
|
+
acceptedAnswer: {
|
|
194
|
+
'@type': 'Answer',
|
|
195
|
+
text: 'Non. L image est traitée localement dans le navigateur et exportée directement au format PNG.',
|
|
196
|
+
},
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
'@type': 'Question',
|
|
200
|
+
name: 'Puis-je utiliser ma propre palette ?',
|
|
201
|
+
acceptedAnswer: {
|
|
202
|
+
'@type': 'Answer',
|
|
203
|
+
text: 'Oui. Saisissez vos codes hexadécimaux et appliquez la palette.',
|
|
204
|
+
},
|
|
205
|
+
},
|
|
206
|
+
],
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
'@context': 'https://schema.org',
|
|
210
|
+
'@type': 'HowTo',
|
|
211
|
+
name: 'Comment réduire un sprite à une palette rétro',
|
|
212
|
+
step: [
|
|
213
|
+
{ '@type': 'HowToStep', name: 'Charger un sprite', text: 'Déposez un fichier dans l espace de travail.' },
|
|
214
|
+
{ '@type': 'HowToStep', name: 'Sélectionner une palette', text: 'Choisissez un préréglage ou saisissez vos couleurs.' },
|
|
215
|
+
{ '@type': 'HowToStep', name: 'Comparer et exporter', text: 'Inspectez le résultat et téléchargez le fichier 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: '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
|
+
};
|