Forums GAMERGEN

TUTO - Créer et installer son propre thème personnalisé

TUTO - Créer et installer son propre thème personnalisé

Message non lupar Wirus » 19 Oct 2015, 09:45

Voilà enfin le tutoriel qui vous permettra de customiser le thème de votre PlayStation Vita ! Il est temps de réveiller le designer qui est en vous pour créer un superbe thème que vous pourrez partager au monde entier et même présenter au concours de HackInformer ! Mais avant cela, voyons comment en créer et installer un.

Le thème qui sera utilisé dans ce tutoriel est le thème HackAdemy crée par @Windvern en partie avec l'aide de @Tuxbot123 pour les icônes et @Applelo1 pour la musique.



0) Pré-requis
  • Un compte mail, c'est logique
  • Un PC et une PS Vita fonctionnels, normal
  • Le logiciel SQLiteBrowser (liens de téléchargement dispos plus bas sur la page)
  • Le logiciel QCMA pour utiliser le "Gestionnaire de contenu" quel que soit votre firmware
  • Un thème (lisez la partie I si vous voulez créer le vôtre), dans notre exemple HackAdemy Theme :
Image
The HackAdemy Theme (by @Windvern, @Tuxbot123, @Applelo1)
_____________________________________________________________


PARTIE I - Créer son propre thème


0) Avant de commencer
Si vous lisez ce tutoriel et qu'il n'est pas encore le 30 octobre 2015 passé, sachez que vous pouvez tenter votre chance au concours organisé par HackInformer.

Avant de vous lancer dans la conception d'un thème, définissez le thème (sans jeu de mots xD) qu'abordera ce dernier : une série en particulier ? Un domaine ? Un métier ? Un jeu vidéo ? Une personnalité ? Partez ensuite à la chasse aux icônes ou, si vous avez de l'expérience de le graphisme, commencez la création de quelques icônes, et voyez si en cours de route vous gardez votre créativité sur le sujet de votre thème. Si oui, c'est parfait, vous allez pouvoir lire ce tutoriel attaquer la lecture de ce tutoriel. Si non, je vous conseille de chercher un autre sujet plus inspirant.

1) Les backgrounds (fonds)

Commençons par le plus "simple" : la création des backgrounds. L'avantage de ces derniers, c'est qu'ils sont visuables facilement sur une PS Vita puisqu'il suffit de les transférer sur cette dernière, de cliquer sur "Triangle" dans le LiveArea et de changer le fond en touchant la petite icône en bas à droite de l'éditeur.

Image


Créez-en entre 0 et 10, un background ayant pour dimensions 960x544 pixels et pour extension le format ".PNG". Une fois cette étape terminée, rendez-vous sur le site internet TinyPNG pour rendre vos fonds plus légers, ou compressez-les directement grâce à votre logiciel (sous GIMP par exemple, c'est dans "Image -> Mode -> Couleurs indexées". Sur PhotoShop, il faut enregistre en "8 bits").

Image
Merci monsieur le panda !


Récupérez vos fonds en cliquant sur les liens "download" à droite de chaque, puis enregistrez-les dans un dossier spécial (très important, c'est là-dedans que vous placerez toutes vos autres images). Voici par exemple les fonds utilisés pour The HackAdemy Theme (l'occasion de faire un clin d’œil à tous les autres sites comme nous qui se chargent d'informer aux 4 coins du monde de l'avancée du hack de la PS Vita et d'autres consoles) :

Image


2) Les icônes

Vos icônes pour les applications PS Vita doivent avoir pour dimensions 128x128 pixels et être aussi enregistrées en PNG. Ici, la compression n'est pas obligatoire. Faites travailler votre cerveau et votre inventivité pour trouver des icônes originales qui à la fois s'adaptent au thème et soient facilement identifiables. Pour le thème HackAdemy, les icônes sont assez basiques, voici quelques exemples :

Image Image Image


Gardez à l'esprit que la thème découpera en cercle vos images, essayez donc de centrer vos icônes pour qu'elles ne se retrouvent pas "coupées" ! :)

Image


3) Le lockscreen et les previews

