HyperTheme, création de thèmes pour Hyperspin

Complémentaire à la partie Matos, vous trouverez ici de nombreux tutos. C'est communautaire, tout le monde peut créer un tuto.
Répondre
Message
Auteur
Avatar de l’utilisateur
Heavyarms
stick d'or
Contact :
Messages : 1425
Inscription : 21 janv. 2009, 22:21
Localisation : Près d'Orleans
A remercié : 0
A été remercié : 0

HyperTheme, création de thèmes pour Hyperspin

#1 Message par Heavyarms »

HyperTheme Partie 1, présentation du software de création de thèmes pour Hyperspin


Bonjour à tous !

Premier tuto pour moi 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.

Voici le PDF qui je pense pourra beaucoup vous servir lors de vos débuts :

HSF - HyperTheme Partie 1 - Presentation du software de création de thèmes pour Hyperspin.pdf (1.1 MB)
https://mega.co.nz/#!dAhXTAzL!eazPGVhOw ... oPQau442Gg


Comme d’habitude, je vais tenter de vous présenter HyperTheme dans sa totalité (noté aussi HT au cours de ce tuto), je vais donc diviser le travail en 2 parties. Cette première partie présentera HyperTheme dans sa totalité, ce qu’il permet de faire et les options qui le compose. Quant à la seconde, je détaillerai 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


Image


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 ce forum ou ailleurs sur le net, il suffit de chercher un peu.

La seule chose à toujours garder a l’esprit, c’est qu’HT 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.


Image


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



Image


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


Image


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


Image


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.

Width et Height
: Permet de changer la taille de l’emplacement vidéo. Valeur en pixels.

Rotation : Permet de tourner ou d’incliner la vidéo (valeur en degrés), vous pouvez aussi le faire sur la zone de travail.

Rotation X et Y : Permet de tourner ou d’incliner l’emplacement sur un plan en 3D (valeur en degrés), a essayer.

Force Aspect : Permet de forcer l’affichage horizontal ou vertical de la vidéo selon la disposition de votre Hyperspin, si besoin.

Below Wheel : Cochez cette case si vous voulez que votre vidéo s’affiche derrière la Wheel, décochez pour l’afficher devant.

Les options restantes sont les mêmes que pour les Artworks.


Options de Video Overlay


Image


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


Image


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 : Determine 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 : Determine 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 première partie qui, je l’espère, vous aidera a la conception de vos propres thèmes. N’hésitez pas a donner vos avis, vos précisions et bien sur à partager vos œuvres pour que tout ceci reste gratuit et libre d’accès pour tous !

Bonne lecture et a bientôt pour la seconde partie !


--------------------------------------------------------------------------------------------------------


HyperTheme Partie 2, création pas à pas d'un thème en vidéo


Suite et fin de cette série de tutos sur HyperTheme avec, une première pour moi, un tuto vidéo sur la création pas à pas d'un Thème sous HyperTheme. :D

Ce tuto est un complément de la première partie que vous pouvez retrouver ici : http://www.thehyperfreespin.com/t1176-t ... -hyperspin

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. :clown:





Pour me faire avancer et me permettre de vous faire d'autres tutos vidéos plus réussi dans les prochaines semaines, je vous demanderai de la regarder intégralement (une demi heure, je ne pense pas que ce soit la mer à boire compte tenu du temps que je passe à écrire des tutos ici^^) et de m'écrire vos avis, vos critiques, les choses à changer ou à améliorer, etc. ;)

