Voilà, je voulais réaliser un projet qui me tiens a coeur depuis... des années, quelques choses qui remonte loin dans mes années d'études... mais voilà ni le temps ni les connaissances n'étaient au rendez-vous... Ce projet porte le nom d'Aurora... je vous en parlerais au fil des articles...
Millieu des années 90, c'est le temps de développer les deux parties (clients et serveurs) qui m'a arreter, je connaissais la téhorie, j'avais de bon exemples et quelques test pas mal torchés.mais il faillait toujours créer les deux parties du puzzle et de solide connaissance en C/C++ et en directx naissant...
Ensuite les serveurs ont commencés a devenir accessibles et intelligent, des languages de programmation sont apparu coté serveur aussi ASP; je ne croyais pas trop au JAVA (a tord ou a raison, ce n'est pas le débat).
aujourd'hui la puissance des machines est tel que même en Javascript HTML5 on fait des truc de oufs, sans se sortir la main du slip...
mais cela demande une solide connaissance comme toujours; je vous propose de me suivre dans mes découvertes de technologie; j'ai de bonnes bases en logique, d'assez bonnes bases en php4/5, HTML et SQL, et des notions de CSS.
mon objectif est complexe:
Vous l'aurez compris, c'est un truc "lourd"...
j'écrirais des articles en forme de pense-bête, ou simplement pour vous donner des trucs et astuces suivants mes recherches.
pour vous situer, j'ai développé au fil du temps une sorte de framework, qui à la longue, est devenu une vrai usine a gaz; et donc je profiterais de mes recherches sur le projet Aurora pour vous donner un apperçu sur les améliorations/optimisations/nettoyage du code de mon framework Version 1 vers une Version 2 qui je l'espere sera plus rapide et plus facile a gérer.
Avant de commencer le vif du sujet; il est bon de choisir sa plateforme de developpement... pour moi j'ai testé plusieurs choses, et j'ai donc émis le cahier ci-dessous.
Apache: http://www.apache.org
PHP: http://www.php.org
MySql: http://www.mysql.com
N'ayant (et ne voulant) pas de mac, je ne viserais que deux OS: Windows et Linux
En gros il s'agit du serveur "définitif" du projet...
C'est l'un des moyens que j'ai conservé pour le developpement. On peut aisément installer une console graphique dessus, mais je ne vous le recommande pas.
Debian: http://www.debian.org
pour installer les serveurs:
J'ai passé sous silence le serveur Windows/IIS, car cela ne couvrait pas mon cahier de charge...
Il existe deux choix possibles: EasyPHP et WAMP.
Pendant des années je me suis basé sur EasyPHP pour sa facilité et sa souplesse, mais lors du passage sur serveur de production, j'ai eut beaucoup de surprises et de changement a faire. La faute aux choix et options "de base" de cette solution qui se voulant facile vous active pas mal de librairie et d'options de base.
Easyphp: http://www.easyphp.org
Pour l'instant, c'est LE choix a faire si vous développez sous windows.
Je trouve ca lourd (surtout aujourd'hui) de devoir parcourir un (voir plusieurs) fichier(s) CSS pour modifier la couleur d'un élément; voir parfois de dizaines car vous trouvez que je vert ne convient pas aussi bien qu'un bleu pour TOUT les éléments de votre page... et donc vous devez rechercher dans vos CSS toutes les #15FF12; mais aussi les #18FC11; et puis vous trouvez a la fin un #182500; qui vous pourris bien la vie...
heureusement il y a LessCSS...
Le tutorial est fait pour la version 1.3.3, mais le code ci-dessous est facilement adaptable à d'autre versions.
De plus LessCSS *peut* vous aider a faire du responsive design (1)...
En deux mot: un préprocesseur CSS. LessCSS est au CSS ce que le PHP est à l'HTML...
Qui n'a jamais rêvé de définir une fois pour toute SA couleur de base, et ensuite de faire des déclinaisons matématique en CSS...
et bien LessCSS est là pour ça (entre autre)...
Vous allez me dire oui, mais mon code est déjà bien avancé et je ne veux pas tout modifier, ben c'est pas très compliqué à utiliser... Même sur des applications bien avancées en développement.
Vous avez deux techniques; le précompilé ou l'interprété à la volée...
Pour le développement je vous conseille le second, pour la production le compilé c'est bien aussi.
Oui, vous écrivez vos LessCSS, puis via une appli Windows/linux voir même en ligne, vous compilé vos code Less en CSS, et vous n'avez plus qu'a modifier la référence CSS (ou a remplacer votre CSS de base par le résultat compilé) et hop le tour est joué.
en ligne voici quelques outils:
http://www.dopefly.com/less-converter/less-converter.html
C'est la solution que j'utilise aujourd'hui
Dans mon framework personnel (Version 1), j'ai un fichier "header.php" qui contient le début du code d'une page classique (en gros les balises <HTML> <HEAD>, </HEAD> et <BODY>).
voici un extrait de mon <head>:
Je reviendrais sur le chargement des javascript plus tards, ce qui m'interesse se situe dans la partie CSS. j'ai beaucoup de CSS, car mon Framework a évolué avec le temps, de façon anarchique.
Ce fichier php initalise aussi quelques paramêtres vitaux, et contient l'inclusion des CSS natifs de tout le projet (oui TOUT les CSS, donc parfois un joyeux bordel).
J'ai donc adapté ce php pour utiliser LessCSS;
Puis dans la section <HEAD> </HEAD> elle charge le CSS demandé:
Et enfin le script less:
voici les sources .less de cet exemple
pour résumé, nous avons deux fichiers inclus (via la commande @import) qui contienent toutes les définitions de base de notre css (common.less et menu.css); puis un fichier main.less qui contient les définitions de la page (sur base du fichier common.less), il est intéressant de noté que les fichiers .css (et qui ne contiennent pas de définition LessCSS, sont importés tel quel dans le fichier final; en version javascript les commentaires sont "oubliés" mais en version compilée, les commentaires CSS sont conservés.
Et le résultat dans votre page
Vous pouvez voir qu'il y a des optimisations (margin: par exemple) mais surtout que les couleurs sont calculées a partir de la couleur de base "@nice-blue". Si vous référencez une variables qui n'existe pas (plus) vous aurez un message d'erreur:
Simple non ?
(1) Je dis *peut* car je n'ai pas testé le truc à l'heure où j'écris ces lignes... (Il faut impérativement utiliser la version javascript de LessCSS pour que cela fonctionne...)
Avant de commencer, et surtout de me faire incendier par les puristes, je tiens a préciser quelques points et à rappeler certaines notions de base, même si dans la suite de l'article, je dis le contraire ou que je suis imprécis:
Voilà une fois ces remarques posées, nous pouvons passer à la suite.
La 3D Isométrique, rien de mieux pour un browser web...
A la base je comptais faire un "gros" article et en rédigeant celui-ci, je me suis dit; c'est assez indigeste... donc cela sera plutot une série, et comme je suis assez mauvais en introduction, je vais mettre ici quelques sites qui m'ont servi de référence:
J'ai écris cet article, car malgré des recherches avancées, je n'arrive pas a trouvé de source complète sur le sujet ni vraiment de mise en pratique de la théorie, certes il existe des plug-ins ou du code tout fait, mais rien qui satisfasse réellement ma soif de connaissances et mon envie de comprendre.
L'une des raisons à ce manque d'informations est sans doute que la 3d isométrique à été supplantée dans les jeux par la "3D pure".
Dans le cadre d'un jeu WEB, les développeurs préfèrent la 2D pure, c'est plus simple à gérer, et beaucoup plus rapide a calculer; c'est donc une technologie très rentable;
Seulement, je trouve que c'est moche, et que la 3D isométrique est le meilleur compromis.
La 3D isométrique est un moyen de rendre l'effet de perspective et de profondeur en utilisant des éléments en 2D. Appliquée à une carte composée de cases, cette technique donne un rendu saisissant mais pour bien la comprendre, il est nécessaire de réfléchir à ses implications mathématiques. L'objet de ce tutoriel est d'expliquer pas à pas la théorie de la 3D isométrique lorsqu'elle est utilisée sur un site WEB. Les paragraphes qui suivent contiennent de nombreuses références mathématiques mais peu de code.
Pour faire un bon jeu d'aventure ou un jeu de role, rien ne vaut un monde vaste, et qui dit monde, dit carte(s); le plus simple pour faire une carte, c'est de prendre une feuille de papier quadrillé, et de dessiner dessus...
En informatique, c'est pareil...
c'est donc un univers 2D qui est représenté, vu de haut; c'est facile a faire avec un ordinateur, une case de la carte s'affiche sans modification sur l'écran (tout au plus faut il gérer les très grandes cartes qui dépassent de l'écran. Mais il faut avoué que cela manque d'entrain, et aussi belles soient les cases, cela reste une carte et non un monde...
Oui, je vais parler de "tiles" et non de "tuilles" car je n'aime pas la fancisation dans n'importe quel sens... donc je parle de tile et de tileset
Avant tout, je rappelle la "procédure" pour créer des tiles isométriques.
Par le passé, les logiciels de dessin utilisaient comme référence le pixel d'écran; et les graphistes devenaient souvent soit des Dieux du positionnement "au pixel près" soit adepte du Zoom; l'un des logiciels les plus connu sur Amiga était le Deluxe Paint (qui fut d'ailleurs porté sur PC)et RIEN n'a (a mes yeux) remplacer ce merveilleux logiciel pour ce type de dessins.
Pour créer une vue isométrique utilisable sur ordinateur, on applique une rotation de 45° vers la droite, puis un "écrasement" de 50% en hauteur.
Dans le temps, il fallait une sacrée dose de patience pour réaliser ces "tiles" afin qu'elles s'associent l'une à l'autre par les cotés.
Aujourd'hui, il existe de très bon logiciels qui réalise ces oppérations pour vous, je citerais le World Creator de www.inet2inet.com. Ce logiciel n'est peut-être pas le plus efficace, mais il est certainement le plus précis.
On se retrouve donc avec des images rectangulaires contenant des formes tordues, d'où la difficulté de les coller les unes aux autres. Je rappelle que si l'on considère la carte comme un plan orthonormé, l'origine est en haut à gauche.
Avec ces formes "en losange", si on est un peu codeur, on comprend très vite que cette vue 2.5D est un peu une sorte d'enfer, car il faut avancer dans deux dimensions x/y alors que l'on dessine un ligne (ou une colonne) de notre carte.
Pour des raisons de simplicité, je melangerais dans ce tutorial HTML, CSS et JavaScript; il est évident qu'il ne faut surtout pas faire comme cela, mais bien séparer les trois (quand c'est possible évidement)
Là, où en simple 2D, vous auriez imbriqué deux boucle for(); et vous auriez multiplier les indices de case par la taille de l'image a affiché.
Admettons que nos tiles fasse 64x64 pixels, voici comment vous auriez affiché:
en isométrique, cela ne fonctionnera pas... car il faut "imbriquer" les losanges... mais pas de panique, voici la marche a suivre:
Et voilaaaa... vous avez un sol en 3D isométrique.
Là, je vous vois crier au scandale. Oui, j'affiche une fois toute la map, elle va dépasser de l'écran, ca va être moche etc...
En fait non, c'est assez simple d'éviter de montrer toute la carte; j'affiche la carte dans un DIV qui est lui même dans un DIV view; je centre la vue au début: