Forums Développement Multimédia

Aller au contenu

- - - - -

Découper une image en tuiles?

PAO Illustrator

12 réponses à ce sujet

#1 Pripoko

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 24 March 2011 - 19:26 PM

Bonjour à tous!

J'envisage de créer sur Illustrator une (géante) carte de ville (imaginaire) que j'aurai besoin de réutiliser plus tard sur Flash, le but final étant de faire un fond de carte sur lequel un ou plusieurs bonshommes pourraient se déplacer.

La développeuse avec qui je travaille me dit de faire "des tuiles", des sortes de petits carrés qui s'enchaînent les uns à côté des autres sur cette carte. (Pour ceux qui connaissent un peu le développement Flash, une tuile est censée représenter un objet (par exemple un arbre, un fond de prairie, un petit caillou, etc.) qui, mis bout à bout avec d'autres tuiles, pourra faire une carte.)

Ce qui me bloque, c'est que tout d'abord, dans la carte que j'envisage de dessiner, rien n'est vraiment régulier et semblable. (Bon, ça peut s'arranger, mais je trouverai quand même ça plus joli si je pouvais faire à ma manière. :D )
Ensuite, j'ai certaines de mes images qui risquent de prendre plusieurs tuiles (par exemple une maison ou toute une forêt), et je trouve cela assez étrange de créer une tuile différente pour chaque objet un peu "spécial". (Par exemple, des petite huttes dont les portes ne sont pas tournées dans le même angles - suis-je censé faire chaque porte pour chaque angle en tuile?)
Et pour couronner le tout (arg, je suis embêtant), la carte est censée contenir des ombres (pour créer un effet de relief), que je voyais plutôt hors de la tuile.... :Hola:

Bref! Mon style n'est pas du tout "tuilé", et j'envisage plutôt de créer à la main free-style qu'on découperait ensuite.

Ma question découle de là et est tout simple: comment vous-y prendriez-vous? :?:

Je pose ma question tant bien aux graphistes qu'aux développeurs Flash s'il y a. :)

J'avais déjà essayé le coup de la grille de petits carrés les uns à la suite des autres pour tout découper, mais le gros problème est qu'il y a des contours (et du coup, ça ne découpe pas tout à fait comme je veux - en mettant les carrés les uns à la suite des autres, ça faisait soit des blancs, soit un objet pas tout à fait continu...)

Il y a également la possibilité de faire toujours ces mêmes petits carrés, sans contours, mais le problème est que je ne peux pas vraiment voir dans quoi je dessine, et même si je veux faire du free-style, il va bien falloir que le petit bonhomme puisse se déplacer correctement...

Bref! Si vous avez vous aussi confronté à ce problème, si vous avez des idées, un moyen plus simple, je suis preneur! :)

Merci de votre aide!

Pripoko

#2 Kosic

  • Guests

Posté 24 March 2011 - 19:38 PM

Hé ben mon garçon !
Créer des tiles (tuiles) est une excellente idée. Tu peux même créer de calques où ces tuiles se superposeront. Ces tuiles peuvent être des élément animés (herbes dans le vent, par exemple) en deux ou trois images. Tu peux avoir pour un fond des tiles avec transparence qui se superposent et de tailles différentes (32x32 et 38x38) qui évitent la monotonie. Idem pour les ombres qui se trouveront entre tes objets premier plan et ton "background" représenté par plusieurs calques. Ces ombres peuvent être créées par le développeur, s'il est compétent. Ceci te donneras plus de travail mais donnera une gestion plus légère de ton jeu ainsi qu'une capacité à créer des niveaux nettement plus productive.

#3 Pripoko

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 25 March 2011 - 10:39 AM

Citation

Hé ben mon garçon !
Bizarre comme appellation, mais ça me va papy! :?:

Merci pour ta réponse! Je ne suis pas contre créer des tuiles, mais sur le fichier illustrator, comment suis-je censé m'y prendre? :Hola: J'avais déjà essayé, mais j'ai dû mal m'y prendre, puisque les tuiles ne collaient pas parfaitement ensemble. J'avais tracé-copier/coller plein de petits carrés les uns à côté des autres, mais le problème, c'est qu'à cause du contour, tout ne collait pas parfaitement et/ou il y avait des trous. :)
Et le problème lorsque j'enlève les contours, bin... C'est que je ne les vois plus, et que je ne sais plus où commence et où se termine la tuile. ^^'

En tout cas, merci pour l'idée de superposition des tuiles et de tailles différentes. :D Je pense que Madame pourra créer les ombres (elle l'a déjà fait dans un autre projet). :) Enfin, je vais voir.

#4 Kosic

  • Guests

Posté 25 March 2011 - 12:59 PM

J'avais fait un tuto pour mes élèves. je vais essayer de le retrouver. Je le mettrais en réponse.

#5 Pripoko

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 25 March 2011 - 14:03 PM

Oww merci beaucoup par avance! :Hola:

#6 Kosic

  • Guests

Posté 26 March 2011 - 07:50 AM

