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 (1.88KiB)Viewed 11044 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 (562Bytes)Viewed 11044 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

)

- screen.jpg (61.08KiB)Viewed 11044 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 (52.4KiB)Viewed 11044 times

- a2.jpg (51.85KiB)Viewed 11044 times

- a3.jpg (54.41KiB)Viewed 11044 times

- a4.jpg (54KiB)Viewed 11044 times

- a5.jpg (57.4KiB)Viewed 11044 times

- ad0.jpg (43.33KiB)Viewed 11044 times

- ad1.jpg (53.81KiB)Viewed 11044 times

- ad2.jpg (53.65KiB)Viewed 11044 times

- ad3.jpg (52.73KiB)Viewed 11044 times

- ad4.jpg (55.3KiB)Viewed 11044 times

- browser.jpg (60.99KiB)Viewed 11044 times

- content_manager.jpg (61.79KiB)Viewed 11044 times

- kids.jpg (69.58KiB)Viewed 11044 times

- music.jpg (58.07KiB)Viewed 11044 times

- nsx1.jpg (56.8KiB)Viewed 11044 times

- ps1emu.jpg (50.4KiB)Viewed 11044 times

- psmobile.jpg (53.51KiB)Viewed 11044 times

- pspemu.jpg (49.94KiB)Viewed 11044 times

- vd.jpg (51.83KiB)Viewed 11044 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 (179.94KiB)Viewed 11044 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 (74.13KiB)Viewed 11044 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
