| << Newer | Article #166 | Older >> |
Creating New Layouts
This post is inspired from a message board post indicating that it sounded like it was a lot harder for non-programmer types to make layout files than it was in the previous system. Well, looking at my previous two posts on the layouts, I can understand why. The new system has a lot of flexibility, which can be intimidating. And then I discussed converting old .art files, which makes things sound a heck of a lot more complicated than they need to be.
So, in the hopes of convincing people that the new system is actually simpler, let's talk about making a layout that adds a bezel. I'll assume you have the bezel artwork, either with embedded alpha channel, or with a separate mask alpha, all ready to go. We'll call the bezel artwork file mybezelname.png and the mask file (if necessary) mymaskname.png.
Now, presumably, you've loaded this artwork into some kind of image editing problem, so you know the dimensions of the image. Let's say it is bezelwidth pixels wide and bezelheight pixels tall. The one remaining piece of information you need to figure out is where does the screen go, relative to the artwork? Keep in mind that if the screen is horizontal, then the screen height should be 75% of the screen width. For example, if, within your artwork, the screen should be 1000 pixels wide, then it should be 750 pixels tall. If you're dealing with a vertical game, then reverse those numbers.
Once you figure out where the screen should go relative to the artwork, make a note of the top, left, bottom, and right coordinates of the screen position. We'll call those tscrpos, lscrpos, bscrpos, rscrpos, respectively.
Now all you need to do is write a .lay file that contains a single element to hold your artwork, and then a view that positions your artwork and the screen at the right positions. Below I've written a simple template. Just plug in the values I mentioned above into the template and you're ready to go. Note that, unlike the previous system, there is no wacky math to learn. You can work entirely in pixels.
<?xml version="1.0"?>
<mamelayout version="2">
<element name="bezel">
<image file="mybezelname.png"
alphafile="mymaskname.png" />
</element>
<view name="Bezel Artwork">
<screen index="0">
<bounds
left="lscrpos" top="tscrpos" right="rscrpos" bottom="bscrpos" />
</screen>
<bezel element="bezel">
<bounds
left="0" top="0" right="bezelwidth" bottom="bezelheight" />
</bezel>
</view>
</mamelayout>
If there are questions, please post them here and I will try to answer them.