How to create a custom Livearea screen for your Homebrew

[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 (1.88 KiB) Viewed 34628 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 (562 Bytes) Viewed 34628 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.08 KiB) Viewed 34628 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.4 KiB) Viewed 34628 times

a2.jpg (51.85 KiB) Viewed 34628 times

a3.jpg (54.41 KiB) Viewed 34628 times

a4.jpg (54 KiB) Viewed 34628 times

a5.jpg (57.4 KiB) Viewed 34628 times

ad0.jpg (43.33 KiB) Viewed 34628 times

ad1.jpg (53.81 KiB) Viewed 34628 times

ad2.jpg (53.65 KiB) Viewed 34628 times

ad3.jpg (52.73 KiB) Viewed 34628 times

ad4.jpg (55.3 KiB) Viewed 34628 times

browser.jpg (60.99 KiB) Viewed 34628 times

content_manager.jpg (61.79 KiB) Viewed 34628 times

kids.jpg (69.58 KiB) Viewed 34628 times

music.jpg (58.07 KiB) Viewed 34628 times

nsx1.jpg (56.8 KiB) Viewed 34628 times

ps1emu.jpg (50.4 KiB) Viewed 34628 times

psmobile.jpg (53.51 KiB) Viewed 34628 times

pspemu.jpg (49.94 KiB) Viewed 34628 times

vd.jpg (51.83 KiB) Viewed 34628 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.94 KiB) Viewed 34628 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.13 KiB) Viewed 34628 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

[NoOne_PK]

How to make the frames flip? Just like on PSN store live area screen, images flips automatically.

[Melon_Bread]

How are you packing these images into a VPK when you are done.

[Freakler]

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

[Freakler]

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

[Melon_Bread]

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:

[Freakler]

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.

[JuanitaWood]

Useful info. Thank you for sharing, Freakler.

[MichaelLandis]

Helpful information. Thanks for sharing, Freakler. Your, shall we say, step by step guide really helped me get a beautiful screen.