N'oubliez pas aussi de partager avec nous vos futures réalisations ici, ce n'est que grâce à votre travail que nous pouvons espérer (la team d'HyperFreeSpin et moi même) conclure notre projet final, à savoir un HyperSpin 100% Français, 100% Home Made et 200% GRATUIT ! :D

J'espère sincèrement que ca vous plaira, et à bientôt pour d'autres aventures !
Dernière modification par Heavyarms le 02 juin 2013, 17:50, modifié 4 fois.
Image

Image

Avatar de l’utilisateur
naku
stick de platine
Messages : 2668
Inscription : 20 janv. 2012, 12:25
Localisation : Nancy (54)
A remercié : 0
A été remercié : 0

Re: [TUTO] HyperTheme Partie 1, création de thème pour Hyper

#2 Message par naku »

Jolie travail l'ami, définitivement tu aime hyperspin.
La candy japonaise c'est comme un string, moins il y a de matière et plus c'est chère.
Image

Avatar de l’utilisateur
Heavyarms
stick d'or
Contact :
Messages : 1425
Inscription : 21 janv. 2009, 22:21
Localisation : Près d'Orleans
A remercié : 0
A été remercié : 0

Re: [TUTO] HyperTheme Partie 1, création de thème pour Hyper

#3 Message par Heavyarms »

Bah je me suis engagé à aider le plus possible la communauté française avec HyperFreeSpin (d'ailleurs, passez nous faire un coucou, toi aussi Naku ! Voila l'adresse : http://www.thehyperfreespin.com/) donc je m'y tiens !^^

Et il y a tellement de choses à faire et à apprendre avec ce frontend, ca motive à avancer ! Mon plus gros point faible pour le moment est le decryptage et l'édition des AHK (j'y comprend pas grand chose, j'obtiens les résultats souhaités mais c'est du bricolage ou empirique après des heures de bidouilles), tu n'aurais pas des liens (même anglais) où ils en parlent plus clairement ?

Sinon update avec correction de toutes les fautes d'orthographes et mise en ligne de la version PDF qui pourra vous être utile. :wink: Mine de rien c'est du boulot !^^
Image

Image

Avatar de l’utilisateur
Heavyarms
stick d'or
Contact :
Messages : 1425
Inscription : 21 janv. 2009, 22:21
Localisation : Près d'Orleans
A remercié : 0
A été remercié : 0

Re: [TUTO VIDEO] HyperTheme, création de thèmes pour Hypersp

#4 Message par Heavyarms »

Gros Update avec la mise en ligne de la 2ème partie sous forme de tuto vidéo, j'espère et j'attends vos retours ! :wink:
Image

Image

alizah
stick de carton
Messages : 2
Inscription : 04 nov. 2013, 07:05
A remercié : 0
A été remercié : 0

Re: HyperTheme, création de thèmes pour Hyperspin

#5 Message par alizah »

thanks for sharing the post
leather jackets mens leather jackets
leather jackets jacket

naldkydo
stick de plastique
Messages : 10
Inscription : 29 nov. 2013, 10:53
A remercié : 0
A été remercié : 0

Re: HyperTheme, création de thèmes pour Hyperspin

#6 Message par naldkydo »

je me suis inscrit sur le forum pour te remercier Heavyarms pour tout le boulot effectué qui j'avoue m'aide beaucoup dans mon projet d'emulation alors encore merci a toi

Avatar de l’utilisateur
Viss
stick de rhodium
Messages : 3256
Inscription : 27 févr. 2004, 13:33
Localisation : 92
A remercié : 12 fois
A été remercié : 23 fois

Re: HyperTheme, création de thèmes pour Hyperspin

#7 Message par Viss »

Heavyarms a écrit : Premier tuto pour moi 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.
Salut Heavyarms, tout d'abord un gros merci pour tes tuto qui m'ont permis de customer de A à Z mon HS même s'il me reste encore pas mal de boulot, mais j'ai bien pigé les bases.

Cela dit, j'ai 2 questions :

J'ai un thème par Roms sur lequel, je mets un background (comme pour tous les jeux) + un logo (artwork 1).
En passant d'une wheel à l'autre, le logo fait une transition différentes à chaque scroll.
Est-il possible de laisser une transition fixe voire aucune transition ?

Je suis sur un écran 16/9 et hyperthème est configuré de manière à sortir des thèmes en 1024x728 et d'ailleurs sur l'interface hyperspin, l'affichage est forcé sur du 16/9 et déforme pas mal l'affichage avec des effets d'escaliers disgracieux du à l'etirement.
Y'a-t-il une option qui optimise un peu plus l'affichage 16/9 ?

Merci d'avance

Avatar de l’utilisateur
Viss
stick de rhodium
Messages : 3256
Inscription : 27 févr. 2004, 13:33
Localisation : 92
A remercié : 12 fois
A été remercié : 23 fois

Re: HyperTheme, création de thèmes pour Hyperspin

#8 Message par Viss »

Viss a écrit :
Je suis sur un écran 16/9 et hyperthème est configuré de manière à sortir des thèmes en 1024x728 et d'ailleurs sur l'interface hyperspin, l'affichage est forcé sur du 16/9 et déforme pas mal l'affichage avec des effets d'escaliers disgracieux du à l'etirement.
Y'a-t-il une option qui optimise un peu plus l'affichage 16/9 ?

Merci d'avance
Je me fais un autoquote pour un petit up !

zimou13
stick de plastique
Messages : 10
Inscription : 18 déc. 2017, 11:25
A remercié : 0
A été remercié : 0

Re: HyperTheme, création de thèmes pour Hyperspin

#9 Message par zimou13 »

Slt, Je ne vois pas lavideo mais sur l image je trouve dommage que laperçu video soit au dessus du nom des jeux. Tu nous prepares une jolie borne bioshock alors? Download Tutuapp APK Download 9Apps APK Download Aptoide APK

barrysingh102
stick de carton
Messages : 1
Inscription : 19 nov. 2019, 15:20
A remercié : 0
A été remercié : 0

Re: HyperTheme, création de thèmes pour Hyperspin

#10 Message par barrysingh102 »

La seule chose à garder à l'esprit est que HyperTheme ne fonctionne qu'avec les fichiers PNG pour les images et FLV pour les vidéos, la transparence des éléments étant nécessaire à leur mise en oeuvre. Shareit apk vidmate app

Répondre