How do I create Higher-Res Interfaces?

Hey, as I understood it, your engine is capable of rendering at pretty much every resolution, it’s just that the UI can’t be scaled that easily and has to be created seperately for every resolution…
Well, I’d like to help with that (at least for the resolutions I need), but I have no idea what to do… Is there any kind of documentation or at least examples?

New resolutions can be added without altering VCMI sources or recompiling binaries and that is the good news. :slight_smile:
The bad is that there is no documentation and there are some traps you should be aware of. However, I’ll try to briefly describe everything here.

Take a look at the config/settings.txt file.
In GUISettings are stored information for available resolutions (graphics names, its positions on screen etc). Currently we have done entries (and graphics) for 800x600 (original), 1024x600 and 1024x768 resolutions.

You can start working on new resolution by copying one of already done resolution entries and altering it. When new resolution entry is present, VCMI should recognize it and offer when you type “resolution” to the console before the game. (Or can set you new resolution as default by changing resolution property in clientSettings in the file.)

All interface graphics needs to be 8bpp and follow H3 palette rules (first 8 colours are used for transparency, last 32 are replaced with appropriate player colour - as shown here: ).

There are two kinds of graphics - bitmaps (.BMP, ZSoft-style .PCX, H3-style .PCX) and defs (.DEF). You have to keep format kind of all graphics - eg. buttons are always stored in .DEFs and resource bar as bitmap. All new bmp/pcx graphics must be placed in /Data folder and new .DEF files (for buttons) must be in /Sprites (or VCMI won’t see them).

That’s the basics. If you have any further questions, don’t hesitate to ask :slight_smile:
And - what resolutions do you want to add?

Hey, thanks for the help!

If your engine supports widescreen, I was thinking of 1440x900, 1650x1080 and 800x480 (for future openpandora use)

800x480 may be a problem since it would be necessary to shrink everything or to add scrolling like in a console version of Heroes 3.

Hey, I’m pretty much done with 1440x900, but I have one small problem: I’m not able to get enough “copypaste-material” for the lower blue part, could anyone fix that?

1440x900 is nearly completed… The only thing I couldn’t figure out is the resource-bar, could anyobody help me with that?
Obligatory screenshot:

	1440x900 //setting specific for this resolution
			AdvMap: x=7 y=6 tilesWidth=39 tilesHeight=27 trimX=15 trimY=18 smoothMove=1;
			InfoBox: x=1245 y=689;
			gem0: x=6 y=808 graphic=agemLL.def;
			gem1: x=1196 y=808 graphic=agemLR.def;
			gem2: x=6 y=6 graphic=agemUL.def;
			gem3: x=1196 y=6 graphic=agemUR.def;
			HeroList: size=14 x=1248 y=201 movePoints=IMOBIL.DEF manaPoints=IMANA.DEF arrowUp=IAM012.DEF arrowDown=IAM013.DEF;
			TownList: size=14 x=1386 y=201 arrowUp=IAM014.DEF arrowDown=IAM015.DEF;
			Minimap: width=144 height=144 x=1270 y=26;
			Statusbar: x=8 y=855 graphic=test2.pcx;
			ResDataBar: x=0 y=1189 graphic=ZRESBAR2.pcx offsetX=65 offsetY=2 resSpace=109 resDateSpace=135;
			ButtonKingdomOv: x=1319 y=197 graphic=IAM002L.DEF playerColoured=1;
			ButtonUnderground: x=1319 y=229 graphic=IAM010L.DEF playerColoured=1 additionalDefs=(IAM003L.DEF);
			ButtonQuestLog: x=1319 y=261 graphic=IAM004L.DEF playerColoured=1;
			ButtonSleepWake: x=1319 y=294 graphic=IAM005L.DEF playerColoured=1;
			ButtonMoveHero: x=1319 y=327 graphic=IAM006L.DEF playerColoured=1;
			ButtonSpellbook: x=1319 y=359 graphic=IAM007L.DEF playerColoured=1;
			ButtonAdvOptions: x=1319 y=393 graphic=IAM008L.DEF playerColoured=1;
			ButtonSysOptions: x=1319 y=426 graphic=IAM009L.DEF playerColoured=1;
			ButtonNextHero: x=1319 y=619 graphic=IAM000.DEF playerColoured=1;
			ButtonEndTurn: x=1319 y=652 graphic=IAM001.DEF playerColoured=1;

Now that’s really huge! I think since there’s so much free space, you could widen resource labels by one or two digits.

There would be an alternative to Warmonger’s solution, which may be more complicated, but more space-saving: make use of the new space made available in the right panel. We’ll never have more than 8 heroes in the list, there are now 5 unused menu boxes, and we’ll rarely have that many towns. We could have there a resource box, 7 resource mini-boxes inside, on 4 rows (2 resource boxes per row, with only Gold on the 4th row).

Like this the bottom part of the right panel won’t look always so empty, and we would gain half a centimeter more of Adventure map on the vertical. Though this would indeed be a more noticeable change from the original game interface.

Actually, I wanted to do something similar, but I think this would require changes in vcmi’s source, which I’m not familiar with…

Sorry for such late answer, I had no time last days :frowning:

“y” coord is out of the screen, it must be lower than 900 (screen height).
x, y are coordinates where the “graphic” is blitted. Offsets x, y are distance between the top left corner of graphic and first resource amount. resSpace is distance (width) between resources. resDateSpace is space between last resource and date.

I can make some not very time-consuming changes to the sources. Just write what do you exactly need and I’ll see if I can implement it.
However I don’t know if there is a point in duplicating already existing information in the information (resource box). Maybe we should think about some totally new functionalities?

I was thinking of being able to align the resources one by one (i.e. not aligning the resbar, but mercury, ore, etc as own elements)
This way, I could move the resources to the right and get rid of the resource bar on the bottom…

Here’s a quick, dirty and ugly mockup of what I had in mind:
For realizing this, I’d need support for separately aligning the resource-values…
Of course, a real implementation would be much prettier and would have all resources covered, not only the 4 used in the example…

Edit: don’t ask me why there is gold floating in the middle of the screen, I guess I accidently pasted it there :wink:

Interesting, it would be nice to have this in VCMI. BTW, why don’t you use standard hero list & town list with buttons from 800x600 resolution? It lokks like you would have there enough space for all resources, including mithril.

I might consider doing this, but as I said, this was only a mockup done in 2 minutes to demonstrate my idea… In order to realize it, I’d need help from you guys (i.e. modifications in vcmi’s source and maybe a binary so I don’t have to set up a build environment)

Can be done. :slight_smile:
First finish main interface graphic (with resource icons on the right side) and upload it in VCMI supported format (8bpp bmp/pcx/png).
Then I’ll make displaying resources appropriately working. :slight_smile:

Yay :smiley:
Might take a while, though, as I’m writing my finals next week :S

Good luck with your finals next week, and then I can’t wait to start testing with this new resolution once it’s ready. :smiley:

Good luck! :slight_smile: