TUTO - Créer un Thème Dynamique de A à Z
Vous rêvez de posséder un thème dynamique à votre goût ? Alors suivez ce tuto, et vous serez capables de vous en faire un.
Malheureusement, nous sommes désolés de vous l'annoncer, mais nous arrivons au terme de ce long tutoriel, il ne nous reste plus qu'a voir les différentes commandes propres au PlayStation JavaScript, ensuite vous aurez toutes les clés en mains pour créer un thème digne de ce nom !
Comme nous avons pu vous le dire quelques pages avant, ici nous ne verrons que les commandes propre au PSJS, mais qu'est-ce donc ? Il faut savoir que le JavaScript n'a rien à voir avec la PS3, comprenez par là que ce n'est pas Sony le propriétaire de ce langage. À la base, le JavaScript permet de faire des animations pour des sites web, comme bouger du texte, faire tomber des flocons de neige, etc. Sony utilise le JavaScript pour la création de thèmes dynamiques, puis ensuite ils lui ont ajouté plusieurs commandes pour la création de thèmes. Ce lot de commandes supplémentaires forme un tout qui se nomme le PlayStation JavaScript, ou PSJS pour les intimes.
Pourquoi ont-ils fait ça ?
Pour plusieurs raisons. Nous ne les connaissons pas personnellement, mais nous pouvons en déduire qu'ils l'ont fait pour pouvoir être sûrs qu'il n'y ait pas de failles de sécurité. De plus, ils ont aussi bloqué certaines commandes, qui ne sont soit pas du tout disponibles, soit disponibles que pour les consoles Debug. C'est pour cela que nous allons partager cette page en deux parties, une partie dédiée à tous les créateurs, puis une deuxième partie (plus courte) réservée uniquement aux possesseurs de console Debug.
Comment ça trop de blabla et pas assez de travail ? Bon, voici les premiers tableaux. Nous allons vous faire différents tableaux pour différentes choses, telles que les commandes pour les lumières, pour les actor, les caméras, etc.
Actor :
Un Actor définit un objet. Chacune de ces commandes permet d'animer un objet quelconque, comme lui faire faire une rotation, le déplacer ou encore l'agrandir et même le rendre invisible. Bref, tout ce que vous verrez ici est lié aux objets et uniquement à ça. Dans les différents tableaux, vous trouverez une colonne "Paramètre", celle-ci vous permet de connaître les paramètres à mettre pour chaque commande. En clair, lorsque vous noterez vos commandes, vous devrez noter "commande + paramètre" pour avoir une commande valide.
Commandes :
| Propriété | Description | Paramètre |
| var name | Déclare un objet | = new Actor("name"); |
| name.position | Définit la position de l'objet sur les axes X,Y,Z | = |
| name.rotation | Définit la rotation de l'objet sur les axes X,Y,Z | = |
| name.direction | Définit la direction de l'objet sur les axes X,Y,Z | = |
| name.up | Définit l'axe haut / bas de l'objet (mettre un 1 pour le définir) | = |
| name.scale | Définit la taille de l'objet sur les axes X,Y,Z | = |
| name.color | Définit la couleur de l'objet en RGB | = |
| name.uv_scale | Définit la taille de la texture de l'objet sur les axes X,Y | = |
| name.uv_offset | Définit la position de la texture de l'objet sur les axes X,Y | = |
| name.enable | active / désactive l'affichage de l'objet (mettre true ou false) | = false; |
| name.timer | Définit un timer à l'objet (mettre le temps souhaité) | = temp; |
Les méthodes suivantes permettent de faire une action sur un temps donné. Ce qui veut dire que vous pouvez avec ces méthodes tourner un objet, le bouger, le rétrécir / agrandir et tout ça sur un temps défini auparavant.
Cela peut paraître compliqué au premier abord, mais sachez que tout ce qui se trouve entre parenthèses sera toujours à mettre de cette façon : (
Pour "paramètre", ce sera en fonction de ce que vous voulez faire, mais ce sera soit une valeur en
Méthodes :
| Méthode | Description | paramètre |
| name.setPosition | Déplace un objet | ( |
| name.setRotation | Tourne un objet | ( |
| name.setDirection | Change la direction d'un objet | ( |
| name.setUp | Change l'angle haut / bas d'un objet | ( |
| name.setScale | Change la taille d'un objet | ( |
| name.setColor | Change la couleur d'un objet | ( |
| name.setUVScale | Change la taille de la texture d'un objet | ( |
| name.setUVOffset | Change la position de la texture d'un objet | ( |
| name.setAnimSpeed | Change la vitesse d'une animation | (index, vitesse, temp, interpolation); |
| name.setAnimWeight | change la longeur d'une animation | (index, longeur, temp, interpolation); |
| name.setAnimTime | Change le temps d'une animation | (index, durée, temp, interpolation); |
| name.getAnimSpeed | Récupère la vitesse actuelle d'une animation | (index de l'animation); |
| name.getAnimIndex | Récupère l'index lu dans une animation | (index de l'animation); |
| name.getAnimTime | Récupère le temps d'une animation | (index de l'animation); |
| name.getAnimWeight | Récupère la longeur d'une animation | (index de l'animation); |
Caméra :
Ici, toutes les commande permettent de contrôler notre caméra. N'oubliez pas que vous ne pouvez importer qu'une seule caméra par thème, donc faites bien attention à ne pas en créer une seconde.
Commandes :
| Propriété | Description | Paramètre |
| var camera | Déclare une caméra | = new Camera("camera"); |
| camera.position | Définit la position de la caméra | = |
| camera.direction | Définit la direction de la caméra | = |
| camera.up | Définit l'axe haut / bas de la caméra | = |
| camera.aspect | Définit l'aspect de la caméra | = valeur numérique; |
| camera.yfov | Définit la distance de vu minimal | = valeur numérique; |
| camera.ymag | Définit la distance de vu maximal | = valeur numérique; |
Comme tout à l'heure, les méthodes suivantes permettent de faire une action sur un temps donné avec une interpolation.
Méthodes :
| Méthode | Description | Paramètre |
| camera.setPosition | Déplace la caméra | ( |
| camera.setDirection | Change la direction de la caméra | ( |
| camera.setUp | Change l'axe haut / bas de la caméra | ( |
Les commandes suivantes permettent comme vous vous en doutez d'utiliser des lumières. Les actions possibles sont identiques que pour un objet, il existe juste quelques petites fonctions supplémentaires comme l'atténuation.
Lumières :
Commandes :
| Propriété | Description | Paramètre |
| var lumiere | Déclare une lumière | new Light("light"); |
| lumiere.position | Définit la position de la lumière | = |
| lumiere.direction | Définit la direction de la lumière | = |
| lumiere.color | Définit la couleur de la lumière | = |
| lumiere.attenuation | Atténue la puissance de la lumière | = |
Idem que pour les autres tableaux, définit une action sur un temps donné en suivant une interpolation.
Méthodes :
| Methode | Description | Paramètre |
| lumiere.setPosition | Change la position de la lumière | ( |
| lumiere.setDirection | Change la direction de la lumière | ( |
| lumiere.setColor | Change la couleur de la lumière | ( |
| lumiere.setAttenuation | Change l'atténuation de la lumière | ( |
timersintervalTimertimerOneShotTimer
Timer :
Commandes :
| Commande | Description | Paramètre |
| new intervalTimer | Définit un nouveau timer | (temp du timer, nom de la fonction); |
| new oneShotTimer | Définit un nouveau timer | (temp du timer, nom de la fonction); |
Interpolation :
| Interpolation | Description | Paramètre |
| INTERPOLATION_LINEAR | Définit une ligne droite | aucun |
| INTERPOLATION_BEZIER | Définit un bézier selon les paramètres |
Les prochaines commandes sont des commandes dites "système". Elle permettent entre autres de récupérer l'heure, la date, la résolution ou encore de déclarer un timer. Beaucoup de ces commandes ne fonctionnent qu'avec une console Debug, c'est pourquoi nous ne vous donnons que les commandes compatibles Retail et Debug.
Système :
Commandes :
| commande | Description | paramètre |
| var date | Déclare une variable date | New Date("date"); |
| var year | Déclare une variable d'année | date.year |
| var month | Déclare une variable de mois | date.month |
| var day | Déclare une variable de jour | date.day |
| var hour | Déclare une variable d'heure | date.hour |
| var minute | Déclare une variable de minute | date.minute |
| var second | Déclare une variable de seconde | date.second |
Les classes système fonctionnent sur toutes les consoles. Elle permettent de déclarer un timer, une résolution ou un interval.
Classes :
| Classe | Description | Paramètre |
| system.timer[0] | Déclare un timer | = Interval(temp, fonction); |
| system.interval | Déclare un interval | = interval(temp, fonction); |
| system.resolution | Déclare une résolution | = resolution; |
Bon, vous allez sûrement avoir du mal à assimiler tout cela d'un coup, mais vous verrez qu'avec un peu d'entraînement, tout vous paraîtra beaucoup plus simple. C'est d'ailleurs dans ce but précis que ce tutoriel a été écrit, pour vous permettre à tous de créer des thèmes dynamiques, et ainsi faire travailler votre imagination.
N'hésitez pas à nous proposer vos thèmes, nous nous ferons une joie de les regarder, et pourquoi pas en fonction du nombre de thèmes, proposer un "top thème du mois" ! Bon courage à tous, et n'oubliez pas, nous sommes à votre disposition pour toutes vos questions.
Commenter 132 commentaires
Lire la news : TUTO - Créer un Thème Dynamique de A à Z
Je sens que je vais me faire plaisir
C'est se que je cherche aussi, comme sa je mettrai mais beau montage video comme celui du Killzone
Ok, merci pour la réponse. Dommage... j'essaierai de créer un thème dynamique en 3D quand la motivation y sera.