Pour finir, créez une image en 960x544 pixels qui servira d'écran de verrouillage (celui qui est visible à l'allumage de la console). Tout comme pour les backgrounds, vous devrez le faire passer par la case compression (cliquez ici pour vous rendre sur TinyPNG).

Image
L'écran de verrouillage du HackAdemy Theme


Créez maintenant 2 images 320x181 pixels qui serviront de "preview" dans le menu "Paramètres" de la console. L'une doit montrer une prévisualisation de l'écran de verrouillage, tandis que l'autre doit donner une idée de ce à quoi le LiveArea ressemblera après l'activation du thème. Concernant ces images, nous vous conseillons de les laisser vides pour l'instant : il n'y aura qu'à prendre un screenshot (PS+START) une fois le thème appliqué et à les diminuer.

Image Image


Enfin pour finir, créez une petite image de 226x128 pixels qui sera en quelques sortes la "vignette", la "vitrine" de votre thème dans le menu "Thèmes" des "Paramètres".

Image
On s'est pas foulés pour notre vignette :P


4) Création du fichier "theme.xml"

Téléchargez cette archive et extrayez-en son contenu dans le dossier où se trouvent toutes vos images. Un fichier theme.xml devrait être apparu. Éditez-le à l'aide de votre éditeur de textes avancé préféré (Sublime Text, Notepad++...), en sachant que ça marche tout aussi bien avec le Bloc-notes de Windows (pas top pour le confort par contre).

Vous n'avez qu'à remplacer les données suivantes :

  • theme-bg-x.png : par le nom de votre background (laissez vide s'il n'y en a pas/plus)
  • <m_waveType>11</m_waveType> : par le type de vagues que vous souhaitez voir en arrière-plan (visibles dans les transitions, sur les fonds transparents...). Vous n'êtes pas obligé de renseigner toujours la même vague pour chaque "écran" ;)
  • <m_bgmFilePath>BGM.at9</m_bgmFilePath> : par le nom de la musique de votre thème au format "AT9". Si vous n'en avez pas, entourez cette ligne par "<!--" à gauche et "-->" à droite, de façon à avoir <!--<m_bgmFilePath>BGM.at9</m_bgmFilePath>-->
  • <m_iconFilePath>icon_xxxxx.png</m_iconFilePath> : par le nom de votre icône pour chaque application
  • Barre de statut (en haut sur le LiveArea) "InfomationBarProperty"
    • <m_barColor>ff000000</m_barColor> : par la couleur que souhaitez voir sur la barr
    • <m_indicatorColor>ffffffff</m_indicatorColor> : par la couleur de l'heure
  • Informations générales "InfomationProperty"
    • <m_provider><m_default>Custom Protocol</m_default>[...]</m_provider> : par le nom de l'auteur
    • <m_title><m_default>The HackAdemy</m_default>[...]</m_title> : par le nom de votre thème par défaut
    • <m_title><m_param><m_xx>The HackAdemy</m_xx></m_param></m_title> : par le nom de votre thème pour xx langue
  • Écran de démarrage "lockscreen"
    • <m_dateColor>ffffffff</m_dateColor> : par la couleur de l'horloge numérique visible sur le lockscreen
    • <m_dateLayout>0</m_dateLayout> : par la position de l'horloge sur le lockscreen
      • 0 = position initiale, en bas à gauche
      • 1 = en haut à gauche
      • 2 = en bas à droite
    • <m_filePath>lockscreen.png</m_filePath> : par le nom de l'image que vous souhaitez utiliser comme "écran de démarrage" (= lockscreen)
    • <m_notifyBgColor>1fffffff</m_notifyBgColor> : par la couleur des fonds des notifications sur le lockscreen
    • <m_notifyBorderColor>ffcccccc</m_notifyBorderColor> : par la couleur de la bordure des notifications
    • <m_notifyFontColor>ffffffff</m_notifyFontColor> : par la couleur du texte des notifications
N'oubliez pas d'enregistrer le fichier theme.xml que vous venez de modifier. On peut maintenant passer à l'installation ! :)

PARTIE II - Installer un thème customisé


