Les Sprites
Comme tout le reste dans Odyc.js, les sprites sont décrites via le code. Leur définition se fait à l’aide de chaînes de caractères, un petit peu comme des dessins ASCII.
createGame({
player: {
sprite: `
...55...
...55...
.000000.
0.0000.0
5.0000.5
..3333..
..3..3..
..0..0..
`
}
//...
})
🟦 Un simple rectangle
Si vous souhaitez que votre élément soit représenté par un rectangle de couleur, vous pouvez attribué un caractère correspondant à une couleur de la palette.
sprite: '5'
Dessiner
Il parait que l’expérience vaut mieux que les discours. Vous pouvez essayer l’éditeur ci-après pour comprendre comment sont codés les sprites.
D’un côté, une zone de dessin que vous pouvez modifier, de l’autre, la description de la sprite comme elle apparaitrait dans votre code.
..4.4...
..4.4.4.
..4.4.4.
4.44444.
4443434.
.444444.
..43344.
..4444..
Chaque ligne représente une rangée de pixels, et chaque caractère correspond à un pixel.
- Caractères
0–9
,a–z
,A–Z
: : correspond à une couleur spécifique (par ex.0
pour noir,1
pour blanc, etc.). - Retour à la ligne : commence une nouvelle rangée de pixels.
- Espaces, tabulations, lignes vides : ignorés.
- Autres caractères : pixels transparents (par exemple,
.
).
Note
Pour gagner de la place vous pouvez utiliser \n
pour remplacer les sauts de ligne. '..4.4...\n..4.4.4.'
🔤 Caractères texte comme sprites
Pour le prototypage rapide ou les jeux basés sur du texte, vous pouvez convertir n’importe quel caractère en sprite 8×8 en utilisant la fonction helper charToSprite()
:
import { createGame, charToSprite } from 'odyc'
createGame({
player: {
sprite: charToSprite('A')
},
templates: [
{
// Caractère '@' en couleur '3'
sprite: charToSprite('@', '3')
}
]
//...
})
Paramètres :
char
(string) : N’importe quel caractère unique à convertir en spritecolor
(string, optionnel) : Couleur de la palette à utiliser pour le caractère. Par défaut :1
Retour : Une représentation de sprite 8×8 sous forme de chaîne de caractères.
Ressources
Voici des ressources qui peuvent vous aider à trouver des idées pour vos sprites:
- Pixeltwist : propose une infinité de sprites générées aléatoirement.
- Baxel : une collection ouverte de sprites créées par la communauté.
- odyc-cli par Meldiron : un outil en ligne de commande pour créer des projets Odyc.js, convertir des images en sprites, et optimiser le flux de développement de jeux.
Note
Pour importer une sprite depuis l’un de ces sites dans votre jeu, faites simplement clic droit → copier l’image, puis collez-la dans l’outil de dessin du playground.