JeuWeb - Crée ton jeu par navigateur
Conseils illustrations bâtiments - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : Conseils illustrations bâtiments (/showthread.php?tid=7751)

Pages : 1 2


Conseils illustrations bâtiments - luis56 - 23-01-2017

Bonjour,
Vu que je suis nul en graphisme, j'ai fais quelques illustrations en m'aidant de google sketchup parce que c'est facile à utiliser et j'ai surtout besoin de réaliser des bâtiments.
Je mets les liens des images ci-dessous, elles seront présentées de la même manière sur le site :
http://hpics.li/a6b5d4d
http://hpics.li/8391c6b
http://hpics.li/9cd2096
http://hpics.li/1e72fac

Par contre il y a quelques soucis, d'abord pour la tour, on voit presque rien donc je me suis dis que ça serait bien d'afficher une image plus grande lorsqu'on clique dessus et ça afficherait une image de ce genre :
http://hpics.li/c675037 (pas aussi grande peut-être)

Voilà, après je sais pas si c'est très agréable pour le joueur de devoir cliquer sur l'image pour bien voir le bâtiment...  (même si j'affiche l'image via javascript sans recharger la page) peut-être si je met une description à côté, ajouter des infos, etc ça passerait mieux?
Ensuite, je trouve que les bâtiments ne sont pas assez "cartoon", est-ce que ce genre de graphisme est suffisant pour un jeu ?

J'attends vos conseils, avis.... merci de m'avoir lu.


RE: Conseils illustrations bâtiments - Xenos - 23-01-2017

Salut,

tout dépend de ce que tu veux faire de ces ressources. L'angle de vue est bas, et me semble être une 3D perspective (pas une isométrie), donc je suppose qu'il ne s'agit pas d'afficher des bâtiments sur une carte, mais plutôt d'illustrer un élément de jeu pour montrer qu'il s'agit de tel ou tel bâtiment. Dans ce cas, je pense que la vue "plus grande" ne sert à rien en tant que tel. Elle peut éventuellement servir quand tu affiches le détail dudit bâtiment. Par exemple, dans la vue donnant la liste des maisons du joueur, tu affiches les petites sprites avec les infos succinctes et, quand on clique sur un de ces bâtiments, on a le détail avancé dudit bâtiment (date de construction et âge, nombre d'habitant, etc). Sinon, tu peux toujours faire du <img/> de la petite sprite un lien vers l'image en plus grand, juste pour satisfaire la curiosité de certains joueurs.

De mon point de vue, je préfère largement une image classiquement cliquable qu'un flatras de JS (qui va finalement terminer en "clic droit, afficher l'image"... je déteste quand un site ajoute des trucs de navigation pour me faire perdre du temps). Ceux qui voudront l'ouvrir dans un autre onglet, ou enregistreront facilement l'image, etc. T'aura toujours le temps plus tard de monter une galerie sur une page dédiée (type WP ou autre).