1) Dump du fichier app.db
Le fichier "app.db" sur un système PS Vita constitue le "cœur du shell", du LiveArea (l'équivalent PS Vita du "VSH" pour PSP).

Sur votre compte mail, depuis l'ordinateur, envoyez à l'adresse de messagerie liée à l'application "E-mails" de votre PS Vita le message "email:send?attach=ur0:shell/db/app.db." (n'oubliez pas le point final !). Sélectionnez l'intégralité de ce "texte", et attachez-y le lien "email:send?attach=ur0:shell/db/app.db.", puis cliquez sur "Envoyer".
[url=email:send?attach=ur0:shell/db/app.db.]email:send?attach=ur0:shell/db/app.db.[/url]

Image


Jusque-là, ce n'est pas trop compliqué, je pense. :P Ouvrez l'application "E-mails" sur votre console et trouvez votre fameux message.

Image


Touchez le lien et : oh mon dieu, vous constatez que ça vous a ouvert la fenêtre de rédaction d'un message, avec le fameux app.db en fichier joint. C'est tout à fait normal, renseignez juste un destinataire, de préférence votre compte mail personnel plutôt que celui de votre votre grand-mère, et validez en cliquant sur "Envoyer".

Image


L'application va alors brutalement se fermer toute seule. Pas de panique, n'appelez pas les pompiers, c'est tout aussi normal. Attendez quelques instants en actualisant régulièrement votre boîte de réception : le mail devrait arriver en moins d'une minute. Téléchargez le fichier joint app.db sur votre ordinateur.

Image


2) Installation des données du thème sur la carte mémoire

Afin de faciliter l'installation des données du thème sur sa PlayStation Vita, on préférera passer par l'émulateur PSP de la console ("ms0:/" correspond pour rappel à "ux0:pspemu/"). Deux méthodes très simples existent : celle par FTP si vous avez un exploit installé ou celle par sauvegarde si vous n'avez pas la chance d'en avoir un sous le coude.

_____________________________________________________________


Si vous avez le VHBL, ARK-2 ou VitaFTP déjà installé


Démarrez votre logiciel VitaFTP depuis votre exploit ePSP. Lancez un client FTP tel que FileZilla sur votre PC pour vous connecter à la partie "émulateur PSP" de votre console.

Image
Au-dessus : l'écran de la Vita faisant tourner Vita FTP ; En bas : les configurations de FileZilla à effectuer


Créez à la racine un dossier "THEMES" et placez-y les dossiers de votre ou vos thème(s), qui doi(ven)t normalement se nommer "PCSF00688-xxxxxxxxxxxxxxxx".

Image


Si vous n’avez aucun exploit


Rendez-vous dans ce cas dans le dossier contenant vos sauvegardes PSP, qui se trouve normalement dans "Documents/PS Vita/PSAVEDATA/SuitesChiffresLettres" pour rappel. Extrayez-y le contenu de cette archive.

Image


Il ne vous reste plus qu'à placer votre ou vos thème(s), normalement nommé(s) "PCSF00688-xxxxxxxxxxxxxxxx", à l'intérieur du dossier "themes" du nouveau répertoire "CUSTOMTHEMES" qui est apparu.

_____________________________________________________________


3) Modification du fichier "app.db"

_____________________________________________________________

Méthode par logiciel


Téléchargez PS Vita DB Theme Installer par RedSquirrel et remplissez les champs comme suit :
  • Database (app.db) path : cliquez sur le bouton “Open” et sélectionnez votre fichier app.db ;
  • Title : écrivez le nom du thème ;
  • Provider : écrivez l’auteur du thème ;
  • Content Ver : écrivez la version du thème ;
  • Type : par défaut, écrivez 100 ;
  • Size : cliquez sur le bouton “Calculate” et sélectionnez le dossier contenant les fichiers de votre thème, puis sur le bouton “Ouvrir” en bas à droite. Vous pouvez aussi renseigner “0” ;
  • Last Modified Time : cliquez sur le bouton “Now” ;
  • Main Folder Path : renseignez le chemin menant vers les fichiers du thème ;
  • Package Image File Path : par défaut, preview_thumbnail.png ;
  • Home Preview File Path : par défaut, preview_page.png ;
  • Start Preview File Path : par défaut, preview_lockscreen.png ;
  • Cochez “Create a backup before writing” si vous souhaitez garder une copie de votre app.db original ;
  • Enfin, cliquez sur “Write” afin que le logiciel écrive dans votre base de données et ajoute le thème.
Image


Méthode manuelle


Lancez SQLiteBrowser et ouvrez le fichier app.db en vous rendant dans "Fichier -> Ouvrir une nouvelle base de données".

Image


Vous devriez tomber nez-à-nez devant une multitude de tables. Cliquez sur l'onglet "Parcourir les données" puis sélectionnez tbl_theme sur la liste déroulante des tableaux qui s'ouvre à vous.

Image


Vous voilà devant une liste de tous vos thèmes avec quelques infos sur chacun. Cliquez sur le bouton "Nouvel enregistrement" en haut à droite et complétez la nouvelle ligne comme suit :

ChampExplications
idSi vous avez transféré votre thème via Vita FTP : ux0:pspemu/THEMES/PCSF00688-CUSTOMPHACKADEMY
Si vous avez transféré votre thème via une sauvegarde PSP : ux0:pspemu/PSP/SAVEDATA/CUSTOMTHEMES/themes/PCSF00688-CUSTOMPHACKADEMY
packageImageFilePathpreview_thumbnail.png
homePreviewFilePathpreview_page.png
startPreviewFilePathpreview_lockscreen.png
contentVer100
size0
type100


Image


N'oubliez pas d'enregistrer le tout en cliquant sur le bouton "Enregistrer les modifications" puis quittez SQLiteBrowser.

Image


_____________________________________________________________


4) Installation du nouveau fichier app.db

Ouvrez un nouveau mail à destination du compte lié à l'application "E-mails" de votre PS Vita, et joignez-y le fichier app.db. Renommez-le #0 comme sur le screenshot ci-dessous en cliquant droit sur la pièce jointe et en choisissant "Renommer". Dans le sujet/objet de votre message, renseignez le chemin du fichier que vous souhaitez modifier, en l’occurrence ur0:shell/db/app.db, et envoyez.

Image


Ouvrez ce le fameux mail que vous vous êtes envoyé sur votre PS Vita (c'est le début de la schizophrénie :P) et touchez le fichier joint nommé "#0". Une erreur devrait apparaître : ne cliquez/touchez surtout pas le bouton "OK", pressez le bouton "PS" (en-dessous du pad directionnel) et quittez violemment le logiciel en cours d'utilisation.
Si le fichier "#0" n'est pas reconnu par l'appli (screenshot ci-dessous), consultez ce mini-tutoriel. ;)

Image
Snif :'(

Image
Une p'tite illustration pour ceux qui auraient pas compris


Redémarrez votre console en maintenant POWER 3 secondes puis en choisissant l'option "Éteindre". Rallumez votre PS Vita et admirez : votre thème devrait normalement se trouver dans "Paramètres -> Thème et Arrière-plan -> Thème" ! :)

Image
Mais... y a pas de nom ? o_O


Vous l'aurez peut-être remarqué, mais votre ou vos nouveau(x) thème(s) se trouve(nt) à la fin et n'ont pas de nom... Pas de panique : il suffit de les activer une fois et leur nom apparaîtra correctement. ;)

Image
Ouf !


Bon hack et bonne customisation à vous ! :D
Dernière édition par Wirus le 19 Oct 2015, 10:16, édité 2 fois.
Ex-Modo/Correc PSPGen, PSVGen, AndroidGen et WiiGen
( ゚ Д゚) 12 PSPs - 2 PS Vita - Débrick/Flashe PSPs - Ludothèque (╯°□°)╯︵ ┻━┻
ImageImageImage
Wirus Gamer Platine
Gamer Platine
Messages: 11539
Inscription: 31 Mar 2010, 00:30
Localisation: In the Matrix | ID PSN : Virus_WiiGen
Prénom: Wirus
Pays: The Matrix
Sexe: Homme

Re: TUTO - Créer et installer son propre thème personnalisé

Message non lupar Bérenger Lieber » 19 Oct 2015, 10:01

Woah, excellent tuto ! J'ai bien envie d'me faire un thème custo..
Image
LG G4 H815...
PSP Fat, PS Vita Fat, PS4 Fat
[PCMR SOON]
Avatar de l’utilisateur Bérenger Lieber Correcteur
Correcteur
Messages: 2418
Inscription: 04 Déc 2011, 14:53
Localisation: GG✕▢△◯

Re: TUTO - Créer et installer son propre thème personnalisé

Message non lupar Wirus » 19 Oct 2015, 10:05

:lol: En plus le hack natif commence à bien se développer, donc il est vraiment temps que t'en achètes une ! :P
Ex-Modo/Correc PSPGen, PSVGen, AndroidGen et WiiGen
( ゚ Д゚) 12 PSPs - 2 PS Vita - Débrick/Flashe PSPs - Ludothèque (╯°□°)╯︵ ┻━┻
ImageImageImage
Wirus Gamer Platine
Gamer Platine
Messages: 11539
Inscription: 31 Mar 2010, 00:30
Localisation: In the Matrix | ID PSN : Virus_WiiGen
Prénom: Wirus
Pays: The Matrix
Sexe: Homme

Re: TUTO - Créer et installer son propre thème personnalisé

Message non lupar Bérenger Lieber » 19 Oct 2015, 10:07

WHERE IS MY MONEY?!
Well, je l'achèterai quand elle sera vraiment en fin de vie, pour mettre la main sur tous les jeux hentai intéressants :lol:
LG G4 H815...
PSP Fat, PS Vita Fat, PS4 Fat
[PCMR SOON]
Avatar de l’utilisateur Bérenger Lieber Correcteur
Correcteur
Messages: 2418
Inscription: 04 Déc 2011, 14:53
Localisation: GG✕▢△◯

Re: TUTO - Créer et installer son propre thème personnalisé

Message non lupar Wirus » 19 Oct 2015, 10:18

[troll]Elle est pas déjà en fin de vie ? :mrgreen:[/troll]

Et t'inquiète pas des eroge je suis sûr que t'en trouveras sur Vita ! :P
Ex-Modo/Correc PSPGen, PSVGen, AndroidGen et WiiGen
( ゚ Д゚) 12 PSPs - 2 PS Vita - Débrick/Flashe PSPs - Ludothèque (╯°□°)╯︵ ┻━┻
ImageImageImage
Wirus Gamer Platine
Gamer Platine
Messages: 11539
Inscription: 31 Mar 2010, 00:30
Localisation: In the Matrix | ID PSN : Virus_WiiGen
Prénom: Wirus
Pays: The Matrix
Sexe: Homme

Re: TUTO - Créer et installer son propre thème personnalisé

Message non lupar Hakase » 19 Oct 2015, 22:46

Si jamais vous trouvez un thème sur Persona 4 Golden, Psycho Pass ou bien des thèmes freedom wars proche des officiels je prends, pour le moment le thème d'Angel Beats me convient parfaitement.
Avatar de l’utilisateur Hakase Co-Admin
Co-Admin
Messages: 4801
Inscription: 10 Déc 2013, 10:32
Pays: France

Re: TUTO - Créer et installer son propre thème personnalisé

Message non lupar Wirus » 20 Oct 2015, 00:15

Je te ferais signe si j'en trouve un jour. ;)
Ex-Modo/Correc PSPGen, PSVGen, AndroidGen et WiiGen
( ゚ Д゚) 12 PSPs - 2 PS Vita - Débrick/Flashe PSPs - Ludothèque (╯°□°)╯︵ ┻━┻
ImageImageImage
Wirus Gamer Platine
Gamer Platine
Messages: 11539
Inscription: 31 Mar 2010, 00:30
Localisation: In the Matrix | ID PSN : Virus_WiiGen
Prénom: Wirus
Pays: The Matrix
Sexe: Homme


 

Retourner vers Underground