Questions about MENU .ini editing (Need advice)

[+Eagle114th]

Good afternoon everyone,

I have the questions about MENU coding.  I am stuck on a few problems with my own menu projects:

---------------------------------------------------------

1) I saved buttons as .png, and it has an alpha background (transparent) 

NOTE: I am supposed to save it as .jpg right? 

It still shows a black background around it. I tried setting TransparentBackground= to TRUE, still won't work.

---------------------------------------------------------

2) I want to change between three image files.

MouseOverAnimation=Animation_InstantAction1
MouseDownAnimation=Animation_InstantAction2
MouseDownAnimation=Animation_InstantAction3

These codes are from [InstantActionHotspot] in MAINSCREEN.INI

[InstantActionHotspot]
MenuItemType=HOTSPOT
UseHotSpotImage=FALSE
GenerateEventMessage=TRUE
NormalAnimation=Animation_InstantAction1
MouseOverAnimation=Animation_InstantAction1
MouseDownAnimation=Animation_InstantAction1
Position=500,150
SelectedAnimation=
DisabledAnimation=
TextSetting=
TextStringID=
TextPosition=
InfoTextSetting=InfoTextSetting
InfoTextStringID=TXT_MENU_INSTANTACTION_INFO

It won't change between three images. It still only display one image, even when I move a mouse cursor over it. Here is the code:

[InstantActionHotspot]
MenuItemType=HOTSPOT
UseHotSpotImage=FALSE
GenerateEventMessage=TRUE
NormalAnimation=Animation_InstantAction1
MouseOverAnimation=Animation_InstantAction1
MouseDownAnimation=Animation_InstantAction1
Position=500,150
SelectedAnimation=
DisabledAnimation=
TextSetting=
TextStringID=
TextPosition=
InfoTextSetting=InfoTextSetting
InfoTextStringID=TXT_MENU_INSTANTACTION_INFO

[Animation_InstantAction1]
AnimationFilename=InstantAction1.jpg
LoopingAnimation=TRUE
NumFrames=1
TicksPerFrame=0
TransparentBackground=TRUE
Width=150
Height=40

[Animation_InstantAction2]
AnimationFilename=InstantAction1.jpg
LoopingAnimation=TRUE
NumFrames=1
TicksPerFrame=0
TransparentBackground=TRUE
Width=150
Height=40

[Animation_InstantAction3]
AnimationFilename=InstantAction1.jpg
LoopingAnimation=TRUE
NumFrames=1
TicksPerFrame=0
TransparentBackground=TRUE
Width=150
Height=40

Any advice and tips are appreciated as always.

Edited April 27, 2021 by Eagle114th

[+Menrva]

1) you must use .tga for buttons with transparency, .jpg does not hold transparency info and .png is not supported by the game.

2) I don't remember exactly, but you do not have to add three different animation statements. You must have a single one with NumFrame=3, that tells the game that the animation is using three textures for the animation, numbered sequentially as you did (maybe starting from 0). Check the menu mod included in the ODS package, files can be opened and you'll find examples on how to do similar buttons and other tricks.

Edited April 27, 2021 by Menrva

[+Eagle114th]

3 hours ago, Menrva said:

1) you must use .tga for buttons with transparency, .jpg does not hold transparency info and .png is not supported by the game.

2) I don't remember exactly, but you do not have to add three different animation statements. You must have a single one with NumFrame=3, that tells the game that the animation is using three textures for the animation, numbered sequentially as you did (maybe starting from 0). Check the menu mod included in the ODS package, files can be opened and you'll find examples on how to do similar buttons and other tricks.

As always, thank you for the advice!
 

1) I tried it with .tga, .bmp, and .png, it won't show up on the screen.  If I use .jpg, then it will show up.  That is very confusing part for me. I tried ODS 30, .bmp button, it appears on the screen.  What makes it even more odd is that, I copied the mainscreen.ini from ODS 30 for testing purpose and swapped ODS button with mine (as .bmp, .tga, and .png), it still refuses to show up on the screen.  I attached my button graphic files here, so if it is okay with you, can you check it out? 

 

2) That is very interesting!  As soon I finally get the button working, I will test it with NuMFrame = 3. 

InstantAction.rar

Edited April 27, 2021 by Eagle114th

[+Menrva]

7 minutes ago, Eagle114th said:

 What makes it even more odd is that, I copied the menu from ODS 30 for testing purpose and swapped ODS button with mine (as .bmp, .tga, and .png), it still refuse to show up on the screen.

Always make sure to double check the file format you define in the .ini, if it's another one than what is actually used and put in the folder, it won't show up.

My mistake about the .tga textures, they don't work with animations, IIRC. This is why I had to make buttons for the ODS menu the hard way, using bitmaps, and of course you cannot have a transparent background with those. It's a lot of trial and error, so do not worry about making numerous attempts to make the buttons look and work right. You'll learn more and more by trying.

Edited April 27, 2021 by Menrva

[+Eagle114th]

49 minutes ago, Menrva said:

Always make sure to double check the file format you define in the .ini, if it's another one than what is actually used and put in the folder, it won't show up.

My mistake about the .tga textures, they don't work with animations, IIRC. This is why I had to make buttons for the ODS menu the hard way, using bitmaps, and of course you cannot have a transparent background with those. It's a lot of trial and error, so do not worry about making numerous attempts to make the buttons look and work right. You'll learn more and more by trying.

