How to create a custom Livearea screen for your Homebrew

Post or find tutorials, how-to, guides, tips & tricks here
Post Reply
User avatar
Freakler
Site Admin
Posts: 171
Joined: Mon Feb 17, 2014 6:37 am
Location: Germany
Contact:

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
icon0sample.png (1.88 KiB) Viewed 27237 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 27237 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 27237 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 27237 times
a2.jpg
a2.jpg (51.85 KiB) Viewed 27237 times
a3.jpg
a3.jpg (54.41 KiB) Viewed 27237 times
a4.jpg
a4.jpg (54 KiB) Viewed 27237 times
a5.jpg
a5.jpg (57.4 KiB) Viewed 27237 times
ad0.jpg
ad0.jpg (43.33 KiB) Viewed 27237 times
ad1.jpg
ad1.jpg (53.81 KiB) Viewed 27237 times
ad2.jpg
ad2.jpg (53.65 KiB) Viewed 27237 times
ad3.jpg
ad3.jpg (52.73 KiB) Viewed 27237 times
ad4.jpg
ad4.jpg (55.3 KiB) Viewed 27237 times
browser.jpg
browser.jpg (60.99 KiB) Viewed 27237 times
content_manager.jpg
content_manager.jpg (61.79 KiB) Viewed 27237 times
kids.jpg
kids.jpg (69.58 KiB) Viewed 27237 times
music.jpg
music.jpg (58.07 KiB) Viewed 27237 times
nsx1.jpg
nsx1.jpg (56.8 KiB) Viewed 27237 times
ps1emu.jpg
ps1emu.jpg (50.4 KiB) Viewed 27237 times
psmobile.jpg
psmobile.jpg (53.51 KiB) Viewed 27237 times
pspemu.jpg
pspemu.jpg (49.94 KiB) Viewed 27237 times
vd.jpg
vd.jpg (51.83 KiB) Viewed 27237 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 27237 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 27237 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
Junior Member
Posts: 4
Joined: Sun Aug 07, 2016 7:38 pm

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

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
Junior Member
Posts: 2
Joined: Mon Aug 08, 2016 12:55 am

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

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

How are you packing these images into a VPK when you are done.
User avatar
Freakler
Site Admin
Posts: 171
Joined: Mon Feb 17, 2014 6:37 am
Location: Germany
Contact:

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

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 :)
User avatar
Freakler
Site Admin
Posts: 171
Joined: Mon Feb 17, 2014 6:37 am
Location: Germany
Contact:

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

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
Junior Member
Posts: 2
Joined: Mon Aug 08, 2016 12:55 am

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

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:
Image
User avatar
Freakler
Site Admin
Posts: 171
Joined: Mon Feb 17, 2014 6:37 am
Location: Germany
Contact:

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

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.
JuanitaWood
Junior Member
Posts: 14
Joined: Tue Sep 20, 2022 8:58 pm

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

Post by JuanitaWood » Mon Dec 11, 2023 4:37 pm

Useful info. Thank you for sharing, Freakler.
MichaelLandis
Junior Member
Posts: 19
Joined: Fri Dec 23, 2022 10:09 pm

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

Post by MichaelLandis » Sun Dec 17, 2023 7:20 pm

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