HyperTheme LE tutoriel

création de thèmes pour Hyperspin

Tout ce qu'il faut savoir sur HyperTheme

Bonjour à tous !
Gros tuto pour vous dans cette section et pas des moindre vu qu’il va traiter d’HyperTheme, le software permettant de créer les thèmes pour notre Frontend.
Comme d’habitude, nous allons tenter de vous présenter HyperTheme dans sa totalité (noté aussi HT au cours de ce tuto), en divisant le travail en 2 parties. La première partie écrite présentera HyperTheme dans son intégralité, ce qu’il permet de faire et les options qui le compose. Quant à la seconde, en vidéo, elle détaillera la création pas a pas d’un thème (d’une qualité moyenne mais seule importe la bonne compréhension de chaque étape de sa réalisation) pour vous aider avec cet éditeur de la façon la plus complète possible.
En route !

Présentation d’HyperTheme

HyperTheme est un petit software conçu par la Team officiel d’Hyperspin qui est uniquement dédié à la création de thème pour ce frontend. Point de traitement, de détourage ou autre modification d’image ici, seul le placement d’éléments (images et vidéos que j’appellerai « objets » dans ce tuto) est traité par ce soft, ce qui implique donc d’avoir quelques notions de bases sur Photoshop, Gimp ou tout autre logiciel de traitement d’image pour créer vos éléments graphiques « bruts » a insérer dans votre thème. Des tutos détaillant les travaux de bases d’une image sur Photoshop sont disponibles sur notre site et forum ou ailleurs sur le net, il suffit de chercher un peu.

La seule chose à toujours garder a l’esprit, c’est qu’HyperTheme travaille uniquement avec des fichiers au format PNG pour les images et FLV pour les vidéos, la transparence des éléments étant nécessaire à leur mise en place.

Support des fichiers PSD – Depuis HyperTheme 1.1.5, vous pouvez travailler avec des fichiers au format PSD sans avoir à les réenregistrer en PNG via Photoshop mais je vous le déconseille dans un souci de clarté et de taille.
Edition des Thèmes déjà existants – Vous pouvez aussi éditer et modifier des thèmes déjà existants. Il vous suffit d’ouvrir le thème au format ZIP dans HT (je détaillerai cela par la suite), faire des modifications et l’enregistrer en écrasant l’ancien thème.

L’interface d’HyperTheme

Détaillons maintenant l’interface d’HT et les options qui le compose. Voila comment il se présente.

1/ La partie centrale sera la zone ou vous pourrez voir votre thème prendre forme et le travailler, déplacer vos artworks, insérer vos vidéos, vérifier vos effets de transitions, etc.
2/ La zone latérale gauche contiendra tous les paramètres de personnalisation de chaque option de la barre d’outils n°3. Tout sera décrit dans la suite du tuto.
3/ La barre d’outils regroupe toutes les options sur lesquelles vous pouvez travailler. Background, Artworks, Videos, Effets de transition, etc. Je la détaille juste après.
4/ La zone latérale droite vous servira à naviguer dans vos disques dur, plus particulièrement vos dossiers contenant les thèmes déjà existant pour les éditer, les modifier, les supprimer… Une sorte d’explorateur intégré en somme.
Il vous servira aussi à créer un thème à partir de fichiers au format PSD (pour les utilisateurs de Photoshop).
5/ La zone basse n°5 vous donne un aperçu des effets de transition ou de mouvement des différents éléments choisis préalablement dans la barre d’outils n°3. En cliquant sur un type d’effet, vous pourrez voir un snapshot animé de l’effet en lui-même.
6/ Dernière barre d’options (que vous pouvez cacher via un bouton dans la barre d’outils) qui vous permettra, en haut de voir votre thème en action afin de régler les différents détails et délais d’arrivée, et en bas d’inscrire des informations sur votre thème (description du thème, nom de la rom correspondante au thème, nom du créateur, date de création) de prendre un screenshot du thème en question (Save A Snapshot), d’écrire des indications supplémentaires sur le thème dans un fichier TXT qui sera joint avec le thème (Special Notes) et de sauvegarder votre thème en indiquant si c’est un thème Système, d’un thème « Default » (c'est-à-dire compatible avec tous les jeux dans la sub-wheel), un thème de jeu ou un effet Particle que vous voulez conserver.

La barre d’outils

1/ Background Image – Vous permet de choisir votre image d’arrière plan, première chose à faire lors de la création d’un thème. Cette image sera toujours fixe et ne pourra être modifiée dans HT.
2/ Wheel Image – Permet d’ajouter une Wheel déjà prête à votre thème (aucune option d’édition dans HT). Faites attention a ce qu’elle soit nommée de la même manière que votre rom et votre thème.
3-4-5-6/ Artwork 1-2-3-4 – Permet d’ajouter des objets (des personnages, des animations, etc.) sur votre Background. Vous pourrez animer ces fichiers (rotations, ellipses, délai d’arrivée à l’affichage du thème, etc.) par la suite. De la même manière qu’un logiciel de retouche d’images, les artworks sont disposés en calque, à savoir que le numéro 1 sera le calque le plus au dessous et le 4 le plus au dessus. Vous vous en rendrez compte quand vous voudrez superposer 2 artworks. N’ayez crainte, vous pourrez toujours switcher un objet de numéro de calque grâce a une petite option dans le menu d’options des Artworks que je détaillerai ensuite.
7/ Video – Vous permet d’ajouter un emplacement, que vous pourrez déplacer, pour une vidéo que vous aurez édité ou déjà existante. Peu importe la vidéo que vous mettrez, elle pourra toujours être changée une fois le thème terminé. C’est en fait la vidéo qui sera présente dans votre dossier « Media\Videos » d’Hyperspin qui sera prise en compte. Pour HyperTheme, vous devez obligatoirement utiliser une vidéo au format FLV. Quant au format, je vous conseille de ne pas dépasser un format de 640X480.
8/ Video Overlay – Option débloquée uniquement si vous avez ajouté un emplacement de vidéo, elle vous permet de rajouter un contour à votre vidéo. Il peut être, soit de votre création (une télé, un cadre ou autre), soit présélectionné dans les options du menu Video Overlay détaillées plus bas.
9/ Particle Effects – Cette option assez complexe, mais aux possibilités énormes, vous permet d’ajouter des effets visuels sur votre thèmes. J’en parle plus juste après.
10/Background Music – Vous permet d’ajouter une musique à votre thème si jamais vous n’avez pas ajouté d’emplacement vidéo. La piste sonore doit être au format MP3 et déjà édité par vos soins car aucune option n’est disponible dans Hypertheme (début de la piste, fondu, etc.…).
11/ Simulate Wheel – Comme son nom l’indique, permet de simuler l’affichage de le wheel sur votre thème pour que vous puissiez corriger le placement de vos Artworks si besoin.
12/ Simulate Special Artwork – Comme l’option ci-dessus, sauf que cela concerne cette fois ci les Artworks propres au fonctionnement d’Hyperspin.
13/ Artwork Animations – Permet d’afficher la zone d’aperçu et de prévisualiser les effets d’apparitions des Artworks.
14/ Artwork Resting Animations - Permet d’afficher la zone d’aperçu et de prévisualiser les effets d’animations stationnaires des Artworks (lorsque les Artworks sont déjà arrivés).
15/ Video Animation - Permet d’afficher la zone d’aperçu et de prévisualiser les effets d’apparitions de la Video.
16/ Video Resting Animation - Permet d’afficher la zone d’aperçu et de prévisualiser les effets d’animations stationnaires de la Video.
17/ Toggle Animation Panel – Option masquant ou affichant la zone d’aperçu des effets visuels.
18/ Toggle Output Panel – Option masquant ou affichant la zone affichant les informations sur votre thème.
19/ Reset Window Position – Permet de recentrer la fenêtre d’HyperTheme sur votre écran.
20/ Additional Settings – Permet de changer quelques options pour personnaliser HyperTheme (changement du nom d’utilisateur pour tous les thèmes créés, du nom des dossiers dans lesquels vos Artworks et Thèmes seront créés et des codes couleurs dans HT).
21/ HyperTheme Help – Cliquez ici pour arriver sur la board officielle d’HyperSpin (en anglais)

Les options de personnalisation

Maintenant que nous avons abordé la composition d’HyperTheme et tout ce que nous pouvons mettre pour former un thème, rentrons un plus dans le détail avec la description de toutes les options d’objets mises à la disposition de l’utilisateur pour personnaliser son thème. Elles se situeront normalement sur la gauche de l’interface. Travaillons par catégorie.

Options d’Artworks

X et Y : Détermine la position horizontale et verticale de l’élément. Vous pouvez soit rentrer un nombre entre 0 et 1204 pour X et entre 0 et 768 pour Y (vu que la résolution d’un thème est de 1024*768), soit tout simplement déplacer l’objet dans la zone de travail pour le placer où vous voulez.
R : Permet de tourner ou d’incliner l’objet (valeur en degrés), vous pouvez aussi le faire sur la zone de travail.
Time : Détermine la durée de l’animation. Plus vous augmenterez cette valeur, plus le temps d’animation sera long.
Delay : Détermine le délai avant que l’animation ne commence par rapport au début d’affichage du thème. Plus vous augmenterez cette valeur, plus votre objet arrivera tardivement.
Starting Position : Détermine la position de départ de votre objet avant sa mise en place après animation. Vous pouvez choisir du haut (Top), du bas (Bottom), de gauche (Left) ou de droite (Right).
Animation Type : Choisissez ici l’animation d’arrivée de votre objet. Vous pouvez avoir un aperçu de chaque effet dans la zone d’aperçu en sélectionnant l’option 13 de la barre d’outils.
Resting Animation : Choisissez ici l’animation stationnaire de votre objet une fois qu’il est arrivé. Même chose dans la zone d’aperçu sélectionnant l’option 14 de la barre d’outils.
Swap : Permet de switcher l’Artwork de calque pour le placer plus en arrière (vers le 1) ou plus en avant (vers le 4) pour des effets de superpositions.

Dans le cas d’un Theme « Default », cochez la dernière case pour que l’objet ne s’affiche pas avec chaque jeu si vous le souhaitez.

Options de Video

Options de Video Overlay

Image : Cochez « Image » si vous voulez utiliser une image ou un cadre perso comme overlay (toujours au format PNG).

Below Video : A cocher ou décocher pour afficher l’overlay devant ou derrière la vidéo.

X Offset et Y Offset : A utiliser pour décaler ou replacer horizontalement ou verticalement votre overlay, valeurs en pixels.

Rounded : Permet d’arrondir les coins de l’overlay ou de les laisser en angle droit.

Border 1, 2 et 3 – Color et Size : Permet de définir les couleurs et la taille (valeurs en pixels) de vos bordures de vidéos.

Options de Particles Effects

J'ai simplifier pour cette image. Pour vous déplacer a travers les 4 pages d’options, utilisez la barre « More Options » tout en bas.
PPM : Temps d’écartement entre 2 activations de l’effet.
Emitter X et Y : Détermine la position horizontale et verticale de DEPART de l’effet. Vous pouvez soit rentrer un nombre entre 0 et 1204 pour X et entre 0 et 768 pour Y (vu que la résolution d’un thème est de 1024*768), soit tout simplement déplacer l’objet dans la zone de travail pour le placer où vous voulez.
Emitter Widht et Height : Détermine la taille de la zone ou l’effet se produira. Valeur en pixels.
Presets : Différents effets sont déjà incorporés dans HT, a vous de voir si l’un d’entre eux vous plait et va avec votre thème.
Movement : A cocher ou décocher si vous voulez que votre effet soit statique ou dynamique.
Lifespan : Détermine la longueur de votre effet sur son tracé.
Min Start Speed et Max Start Speed : Détermine la valeur minimale et maximale de vitesse de départ de votre effet. Pour avoir un effet constant, mettre 2 valeurs identiques.
Min Start Angle et Max Start Angle : Détermine la valeur minimale et maximale du départ d’angle de départ de l’effet. Pour avoir un effet constant, mettre 2 valeurs identiques.
Min Start Scale et Max Start Scale : Détermine la valeur minimale et maximale de grandeur de votre effet. Pour avoir un effet constant, mettre 2 valeurs identiques.
Scale (Min et Max) : Cochez cette case si vous voulez que votre effet grossisse ou rétrécisse au fur a mesure de son déroulement et modifiez les valeurs (en ratio par rapport a la taille d’origine) comme vous le souhaitez.
Rotate (Min et Max) : Cochez cette case si vous voulez que votre effet tourne sur lui même au fur a mesure de son déroulement et modifiez les valeurs valeurs de vitesse de rotation mini et maxi.
New Particles on Top : Option à essayer, inutile selon moi.
Fade : Cochez pour appliquer un effet de fondu à votre effet et modifiez la valeur pour un fondu plus lent ou plus rapide.
Gravity : Cochez pour appliquer une force d’attraction à votre effet, ce qui le fera tomber (en mettant une valeur positive) ou s’envoler (en mettant une valeur négative).
Acceleration : Cochez pour appliquer une accélération à votre effet. Plus vous augmenterez la valeur, plus l’accélération sera rapide.
Rotate to Angle : Permet de faire tourner l’effet sur un plan en 3D, à essayer.
Particle Limit : A cocher si vous voulez limiter le nombre de fois où votre effet se produira.
Point Swarm : Cochez cette case si vous voulez régler un point autour duquel votre effet tournera. Modifier ensuite les valeurs pour déplacer le point de rotation.
X Oscillate : Cochez cette case pour appliquer une oscillation horizontale à votre effet. La première valeur est la distance d’oscillation, la seconde étant le temps entre chaque oscillation.
Bounding Box : Permet de mettre en place une zone de rebond sur laquelle votre élément d’effet viendra rebondir. Modifiez les valeurs pour déplacer cette « boite a rebonds » et le type de rebond que vous voulez appliquer a votre objet.
Random Frame : A cocher uniquement si vous voulez incorporer un GIF animé au format SWF comme effet.
Le mieux pour découvrir toutes ces options est de les tester pour obtenir un résultat qui vous convient alors n’hésitez pas a bidouiller !

Voila qui conclut cette présentation d'HyperTheme qui, nous l’espérons, vous aidera a la bonne compréhension de cet éditeur de thèmes assez difficile à appréhender mais ô combien indispensable dans notre travail communautaire.

Création pas à pas d'un thème ave HyperTheme en vidéo

Terminons avec cette deuxième partie de ce tuto avec la création pas à pas d'un Thème sous HyperTheme, le tout commenté et en vidéo.
J'ai essayé de toucher à un peu tout pour vous présenter le maximum de choses, j'espère qu'elle n'est pas trop longue. Je précise que ce thème est d’une qualité moyenne (comparé à ceux que vous pouvez trouver sur le cloud d'HyperFreeSpin ou ailleurs) mais seule importe la bonne compréhension de chaque étape de sa réalisation.
Il y a des effets de zoom sur la vidéo dont je ne suis pas responsable, mon logiciel de montage a du faire des siennes, j'espère que ca ne vous gênera pas.

A regarder en 720p :

Pour nous faire avancer et nous permettre de vous faire d'autres tutos vidéos plus réussi à l'avenir, nous vous demanderons de la regarder intégralement (une demi heure, je ne pense pas que ce soit la mer à boire compte tenu du temps que nous passons à écrire des tutos ici^^) et de nous écrire vos avis, vos critiques, les choses à changer ou à améliorer, etc dans le commentaires en bas de page.

N'oubliez pas aussi de partager avec nous vos futures réalisations ici, ce n'est que grâce à votre travail que la communauté d'HyperFreeSpin pourra conclure son projet final, à savoir un HyperSpin 100% Français, 100% Home Made et 200% GRATUIT !!!

Ce serait le meilleur des remerciements pour nous !

Bonne création !

Tags: artwork, box, box 3D, cartouche, creations, gratuit, Hyperspin, hypertheme, medias, theme, themes, tuto, tutoriel, videos

HyperTheme, création de thèmes pour Hyperspin