Page 1 of 1

How to create a custom Livearea screen for your Homebrew

Posted: Sun Aug 07, 2016 3:29 pm
by Freakler
This should help getting you a nice Livearea screen for your Homebrew with addressing everything you can do from graphics to advanced options. See it as some kind of wiki.. maybe

The Bubble icon
- 128 x 128 pixels
- must be named icon0.png
icon0sample.png
icon0sample.png (1.88 KiB) Viewed 8870 times
The Bootscreen
- optional (otherwise it will be just black)
- should be 960 x 544 pixels but can be bigger or smaller too
- must be named pic0.png

The background picture
- should be 840x500 pixels but can be bigger or smaller too
- default name bg0.png but can be anything

The startup icon
- should be 280 x 158 pixels
- default name startup.png but can be anything
startup.png
startup.png (562 Bytes) Viewed 8870 times
Note: All these images need to have a 256 color depth so that the Vita accepts them.


The template.xml
A basic xml file:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>

<livearea style="a1" format-ver="01.00" content-rev="1">
  
  <livearea-background>
    <image>bg0.png</image>
  </livearea-background>
  
  <gate>
    <startup-image>startup.png</startup-image>
  </gate>
  
</livearea>
Okay, so much for the basic things which are fairly easy to do.. From here you already have everything needed for a nice design you can pack to a Homebrew vpk. (You can skip to the end to find a basic file structure)

BUT if you want to go even further and add additional things and functions to your livearea screen you will need to do some advanced xml editing:

Here is a .xml sample file showing some things you can do: (Just to get an idea of what is possible. Explanations below)

Code: Select all

<?xml version="1.0" encoding="utf-8"?>

<livearea style="a1" format-ver="01.00" content-rev="1">
 
  <livearea-background>
    <image>bg0.png</image>
  </livearea-background>
 
  <gate>
    <startup-image>startup.png</startup-image>
  </gate>

  <frame id="frame1">
   <liveitem default="on">   
     <text>
       <str>Default sample text!</str>
     </text>
   </liveitem>
   
    <liveitem> <lang>en</lang>
     <text>
       <str>This is a sample text for english!</str>
     </text>   
    </liveitem>
   
   <liveitem> <lang>ja</lang>
     <text>
       <str>This is a sample text for japanese!</str>
     </text>   
    </liveitem>
  </frame>
 
  <frame id="frame2">
    <liveitem>
	 <age-limit >3</age-limit>
      <image>go_to_youtube.png</image>
      <target>http://youtube.com</target>
    </liveitem>
  </frame>
 
  <frame id="frame3">
	<liveitem from="2016-01-01T07:00:00.00Z" until="9999-07-25T17:00:00.00Z">
	 <model>vita</model>
     <background align="center" valign="center">picture.png</background>
	 <text align="center" valign="bottom" x="20"><str size="28" bold="on">This is a Vita!</str></text>
    </liveitem>
  </frame>
   
</livearea>
frame1 displays a text depending on the Vitas language setting
frame2 will be displaying an image that can open a link when touched (as long as you are 3 years old)
frame3 displays a background picture and text (but only when your are using this on a Vita in the year 2016 :mrgreen: )
screen.jpg
screen.jpg (61.08 KiB) Viewed 8870 times
..and theres even more you can do..


Here are some standard xml arguments you can use with examples:

The Templates

Code: Select all

<livearea style="a1, a2, a3, a4, a5, ad0, ad1, ad2, ad3, ad4, browser, content_manager, kids, music, nsx1, ps1emu, psmobile, pspemu, vd">
Examples:
a1.jpg
a1.jpg (52.4 KiB) Viewed 8870 times
a2.jpg
a2.jpg (51.85 KiB) Viewed 8870 times
a3.jpg
a3.jpg (54.41 KiB) Viewed 8870 times
a4.jpg
a4.jpg (54 KiB) Viewed 8870 times
a5.jpg
a5.jpg (57.4 KiB) Viewed 8870 times
ad0.jpg
ad0.jpg (43.33 KiB) Viewed 8870 times
ad1.jpg
ad1.jpg (53.81 KiB) Viewed 8870 times
ad2.jpg
ad2.jpg (53.65 KiB) Viewed 8870 times
ad3.jpg
ad3.jpg (52.73 KiB) Viewed 8870 times
ad4.jpg
ad4.jpg (55.3 KiB) Viewed 8870 times
browser.jpg
browser.jpg (60.99 KiB) Viewed 8870 times
content_manager.jpg
content_manager.jpg (61.79 KiB) Viewed 8870 times
kids.jpg
kids.jpg (69.58 KiB) Viewed 8870 times
music.jpg
music.jpg (58.07 KiB) Viewed 8870 times
nsx1.jpg
nsx1.jpg (56.8 KiB) Viewed 8870 times
ps1emu.jpg
ps1emu.jpg (50.4 KiB) Viewed 8870 times
psmobile.jpg
psmobile.jpg (53.51 KiB) Viewed 8870 times
pspemu.jpg
pspemu.jpg (49.94 KiB) Viewed 8870 times
vd.jpg
vd.jpg (51.83 KiB) Viewed 8870 times

(the stock app templates' functions won't work! They are just listed for completion..)


Text & Image styling options

Code: Select all

<text align="outside-right" ellipsis="off" line-align="left" line-break="on" line-space="3" margin-left="39" margin-top="18" origin="image" pre-br="on"  text-valign="center" valign="bottom" word-scroll="off" word-wrap="on" x="17" >

<str bold="on" color="#ffffff" emboss="off" oblique="off" shadow="off" size="22.000000" underline="off"> 

<image align="center" origin="frame" valign="top" width="99" height="99" x="-209">
Advanced stuff

Code: Select all

<frame id="frameX" multi="o" autoflip="0" rev="1">

<lang>ja, en, fr, es, de, it, nl, pt, ru, ko, ch, zh, fi, sv, da, no, pl, en-gb, pt-br, tr</lang>
or
<exclude-lang>ja</exlude-lang>

<model>vita</model>

<target>http://xyz.com, camera:, psns:browse?product=EP4293-PCSB00956_00-GALGUNWAPP000000</target> //can be a website or a uri call
I know this sounds like a lot right now and it probably is, so the best thing you can do is check some of your existing app's xml files. (You can find them decrypted in ur0:appmeta/XXXXXXXXX/livearea/contents/ for your Apps & Games)

Here is an example of the settings frame:
frame_settings.png
frame_settings.png (179.94 KiB) Viewed 8870 times
And one more thing: You can even create a game manual for your homebrew by simply adding a folder called "manual" next to "livearea" and adding png files starting from 001.png, 002.png and so on.. The manual icon will be displayed automatically. :)
manual.png
manual.png (74.13 KiB) Viewed 8870 times
In the end a complete .vpk should be structured & look like this:

Code: Select all

eboot.bin
sce_sys/
├── icon0.png
├── pic0.png
├── param.sfo
├── livearea/
│   ├── contents/
│   │   ├── bg0.png
│   │   ├── startup.png
│   │   ├── template.xml
├── manual/
│   ├── 001.png
│   ├── 002.png
Hope this helps someone. And let me know if you come across anything else so I can add it or just post it below :)

Re: How to create a custom Livearea screen for your Homebrew

Posted: Sun Aug 07, 2016 7:41 pm
by NoOne_PK
How to make the frames flip? Just like on PSN store live area screen, images flips automatically.

Re: How to create a custom Livearea screen for your Homebrew

Posted: Mon Aug 08, 2016 12:57 am
by Melon_Bread
How are you packing these images into a VPK when you are done.

Re: How to create a custom Livearea screen for your Homebrew

Posted: Mon Aug 08, 2016 3:23 pm
by Freakler
Melon_Bread wrote:How are you packing these images into a VPK when you are done.
You can just use winzip or anything comparable to edit the vpk :)

Re: How to create a custom Livearea screen for your Homebrew

Posted: Mon Aug 08, 2016 3:29 pm
by Freakler
NoOne_PK wrote:How to make the frames flip? Just like on PSN store live area screen, images flips automatically.
I'm not quite sure. Its different for the app store somehow. But i will add it when figured out

Re: How to create a custom Livearea screen for your Homebrew

Posted: Wed Aug 10, 2016 10:38 pm
by Melon_Bread
Freakler wrote:
Melon_Bread wrote:How are you packing these images into a VPK when you are done.
You can just use winzip or anything comparable to edit the vpk :)
Ah thanks my next question is is there any size limit or anything when it comes to the images? I packed all of my stuff (pic0, icon0, etc.), compressed them via pngquant, but when I go to install the vpk it gets to about 94% then I the following error:
Image

Re: How to create a custom Livearea screen for your Homebrew

Posted: Thu Aug 11, 2016 8:05 am
by Freakler
Melon_Bread wrote: Ah thanks my next question is is there any size limit or anything when it comes to the images? I packed all of my stuff (pic0, icon0, etc.), compressed them via pngquant, but when I go to install the vpk it gets to about 94% then I the following error:
That probably means the template.xml is not properly formatted or something else may be corrupted.