Forums GAMERGEN
[TUTO]Créer un thème dynamique de A à Z.
Règles du forum
Pour les tutoriels liés au jailbreak de votre console. Merci de consulter l'univers undeground PS3.
Cette section reste soumise aux règles du forum, aucun contenu warez, illégal et dangereux n'est toléré.
Pour les tutoriels liés au jailbreak de votre console. Merci de consulter l'univers undeground PS3.
Cette section reste soumise aux règles du forum, aucun contenu warez, illégal et dangereux n'est toléré.
[TUTO]Créer un thème dynamique de A à Z.
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 !
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 :
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 :
Pour ceux qui ne connaissent pas ces langage, rien ne vaut une petite définition made in Wiki :
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.
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.
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. |
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.
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 :
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 :
et voici a quoi correspond chaque balise :
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 :
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 : Et donc voici le code complet que vous devez avoir :
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>) :
Et voici a quoi correspond les deux balises :
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 :
|
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 |
Dernière édition par YaK le 13 Jan 2012, 17:09, édité 38 fois.
-
Dragoon1010
Gamer Or
- Messages: 8876
- Inscription: 29 Juil 2010, 09:23
- Localisation: En train de penser...
- Prénom: Jonathan
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
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
Les outils "raf_compiler" disponible dans le SDK officiel de la ps3.?
merci d'avance pour ton aide
a plus
-
dark75
Gamer Maitre
- Messages: 397
- Inscription: 07 Mai 2010, 08:58
- Prénom: patrick
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
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
Gamer Or
- Messages: 8876
- Inscription: 29 Juil 2010, 09:23
- Localisation: En train de penser...
- Prénom: Jonathan
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
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 !
Dès demain j'attaque la suite du tutoriel, c'est a dire la partie consacré a la création du fichier xml !
-
Dragoon1010
Gamer Or
- Messages: 8876
- Inscription: 29 Juil 2010, 09:23
- Localisation: En train de penser...
- Prénom: Jonathan
- Pays: France
- Sexe: Homme
-
jarjarvinc
Gamer Bronze
- Messages: 1028
- Inscription: 07 Avr 2010, 12:53
- Prénom: Vinc
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
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.
-
Dragoon1010
Gamer Or
- Messages: 8876
- Inscription: 29 Juil 2010, 09:23
- Localisation: En train de penser...
- Prénom: Jonathan
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
<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 ?
- Corwin_1_1
Re: [TUTO]Créer un thème dynamique de A à Z.
Ha oui en effet, je corrige ça ce soir quand je reprend le pc x) !
-
Dragoon1010
Gamer Or
- Messages: 8876
- Inscription: 29 Juil 2010, 09:23
- Localisation: En train de penser...
- Prénom: Jonathan
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
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.
-
Dragoon1010
Gamer Or
- Messages: 8876
- Inscription: 29 Juil 2010, 09:23
- Localisation: En train de penser...
- Prénom: Jonathan
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
GG excellent tuto , que je n'utiliserai pas mais gros GG a toi vraiment un boulot monstre
et aufaite Dragoon
COD c'est nul
et aufaite Dragoon
COD c'est nul
AFK
-
[HG] TJ619
Ancien
- Messages: 7649
- Inscription: 02 Sep 2011, 22:59
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
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 ?
-
Dragoon1010
Gamer Or
- Messages: 8876
- Inscription: 29 Juil 2010, 09:23
- Localisation: En train de penser...
- Prénom: Jonathan
- Pays: France
- Sexe: Homme
Re: [TUTO]Créer un thème dynamique de A à Z.
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!
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!
- duduclx Gamer Débutant
- Messages: 4
- Inscription: 06 Avr 2010, 08:16
- Prénom: julien
- Pays: France
- Sexe: Homme
31 messages
• Page 1 sur 3 • 1, 2, 3