Pour le style cartoon, effectivement, tes réalisations en sont un poil éloigné (l'effet du rendu 3D peut-être). Perso, ça ne me dérange pas du tout: le rendu actuel est suffisamment esthétique pour être compréhensible, et assez passe-partout.

(note que le parking du HLM est bien petit: j'espère que tout le monde n'a pas de voiture dans cette tour Tongue )


RE: Conseils illustrations bâtiments - luis56 - 23-01-2017

Merci Xenos pour ton avis très complet.
Oui les bâtiments sont juste là pour illustrer des éléments du jeu mais vu que le jeu tourne autour de ces bâtiments, je ne peux pas me permettre d'afficher des petites images.
Je pensais faire comme tu dis, c'est-à-dire afficher les caractéristiques du bâtiment lorsque le joueur clique sur l'image. De cette façon, le joueur a d'autres raisons de cliquer et au pire compléter avec ce que tu as dis, <img/> qui renvoie au plus grand format.. mais bon c'est pour les gros curieux (ils pourront voir tous les petits défauts ahah)
Tant pis pour le cartoon tant que c'est potable..
PS : On va dire qu'il y a un garage souterrain avec l'entrée derrière lol


RE: Conseils illustrations bâtiments - Alchimèriste - 25-01-2017

Salut.

C'est difficile de donner des conseils sur le look que devrait avoir tes visuels, le jeu est-il sérieux ou c'est un mélange de style gestion/humour ?

3D SketchUp est une bonne alternative pour produire (relativement) de bons visuels 3D iso ou pour illustrer lorsqu'il s'agit de créer des structures ou des véhicules, tu as raison. Peut-être évite d'utiliser les textures intégrée au logiciel, tu peux même te contenter uniquement de couleurs à la place.

Pour un look cartoon il te "suffit" commencer par déformer les angles droits et utiliser des couleurs plus vives, de grands aplats sans texture ça fonctionne bien aussi et tu n'auras pas à te prendre la tête pour créer/trouver des textures..
..après il existe plusieurs style "cartoons", avec ou sans traits épais façon BD ou plutôt genre jouet, etc.. etc..

Je te montre un exemple, avec un peu de pratique tu peux même obtenir des trucs comme ça sous Sketchup :


[Image: Cabane%20de%20Troll%20v03.525x525px_zpsq4srw9f0.png]

Bon il n'est pas terminé ce modèle 3D datant d'il y a plus de trois ans (inspirée d'une cabane existant réellement dans le jardin d'un fan de troll), mais c'était un test que j'ai réalisé sous une ancienne version de Skethup adossé à un Render (MaxWell Fire) justement pour des projets tels que le tien. Le toit est bâclé, le sous-bassement pas terminé et il n'y a pas de fond mais voilà ce que tu peux faire sans logiciels payants ni pirater de logiciels.

Ton prototype de projet est visible quelque part ?


RE: Conseils illustrations bâtiments - luis56 - 25-01-2017

Salut Alchimèriste,
J'adore ta cabane mais ça a dû te prendre du temps pour faire tous les petits détails.
Pour mon projet, c'est vrai que j'ai pas donné d'infos dessus, c'est plus un jeu sérieux donc je cherche pas un style cartoon avec des maisons déformée mais un style comme dans les simpsons (il y en a plein sur google image en tappant simpsons batiments). Voilà après j'ai pas les compétences et l'expérience pour faire des maisons comme ça malheureusement Sad
J'en ai fais 2 autres mais à améliorer :
http://hpics.li/38e90ad
http://hpics.li/3b2af8d

Merci de tes conseils et non je n'ai encore rien mis en ligne.


RE: Conseils illustrations bâtiments - Xenos - 25-01-2017

Perso, un styling comme ça ne me parait pas faire "un jeu sérieux" (au sens serious game hein). Là, ça fait plus "casual" / "tout public", et le "style simpson" me donnera toujours cette impression à cause des aplats de couleur (absence de texture).

Serious, pour moi, c'est plutôt:
https://s-media-cache-ak0.pinimg.com/236x/90/66/17/906617b97a5cac7b01ea360d979e1dad.jpg
ou http://i.imgur.com/NSN7uuH.jpg
voir http://www.tacticalsoft.com/arsenal1/bigim01.jpg

(y'a pas un mieux que l'autre, c'est juste pour classifier plus précisément où tu situes ton jeu)
(j'ai fait "wooh!" en voyant ta maison, Alchimèriste)


RE: Conseils illustrations bâtiments - luis56 - 25-01-2017

Oui désolé je me suis trompé en utilisant le terme sérieux, je voulais juste dire que c'est pas dans l'optique de faire des bâtiments déformés.. mais pas non plus sérieux en tout cas je veux pas des bâtiments comme ceux que tu as mis dans tes liens.
Bref merci pour votre intérêt et vos conseils, je vais essayer de faire comme je peux Smile


RE: Conseils illustrations bâtiments - Xenos - 26-01-2017

D'accord, des bâtiments réalistes/réalisables (ça pourrait être réellement construit comme ça) dans un style comic (flat colors). Okay, dans ce cas, t'es effectivement en plein dedans, bravo Smile


RE: Conseils illustrations bâtiments - Alchimèriste - 26-01-2017

( La cabane a pris moyennement de temps, en fait, car à force d'utiliser SktechUp on peut avoir des astuces qui rendent le travail rapide Xenos. Et je l'utilise depuis des années pour faire des trucs plus complexes encore, à force.. et je me librement  suis inspiré d'une photo donc le travail est rapide lorsque l'on a pas besoin d'effectuer une recherches, de tests etc..)

Luis voici des exemples de rendus et quelques suggestion :

[Image: Exemples_Rendus_zps6dfqeoqm.png]
  • L'image en haut à gauche sert de référence (tes visuels actuels en fait)
  • L'image en haut à droite d'ombre portée (il y a des ombres sur les faces seulement).
  • L'image en bas à gauche se passe d'ombre, de textures, et n'utilise que des arrête de profil, pas les arrêtes normales et je t'avoue c'est mon conseil du coup.
  • La dernière image est un exemple avec un fond random (à titre d'exemple, une texture de fond plus discrète commune à tous peut faire l'affaire voir pas de fond du tout donc transparent).
En gros, l'image du bas à gauche est peut être une piste que tu devrais étudier pour un style "Simpson". Dans tous les cas essaye de faire en sorte que, quelque soit ton illustration (si tu veux garder des ombres portées au sol) chaque ombre possède la même orientation pour donner une cohérence à l'ensemble de tes visuels. Si l'ombre tourne selon l'illustration ça fait un peu.. ^^


RE: Conseils illustrations bâtiments - luis56 - 26-01-2017

Oui c'est sûr qu'on peut aller très vite dès qu'on connait les astuces comme les composants, suffit de faire copier coller...
C'est une jolie petite maison que tu as là. C'est sûr que le troisième exemple se rapproche le plus du style simpsons, mais ça manque de couleurs je trouve. Après les textures, j'utilise surtout les motifs suivants (pas tous) :
[Image: 210622ScreenShot012617at1259PM2.png]
Parce qu'il suffit d'ajouter une couleur et c'est comme si j'avais fais moi même les traits. Après peut-être c'est mieux ne pas l'ajouter à toute une face (comme j'ai fais sur le bâtiment banque) mais l'intégrer sur des petites portions d'une face pour créer des petits détails.. à voir.. ex avec le toit :
[Image: 379001ScreenShot012617at0109PM2.png]
Pour les ombres, oui t'as raison il faut garder toujours la même orientation mais en fait je n'ai pas appliqué les ombres sur toutes les illustrations pour tester différents rendus.