[karamazovnew]

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
Here's why:
- 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?

Object Pivot

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.
So...
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:
DX=185+42+185+42+185=639
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...