Modificando el livearea (Crear VPK parte 1)

En el articulo pasado (Añadiendo imágenes a nuestro homebrew de PS Vita) vimos como modificar nuestra aplicación añadiendo una interfaz gráfica, en este Articulo veremos como modificar el icono y elementos del livearea.

imágenes

sce_sys
├── icon0.png
├── livearea
│   └── contents
│       ├── bg0.png
│       ├── frame_icon.png
│       ├── startup.png
│       └── template.xml
└── param.sfo

Dentro de la carpeta sce_sys encontramos los siguientes archivos de imagen:

icono0.png: es una imagen con un tamaño de 128 px por 128 px que sera el icono redondo que veremos antes de abrir la aplicación.

dentro de la carpeta contents encontramos bg0.png: Es la imagen de fondo que sale luego de pulsar el icono y tiene un tamaño de 840 px por 500 px.

frame_icon.png: Es un pequeño icono que funcionara como botón para realizar una acción como abrir el navegador y dirigirnos a una pagina web que definamos. Tiene un tamaño de 128 px por 128 px.

startup.png: Es la imagen que se encuentra delante del fondo y que al presionar se abre nuestro homebrew, tiene un tamaño de 280 px por 158 px.

Añadiendo texto

Listo ya tenemos todas nuestras imágenes, ahora solo falta cambiar el texto que esta en el archivo template.xml

Dentro de la carpeta contents existe un archivo llamado template.xml que sera el encargado de organizar todas nuestras imágenes, añadir texto y tiene una estructura similar a la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<livearea style="a1" format-ver="01.00">
 <livearea-background>
  <image>bg0.png</image>
 </livearea-background>
 <gate>
  <startup-image>startup.png</startup-image>
 </gate>

 <frame id="frame1" multi="o" autoflip="0" >
  <liveitem>pasado
   <image align="left" width="99" height="99" origin="frame">frame_icon.png</image>

   <text origin="image" align="outside-right">
    <str color="#ffffff" size="20"> Blog </str>
   </text>

   <target>https://kiryeelesion.blogspot.com.co/</target>

  </liveitem>
 </frame>

 <frame id="frame3" multi="o" autoflip="0" >
  <liveitem>
   <text origin="background" line-align="center" margin-bottom="1">
    <str size="25" bold="on" shadow="on">　</str>
    <str size="40" bold="on" shadow="on">Ocitronix Vita</str>
    <str size="25" bold="on" shadow="on">　
    </str>
    <str size="21" bold="on" shadow="on">
     Ocitronix
    </str>
   </text>
   <lang>es</lang>
  </liveitem>
  <liveitem>
   <text origin="background" line-align="center" margin-bottom="1">
    <str size="30" bold="on" shadow="on">　</str>
    <str size="40" bold="on" shadow="on">Ocitronix Vita</str>
    <str size="30" bold="on" shadow="on">　
    </str>
    <str size="21" bold="on" shadow="on">
     Ocitronix
    </str>
   </text>
   <exclude-lang>es</exclude-lang>
  </liveitem>
 </frame>
</livearea>

Si lo observamos detenidamente encontraremos cosas familiares como bg0.png, frame_icon.png y startup.png. En pocas palabras esto significa que no es obligatorio que lo archivos se llamen de esta forma, podemos darle cualquier nombre que deseemos, y debe ser el mismo que usamos en el template.xml.

Ahora vamos a modificar las lineas que contienen Ocitronix Vita y lo cambiamos por BATTVITA.
Podemos modificar el archivo tanto como queramos, Como la dirección a donde enviara la aplicación al presionar el frame_icon.png y prácticamente modificar lo que sea. En mi caso no modificare más, y mi archivo lucirá de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<livearea style="a1" format-ver="01.00">
 <livearea-background>
  <image>bg0.png</image>
 </livearea-background>
 <gate>
  <startup-image>startup.png</startup-image>
 </gate>

 <frame id="frame1" multi="o" autoflip="0" >
  <liveitem>
   <image align="left" width="99" height="99" origin="frame">frame_icon.png</image>

   <text origin="image" align="outside-right">
    <str color="#ffffff" size="20"> Blog </str>
   </text>

   <target>https://kiryeelesion.blogspot.com.co/</target>

  </liveitem>
 </frame>

 <frame id="frame3" multi="o" autoflip="0" >
  <liveitem>
   <text origin="background" line-align="center" margin-bottom="1">
    <str size="25" bold="on" shadow="on">　</str>
    <str size="40" bold="on" shadow="on">BATTVITA</str>
    <str size="25" bold="on" shadow="on">　
    </str>
    <str size="21" bold="on" shadow="on">
     Ocitronix
    </str>
   </text>
   <lang>es</lang>
  </liveitem>
  <liveitem>
   <text origin="background" line-align="center" margin-bottom="1">
    <str size="30" bold="on" shadow="on">　</str>
    <str size="40" bold="on" shadow="on">BATTVITA</str>
    <str size="30" bold="on" shadow="on">　
    </str>
    <str size="21" bold="on" shadow="on">
     Ocitronix
    </str>
   </text>
   <exclude-lang>es</exclude-lang>
  </liveitem>
 </frame>
</livearea>

Estas serán las imágenes que usare:

Si copiamos estas imágenes a nuestra carpeta y las remplazáramos como lo hicimos en el articulo (Añadiendo imágenes a nuestro homebrew de PS Vita), la verdad no ocurriría nada ya que estos datos quedan guardados en una base de datos, además lo más seguro es que queramos hacer nuestra propia aplicación y no modificar una. En la próxima entrada veremos como generar el archivo VPK con nuestra aplicación terminada.

Vídeo

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.