Forums GAMERGEN

[Dragoon1010]

Le tutoriel est passé en officiel, si vous souhaitez lire le tutoriel veuillez vous rendre à cette adresse :

http://www.ps3gen.fr/creer-theme-dynamique-article-22683-1.html

Toutes les discussions relatives à ce tutoriel sont redirigées sur ce topic à présent :

http://www.ps3gen.fr/forums/tuto-creer-un-theme-dynamique-de-a-a-z-t68138.html

Merci de votre compréhension.

Salut a tous, apprentis créateurs. Aujourd'hui, je vais vous montrer au travers d'un tutoriel illustré, comment créer un thème dynamique de A à Z. Exit Dynamique Thème Editor, et exit les thèmes statique, ici je vais vous apprendre a programmer un véritable thème dynamique.

Oui oui, vous avez bien entendu, j'ai dit programmer. Vous ne vous imaginez tout de même pas pouvoir créer un thème juste en clignant des yeux non ?

C'est partie !

Introduction

Pour commencer, nous allons expliquer la différence entre Dynamique Thème Editor (que nous appellerons DTE pour la suite du tutoriel) et ce tutoriel. DTE est un logiciel, qui permet a n'importe qui de faire un thème "dynamique". Le problème de ce logiciel est qu'il se sert principalement de vrai thème disponible sur le PSN comme le thème Heavy Rain, et il vous propose de modifier des images au format DDS avec photoshop. Donc comme je disais, le problème vient de là, car nous ne pouvons que modifier les "images", et non pas leurs déplacements ou même leurs formes, et il est aussi impossible d'ajouter des images en plus. Bref, vous l'aurez compris, DTE est très limité, mais pas de panique, il existe une autre façon de faire, moins facile certe, mais plus complète, et ce tutoriel va justement vous expliquer comment faire. Ici notre thème va être écrit de toute pièce. De base nous allons créer des objets 3D, puis nous taperons du code qui nous permettras de générer un fichier avec l'extension .RAF, et ensuite le .RAF seras ajouter a la compilation d'un fichier .P3T. Pour finir, rien de tel qu'un exemple de thème, voici une vidéo de mon premier thème intitulé "Ecosystème"(cliquez sur l'image pour lire la vidéo). Et voici le topic officiel du thème.

1 - Les Prérequis

Pour pouvoir suivre ce tutoriel, vous aurez besoin de différente choses, dont voici la liste : Les outils "raf_compiler" disponible dans le SDK officiel de la ps3.(je ne suis pas responsable du téléchargement du SDK, et je ne peut fournir aucun lien). D'un logiciel de modélisation 3D (ici je travaillerais avec Cinéma 4D R12). D'un logiciel de retouche photo. Du Pack RTU a télécharger ICI.(comprend les dossiers utiles, P3Tcompiler, et l'installateur de Notepad++). De patience, et d'un cerveau. Aucune connaissance en programmation n'est "nécessaire" bien qu'une petite notion est un plus, car ici nous allons aborder deux langages différents : Le XML. Le Javascript. Pour ceux qui ne connaissent pas ces langage, rien ne vaut une petite définition made in Wiki : Le XML Le XML (Extensible Markup Language, « langage de balisage extensible ») est un langage informatique de balisage générique qui dérive du SGML. Cette syntaxe est dite extensible car elle permet de définir différents espaces de noms, c'est-à-dire des langages avec chacun leur vocabulaire et leur grammaire, comme XHTML, XSLT, RSS… Cette syntaxe est reconnaissable par son usage des chevrons (< >) encadrant les balises. L'objectif initial est de faciliter l'échange automatisé de contenus complexes (arbres, texte riche…) entre systèmes d'informations hétérogènes (interopérabilité). Avec ses outils et langages associés une application XML respecte généralement certains principes: - La structure d'un document XML est définie et validable par un schéma, - Un document XML est entièrement transformable dans un autre document XML. Le JavaScript JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi côté serveur. C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de générer leurs propriétés, et notamment une propriété de prototypage qui permet d'en générer des objets héritiers personnalisés. Maintenant que vous avez fait connaissance avec ces deux langage, je vais vous détailler les différentes étapes que nous allons effectuer au cours de ce tutoriel. Création d'un objet "cube" avec exportation au format .DAE ; Création d'un objet "background" avec exportation au format .DAE ; Ecriture du code XML ; Ecriture du code JS ; Au final, notre but seras d'afficher un cube texturé, avec un arrière plan lui aussi texturé. Nous ajouterons aussi a cela une animation du cube. Enfin pour finir, une fois l'animation terminé, je vous apprendrais a créer d'autre animations. (voici ce que nous allons faire ici. Moche, mais indispensable pour apprendre les bases) Pour finir, je vais vous faire une courte liste des choses a éviter, et ceci seulement pour ne pas être confronté a des problèmes de compilations. Ne pas utiliser des textures trop grande (préferez le 240*480, ou le 720*1440 maximum). Vérifiez toujours votre code source, nous n'avons aucun debugger, donc ce seras a vous de faire bien attention a ne rien oublier. Ne jamais utiliser le même objet pour 2 "model" (vous comprendrez tout a l'heure). Cette condition est importante, auquel cas votre console crasheras a l'installation du thème. Ne faite pas d'objets trop complexe. N'importez que des objets, les lumières et caméra n'étant pas reconnu par le logiciel, vous vous retrouverez confronté a une erreur de compilation. Voilà, vous connaissez le minimum de choses a ne jamais faire, pensez a bien respecter ces conditions si vous ne souhaite pas être confronté a différent problème de compilation/installation.

2 - Création des fichiers DAE

Il est temps de rentrer dans le vif du sujet. Nous allons commencer par créer les deux objets suivant : Un cube Un plane Pour cela, je vous est créer un tutoriel vidéo, cliquez sur l'image suivante pour visualiser la vidéo. PS::je tient a rappeler que j'utilise Cinéma 4D, de ce fait je ne vais donner des indications que pour ce logiciel, mais le fonctionnement est le même sur tout les logiciels. Et voici le même tutoriel a l'écrit, pour ceux qui préfèrent cette méthode(cliquez sur les images pour les voirs en haute définition). Avant toute chose, décompressez le pack RTU, et mettez le dossier "tuto" ainsi que son contenu sur le bureau. Ouvrez Cinéma 4D et générez un cube grâce a l'icône "cube" en haut. Pour cela, cliquez simplement sur l'icône. Une fois le cube généré, redimensionnez le à des dimension de 10*10*10 comme sur l'image suivante. Pour cela, tout se passe en bas a droite. Créez une texture, en double cliquant dans la zone en bas a gauche, et glissez/déposez la texture sur le cube. Enfin exportez l'objet au format DAE comme sur l'image suivante, puis enregistrez le dans le dossier "objet". Maintenant nous allons revenir sur C4D. Fermer le projet en cours, et créer en un nouveau. Cette fois ci, vous aller devoir créer un "plan" comme ci dessous. Cliquez sur l'icône "rotation" en haut, comme sur l'image suivante, ensuite faite tourner le plan a 90° sur l'axe X. Si vous ne savez pas comment faire, c'est simple vous sélectionnez la ligne rouge, vous appuyez sur "MAJ" de votre clavier, et vous faite tourner le plan jusqu'a 90°. Puis on refait les étapes précédentes, création de la texture, application de la texture, et exportation au format DAE dans le dossier "objet". Au final vous devez avoir ceci dans le dossier "objet". Pensez a bien nommer vous objets/textures de la même manière que moi. Voilà, la première partie est terminé. Pour la seconde partie, nous allons attaquer le plus gros du travail, la création du fichier XML.

3 - Création du fichier XML

Bon, nous venons de créer deux objets différents, un cube et un arrière plan. C'est bien beau, mais maintenant il va falloir les ajouter a la scène, et c'est ici que le fichier XML intervient ! Avant de taper notre premier code, je vais d'abord vous expliquer a quoi sert chaque fichier source. cube.xml : ce fichier sert a faire appel aux différents objets et textures que nous utiliserons pour l'animation. Il est primordial, car sans lui, on ne peut rien faire. Il faut appel entre autre aux objets, textures caméras et lumières dont nous avons besoin. cube.js : celui ci quand a lui ne gère que l'animation. par exemple, c'est lui qui gère le déplacement de vos objets, mais aussi de la caméra et des lumière. Il permet aussi de paramétrer les différents objets importer, même si le fichier xml permet aussi de le faire. tuto.xml : ce ficher là quand a lui n'est utile en rien dan la génération de l'animation. En fait ce fichier n'est autre que le fichier xml qui contient la liste de toute les icônes, arrière plan, et autre folie d'un thème au format P3T. Bien sûr, ici il ne contient rien d'autre qu'une ligne, qui permet de faire appel a notre futur fichier RAF. run.bat : Rien de bien utile en soit, ceci est un batch que je vous est créer, ceci permettras d'automatiser toute vos commandes, mais ne vous inquiétez pas je vous fournirais aussi les commandes exact pour tout les fan de la bonne vieille ligne de commande. Pour commencer, installez notepad++ (a moins que vous souhaitez utiliser un autre IDE), son installateur se trouve dans le pack RTU. Une fois installer, allez dans le dossier "tuto/cube". Normalement, vous devriez avoir un fichier "cube.js", et "cube.xml", si c'est bien le cas, alors faite un clic droit sur le fichier "cube.xml", puis "edit with Notepad++". Normalement, si tout se passe bien, vous arriverez aisément sur la page suivante. Avant de commencer a entrer dans le vif du sujet, voici un petit rappel des bases du xml. Un xml commence toujours par un prologue. Le prologue se place au début du xml pour indiquer différentes informations. en général il est optionnel, mais nous le rendrons obligatoire pour ce tuto. voici le prologue a mettre dans votre xml, et ceci pour chaque RAF que vous compilerez : <?xml version='1.0' encoding="UTF-8" ?> Le XML est un langage de balisage. Une balise commence obligatoirement par <balise> et se termine par </balise>. Une balise peut contenir des attributs, ici nous n'allons utiliser que des attributs, et rien d'autre. voici comment des attributs se composent : <balise1 attribut1="attribut" attribut2="attribut" attribut3="attribut" attribut4="attribut" attribut5="attribut" /> Voilà, maintenant que vous savez comment se compose une balise et ses attributs, nous allons pouvoir commencer. Sachez avant toute chose que toute les balises et tout les attributs devront être écrit de la même manière que moi, et ceci a chaque fois que vous ferez un xml en rapport avec la création du fichier RAF. Dernier petit point a aborder, il faut savoir que tout les langages de programmation permettent d'écrire des commentaires dans votre code. Les commentaire permettent entre autre de mettre des infos sur votre code source, et ceci sans que ce soit pris en compte lors de la compilation. En clair, cela nous permet de dire ce que tel ou tel chose fait, et vous verrez que cela deviendras très vite indispensable lorsque votre code atteindras plusieurs 100ène de lignes de code ! Si je vous dit cela, c'est parce que je vais moi même mettre des commentaires dans mon code, pour que vous puissiez mieux vous y retrouver. Un commentaire en xml se compose de cette manière : <!-- ceci est un commentaire sur une ligne --> <balise1 attribut1="attribut" attribut2="attribut" /> Mais vous pouvez aussi écrire des commentaires sur plusieurs lignes comme ceci : <!-- ceci est un commentaire sur plusieurs ligne <!-- --> <balise1 attribut1="attribut" attribut2="attribut" /> Il existe d'autre type de commentaire pour le JavaScript, mais nous aborderons ce point en temps voulu. C'est partie. Ouvrez le fichier "cube.xml" qui se trouve dans "Tuto/cube" avec Notepad++ (ou tout autre IDE), et copiez/coller ce code minimal : Code: Select All Code <?xml version='1.0' encoding="UTF-8"?> <raf> </raf> Tout notre code devras être écrit entre les balise <raf> et </raf>. Maintenant que nous avons le code minimal, nous allons pouvoir commencer a importer nos objets et textures. Pour commencer, nous allons importer l'arrière plan, ensuite nous importerons le cube. Pour importer l'arrière plan, écrivez ce code : Code: Select All Code <model id="mdl_wallpaper" file="objets\wallpaper.dae" /> <material id="mtrl_wallpaper" effect="pure_texture" >         <texture file="ecosysteme\textures\wallpaper.jpg" /> </material> <actor id="wallpaper" model="mdl_wallpaper" material="mtrl_wallpaper" scale="600, 600, 600" /> et voici a quoi correspond chaque balise : <model id="mdl_wallpaper" file="objets\wallpaper.dae" /> La balise <model> permet de faire appel a un objet au format DAE. Comme vous pouvez le voir, elle possède deux attribut, le premier attribut se nomme id, et le second se nomme file. L'attribut id permet de donner un nom a notre objet, et ceci pour permettre par la suite de faire appel a l'objet via son nom. Le nom de l'objet ici est mdl_wallpaper, mais vous pouvez l'appeler comme vous le vouler, je l'ai appeler ainsi pour mieux m'y retrouver (mdl signifie modèle, et wallpaper est le nom du DAE). L'attribut file permet quand a lui de faire appel au fichier DAE. Ici la valeur de cet attribut est "objets\wallpaper.dae", qui n'est autre que le chemin d'accès vers le DAE (ou seulement le nom si le DAE se trouve dans le même dossier que le xml). <material id="mtrl_wallpaper" effect="pure_texture" > <texture file="textures\wallpaper.jpg" /> </material> Ici nous avons une balise dans une autre balise. La balise principale commence a <material> et fini a </material>La seconde balise est la balise <texture>. <material> est une balise qui permet de définir un materiel. Celle ci possède deux attributs. L'attribut id est le même que pour la balise </model>. L'attribut effect permet de donner différent effet au materiel, comme un reflet, un affichage classique, une transparence etc... La seconde balise nommé <texture> permet de définir une texture et ne possède qu'un attribut file, qui fait la même chose que pour la balise <model> <actor id="wallpaper" model="mdl_wallpaper" material="mtrl_wallpaper" scale="300, 300, 300" /> Cette balise permet de grouper objet et texture ensemble. En clair, la balise <actor> permet d'appeler notre DAE et notre texture. Vous remarquerez que la valeur des attributs sont les noms des attributs défini dans les précédentes balises. L'attribut id= permet de donner un nom a notre objet définitif. L'attribut model= fait appel a la balise <model> L'attribut material= fait appel a la balise <material> l'attribut scale= permet de définir une taille a notre objet final. les valeurs de base sont "1, 1, 1", ce qui sgnifie 100% de la taille d'origine. Un scale de "2, 2, 2" correspond a une taille 200% plus grande que la taille d'origine, vous comprendre donc qu'un scale en "300, 300, 300" est très très grand. Il faut savoir qu'ici, nous n'avons aucune unité de mesure tel que le centimètre, donc ce seras a vous de savoir gérer la taille de vos objets. Pour finir, sachez que ces mesures sont exprimé sur 3 axes, l'axe X, Y et Z (dans cet ordre là). Voilà, c'est fini pour l'arrière plan. Maintenant que vous savez comment importer un objet avec sa texture, je vous propose un petit défi qui vous aideras a mieux comprendre. Ce défi seras très simple vous verrez, il vous suffiras juste de bien suivre la partie dédié a l'importation du wallpaper, et tout devrez fonctionner comme par enchantement ! Bon aller, ce que je vous propose, c'est de faire vous même l'importation du cube, en respectant l'ordre et l'emplacement de chaque balise, et pensez aussi a n'oublier aucun attribut. Voici quelques infos pour vous : appelez votre cube mdl_cube et votre texture mtrl_cube. mettez lui un scale défini sur 100%. n'oubliez pas de dire ou se trouve votre cube et votre texture. Bonne chance a vous ! Normalement vous ne devriez pas en avoir pour longtemps. Stop ! Le défi est terminé, voyons si vous avez réussi. Voici le code qu'il fallais écrire pour importer notre cube : [+] CLIQUER POUR AFFICHER Code: Select All Code <model id="mdl_cube" file="objets\cube.dae" /> <material id="mtrl_cube" effect="pure_texture" >         <texture file="textures\cube.jpg" /> </material> <actor id="cube" model="mdl_cube" material="mtrl_cube" /> Et donc voici le code complet que vous devez avoir : Code: Select All Code <?xml version='1.0' encoding="UTF-8"?> <raf> <model id="mdl_wallpaper" file="objets\wallpaper.dae" /> <material id="mtrl_wallpaper" effect="pure_texture" >         <texture file="ecosysteme\textures\wallpaper.jpg" /> </material> <actor id="wallpaper" model="mdl_wallpaper" material="mtrl_wallpaper" scale="300, 300, 300" /> <model id="mdl_cube" file="objets\cube.dae" /> <material id="mtrl_cube" effect="pure_texture" >         <texture file="textures\cube.jpg" /> </material> <actor id="cube" model="mdl_cube" material="mtrl_cube" /> </raf Voilà, nous avons réussi a importer nos deux objets, et nous leurs avons appliquer une texture. Avant de passer a la création du fichier JavaScript, il nous reste deux petites choses a ajouter a notre xml, une caméra, et une lumière. commencez déja par télécharger ce petit pack de lumière, il contient les deux seul lumières que l'on peut ajouter, c'est a dire une lumière ambiante et un point lumineux. Une fois télécharger, mettez les deux fichier .DAE dans le dossier objets. Maintenant que nous somme prêt a importer notre lumière et notre caméra, voici le code a écrire a la suite de l'autre (toujours entre les balises <raf> et </raf>) : Code: Select All Code <camera id="camera" type="perspective" yfov="0.927292" ymag="0" znear="0.01" zfar="1000" position="0, 0, 18" direction="0, 0, 0" up="0, 1, 0" /> <light id="ambiant_light" file="objets\ambiant_light.dae" type="ambient" /> Et voici a quoi correspond les deux balises : <camera id="camera" type="perspective" yfov="0.927292" ymag="0" znear="0.01" zfar="1000" position="0, 0, 18" direction="0, 0, 0" up="0, 1, 0" /> Je ne vous apprend rien quand je vous dit que la balise <camera> permet d'importer...une caméra ! Comme vous pouvez le voir, ici nous ne faisons pas appel a un objet au format .DAE, pour la simple et bonne raison que ceci est déjà intégré au logiciel de Sony, il suffit juste d'indiquer que l'on souhaite importer une caméra, lui mettre quelques propriété, et le tour est jouer. L'attribut id= fonctionne de la même manière qu'auparavant, elle sert a donner un nom a notre caméra. L'attribut type= permet de dire quel type de vision utiliser, il n'existe que deux type de vision, la vision "perspective" et "orthographique", mais nous reviendrons sur ce point un peu plus bas, ici nous n'allons utiliser que la vision "perspective". L'attribut yfov= indique le champ de vision dans le direction verticale (perspective uniquement) grâce a un nombre. L'attribut ymag= indique le grossissement de la vision dans le direction verticale (orthographique uniquement) grâce a un nombre. L'attribut znear= indique la distance la plus proche où la camera peut voir l'objet. L'attribut zfar= indique la distance la plus loin où la camera peut voir l'objet. L'attribut position= permet de choisir la position de notre caméra, sur un axe X, Y, Z. Vous verrez par la suite que l'on peut soit mettre des attributs dans notre xml pour donner des propriétés a un objet, soit le faire via le fichier JS, ici pour la caméra, je préfère établir la position/rotation/direction via le XML pour ne garder que les mouvements d'objet via le JavaScript. L'attribut direction= est identique a l'attribut position=, il permet de choisir la direction de notre caméra. Pour finir, l'attribut up= permet de définir l'axe qui seras placé en haut. Il faut savoir que de base, l'axe x est l'axe de gauche a droite, l'axe Y est l'axe de haut en bas, et l'axe Z et l'axe d'avant en arrière. Ici, tout est laisser par défaut, ne toucher pas a cette option pour le moment, écrivez la tel quel, ça vous éviteras bien des mésaventures... <light id="ambiant_light" file="objets\ambiant_light.dae" type="ambient" /> Ici rien de bien compliqué, la balise <light> permet d'importer une lumière. Il ne faut utiliser que ces deux types de lumières, n'essayez pas de mettre une lumière dans un .DAE personnalisé, vous serez confronté a une erreur de compilation. Vous connaissez déjà les deux premiers attribut, seul le dernier vous est inconnu, celui ci permet de choisir entre une lumière ambiante (ambient), ou un point lumineux, similaire a un spot (point). Il existe aussi plein d'autre paramètres a donner a notre lumière, mais qui seront inutile pour ce tutoriel. Bon et bien voilà, nous avons terminer la partie sur le XML. Si vous avez réussi a suivre jusqu'ici, c'est que vous êtes courageux, et vous avez de grande chance de faire de très beau thèmes dans un futur proche ! Bon sans plus attendre, voici le code définitif pour le xml : Code: Select All Code <?xml version='1.0' encoding="UTF-8"?> <raf> <!-- arrière plan --> <model id="mdl_wallpaper" file="objets\wallpaper.dae" /> <material id="mtrl_wallpaper" effect="pure_texture" >         <texture file="ecosysteme\textures\wallpaper.jpg" /> </material> <actor id="wallpaper" model="mdl_wallpaper" material="mtrl_wallpaper" scale="300, 300, 300" /> <!-- objets de notre scène --> <model id="mdl_cube" file="objets\cube.dae" /> <material id="mtrl_cube" effect="pure_texture" >         <texture file="textures\cube.jpg" /> </material> <actor id="cube" model="mdl_cube" material="mtrl_cube" /> <!-- caméra et lumières --> <camera id="camera" type="perspective" yfov="0.927292" ymag="0" znear="0.01" zfar="1000" position="0, 0, 18" direction="0, 0, 0" up="0, 1, 0" /> <light id="ambiant_light" file="objets\ambiant_light.dae" type="ambient" /> </raf

4 - Création du fichier JavaScript
EN COURS DE REDACTION

5 - Compilation du thème et test
EN COURS DE REDACTION

6 - Liste des Balises/Attributs pour le XML
EN COURS DE REDACTION

7 - Liste des différentes commandes JavaScript
EN COURS DE REDACTION

[dark75]

merci c'est cool de ta part pour toutes choses mais comment ont fait pour trouver
Les outils "raf_compiler" disponible dans le SDK officiel de la ps3.?
merci d'avance pour ton aide
a plus

[Dragoon1010]

Le tutoriel n'est pas fini, mais il te faut télécharger le SDK de la ps3, par contre je ne peut fournir aucun lien .

[Dragoon1010]

Le tutoriel as été mis à jours, j'ai ajouter la vidéo pour la création des DAE. deux autres vidéos vont bientôt arriver, cette fois-ci de la part de Corwin, avec comme sujet le même que ma vidéo, mais sous 3DS Max et Maya.

Dès demain j'attaque la suite du tutoriel, c'est a dire la partie consacré a la création du fichier xml !

[jarjarvinc]

Intéressant. Sympa de ta part.

[Dragoon1010]

La partie sur le xml as été complété, mais elle n'est pas encore fini. Dites moi ce que vous en penser, j'ai tenter de garder la colorisation syntaxique comme si vous utilisez un IDE classique.

[Corwin_1_1]

<material> est une balise qui permet de définir une texture.

petite rectification : qui permet de définir un matériel car la texture n'est pas obligatoire Sinon clair pour moi mais les autres ils pensent quoi ?

[Dragoon1010]

Ha oui en effet, je corrige ça ce soir quand je reprend le pc x) !

[Dragoon1010]

La partie sur le xml et terminé, il ne me reste plus qu'a refaire le même tuto en vidéo, et a clarifier certaines choses.

[[HG] TJ619]

GG excellent tuto , que je n'utiliserai pas mais gros GG a toi vraiment un boulot monstre

et aufaite Dragoon
COD c'est nul

[Dragoon1010]

Dites moi, pensez vous qu'il soit utile de faire une vidéo pour la partie XMl et une vidéo pour la partie JS, ou un tuto écrit vous suffit ?

[duduclx]

salut,

d'abord, jolie tuto, bien détaillé ... et merci d'être passé sur mon wiki.

à mon avis, la création 3D est à part de la création du RAF.

si tu veux donner des cours de 3D, t'en aura pour un moment !!

Je pense qu'un bon tuto bien expliqué peu se passer d'illustration, surtout pour du code .xml ou .js.

détailler les fonctions suffiront à un initié ... les non-initiés ne prendront jamais le temps pour ça.

autant le .xml demande simplement de la logique, autant le psjs (javascript) ressemble à du C/php et autres langages de programmation qui ne sont utilisable qu'avec un minimum de connaissances.

pour le reste, on en parle par Mail.

à plus!