SUBSIM: The Web's #1 BBS for all submarine and naval simulations!
|03-04-2010, 06:15 AM||#1|
The Old Man
[TEC] Menu Editor
Well, the devs have kindly given us this new puppy. For old GUI modders this will be a joy to use. In one word the SH3, SH4 and SH5 are all based on similar rules. I see no reason experienced modders can't use this tool to even tweak the SH3 and SH4 interface themselves. This tutorial is only about how to create the graphic 2D interface. At the moment I don't know how to link items to commands, scripts, or dials. Just because you create a new pretty animated "KILL THE WHALES" button in the Editor, doesn't mean that it will do anything when you click on it. A separate thread is required to explain each item type. My aim is only to help you make your way through the Menu Editor.
Now let's start the tool:
First go to the My Documents SH5 folder (in W7 and Vista it's C:\Users\xxxxx\Documents\SH5\data\cfg and open up the main.cfg file.
Uncomment (delete the semicolons) the DEVELOPER lines:
Now start the game and you'll see a dialog box:
If you select No, the game will start normally. If you select Yes the Menu Editor will open.
The Editor is composed of a Preview Screen and a Control Panel. A the top of the Control Panel you see a list of all the items in all the screens of the 2D interface. They are all linked inside a hierarchy of parents and children. In simple terms, all items are put inside groups. Moving a group will move all the included items.
If you Right click on the menu bar of the Preview Window you'll be able to start any of the other modding tools. Windows 7 users, as far as I know this is the only way to access these tools.
Navigation and selection:
You can select any item in the Preview screen and it will be outlined by an animated yellow border. As you move the mouse you can also see in a red outline which item will be selected if you click.
Some Pages contain a LOT of items (not as bad as SH4 tho). It might be hard to focus on one particular group and select the correct item. So let's use the Control Panel.
Green items are invisible Groups (or pages). By default you can only parent objects to these (unlike in SH3 and SH4). All other items are shown in black with a indication of what that item is (a button, an image, a movie etc). THe selected item is shown in red.
Below you can select 3 checkboxes:
- B.boxes: will draw bounding boxes around all visible items
- Rev.sel: will enable the animated yellow box around the selected item
- Full page: will show ALL the items in that page OR focus on a particular group in the page and hide all other items in that page. You need to select a group first and then uncheck the Full page option.
The Background is a great feature that allows you set the color of the Preview Window background. Enter the RGB value of the color you want. "A" is for "alpha" but I don't really know what effect it has. The background color has no effect in the game.
All of the above options are not saved when you close the Menu Editor.
Before we start making changes it's important to know how to undo them. The Editor will only save changes when you press the SAVE button at the bottom of the Control Panel. You can't press CTRL-Z to undo, but you can press the UNDO button just below the item list. You'll be happy to know that you can quickly jump to any of a maximum of 20 backward steps.
Last edited by karamazovnew; 03-04-2010 at 10:29 AM.
|03-04-2010, 06:16 AM||#2|
The Old Man
CREATING NEW ITEMS
I always like to start with a blank page (literally) when I practice things so I'll create a new page and we'll mess it up as much as possible without the risk of breaking the game.
So what are Pages/Groups? They are invisible items that have a specific position, resolution scaling and dimensions. You can place anything inside them and when you move them, all the items will move as a group (duh).
I have no idea in what way a Page is different from a Group. They're probably accessed differently by the hardcode. In SH4 it was possible to show the Periscope Interface 3D while on the Bridge or at the Hydrophone Station. So for now let's just say that Pages are "Screens": the periscope screen, the map screen and so on.
In SH3 and SH4, all Pages were sitting in one humongous file, the dreaded menu_1024_768.ini file. Things have changed FOR THE BETTER.
We can now save each page in its own file. Thus mods can now tackle particular screens, without the risk of major incompatibility.
All the files that make up the interface sit inside the \data\Menu\Pages folder. So make sure you back up that folder before you begin modding. Or use JSGME.
Can we create new pages? Hell yeah!
Just Right click on the Root Parent in the Control Panel list...
In the new dialog box, just enter a good name and, if you want, a specific ID. Don't worry about existing items, the edit will not let you create duplicates:
For example, I've just created 2 items, a Page called Karamazov and a group called Karamazovgroup. After I saved here's what happened:
The proper files were created. Both new items were added to the menu_1024_768.ini file (which now acts as an index for all the pages). You might also see that any new page is automatically configured to fill the entire screen on any resolution (more about that later). Both new items appear just under the Root Menu, first in the list. But you can drag/drop them to any place you want. This will have an effect on the order in which these pages appear on screen. More about that later, but remember that the any item will appear BEHIND any item that is further down in the list. In other words, any new item that you've just created inside a group/page will always be behind any other items that were already in that group. I'll come back to this in just a second.
Let's add a new item to my Karamazov page. I will right click on it and get the following menu:
- Change ID: allows you to input a custom ID.
- Add Controls group: allows you to create a group. You can create as many nested groups as you want, even if only to keep the list tidy for easy modding
- Add Control: Create a new item inside the group. Here's the control box you get when you click it:
You can now select the type of item you want to create. Be careful as this is the only time you can do this. If you change your mind later, you'll have to delete this and create a new item.
Also notice that the ID input box is dynamic. When we created the Page we were only allowed to change the first 2 numbers in the string. We are now allowed to change the last 4 items in the string. This is done to prevent a mess up of the ID's and also to keep things simple to read for you:
-Any page or main group (the ones just below the root) will have this pattern: XX000000. So you have a maximum of 196 pages available to you. Remember that all of these get their own file!
My Karamazovgroup item got the ID of: 1B000000.
-Any group inside a page will inherit the ID of the parent. So any groups that I create inside my Karamazovgroup will look like this: 1BXX0000. It doesn't matter how they're nested together (unless you write this in binary code ). Thus you can create a total of 196 groups in any page!
For example, I create a new group that receives the ID of: 1B010000
- Any item that is placed inside this group will have this pattern: 1B01XXXX. In other words I am able to create 9999 items inside ANY on of my 196 total possible groups in ANY 196 pages. That's a LOT of possible items
So what items can we create? Here's a quick list:
Static Text, Static BMP, Static BMP Array, Button, Checkbox, Slider, EditBox, Radio button, EditBox, Move, Progress, TabControl, DetectMouse, etc., etc.,etc.
To rename an item, first select it in the list by clicking on it in the list. Then, after half a second or so, click it again. Don't rapidly double click or it won't work.
At the moment refrain yourself from deleting any original game items. It might cause crashes. If you want to remove an item from the screen, just move it outside of the viewport (I'll explain how in the next post). The only way to delete items is to Right click on them in the list and select Delete from the menu.
Changing the Order of the items inside a group
For the next example I have created the following structure:
1. I created GROUP 1
2. I created a Progress Bar inside GROUP 1
3. I created a Static Text inside Group 1
4. I created GROUP 2
I then moved the items with my mouse in the Preview Screen:
As you can see, the LAST item you create is placed at the TOP of the list. But in the game, the LAST item is always shown Behind all the other objects in the group.
Note that the text ("TO GAME") is behind the progress bar picture. Also note that items don't need to be positioned INSIDE the bounding box of a group. The Static Text Object is completely outside GROUP1. To make the Text appear in front of the Progress Bar Image you just need to drag it BELOW, in the list.
As you can see, the text now appears on top of the image. The same rule and method applies to groups, parent groups and pages. Dragging an item in the list will only change the order inside it's group. You can't drag and drop any item into another group. You'll need to use Copy/Cut/Paste to do that.
To delete an item simply right click on it in the list and select delete. Please note that the editor doesn't automatically renumber the other items. For example:
- my "New Progress bar" object has an ID of 01010001 (as it was the first item I created inside the first group inside the first page).
- my "New Static text" object has an ID of 01010002. It figures, since it was the second object I created.
If I now delete the Progress Bar, the static text will not automatically be renumbered. However the next item I create inside that group will automatically be given the first id available (01010001). The order in which objects appear on the screen has nothing to do with these ID's. The only thing that counts is the order in the list (and thus, in the .ini file of that page). SH3+SH4 UI modders already know this, of course... Just moving objects around in the list by dragging them will thus never change the ID's.
NOTE: How can you see an ID? Just right click the item in the list and select "Change ID" or simply look down a few lines:
Sure we can drag GROUP1 behind or on top of GROUP2. But what if we wanted to move GROUP1 INSIDE GROUP2? We can't do that with dragging. So we'll just
1. Right Click on GROUP1 and select CUT
2. Right Click on GROUP2 and select PASTE
GROUP1 and all of its items will be moved to GROUP2 (at the top of the list, by the way).
If we instead copy GROUP1 to GROUP2, we'll get this:
As you can see, they have the same names. But their IDs are different. Can you guess how?
- The new GROUP1 is now the third group in my page so it will have an ID of: 01030000
- The old Progress bar had an id of 01010002, so can you guess what ID it will have now? 01030002.
- Similarly, the new text object will have an ID of 01030001.
Now because the ID's have the format of: PG.GR.ITEM (page.group.item or xxyyzzzz), if you copy or cut items from one page to another they will automatically inherit the Page ID of the destination AND be assigned the first free Group or Item ID available.
Thus,you easily copy buttons, dials, even entire groups from one page to another, or even inside the same page, or even inside the same group and you don't need to worry about their order or ID's. If the similar names annoy you, just rename them. And yes, you can rename all the items to "Mini Me" if you want to... the game won't care.
There is no longer any need for renumbering items in the ini files, it's all done for you when you save.
Last edited by karamazovnew; 03-04-2010 at 03:43 PM.
|03-04-2010, 06:17 AM||#3|
The Old Man
This is where it hurts. Sorry guys but I'll need you to read something first. Just browse through them, I'll do my best to explain it all again (picture heavy )
Back in 2007 just as SH4 came out, Zamboni wrote this tutorial. You won't believe it, but it still works: http://www.subsim.com/radioroom/showthread.php?t=111832
It took 2 and a half years for someone (me!) to figure out how to scale things to resolution: http://www.subsim.com/radioroom/show...28&postcount=7
If you're one of the old guards there is nothing New I can tell you and it will only take you a few minutes to figure out the interface of the editor (it took me 1 minute to be exact). Everything is the SAME. And that's a very good thing. You see, even making hundreds of items in NOTEPAD made sense in SH. The workflow was slow but once you understood HOW, it was just a matter of time and patience.
Back in SH3, we were stuck with just one resolution, 1024x768. This made modding quite easy as each item's position was presented as an offset to it's parent, in pixels. But positioning and aligning items accurately was a pain. For example:
The 0x0 item was the Root. The main screen. It was 1024 pixels wide and 768 pixels high so it filled the screen. It couldn't be moved, it couldn't be accessed. It "started" from the Top Left corner of the screen.
The 0x1000000 item there is the first menu page. It's a child of the 0x0 item (ParentID=0x0). It's 0 pixels wide by 0 pixels high(Pos=0,0,0,0). But where is it placed? Each item's position is actually given by the position of its TOP LEFT corner. Any child of that item will then be positioned RELATIVE to the item's (the parent) corner, by an offset in pixels. This propagates into the hierarchy so in effect you could never know the actual position on the screen. You had to go step by step, from parent to child, making offsets at each step. In our case, the Page has an offset of 0 pixels on horizontal and 0 pixels on vertical (Pos=0,0,0,0). In other words, it's exactly at 0 0 coordinates (top left of the screen).
The bitmap object 0x1000004 is a child of the page (ParentID=0x1000000). It has a width of 28, a height if 33 and it's top left corner is offset to the parent's top left corner by 146 pixels to the right and 685 pixels up (Pos=146,685,28,33).
In other words, the Pos line is:
Pos=X, Y, WIDTH, LENGTH where X and Y are given relative to the first immediate parent.
Do you think that was complicated? Take a quick glance at the SH4 positioning line:
Zone= 545 396 80 24 0 1 0x28190001 1 -0.5 0x28190003 0 0.5 3 0
Don't worry, it will all make sense. We'll see how the Menu Editor actually generates this monster and why it's important to take the time and understand it. The Menu Editor is a great tool but you must first THINK ahead a lot, and here's why.
When SH4 came out, it featured multiple resolutions and, of course, multiple aspect ratios (1024x768 and 1600x1200 are 4:3 resolutions while 1920x1200 is a 16:10 resolution, or widescreen as it's called). So how did they make the interface fill up the entire screen at any resolution/aspect ratio? Multiple interfaces for each resolution? Magic? Secret tools? The son of Einstein? Nope. They actually programmed the entire interface as a 1024x768 screen and stretched it "behind the scenes"!!! And guess what... you'll need to do the same in SH5. Because the Menu Editor only shows you a 1024x768 screen. And if you're about to create the imba interface for all to wonder, you need to understand how scaling works in order to plan ahead. Otherwise, you won't know what hit you.
Screen Resolution versus Editor resolution, relative versus absolute
For all my following examples I will only use 2 resolutions as reference: 1024x768 (normal 4:3 aspect) and 1920x1200 (16:10 aspect).
1024x768 is the most important resolution because it's the the resolution at which you will preview your results. If your interface or objects are positioned and scaled correctly in the Editor, they will look just as great in the game. But somehow you need to to do SOMETHING to make it look right on all resolutions and somehow maintain it's relative position or size on the screen. So you need to think ahead about how you want your items too look on any screen. Here's what you need to keep in mind:
ABSOLUTE SIZE: if you want your item to always be X pixels wide and Y pixels high, the item will "shrink" as you increase the screen resolution:
ABSOLUTE POSITION: if you want your item to always be at X pixels left and Y pixels down from the top left corner of your screen, the position will shift as you increase resolution.
Already a lot of people have complained about the recognition manual being too small. It's not small on 1024x768, but it gets smaller and smaller as the resolution increases. This applies to 90% of the game's interface. It's good for some items, but bad for most. What we want is for an item to maintain its relative size to the screen. If the resolution doubles, we want the item to double in size. But here's what happens when you switch aspect ratios:
Why? Because when increasing resolution from 1024x768 to 1920x1200, the screen width has increased by a factor of StretchX=1.6 (as in 1920/1024) while the screen height has increased by a factor of StretchY=1.5625 (as in 1200/768). Thus our item has increased its size by 1.6 horizontally and 1.5625 vertically. This creates the stretching. So what if we don't want it to stretch?
In that case you need to CHOOSE how your items should resize. The game offers a lot of flexibility here:
- "none": don't increase size at all. Result: the items get smaller and smaller.
- "no constraint": increase width by StretchX and height by StretchY. Result: the items get bigger but hey become stretched or squashed on ANY non 4:3 aspect ratio.
- "horizontallyOnly": will only increase the horizontal size by StretchY. Result: the items will get VEEERY wide while at the same time become smaller in height. Very good for things like long bars.
- "verticallyOnly" : will only increase the vertical size by StretchX. Result: same as before but vertically
- "constantAspectRatioHorizontal": will increase both horizontal and vertical size by StretchX. Result: the items become bigger without becoming stretched. This is the best mode for backgrounds as they will fill up the screen. However, it will clip their top and bottom margins.
- "constantAspectRatioVertical": will increase both horizontal and vertical size by StretchY. Result: the items become bigger without becoming stretched. This is not good for backgrounds as it will leave empty bands left and right.
- "constantAspectRatioMin" and "constantAspectRatioMax": this might sound redundant, as all monitors have a Width>Heigth but there might be people out there who like to rotate their monitors. This allows for weird resolutions like 1200x1600 and 1200x1920.
With the risk of "just saying too much", I'd like to point out that because 1024*768 is a 4:3 resolution, all the constantAspectRatio resizing methods will appear to be the SAME if you own a 4:3 monitor. If you do, and you want to create an inteface it's important to remember this because you must be careful when you rescale items, simply because you won't be able to test it on wide res resolutions. It might look good to you, but a person with a different aspect ratio might see errors if you're not careful. As a rule of thumb, you only ever need to test your creations on 2 resolutions: 1024*768, and the maximum wide resolution that your computer can allow. If it looks good on those, it will look good on any monitor.
Does this apply only to images? No. I only used the picture of the greatest hero of all times to illustrate "stretching" when resizing. It actually applies to all items regardless of weather they have images or they're invisible: menu pages, groups, everything. We're not stretching images, we're altering (resizing) dimensions. For example, say you want a menu group that must fill up the entire screen on any resolution. What do you do?
1. you "fill up" the screen at 1024x768, meaning that you create an item that is 1024x768 in size and you place its top left corner at the top left corner of the screen.
2. you assign to it a resize method of "no constraint". This way it will always fill up the screen.
Why would you want to resize invisible objects? Here's why:
Take a look back at the image with Absolute Position. You place the item in the dead center of the screen and you want it to stay there at any resolution. If you say "well, my resolution is 1024x768 so I'll start from the top left of the screen and shift the item right by 512 pixels and down by 384" sure, it will look fine at 1024*768, BUT it will no longer be in the center at 1920x1200, because the center of such a screen is at 860 per 600 (as in the image). What you need to do is think like this:
"Ok, I have a parent (the screen in this example). It has WIDTH and HEIGHT and they vary with resolution. So if I want to make a new child item that stays at the center of the parent(screen), I must express the position of the child as relative to the WIDTH and HEIGHT of the parent". In other words, to make a button that is "glued" to the right side of the screen, you will start from the top left corner of the parent, just as in SH3, and then offset the horizontal position by the full WIDTH of the parent. If you want your item to remain in the center of the screen, you start from the top corner of the screen and then shift your item RIGHT by 0.5 * WIDTH and then shift it DOWN by 0.5 * HEIGHT.
Relative positioning works like this:
1. you start from the position of the parent
2. you offset by an amount relative to the parent's dimensions
3. you then offset by an amount relative to the item's dimensions
4. you then offset by a particular number of pixels
I'll show examples why each step is useful.
So this is what the game does when it stretches items. Even though your pages and items can only have a maximum size of 1024*768 in the editor, when you load the game, the engine will increase the widths and heights of all items "behind the scene" if told to do so through the resizing method. This in turn affects the positions of ALL of the children.
I really hope this makes sense now because I can't explain it better than this.
SH4&SH5 Zone Line
Based on what you've seen so far, it's now time to list the actual variables that make up the position of the TOP LEFT corner of any item (not the center):
ID - the item's ID
AnchorID - the "positioning" parent: for relative positioning you can select any item in the same group (including the group itself, which is the real parent) or, for absolute positioning, no item at all.
X - Absolute Horizontal position on the screen: 0 means LEFT screen edge.. 1024 means RIGHT screen edge
Y - Absolute Vertical position on the screen: 0 means BOTTOM screen edge... 768 means TOP screen edge
In Relative Mode, they both automatically update based on the other values. They don't actually control the position, they're just for show.
In Absolute Mode however, only they control the position.
Resize - the resize method for the item
DX - Width of the item, in pixels
DY - Height of the item, in pixels
1. We start from the anchor's top left corner and shift based on the anchor's dimensions.
ARX - Achor Ratio X: ARX * (Achor's width) = the number of pixels by which the item is moved left or right from the anchor's X.
ARY - Achor Ratio Y: ARY * (Achor's height) = the number of pixels by which the item is moved up or down from the anchor's Y.
2. Then we shift again but this time based on the item's dimensions.
DRX - Item Ratio X: DRX * DX = the number of pixels by which the item is moved left or right from the previous step.
DRY - Item Ratio Y: DRY * DY = the number of pixels by which the item is moved up or down from the previous step.
3. Then, if needed we then shift by a specific offset (usually best left alone because of scaling issues)
Off X - Offset X: horizontal offset in pixels
Off Y - Offset Y: horizontal offset in pixels
No idea if these also get affected by Resizing and resolution scaling or are simply added/substracted as they're entered.
Let's look again at the dreaded zone line:
Zone= 545 396 80 24 0 1 0x28190001 1 -0.5 0x28190003 0 0.5 3 0
Zone= X Y DX DY Resize ? AnchorID ARX ARY ItemID DRX DRY OffX OffY
That "?" item is always 1, when using the Editor and can't be changed. I have a theory on what it does but even after creating 300 items in the same screen I've never found a use for it.
Enough theory, let's do some examples.
Last edited by karamazovnew; 03-05-2010 at 12:54 PM.
|03-04-2010, 06:18 AM||#4|
The Old Man
Let's create 2 main objects in a new page. A panel with 3 dials and a center bound object (for example an AOBF). At each step I will also write the zone line for the respective object, taken from the ini file of that page.
1. Creating the page:
I create a page named "Page_Tutorial". Then I press SAVE. As I go to the \Silent Hunter 5\data\Menu\Pages folder, you can see that old pages that have been deleted from the list are still there. TUTORIAL.ini is no longer loaded by the Editor into the game simply because it has been removed from the list (it was removed from the menu_1024_768.ini file). You can delete the file manually of course if you don't need it anymore. It's a good idea to name your pages properly to distinguish them from the original pages.
Let's see how the game positions pages by default (it does this automatically for you):
1. DX=1024 and DY=768. So it makes them as big as the screen.
2. It anchors them to the Root item (the 0x0 screen item).
3. It gives them a "NoConstraint" resize method.
4. It automatically gives values to ARX=0.5, ARY=-0.5, DRX=-0.5, DRY=0.5 to place the item
- it places the item's top right corner on the top right corner of the Root item (0,768)
- it then shifts the page to the right by half of the anchor's width (ARX=0.5) and down by half of the anchor's height (ARY=-0.5)
it then then shifts the page left by half of the ITEM's width (DRX=-0.5) and up by half of the item's height (DRY=0.5).
Since both of the items had the exact same dimensions, we're basically back to start. So why did the Editor bother?
That's because the Editor has a real passion for DRX= -0.5 and DRY = 0.5. This particular set of values basically shifts the object's "corner" to the center of the object. Let me rescale my page to show this effect better.
I've only changed the size, not the position. Yet the page remains centered on the screen. Even though the corner of my page now sits in a different place, the center of my page is has remained in it's old position. So you see, the DRX and DRY values are the coordinates of the objects "pivot".
- (0,0) pivot in the top left corner
- (0,1) pivot in the bottom down corner
- (-1,0) pivot in top left corner
- (-1,1) pivot in bottom right corner
- (-0.5 , 0,5) pivot smack in the center
- (3,1.6) pivot outside the object (yes, it can be done and even useful)
This effect can be best illustrated if you create an object, mess with the DRX and DRY and then resize the object with the mouse in the preview screen. I'll do this next with 2 objects to better illustrate the effect. Let's create a panel for 3 dials.
Creating the groups:
I know that I want to have 3 dials. Dials are made up of multiple layered images so it's best to place them in their own groups. So I've made 3 groups. GroupDial1, GroupDial2 and GroupDial3 (IN THAT ORDER). As you can see from the pic, group 3 will be placed beneath group 2 which in turn, will be place beneath group 1. As long as they don't overlap, we don't particularly care about their order.
But hold on a sec, what if I want to move all of them together . Then I'll create another group and move all the others inside it.
So I create the DialsPanelGroup group and cut/paste each of the other groups inside it.
Now let's see where they are...
When creating any New item (groups, buttons etc, meaning everything that's NOT a page)the Editor always gives the following values:
- Size: DX=200, DY=200
- Resize: none
- Anchor: none (meaning that we're in Absolute Positioning mode)
- ARX=0, ARY=0, DRX=0, ARY=0
- And because we're in absolute mode, it positions the item at X=0, Y=200
In other words, it always places ANY new item like this:
Anchor none? Resize none? WTF? That's right. If you create, say, a picture inside a group, you might think "well, if I move the group, the picture will move too right?" Nope. You'll have to edit a bit. First things first, let's anchor the DialsPanelGroup to our page. Actually let's use a better term... "Let's SNAP". There are 2 easy ways to do this:
1. By selecting the Anchor through the drop-down menu.
Observe that you can snap to any anchor on the same level of the hyerarchy (inside the same group, including the group node itself). Snaping the item to itself will be ignored, of course.
Every time you snap an object to another, the editor will automatically do this things:
- DRX=-0.5 DRY=0,5, regardless of their previous values!
- It will then set ARX and ARY in such a way as to maintain the objects position. Observe that the X and Y values don't change.
2. By using the right click menu in the list. This allows you to snap (meaning "use as anchor for...") all the children (objects on the immediate next level in the hierarchy), or all the brothers (objects at the same level in the hierarchy).
The "... not snapped elsewhere" is particularly useful as it allow you to snap all the items that are currently using Absolute Positioning (anchored to the Root object).
Also note that when you cut/paste inside the group, the items are automatically snapped to that group object so, yes, it will automatically get a DRX= -0.5 and DRY= 0.5. However, it will retain it's overall position on the screen.
Placing our objects
Since we've already created all our needed groups, let's quickly place them. You can move and resize any object in the Preview window BUT you'll have a hard time moving overlapping objects because the editor will always select the top object (the last in the list). Moving the group or moving a group that is smaller and completely occluded by its children is practically impossible, so we'll do it manually.
You can enter values in the Control Panel boxes, but, if you try to enter the X and Y values directly it won't work (they're just for show). The only way to move an item is by changing its ARX and ARY values. Make sure you have a calculator close by, because you'll have to do a bit of math
For example, I want to move my DialsPanel group so that it's centered right at .. say... (400,300). I want it to always stay there, regardless of resolution, and it's a fairly small item so I want to resize it uniformly. You can see the coordinates of the mouse at the top bar of the Preview screen.
1. Who's the anchor of DialsPanelGroup? It's Page_Tutorial which takes up the entire screen.
2. So we start at the Page_Tutorial's X and Y, which are X=0 and Y=768.
3. We want to get to X=400 so we have to shift by 400-0=400 pixels. SInce it's a positive value, we're actually shifting to the RIGHT.
4. What's the width of Page_Tutorial? It's 1024.
5. Because I need to shift by 400=ARX*1024, it means that ARX=400/1024=0.390625
6. Now we want to shift down to Y=300, so we must shift by 300-768=-468 pixels. Since it's a NEGATIVE value, we're actually shifting DOWN.
7. What's the height of Page_Tutorial? It's 768.
8. Because I need to shift by -468=ARY*768, it means that ARY=-468/768=-0.609375.
Note1: The next pictures are very big so I'll upload them as snapshots. Click on them to see the full version. I have underlined in RED everything that is important to see. Including the position of where I keep my mouse (remember that you can see the X and Y of the mouse cursor at the top of the Preview Window). Because PrintScreen doesn't show the cursor, I have depicted the cursor as a small yellow circle. I've also temporarily changed the size of the GroupDial objects inside of the panel to allow you to see them as they move.
Note2: Entering values is a bit annoying. You need to write the value and then click inside another box to see the effect. Even so, sometimes, the value resets. If you do this often, it's better to keep your value in the clipboard or you'll be forced to write it again and again... quite annoying.
Let's enter those values:
As you can see, the corner of my item now sits at 400,300. But I want it to be CENTERED there. In other words I want my "pivot" to be in the center. How did we achieved that? We set DRX=-0.5 and DRY=0.5.
Note that the actual X and Y have changed. Those don't show you the position of the "pivot", they always show you the position of the top left corner of an object. Now remember that by default, the Editor has an obsession on centering items. Most of the time it will set DRX and DRY automatically, even when you don't want to. So if you don't manually calculate and place items, you'll have a very hard time figuring out how to precisely place items with precision. And remember, I used to do this in NOTEPAD! And I could only check the position by starting the game after I made each change. We have it easy now.
You might say "why waste time on calculating when we can drag objects, resize objects, all fast in the preview window?" As I said, sometimes there's no way to click objects that are beneath other objects. Even WORSE, every time you drag an object in Relative Positioning (meaning that it has any anchor other than NULL), the DRX and DRY will reset again to -0.5 and 0.5. Most of the time you want it to do this. But trust me, sometimes you don't.
Resizing and quick placing
I want the panel to look like this. I have 3 dials, each with a circular image that sits in a bounding box of, say, 185x185 pixels. I want to space them equally by, say 42 pixels. All dials will have labels so I don't want them to be centered on my panel vertically.
(ignore my Picasso style)
So let's make things easy for us and decide now that we want the left dial to be glued to the top left corner of the panel, the middle dial to be glued to the top center of the panel and the right panel to be glued to the top right corner of the panel.
We would need the following dimensions for the panel:
DY= at least 185, let's put it at 250 for now.
So, first I resize my panel:
Observe that the X and Y values have changed AGAIN, but the center remains fixed at 400,300, based on our DRX and DRY, ARX and ARY values. "Wait a sec, so why did the X and Y changed"?. Well, because if you remember, after you shift based on the anchor's dimensions, you then shift based on the ITEM's dimensions (DX and DY). ShiftX=DRX*DX and so on.
Now let's place our dial groups. Here's a very quick way, perfect for this example. The editor allows you to snap to predefined values. You'll love this. First I select DialGroup1 in the list, because I can't click on it, since it's "beneath" the other 2. Then I press the small "P" button next to the Anchor select box. I can now select 9 predefined positions. Think of them as "ALIGN and SNAP" options. These will automatically enter ARX,ARY, DRX and DRY values for you. I've marked with a small yellow circle the "pivot" of each snap point.
Notes about the Location Presets window:
- if you uncheck the "Inside" option, the DRX and DRY will receive inverse values so that the item appears "outside".
- if you try to use an offset, it might not work because of a bug. For the 3'd group I'll set it manually to demonstrate the effect of offset.
Now let's do the same for the other 2 groups. Just follow the pictures:
For the last group, after snapping it to the top right corner of the panel, I'll create an offset by entering values manually in the OffX and OffY boxes. As you can see, this resultet in a shift of -10 both horizontally and vertically (meaning to the LEFT and DOWN).
But wait a sec! I forgot to resize them! No problemo, we can do it now. Here's how our image looks after I resize all 3.
Trust me, the first time you resize an item after playing with its "pivot" I will hear you all the way to here screaming "aaaaaaaaaaaaah, that's what it is???!!!!".
But wait, there's more. Now that we have placed our items, let's play around with the Panel's dimensions. Luckily I can resize it just by dragging it's borders with my mouse (because it's not obstructed by anything). But before I do that, let me do something VERY important. I will intentionally move the left most dial group just a tiny tiny bit with my mouse. The moment I do that, all the values will be changed! DRX will switch to -0.5, DRY will switch to 0.5, and ARX and ARY will then be calculated to express the new position. THIS ALWAYS HAPPENS WHEN YOU DRAG AN OBJECT!!!!
I'll now drastically resize the Panel. You'll see that the center dial remains glued to the center top, the right dial will stay put at 10 pixels down and left to the right top corner. But the left dial will move wildly.
Continued in the next post...
Last edited by karamazovnew; 03-05-2010 at 06:43 PM.
|03-04-2010, 06:18 AM||#5|
The Old Man
I've also added 3 small image objects and positioned them with my mouse to mimic "labels" for the dials. I'll now resize the panel with my mouse:
The effects speak for themselves. Note that if I had actually made the panel very very small, it would've been completely obstructed by its children so it would've been impossible for me to resize it again with the mouse.
So, if you think ahead, you can quickly do stuff like:
- increase space between dials
- increase space between dials and labels
Just keep in mind to be careful when you drag items with the mouse because resizing will then bug your items.
"Yes Kara but c'mon, I mean how many times do we actually resize items?".
Well, every time you switch resolutions for example So yeah, you do need to plan ahead. Make a habbit to resize your panels temporarily just to check if the items act correctly to resizing.
Now, let's talk again about the Resize (resolution rescaling) methods.
Note that you can't see the effects in the Editor, simply because you can't change the resolution. If there's a way to do that, someone please tell me. Make a habbit of writing down each item that you want to create and think ahead how you want it to resize. Multiple combinations are possible. For example I could've opted for my Panel to resize but for my dials and labels to stay as they are. As I'd increase resolution, the distance between the dials and the labels would increase creating an awkward effect (similar to the first picture). Thus, when you combine different resize methods in a hierarchy (very useful at some times), make sure you understand how it will behave. and test it at multiple resolutions in the game before releasing the mod. You can achieve any effect that you want, don't let the editor decide for you. You have complete control.
By default, the editor selects Resize=None for all newly created items. I've already explained each so I'll now give you some examples of where each is useful:
None: any item that you WANT to become smaller and smaller as you increase resolution. Buttons are ok, but text might be hard to read and images might be hard to see.
NoConstraint: ANY invisible item that must fill the screen. That means groups, pages...
ConstantAspectRatioVerticalRes: Best used for any image that's not a background. Dials, buttons, anything that you want to retain it's overall relative size. If you use it for backgrounds (images that fill the entire screen), they'll be stretched uniformly until the top and button of the image reaches the top and bottom of the screen. That will leave you with empty bands to the sides when using non 4:3 resolutions.
ConstantAspectRatioHorizontalRes: Best used for any background image that must fill the screen. They'll be stretched uniformly until the left and right margins of the image reach the left and right edges of the screen. That will clip the image at the top and bottom when used on non 4:3 resolutions. Also, ANYTHING that is directly linked to the background and must retain it's position relative to the background (for example custom periscope marks, lens colors, the mighty AOBF) need to use this resize method. So plan ahead for clipping.
For example, when I created the AOBF for Kiub, The AOBF group and all of it's items were scaled with the ConstantAspectRatioHorizontalRes method. But its direct parent was a group that had a NoConstraint method applied. To prevent clipping, I had to place the AOBF inside my periscope viewfinder. This made it harder to see through it, but At least the AOBF appeared in full on any resolution. The periscope bearing linear dial was forced by hardcode to never scale. But I had to keep it in the same position relative to the background image. So in other words, I had:
- periscope dial None linked to:
--background image ConstantAspectRatioHorizontalRes linked to:
---periscope page NoConstraint linked to:
----root 0x0 item.
That's all I can tell you about positioning items. I'll start another thread soon to talk about specific objects and how to use them. If there's anything not perfectly clear about what I've explained or you have any tips and comments, I'm all ears
Last edited by karamazovnew; 03-05-2010 at 07:50 PM.
|03-04-2010, 07:57 AM||#6|
Join Date: Aug 2005
Location: Istanbul, Turkiye
Just brewed my coffee and about to create my first page!
Lt.z.S. Kaptan Cames, U-11, 2nd Flot/Wilhemshaven, Type VIIB
Oct.22.1939, 1st Patrol Eastern English Waters
Back to running SH3/GWX3
|03-04-2010, 08:29 AM||#7|
The Old Man
Join Date: Apr 2007
Well done. Easy to read and understand.
Speech Recognition for SH5 | Digital UI Clock
[TEC] Import/export 3D models to/from game using S3D
[TEC] How to work with the model viewer in S3D - VIDEO
|03-04-2010, 10:20 AM||#8|
The Old Man
Thanks, I'm learning it as I write. We should do this for all the tools that don't have a manual. BTW, I stated that Renaming doesn't work. I was wrong, I edited the second post with the technique.
|03-04-2010, 11:08 AM||#9|
Join Date: Nov 2007
Location: Montreal, QC
Fantastic Karamazovnew, looking forward to the rest of your tutorial.
11 War Patrols / 56 ships sunk or damaged for 212,022 tons
Zero casualties throughout the war
Scuttled on 8 May, 1945 in Sonderburg Bay, after German surrender
|03-04-2010, 01:56 PM||#10|
The Old Man
GOD that was a humongous post... And I haven't even began dealing with the actual editor interface for positioning. must trim down
|03-04-2010, 03:11 PM||#12|
Join Date: Feb 2004
Hero status! Thanks and for gods sake ... get that man a coffee ... keep him rolling and posting!
|03-05-2010, 06:46 PM||#13|
The Old Man
Lol, in the end this entire post was just for "positioning" items. It's a tough subject . Just a few more pics to go and I'm done. BTW, can an admin rename this thread to:
[TEC] Menu Editor - Intro and Positioning Items ?
Thanks in advance.
|03-05-2010, 07:44 PM||#14|
The Old Man
Done. I'll tidy it up a bit later: typos, a word here and there, but this is basically it. Enjoy. I wrote it in a more familiar way just because there might actually be a help file there that I haven't seen, or maybe a manual will be released, no idea. And btw, nothing prevents you from using the Editor to place items for the SH4 interface .