{"id":72,"date":"2013-06-30T13:58:00","date_gmt":"2013-06-30T12:58:00","guid":{"rendered":"http:\/\/oneiricworlds.com\/en\/index.php\/2013\/06\/30\/skybox-and-art-improvement\/"},"modified":"2016-03-02T19:47:15","modified_gmt":"2016-03-02T18:47:15","slug":"skybox-and-art-improvement","status":"publish","type":"post","link":"https:\/\/oneiricworlds.com\/fr\/2013\/06\/skybox-and-art-improvement\/","title":{"rendered":"Ciel et am\u00e9lioration des graphismes"},"content":{"rendered":"<p>Salut tout le monde,<\/p>\n<p>Cette semaine, j&rsquo;ai pass\u00e9 du temps sur la partie \u00ab\u00a0graphismes\u00a0\u00bb du jeu.<\/p>\n<h3>I &#8211; Ciel (\u00ab\u00a0Skybox\u00a0\u00bb)<\/h3>\n<p>Tout d&rsquo;abord, j&rsquo;ai essay\u00e9 de rendre le ciel un peu plus \u00ab\u00a0vivant\u00a0\u00bb en y ajoutant un cycle jour\/nuit. Dans Blender, j&rsquo;ai cr\u00e9\u00e9 une sph\u00e8re 3D sur laquelle j&rsquo;ai peint une texture de ciel de jour et de nuit. Ensuite, j&rsquo;ai cr\u00e9\u00e9 une texture environnementale (une \u00ab\u00a0cube map\u00a0\u00bb) \u00e0 partir de cette sph\u00e8re: l&rsquo;id\u00e9e est de cr\u00e9er une cam\u00e9ra \u00e0 l&rsquo;int\u00e9rieur de la sph\u00e8re et de la faire regarder dans les 6 directions (haut, bas, droite, gauche, devant, derri\u00e8re). Cela permet de cr\u00e9er 6 textures. Ensuite, dans le jeu, j&rsquo;applique ces textures sur les 6 faces d&rsquo;un immense cube que je place autour de la sc\u00e8ne. Cela donne l&rsquo;impression d&rsquo;un ciel situ\u00e9 \u00e0 une distance infinie.<\/p>\n<p>Mais pourquoi utiliser un cube et pas directement la sph\u00e8re originellement cr\u00e9\u00e9e dans Blender? Parce qu&rsquo;afficher une sph\u00e8re est un peu plus lourd en terme de calcul (m\u00eame si \u00e0 ce niveau, c&rsquo;est d\u00e9risoire), mais surtout parce que Unity (le moteur de jeu que j&rsquo;utilise) propose pas mal d&rsquo;outils sympas pour cr\u00e9er des ciels via des textures environnementales.<\/p>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/2.bp.blogspot.com\/-h23Up0wKx0w\/UdArVG2fAxI\/AAAAAAAAGjw\/Gy-QBWwu0Io\/s1600\/20130621_paintingSkyBox3.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/2.bp.blogspot.com\/-h23Up0wKx0w\/UdArVG2fAxI\/AAAAAAAAGjw\/Gy-QBWwu0Io\/s400\/20130621_paintingSkyBox3.jpg\" alt=\"\" width=\"400\" height=\"225\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>Le ciel de nuit dans Blender. Vous pouvez constater que je garde quelques notes pour plus tard (dans le panneau inf\u00e9rieur) pour que je puisse modifier cette texture ou en cr\u00e9er d&rsquo;autres si besoin. Il faut dire que j&rsquo;ai pass\u00e9 pas mal de temps \u00e0 comprendre le principe du truc et \u00e0 corriger de petits bugs d&rsquo;affichage&#8230; \ud83d\ude09<br \/>\n<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<p>Ensuite, j&rsquo;ai impl\u00e9ment\u00e9 un petit algorithme de \u00ab\u00a0gestion du temps\u00a0\u00bb qui va mixer les 2 textures (jour &amp; nuit) en fonction du temps virtuel qui s&rsquo;\u00e9coule dans le jeu. J&rsquo;ai aussi rajout\u00e9 le soleil et la lune qui tournent autour de la sc\u00e8ne et qui projettent des ombres dans les directions correspondantes.<\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/1.bp.blogspot.com\/-7FxLAdgz-DA\/UdAtdtZVwXI\/AAAAAAAAGkA\/Ta9f3NIepqA\/s1024\/nightSkyBox.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.bp.blogspot.com\/-7FxLAdgz-DA\/UdAtdtZVwXI\/AAAAAAAAGkA\/Ta9f3NIepqA\/s400\/nightSkyBox.jpg\" alt=\"\" width=\"400\" height=\"250\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>6 textures calcul\u00e9es \u00e0 partir de la sph\u00e8re originale. Elles seront appliqu\u00e9es sur les face d&rsquo;un cube immense dans le jeu.<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/1.bp.blogspot.com\/-3NGZHYmd7sg\/UdAu-Loz5cI\/AAAAAAAAGkQ\/wd-eZotVzOc\/s1600\/20130621_230653.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.bp.blogspot.com\/-3NGZHYmd7sg\/UdAu-Loz5cI\/AAAAAAAAGkQ\/wd-eZotVzOc\/s320\/20130621_230653.png\" alt=\"\" width=\"320\" height=\"180\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>La texture de ciel finale dans le jeu avec quelques autres \u00e9l\u00e9ments (lune, terre, eau et vent).<\/i><\/div>\n<p>&nbsp;<\/p>\n<h3>II &#8211; Graphismes 3D<\/h3>\n<p>Ensuite, j&rsquo;ai travaill\u00e9 sur plusieurs \u00e9l\u00e9ments 3D: l&rsquo;herbe, les buissons et bien s\u00fbr le personnage principal. La mani\u00e8re de travailler est toujours la m\u00eame que pour les r\u00e9alisations pr\u00e9c\u00e9dentes (mouette, poisson, pirate, etc&#8230;). Je ne d\u00e9taillerai donc pas tout, mais voici les \u00e9tapes principales:<\/p>\n<ul>\n<li>Cr\u00e9er le mod\u00e8le 3D (la g\u00e9om\u00e9trie). Je fais \u00e7a dans Blender, apr\u00e8s avoir fait plusieurs croquis pour avoir une id\u00e9e assez pr\u00e9cise de ce que je veux.<\/li>\n<li>Cr\u00e9er une texture \u00e0 appliquer au mod\u00e8le. J&rsquo;utilise GIMP pour peindre l&rsquo;image et Blender pour g\u00e9rer la partie projection 2D\/3D (\u00ab\u00a0mapping\u00a0\u00bb)<\/li>\n<li>Cr\u00e9er les animations. Pour cette \u00e9tape aussi, j&rsquo;utilise Blender. Je commence par cr\u00e9er un squelette pour le personnage, dont chaque os permettra de bouger une partie du corps. Animer un personnage consiste alors \u00ab\u00a0simplement\u00a0\u00bb \u00e0 d\u00e9finir pr\u00e9cis\u00e9ment la position et la rotation de chaque os pour un instant donn\u00e9. Ca peut \u00eatre assez long&#8230; A l&rsquo;heure actuelle, le personnage a 70 os (dont plus de la moiti\u00e9 pour les mains!) et 5 animations diff\u00e9rentes.<\/li>\n<\/ul>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/2.bp.blogspot.com\/-pHOlG93kenE\/UdAx89Y3xgI\/AAAAAAAAGkg\/zfinTBfanHs\/s1600\/20130630_mainCharacterCreation.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/2.bp.blogspot.com\/-pHOlG93kenE\/UdAx89Y3xgI\/AAAAAAAAGkg\/zfinTBfanHs\/s400\/20130630_mainCharacterCreation.jpg\" alt=\"\" width=\"400\" height=\"225\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>Mon processus de cr\u00e9ation dans Blender: en haut \u00e0 gauche, la texture du personnage. Elle peut avoir l&rsquo;air bizarre, mais si vous regardez avec attention, vous arriverez surement \u00e0 comprendre comment elle est appliqu\u00e9e sur le personnage. En bas \u00e0 gauche, le mod\u00e8le 3D textur\u00e9 et le squelette (en gris). A droite sont affich\u00e9s les poses-cl\u00e9s des os pour chaque animation. C&rsquo;est un peu le bazar!<br \/>\n<\/i><\/div>\n<p>&nbsp;<\/p>\n<p>Bien s\u00fbr, ce que je d\u00e9cris ici est le processus id\u00e9al. En pratique, malheureusement, ce n&rsquo;est jamais aussi simple. Il faut souvent corriger une texture ou le mod\u00e8le car celui-ci ne se d\u00e9forme pas bien lors des animations. C&rsquo;est un long chemin d&rsquo;essais et d&rsquo;erreurs.<\/p>\n<p>Pour les mod\u00e8les non anim\u00e9s, la t\u00e2che reste cependant plus facile.<\/p>\n<h3>III &#8211; Graphismes 2D<\/h3>\n<p>Enfin, j&rsquo;ai essay\u00e9 d&rsquo;am\u00e9liorer les vieilles textures du prototype en augmentant leur r\u00e9solution (HD). Par exemple:<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/1.bp.blogspot.com\/-NEIn8eSJ6vw\/UdA0CW7MVFI\/AAAAAAAAGkw\/wl4rTNItwsY\/s500\/20130630_textureReworking.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.bp.blogspot.com\/-NEIn8eSJ6vw\/UdA0CW7MVFI\/AAAAAAAAGkw\/wl4rTNItwsY\/s320\/20130630_textureReworking.jpg\" alt=\"\" width=\"320\" height=\"320\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>A gauche, une ancienne texture de caisse en bois. A droite, une version avec une meilleure r\u00e9solution. C&rsquo;est du boulot de retoucher tout \u00e7a!<\/i><\/div>\n<div style=\"text-align: center;\"><\/div>\n<p>Au final, tout ces petits changements contribuent \u00e0 rendre le jeu un peu plus aboutit visuellement (j&rsquo;esp\u00e8re):<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"http:\/\/1.bp.blogspot.com\/-lbGA-yjY7ws\/UdA2An9II7I\/AAAAAAAAGlA\/LooytLq5O1M\/s1004\/20130630_154152.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/1.bp.blogspot.com\/-lbGA-yjY7ws\/UdA2An9II7I\/AAAAAAAAGlA\/LooytLq5O1M\/s400\/20130630_154152.png\" alt=\"\" width=\"400\" height=\"223\" border=\"0\" \/><\/a><\/div>\n<div style=\"text-align: center;\"><i>Le look actuel du jeu. Pas exactement ce que j&rsquo;avais en t\u00eate, mais \u00e7a reste pr\u00e9sentable.<\/i><\/div>\n<p>&nbsp;<\/p>\n<p>Et ce sera tout pour cette semaine. Une d\u00e9mo avec ces graphismes am\u00e9lior\u00e9s ne devrait pas tarder \u00e0 para\u00eetre. Mais il n&rsquo;y aura pas de nouveaux niveaux du coup!<\/p>\n<p>A+<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Salut tout le monde, Cette semaine, j&rsquo;ai pass\u00e9 du temps sur la partie \u00ab\u00a0graphismes\u00a0\u00bb du jeu. I &#8211; Ciel (\u00ab\u00a0Skybox\u00a0\u00bb) Tout d&rsquo;abord, j&rsquo;ai essay\u00e9 de rendre le ciel un peu plus \u00ab\u00a0vivant\u00a0\u00bb en y ajoutant un cycle jour\/nuit. Dans Blender, j&rsquo;ai cr\u00e9\u00e9 une sph\u00e8re 3D sur laquelle j&rsquo;ai peint une texture de ciel de jour [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":194,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[13],"class_list":["post-72","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","tag-blender"],"_links":{"self":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":4,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":394,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/posts\/72\/revisions\/394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/media\/194"}],"wp:attachment":[{"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oneiricworlds.com\/fr\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}