Yes, I am still learning more about how this works.  I made sure the filename defined in .ini matches the one in directory.  Here is the code:

//-----------------------------
//New Menu - SINGLE MISSION

[SingleMissionHotspot]
MenuItemType=TEXTBUTTON
DestinationMenu=SingleMissionScreen
TextSetting=MainMenuText
ButtonSetting=MenuButtonSetting
TextStringID=TXT_MENU_SINGLEMISSION
TextPosition=790,330
InfoTextSetting=InfoTextSetting
InfoTextStringID=TXT_MENU_SINGLEMISSION_INFO

// BUTTON ---------------
[InstantActionAnimation]
AnimationFilename=InstantAction1.bmp
LoopingAnimation=TRUE
NumFrames=1
TicksPerFrame=0
TransparentBackground=TRUE

Here is the files:
 

Still won't show up on the screen. I am going to do further testing to see what is going on.

UPDATE:

I found the reasons why it wasn't working. I had to save the image picture as .bmp WITHOUT transparent background.  By just renaming .png or .tga with transparent background to .bmp won't work in SF2.  Hence, I will have to use a raw .bmp files, in order, to get it showing up on SF2.  I could go either .bmp or .jpg.  Should I go with .jpg, in order, to use the smaller file size?  It won't look much differnt with smaller file size. It will save people from downloading a larger file size. 

I am going to work on NuMFrame = 3 now. (Crosses my fingers)

Edited April 27, 2021 by Eagle114th

[+Menrva]

1 hour ago, Eagle114th said:

Should I go with .jpg, in order, to use the smaller file size?  It won't look much differnt with smaller file size. It will save people from downloading a larger file size. 

Bitmaps are preferable. JPEG is a lossy format; each time you re-save a JPG, generally there's a loss of quality and crispness. You can use .jpg if you wish, but make sure that you're saving .jpg textures with the maximum quality allowed by your painting software. Always keep templates at hand, they are your source at the original quality.

[+Eagle114th]

I am able to successfully  use three buttons.  However, I am unable to get "NumFrame=3" working.  For now, I got it working by this method:

//----------------------------------------------------
//New Menu - INSTANT ACTION
[InstantActionHotspot]
MenuItemType=HOTSPOT
UseHotSpotImage=FALSE
NormalAnimation=InstantActionAnimation0
MouseOverAnimation=InstantActionAnimation1
MouseDownAnimation=InstantActionAnimation2
Position=661.5,161
ButtonSetting=MenuButtonSetting
InfoTextSetting=InfoTextSetting
InfoTextStringID=TXT_MENU_INSTANTACTION_INFO

// BUTTON -------------
[InstantActionAnimation0]
AnimationFilename=INSTANTACTION0.bmp
LoopingAnimation=TRUE
NumFrames=1
TicksPerFrame=0
TransparentBackground=FALSE
Width=234
Height=45

[InstantActionAnimation1]
AnimationFilename=INSTANTACTION1.bmp
LoopingAnimation=TRUE
NumFrames=1
TicksPerFrame=0
TransparentBackground=FALSE
Width=234
Height=45

[InstantActionAnimation2]
AnimationFilename=INSTANTACTION2.bmp
LoopingAnimation=TRUE
NumFrames=1
TicksPerFrame=0
TransparentBackground=FALSE
Width=234
Height=45

Can  I ask you for an example how to use NumFrames = 3? 
 

Edited April 27, 2021 by Eagle114th

[+Menrva]

2 hours ago, Eagle114th said:

I am able to successfully  use three buttons.  However, I am unable to get "NumFrame=3" working.  For now, I got it working by this method:

Ah, now I remember. My bad, it's been a while since a worked on a custom GUI. For buttons, what you did is the correct way to proceed.

2 hours ago, Eagle114th said:

Can  I ask you for an example how to use NumFrames = 3?

NumFrame is used for other different cases. I used it in a "tricky" way for the credits screen of the ODS mod, so that it displays dozens of artworks. That's your example for using NumFrames. It's not for buttons, where NumFrame must be set to 1 for each button animation texture separately.

Edited April 27, 2021 by Menrva

[+Eagle114th]

7 hours ago, Menrva said:

Ah, now I remember. My bad, it's been a while since a worked on a custom GUI. For buttons, what you did is the correct way to proceed.

NumFrame is used for other different cases. I used it in a "tricky" way for the credits screen of the ODS mod, so that it displays dozens of artworks. That's your example for using NumFrames. It's not for buttons, where NumFrame must be set to 1 for each button animation texture separately.

That is no problems.  With your help, I am able to figure out the basic way of animating several buttons for "normal", "Mouse over", and "Mouse down" animation.  The project is looking good so far.  For now, I am scratching my head over the biggest challenges:

Option page, since there is a dial switch (buttons).  So i wonder how to animate that when selecting different page in option.  It'll be an interesting challenge. 

Edited April 27, 2021 by Eagle114th

[+Eagle114th]

I just found out that if I tried to tweak SystemMenuHotspot, it will cause CTD.  Is anyone out there able to tweak the size and position of SystemMenuHotspot? 

UPDATE:
I found a way to edit it. I copied the entities from SYSTEMMENU.INI and pasted into MAINSCREEN.INI.  It works, I am able to change the position and size of System Menu icon.

Edited April 28, 2021 by Eagle114th