J'ai retrouvé mon truc mais c'est touffu et un peu lourd. Dis moi d'abord :
Ton image est-elle en isométrie (pixel art) ?
Ton personnage doit-il passer derrière, dessous des objets plus grands (arbres, maisons…) ou plus haut (ponts, arches…) que lui ?
Si tu veux rester sur un dessin unique il y a possibilité de passer par des PNG 24 qui seront plus légers que de gros vectoriels qui garderont des transparences et qui pourront être découpés en tranche pour le fond d'après des repères ; avec des objets sur un calque supérieur (arbres, réverbères…). Des tranches de ton dessin du quart de la taille de ta fenêtre (par exemple 150x100 pour une fenêtre de 300x200) te permettraient de n'utiliser que quelques éléments, allégeant ainsi ton affichage.
Il y a un tas d'autres trucs mais j'attends ta réponse à ceux-là avant de m'avancer pour ne pas te faire partir sur de fausses pistes.

#7 Pripoko

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 26 March 2011 - 12:20 PM

Citation

J'ai retrouvé mon truc mais c'est touffu et un peu lourd.

Tout est bon à prendre! :Hola: Je n'ai encore rien fait, mais je pensais plutôt faire du vectoriel que du pixel art. (C'est pas trop mon truc le pixel art :?: ). Ceci étant dit, si tu me dis que je dois convertir en png mes images, pas de soucis! ^^

Normalement, le personnage peut rentrer dans les maisons (le toit se découvre à son passage). (Mais a priori, rien de compliqué à ce niveau).

Ce que je demande surtout, c'est comment correctement découper mon dessin... (Et si je dois le faire sur différentes tuiles, comment m'y prendre sans faire de blancs ou de mauvaises jointures). :D

Merci à toi!

#8 Kosic

  • Guests

Posté 26 March 2011 - 12:49 PM

Quand je parle de pixel art je veux entendre une isométrie aux traits.
Pour une bonne découpe, si tu pars d'un dessin unique, la division en tranches et l'export en PNG 24 est idéale. En faisant un Export pour le web ton travail sera parfaitement respecté.
Je te conseillerai de faire un fond global et de rajouter les objets sur un calque supérieur. Les tuiles par textures deviennent inutiles en ce cas et cela te facilitera la tâche.
Donc tu crées ton doc en totalité fond + objets + masques pour guidage.
1er export avec fond + objets en PNG toutes les tranches
2e export avec objets uniquement en PNG toutes les tranches
3e export avec masques en PNG ou JPG (à voir avec la développeuse) toutes les tranches
Si à l'intérieur tu vois l'ameublement il te faudra les créer et les exporter pièce ou bâtiment par pièce ou bâtiment et les exporter un à un.
Ainsi tu auras dans chaque dossiers tous les éléments nécessaires et nommés dans l'ordre pour que la développeuse puisse travailler à l'aise.
Si chaque toit, chaque étage doit être indépendant il faudra faire autant d'images que de symboles. Sinon il est possible, puisque tu auras en dessous une vue totale, de donner une transparence, genre 20% pour un effet genre Diablo.

#9 Pripoko

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 26 March 2011 - 15:09 PM

Ha! Désolé, je ne connaissais pas le terme pixel art isométrique! (Mais vive Wikipédia). Apparemment, oui, ça serait dans ce style-là! :?:

Citation

Pour une bonne découpe, si tu pars d'un dessin unique, la division en tranches et l'export en PNG 24 est idéale. En faisant un Export pour le web ton travail sera parfaitement respecté.

Ok, nickel! Je n'avais pas du tout pensé à utiliser les tranches de découpe. Je crois bien que tu viens de me donner là LA solution à mon questionnement principal! Merci! :Hola:

Sinon, quand tu parles de "masques pour guidage", qu'est-ce que c'est exactement? C'est bien des genres de petits carrés qui déterminent là où tu peux aller, et là où tu ne peux pas aller? :D

Enfin, encore une fois un grand merci pour la méthode! (Dissociation fond/objet - export de chaque bâtiment à part)

#10 Kosic

  • Guests

Posté 26 March 2011 - 16:38 PM

"Sinon, quand tu parles de "masques pour guidage", qu'est-ce que c'est exactement? C'est bien des genres de petits carrés qui déterminent là où tu peux aller, et là où tu ne peux pas aller? :Hola: "
Oui, c'est cela même. Ainsi tes calages seront parfait. il te suffit de prendre les "socles" de tes items et tu pourras entrer, tourner autour etc. avec précision.

#11 Pripoko

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 27 March 2011 - 20:53 PM

Ok, merci beaucoup! Ca devrait être bon maintenant: y'a pu qu'à faire! :Hola:

#12 Pripoko

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 59 messages

Posté 13 July 2011 - 16:31 PM

Un up "méthodologie" (CS5.5) pour ceux que ça intéresse:

-> Une fois les repères créés, on peut créer des tranches à partir de ceux-ci:
pour ce faire, aller dans le menu Outil> Tranche > Créer des tranches à partir des repères

Les tranches créées ne se font que sur l'espace de travail. Le processus est assez long, et je vous conseille de faire ça petit bout par petit bout si vous avez une grande map! :?:

Ensuite, on fait comme a dit Kosic: dans le menu Fichier > Enregistrer les tranches sélectionnées, et le tour est joué ! ;)

#13 Kosic

  • Guests

Posté 13 July 2011 - 18:25 PM

Bravo Pripoko, tu as parfaitement absorbé la méthode.
Bonne continuation…



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP