Seuls les membres ayant 30 points peuvent parler sur le chat.

Forum Casio - Vos tutoriels et astuces


Index du Forum » Vos tutoriels et astuces » [Tutoriel] Comment faire un tileset monochrome en 16x16
SiapranHors ligneMembrePoints: 3248 Défis: 17 Message

[Tutoriel] Comment faire un tileset monochrome en 16x16

Posté le 23/07/2011 17:10

Bon alors c'est juste un tout petit tileset architectural mais je pense qu'il peut être utile de partager ma méthode de réalisation avec des intéressés.


Ce tileset pourra servir pour faire deux/trois maisons dans une ville fantastico-médiévale.

Un petit conseil avant de démarrer votre tileset: NE CHERCHEZ PAS LA PERFECTION. C'est un de mes gros défauts: je suis un maniaque de la symétrie et cela m'horripile quand je n'arrive pas à faire en sorte que mes sprites soient équilibrés à la perfection. Si vous êtes dans le même cas, dites vous que finalement le sprite parfait ça reviendrait à ça: [carré]
Donc si vous voyez une imperfection, essayez de rectifier sans pour autant vous prendre la tête sur une erreur de 1 pixel. Nous faisons dans la liberté de l'art, pas dans la précision mathématique.


Bon, alors déjà il nous faut un élément de base pour nos maisons. Ici on va prendre un simple mur de briques.



Là, normalement avec un peu d'imagination on peut reconnaître un mur. Mais il est un peu vide à mon gout, alors on va y ajouter un petit effet de lumière.



Notre mur désormais garni d'un peu plus de relief, passons à la conception d'une fenêtre.



On duplique... On fait une place dans notre mur...



Et maintenant on dessine notre petite fenêtre.



Ici encore, je trouve que la fenêtre manque de profondeur. On va rajouter un petit reflet.



Voilà, on a notre fenêtre ronde qui reflète un brin de soleil vers le joueur. Passons à la porte.



On duplique... On fait une place dans notre mur...



Et hop on profite du travail déjà à moitié fait par la fenêtre.



"Bon c'est bien joli tout ça", vous allez me dire, "mais j'aimerais pas dormir là dedans."
Effectivement maintenant que nous avons quatre murs il est temps de penser au toit.
On dessine les contours de notre nouvel élément.



Et maintenant on se débrouille pour que ça ressemble à des tuiles...



Voilà on a notre élément de toit et on en est relativement content...



On duplique... On fait une place dans notre toit...



On dessine une pente sur notre toit.



Et là on se retrouve face à un petit problème: comment faire une perspective valable pour notre pente.
Ma réponse:



On ne se prend pas la tête, et on essaye des trucs.



Maintenant pareil de l'autre coté.



Et si je veux faire une tour?



Copy.
Pasta.



Bon.
Nous avons terminé notre Tileset.

Et maintenant time to test!



AAAAAAAAAAAAAAARG MAIS C'EST QUOI CETTE HORREUR?
j'ai plein de paquets noirs entre les tiles. C'est moche, rendez-moi mon fric.

Effectivement c'est moche, à dessiner les bordures on finit par ne voir que ça.

Nous allons donc remédier à ce problème grace à une petite astuce: on va demander au programme de dessiner, en plus du tileset, des bandes de remplissage.

Des quoi?

Je vais vous montrer. On prend notre mur avec notre bordure moche.



On enlève la bordure.



On redessinne de façon à ce que ça soit potable.



Et maintenant c'est là que ça devient intéressant. Vous voyez la partie bleue?



C'est la partie qu'on a modifiée, et c'est ça notre bande de remplissage. Dans le proramme on pourra inclure une fonction qui la dessine entre deux tiles quand il y en a besoin.

Même chose pour le toit.



Et en horizontal.



Maintenant pour une intersection à quatre tiles.
D'abord l'horizontal.



Puis la bande verticale.



Vous vous rappellez de ce que j'ai dit en début de tuto sur la perfection? En voici un parfait exemple.



On a une petite erreur. Oui, on peut la corriger facilement, mais bon, je vais vous faire part d'une petite blague qui fera (peut-être) bien rire certains d'entre vous:

- Comment décrire en trois mots le système d'allocation de mémoire de Java?
- Je sais pas, mais tu vas bientôt me le dire.
- Miam Miam Miam
- ...

Si on ne veux pas se retrouver à bouffer autant de place que Java, il vaut mieux abandonner cette erreur à son triste sort.


Bon, bah... on a enfin terminé notre Tileset.



Maintenant, on n'a plus qu'à corriger notre test avec notre astuce.



Et voilà.
Satisfaits?




Si vous avez des questions/remarques concernant ce tutoriel ou sur les sprites en général, je vous invite à m'en parler sur ce topic ou par MP.

Je tiens à remercier Totoyo qui m'a autorisé à héberger mes images sur le serveur.

Sur ce, bon pixel art à tous

Corrigé par Eiyeron.


NitrosaxHors ligneAncien rédacteurPoints: 1061 Défis: 17 Message

Citer : Posté le 20/09/2012 15:33 | #



Je pense qu'il mérite de figurer dans les tutoriels de qualité.
SiapranHors ligneMembrePoints: 3248 Défis: 17 Message

Citer : Posté le 20/09/2012 22:25 | #


c'était ironique j'espère
NitrosaxHors ligneAncien rédacteurPoints: 1061 Défis: 17 Message
SiapranHors ligneMembrePoints: 3248 Défis: 17 Message

Citer : Posté le 22/09/2012 12:51 | #


bah disons que j'en suis pas particulièrement fier
donc heu voilà
j'aime autant ne pas trop le montrer
SilverHors ligneMembrePoints: 580 Défis: 5 Message

Citer : Posté le 22/09/2012 14:56 | #


Super !
Apprentissage du C et du C++



Rentré en 1ère S, je peux plus venir souvent...

TotoyoHors ligneMembre d'honneurPoints: 15967 Défis: 101 Message

Citer : Posté le 22/09/2012 16:57 | #


Dans 5 ans, tu diras que les tutoriels que tu faisais aujourd'hui et que tu trouvais bien, tu les trouveras nuls
KirafiHors ligneMembrePoints: 2138 Défis: 10 Message

Citer : Posté le 11/04/2016 16:49 | #


Hey les gens , je me demandais si ça intéresserait quelqu'un un tuto pour faire des graphismes et les implémenter au jeu de A à Z, de manière efficace avec quelques astuces ?
Je parle pas en "design" mais plutôt en technique .
iPod
Pour des parties rapides
Jusqu'où pourras-tu aller dans ce jeu "partie rapide" qu'est Dextris (élu Jeu Du Mois)
Pourras-tu survivre plus de 20 secondes dans ce fameux tunnel appelé Graviton
Rebondis entre les murs en évitant les piques dans SpikeBird
Pourras-tu éviter de te faire écraser dans FallBlocs (élu Jeu Du Mois)
Autres
Franchement ils valent le coups
Deviens l'amiral de la marine dans SeaRush (jeu concours) (élu Jeu Du Mois)
La version 2048 tactile amélioré au plus haut point : 2048 Delux !
Pars à la recherche des morceaux d'étoile dans Lumyce (élu Jeu Du Mois)
EltoredoHors ligneModérateurPoints: 4297 Défis: 35 Message

Citer : Posté le 11/04/2016 16:53 | #


Avec plaisir, je suis pas très bon en pixel art et c'est pas faute d'avoir essayé alors je suis pour (je tente aussi le dessin réel pour avoir une idée de comment ça marche)
La procrastination est une vertu. (voir ma description pour comprendre mon raisonnement)
KirafiHors ligneMembrePoints: 2138 Défis: 10 Message

Citer : Posté le 11/04/2016 16:58 | #


Okay bon alors j'en parle dans la RDP et je vois ce que je peux faire pendant les vacances .
iPod
Pour des parties rapides
Jusqu'où pourras-tu aller dans ce jeu "partie rapide" qu'est Dextris (élu Jeu Du Mois)
Pourras-tu survivre plus de 20 secondes dans ce fameux tunnel appelé Graviton
Rebondis entre les murs en évitant les piques dans SpikeBird
Pourras-tu éviter de te faire écraser dans FallBlocs (élu Jeu Du Mois)
Autres
Franchement ils valent le coups
Deviens l'amiral de la marine dans SeaRush (jeu concours) (élu Jeu Du Mois)
La version 2048 tactile amélioré au plus haut point : 2048 Delux !
Pars à la recherche des morceaux d'étoile dans Lumyce (élu Jeu Du Mois)
Shadow15510Hors ligneAdministrateurPoints: 4149 Défis: 16 Message

Citer : Posté le 30/07/2018 10:03 | #


Comment peut-on coder cela en C ?
Je m'intéresse également aux sprites mais je ne sais pas trop comment m'y prendre... Faut-il tout dessiner pixel par pixel ou existe-t-il d'autre moyen ?
Merci d'avance
"Ce n'est pas parce que les chose sont dures que nous ne les faisons pas, c'est parce que nous ne les faisons pas qu'elles sont dures." Sénèque

Moral
   98%
DrakHors ligneRédacteurPoints: 1925 Défis: 40 Message

Citer : Posté le 30/07/2018 10:38 | #


Il me semble que ceci pourrait t'être utile, dites-moi si je me trompe : https://tools.planet-casio.com/SpriteCoder/
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Shadow15510Hors ligneAdministrateurPoints: 4149 Défis: 16 Message

Citer : Posté le 30/07/2018 10:39 | #


Tu ne t'es pas trompé
"Ce n'est pas parce que les chose sont dures que nous ne les faisons pas, c'est parce que nous ne les faisons pas qu'elles sont dures." Sénèque

Moral
   98%

Planète Casio v42 © créé par Neuronix et Muelsaco 2004 - 2020 | Il y a 69 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd