Introduction
This guide aims to explain how to add animations using Rcomage, focusing mostly on background animations.
This guide does assume knowledge of the XML format, however, even if you don't know it, it should be easy to pick up (basically, it's a text-based type of file which defines hierachical data; if you know HTML of even bbCode, it should look somewhat familiar).
I'll also walk through an example.
If you haven't done so already, you should get a copy of Rcomage and dump system_plugin_bg.rco and take a look at the XML file. I also recommend using a _proper_ text editor (ie, not Windows' Notepad) for editing the XML file (I personally suggest Notepad++).
About RCO Animations
RCO animations are basically a sequence of actions the PSP takes to perform the animation. To add your own, you basically define the animation sequence. The animation sequence defines what to do (eg move, resize etc) and what objects to apply to. Once you've defined your animation sequence(s), you need to specify a trigger - typically when a particular object is loaded, or perhaps, after another animation sequence has finished playing.
These animation sequences are defined inside the <AnimTree> (if it doesn't exist in the particular RCO, you can just add it). The sequence is defined inside <Animation> tags.
When the animation sequence is triggered, the PSP executes the "instructions" in the animation sequence in order specified. The instructions are run
in parallel, that is, all at the same time, until a <Delay> instruction. At that point, it will delay for the amount specified and then continue executing as before.
Animation Instructions
The following are the known types of instructions which may placed between <Animation> tags. Most are transformations and will look something like this:
<Transformation object="object:obj_name" duration="time_in_miliseconds" unknownInt1="0" additional_properties />
Here's the list of transformations, with the additional properties in brackets:
- MoveTo (x, y, unknownFloat4=0): moves the specified object to x/y coordinate; like for all coordinates in RCOs, 0,0 is the centre of the screen, negative x values are to the left, and (from memory) negative y means above the centre
- Recolour (red, green, blue, alpha): apply colour strengths specified to the object; as with ordinary colour strengths values, 0 means no colour, 1 means full colour, >1 means more than full colour
- Rotate (x, y, z): performs a 3D rotation on the object; x/y/z are angles to rotate, measured in radians. if x=0 and y=0, this is just a 2D rotation of z radians.
- Resize (width, height, unknownFloat4=1): rescales the object, if memory serves me right, specified width/heights are scales, not dimensions. That is, width=1.5 means "make the width 1.5x the original width"
- Fade (transparency): Changes transparency of object; this is subtley different to Recolour in that it doesn't change colour strengths
- SlideOut (xspeed, yspeed, xcompress, ycompress): this is a weird one and doesn't appear to be used much; try it yourself I guess. Appears to be different in that it only works once? Also its ID is rather different from the above instructions' IDs...
Other non-transformational instructions:
- <Delay time="time_in_miliseconds" />: delays further animation by specified amount
- <FireEvent event="event_or_anim" />: executes the specified event or animation; note, this event/anim name should be prefixed with "event:" or "anim:"
- <Lock unknownInt0="0xFFFFFFFF" />: this and it's "Unlock" variant - dunno what it does; where'd I get the name from? I made it up :P
Examples
Well, that's about it for animations. So I'll give you 2 examples on how to apply it.
Example Animation
Here's an example animation I made which I'll guide you through. Can grab the files here:
demo anim.7z (Size: 19.43 KB / Downloads: 504)
Okay, dump a clean system_plugin_bg.rco file. First wee add the two images by creating an <ImageTree> directly under the <MainTree> line and adding the images to the ImageTree:
The src attribute merely specifies where the image file wee're adding is stored, the name wee make up ourself. Wee're using PNG images, so set format as "png". Alternatively, wee could put format as "gim" and Rcomage will convert the supplied PNG into a GIM, but this is unnecessary (though would work). For PNGs, you should leave compression as "uncompressed", however, for GIMs, you should set this to "zlib".
Now wee want the images to actually show up on the XMB, so wee add the objects. These will be "Plane" type objects. Wee'll place this over the 01-12.bmp background thing (named default_theme_plane) by adding the objects directly under it.
Note that I've also changed the RGB colour strengths for the default_theme_plane object. Since wee want a black background, the 01-12.bmp picture is of no use, so I'll conveniently just make it black by setting the colour strengths to 0.
As for the added entries, I just copied it from "default_theme_plane" and modified the various things that needed modifying. This includes the names (make up any arbitrary name that isn't already used), the width and x position for the highlighter image (this image will initially be off the left side of screen) and the image property - for this, set it as a reference to the images wee added earlier. Note that the prefix "image:" is required.
Now, wee've got the thing displayed on the XMB. All that's left is the animation part!
Add the following within the <AnimTree> (preferrably just before the </AnimTree> line):
Hopefully you'll be able to see the intuition behind this sequence. Basically, it tells the PSP to move the highlighter object towards the right. Note again that the "object:" prefix is required for the object reference. Duration times are in miliseconds, so the first action is to move the highlighter from off the left side of the screen, over to and off the right side of the screen, taking 1.5 seconds.
The next action is to wait for 6 seconds. Remember that this wait is triggered at the beginning of the previous action. In other words, this line effectively waits 4.5 seconds after the highlighter has finished moving off the right side of the screen.
After that, the highlighter is moved back to the left of the screen, with a duration of 0, meaning this isn't animated. Then the animation is fired again, making this a looping animation.
Only one thing left to do now - trigger the animation. Wee want this animation sequence to start executing when the objects are loaded. So pick one of the background related objects, say default_theme_plane (it doesn't really matter which though) and modify the onLoad attribute to the animation sequence wee just made. It should look something like: