How to create a custom Livearea screen for your Homebrew

Post by **Freakler** » Sun Aug 07, 2016 3:29 pm

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 8637 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 8637 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 8637 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 8637 times

: a2.jpg (51.85 KiB) Viewed 8637 times

: a3.jpg (54.41 KiB) Viewed 8637 times

: a4.jpg (54 KiB) Viewed 8637 times

: a5.jpg (57.4 KiB) Viewed 8637 times

: ad0.jpg (43.33 KiB) Viewed 8637 times

: ad1.jpg (53.81 KiB) Viewed 8637 times

: ad2.jpg (53.65 KiB) Viewed 8637 times

: ad3.jpg (52.73 KiB) Viewed 8637 times

: ad4.jpg (55.3 KiB) Viewed 8637 times

: browser.jpg (60.99 KiB) Viewed 8637 times

: content_manager.jpg (61.79 KiB) Viewed 8637 times

: kids.jpg (69.58 KiB) Viewed 8637 times

: music.jpg (58.07 KiB) Viewed 8637 times

: nsx1.jpg (56.8 KiB) Viewed 8637 times

: ps1emu.jpg (50.4 KiB) Viewed 8637 times

: psmobile.jpg (53.51 KiB) Viewed 8637 times

: pspemu.jpg (49.94 KiB) Viewed 8637 times

: vd.jpg (51.83 KiB) Viewed 8637 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 8637 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 8637 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 · Post by **NoOne_PK** » Sun Aug 07, 2016 7:41 pm

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

Melon_Bread · Post by **Melon_Bread** » Mon Aug 08, 2016 12:57 am

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

Post by **Freakler** » Mon Aug 08, 2016 3:23 pm

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

Post by **Freakler** » Mon Aug 08, 2016 3:29 pm

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

Melon_Bread · Post by **Melon_Bread** » Wed Aug 10, 2016 10:38 pm

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:

Post by **Freakler** » Thu Aug 11, 2016 8:05 am

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.

How to create a custom Livearea screen for your Homebrew

How to create a custom Livearea screen for your Homebrew

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

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

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

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

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

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