flareteam / flare-game

Fantasy action RPG using the FLARE engine
http://flarerpg.org/
Other
1.12k stars 236 forks source link

Larger Resolution Icons at the same menu / screen / monitor size (e.g. 128x128 icons) #879

Closed WithinAmnesia closed 2 years ago

WithinAmnesia commented 2 years ago

I have a deep desire for better icon resolution possibility for the Flare Engine (e.g. 128 x 128 pixel icons).

I know that Diablo II has larger icon sizes where as the largest icon in the original Diablo II used 32 x 32 sized icons for one 'icon tile' out of a possible 2 x 3 = 6 'icon tile' Examples:

World of Warcraft uses item icons of 56 x 56 (64 x 64 with borders): https://wow.zamimg.com/images/wow/icons/large/classicon_warrior.jpg (64 x 64 'barely looks okay')

Baldur's Gate uses 64 x 64 pixel 'icon tile' size and I can very much tell the difference of 32 x 32 compared to 64 x 64 (for I have made many Baldur's Gate item icons: https://www.deviantart.com/withinamnesia/gallery/51118284/baldur-s-gate-path-of-the-lost-odyssey )

Path of Exile uses 78 x 78 item 'icon tile' sizes; Path of Exile is kind of a retread of Diablo II but with more content. The ~same inventory system of items being made as Diablo II 'icon tiles' ranging from 1 x 1 'icon tile' to 2 x 4 'icon tile'. So in theory 2 x 78 = 156 and 4 x 78 = 312. Examples:

Diablo II Resurrected uses 98 x 98 pixel 'icon tile' size Ring: https://www.purediablo.com/wp-content/uploads/2021/04/ring4.png (98 x 98, 98 x 1 = 98) Body Armour: https://www.purediablo.com/wp-content/uploads/2021/04/goldskin.png (196 x 294, 98 x 2 = 196 and 98 x 3 = 294)

All of these games pretty much use the same size / ~'screen real-estate' on the player's monitor to display roughly the same size item icons in roughly the same icon density per 'icon tile'.

I am hoping that Flare engine can somehow have the option to support higher resolution 'icon tiles' (128 x 128?). Yet keep the inventory 'icon tiles' using the same ~monitor / 'screen real-estate' as before; same proportions yet with higher definition. The old art is in 32 x 32 pixels per 'icon tile' so if they were could be scaled up / up-scaled / simply by multiplying the icons by ~4 to make 32 x 32 into 128 x 128. All of the old icons could stay the same and look the same yet the whole engine could hopefully render with 4 times more detail (with higher resolution [128 x 128 icons] art assets added in piece meal / bit by bit to start).

To have the old icons still be usable in a 4 times higher resolution display rendered for the Flare engine (~'just') take the "icons.png" file and times it by 4 from 256 x 1,024 into 1,024 x 4,096 [do not use 'soft edges']. All other needed preexisting Flare engine art (the menu art files) can be up scaled / image resolution multiplied by 4 to scale up the art assets images to work at higher resolutions. This saves a lot of work (new high resolution 128 x 128 Flare icons that can optionally be done later) for the Flare engine rendered resolution can be multiplied by 4 without needing to create more high resolution art assets from scratch to start. Does the ~'Flare HD' prototype increase the screen resolution rendered or does it just zoom in and use bigger sprites?

I hope that the Flare engine could support higher resolution 'icon tiles' (by example 128 x 128; or the current 32 x 32 multiplied by 4) so that as 4k monitors become standard and eventually 'old tech' by the next decade / 2030's that what ever games made with the Flare engine can have a chance / the option to support higher resolution 'icon tiles' (if not higher resolution art in general) to hopefully stand the test of time.

dorkster commented 2 years ago

(There's no engine limitation here, so I moved this to flare-game)

We actually have 64x64 (60x60 with a 2px border) icons in the art_src/icons folder: icons.xcf

Many of the icons are 3D renders that have been painted over, and there aren't any larger sources. So 64x64 is what we have to work with.

We scale the icons down to 32x32 because that's what fits with the rest of our current art assets. Re-did all the assets at 2x size, then we could use 64x64 icons. Doing this is not trivial:

The current assets are "good enough" for now. Doing an "HD" version of the art has been on the back burner for years, and I predict it will stay that way for a while.


PS, here's a screenshot of Wandercall to show what 64x64 icons can look like:

Screenshot_20220111_084805

WithinAmnesia commented 2 years ago

Okay I noticed that the Flare engine / game resolution is at a minimum of I think '# display resolution. 640x480 minimum': https://github.com/flareteam/flare-engine/blob/8769888f08c21ecf197a08fed2879d770c7571c0/mods/gcw0_defaults/engine/default_settings.txt (or mods\default\engine\resolutions.txt) I have had a 4k Monitor of 3840 x 2160 resolution since 2016. In windowed mode Flare takes less than a quarter of my screen (with a current 'on the market' 8K monitor that will become less than an 8th of the screen). Is this explained by the '# display resolution 640x480 minimum' of the Flare Engine / Game?

If I were to multiply by 4 the Flare minimum resolution from 640 x 480 to 2,560 x 1,920 would all of the art assets crash because they are smaller scale (like 32 x 32 icons)?

If this is possible to increase the pixel density / 4 times the minimum screen resolution for Flare I would be willing to do the menu / art work, ~'place holders'(?) where for example a 32 x 32 icon turns into a 128 x 128 icon but with the same full screen real-estate as before but with the support of later adding in full detail 128 x 128 icons.

I am wondering how to get Flare working with 4 times the resolution as the minimum resolution and what needs to be done art wise to make it not crash; even if it looks the same as before but technically it is running old 32 x 32 icons up-scaled / multiplied by 4 into 128 x 128 icons. Or is there major coding resolution issues that prevent smoothly implementing all of the old art up-scaled by 4 with 4 times the minimum screen resolution so that the pixel density is increased by 4 times?

If I can help with the art up-sizing I can do that, although I am in the dark as to what steps would be need to be taken and in what order on the engine side of things. If the minimum screen resolution is multiplied by 4, old art assets can be up-scaled / enlarged without tearing for one old pixel can be split into 4 pixels and will still look the same as before. Yet the old 4 times enlarged art would be technically 4 times the pixel density / 4 times the original resolution.

Then the Flare game / engine could then support new assets to eventually replace the old assets bit by bit that are made from the start with the higher detail / using 128 x 128 pixel icons from the start.

WithinAmnesia commented 2 years ago

Also how do I tinker with (mods\default\engine\resolutions.txt) "# Screen and icon resolution settings

menu_frame_width=640 menu_frame_height=480

icon_size=32

required_width=640 required_height=480

virtual_height=480,600 virtual_dpi=91.754738"

If I multiply everything by 4 it looks like "# Screen and icon resolution settings

menu_frame_width=2560 menu_frame_height=1920

icon_size=128

required_width=2560 required_height=1920

virtual_height=1920,2400 virtual_dpi=367.018952"

Will this break everything? Hmmmn, there is at least one way to find out XD. Update: That definitely broke the menu buttons XD; for they turned invisible and un-click-able, although I wonder if it is a matter of the icons / button images being to small and can be up-scaled / multiplied by 4 to solve the problem?

dorkster commented 2 years ago

The fantasycore mod actually has its own resolutions.txt defined to suit the art assets: https://github.com/flareteam/flare-game/blob/master/mods/fantasycore/engine/resolutions.txt

The virtual_height is what determines the resolution the game actually gets rendered at. You can see that fantasycore ranges from 480 to 768. What this means is that when the window height is taller than 768 pixels, the game begins to get scaled up to fit the window. Below that point, the game is rendered 1:1. So if you had assets 4x the current size, 1920 should be your minimum virtual height.

virtual_dpi modifies the scaling based on screen DPI. You can ignore this, and you should in fact turn off "DPI Scaling" in the video options if you plan on experimenting with resolutions.

The required_width and required_height are for the minimum window size. It's not essential to change these right away, but you'll want to find a minimum that works with your assets.

The menu_frame_width and menu_frame_height describe an invisible box that is centered on the screen. It is used to position the main, new game, load game, and config menus. Changing these settings means that the menu layouts need to be updated to account for the new size.

icon_size is self explanatory. But remember that the actual size of icons in icons.png should match it.

WithinAmnesia commented 2 years ago

Okay so all mods with engine/resolutions.txt must be all the same (mods/default/engine/resolutions.txt, mod/fantasycore/engine/resolutions.txt etc.?)

Round 2.0 "# Screen and icon resolution settings

menu_frame_width=640 [not 2560, keep these the same and somehow fight / tinker with these later in a version 2.0?] menu_frame_height=480 [not 1920, keep these the same and somehow fight / tinker with these later in a version 2.0?]

icon_size=128 [make icons.png 4 times the size to match?]

required_width=2560 [think could work for now / tinker with this later?] required_height=1920 [think could work for now / tinker with this later?]

virtual_height=1920 [2400 does get taken out, or is it 1920,2400?] virtual_dpi=91.754738 [don't touch this / turn it off?]

This should work? I will try it out; round 2.0 wish myself luck XD icons(x4) .

WithinAmnesia commented 2 years ago

Crap how do I do spoilers that is a very big image XD. Uh-oh Gist looks like words only x.x XD.

dorkster commented 2 years ago

Crap how do I do spoilers that is a very big image XD.

You can change the embedded image to a link by removing the preceding exclamation point. I fixed it for you.

WithinAmnesia commented 2 years ago

Oh thank you.

WithinAmnesia commented 2 years ago

"# Screen and icon resolution settings

menu_frame_width=640 menu_frame_height=480

icon_size=128

required_width=2560 required_height=1920

virtual_height=1920 virtual_dpi=91.754738" [DPI is off]

I am still getting the broken starting menu with no buttons (how do I set up the menu?). I could try just using the bigger icons although this should just make bigger icons and not increase pixel density.

Do I tinker with the menus in here: (mods\fantasycore\menus)?

WithinAmnesia commented 2 years ago

I wonder if the virtual height is breaking the menus (something like 4 times the resolution but still small menus)?

Should I try to tinker with the menus in (mods\fantasycore\menus) to try to make them bigger by 4 and also use this resolutions.txt

Would this work if I tinkered with the menu settings? "# Screen and icon resolution settings

menu_frame_width=2560 menu_frame_height=1920

icon_size=128

required_width=2560 required_height=1920

virtual_height=1920 virtual_dpi=91.754738" [DPI is off]"

dorkster commented 2 years ago

I tried the exact same settings for resolutions.txt and have no issue with the buttons on the title screen. The configuration for that menu is mods/default/menus/gametitle.txt, but you shouldn't need to change anything in there. The buttons are positioned relative to the bottom of the screen.

WithinAmnesia commented 2 years ago

(mods\default\menus\gametitle.txt) it has to be this one?

WithinAmnesia commented 2 years ago

Hmmm. "I tried the exact same settings for resolutions.txt" which one? "# Screen and icon resolution settings

menu_frame_width=640 menu_frame_height=480

icon_size=128

required_width=2560 required_height=1920

virtual_height=1920 virtual_dpi=91.754738" [DPI is off]

Or this:

"# Screen and icon resolution settings

menu_frame_width=2560 menu_frame_height=1920

icon_size=128

required_width=2560 required_height=1920

virtual_height=1920 virtual_dpi=91.754738" [DPI is off]" ?

WithinAmnesia commented 2 years ago

I will put all resolutions.txt (I have 3 resolutions.txt in [mods/default/engine/ + mods/fantasycore/engine/ and mods/'myownmod'/engine) to: "# Screen and icon resolution settings

menu_frame_width=640 menu_frame_height=480

icon_size=128

required_width=2560 required_height=1920

virtual_height=1920 virtual_dpi=91.754738" [DPI is off] and see if I missed a step before.

dorkster commented 2 years ago

Both work for me.

For something else to try, you can change all the instances of bottom to center in mods/default/menus/gametitle.txt. This should put the buttons near the logo.

WithinAmnesia commented 2 years ago

(mods/default/menus/gametitle.txt) "logo=images/menus/logo.png,0,0,center

play_pos=0,-84,bottom config_pos=0,-56,bottom credits_pos=0,-28,bottom exit_pos=0,0,bottom"

To this?

"logo=images/menus/logo.png,0,0,center

play_pos=0,-84,center config_pos=0,-56,center credits_pos=0,-28,center exit_pos=0,0,center"

dorkster commented 2 years ago

Yes

WithinAmnesia commented 2 years ago

This works, the title menu is back. "logo=images/menus/logo.png,0,0,center

play_pos=0,-84,center config_pos=0,-56,center credits_pos=0,-28,center exit_pos=0,0,center"

WithinAmnesia commented 2 years ago

I will try that use of center with all of the ~'broken' / misaligned menus if i can to get them visible.

dorkster commented 2 years ago

Dumb question, but are you sure you have the entire window on screen? You could try maximizing the window to see if things at the bottom start to show up.

WithinAmnesia commented 2 years ago

Okay I am making progress with the menu positioning with the bigger screen resolution. I think I can get the menus to align now. The use of ",center" really helps.

WithinAmnesia commented 2 years ago

"Dumb question, but are you sure you have the entire window on screen? You could try maximizing the window to see if things at the bottom start to show up." I am not sure. It may not be, I cannot see the window edges then again once I get the menu working I can see if I have full screen on or off. It looks like full screen but I am not 100% sure.

WithinAmnesia commented 2 years ago

What is the pause / escape menu called in a menu text file?

dorkster commented 2 years ago

mods/default/menus/config.txt

WithinAmnesia commented 2 years ago

(mods\fantasycore\menus\exit.txt) what is this?

dorkster commented 2 years ago

Oh, that's the file for the old pause menu (before the config menu replaced it). It's no longer used, so I'll remove it.

WithinAmnesia commented 2 years ago

Okay. So config.txt is pause menu? So I can pause the game but the menu is not anywhere to be seen.

(mods\default\menus\config.txt) [I changed the # to + to not break the comment XD] "+ Configuration menu Widgets Definitions.

button_ok=0,-56,center button_defaults=0,-28,center button_cancel=0,0,center

listbox_scrollbar_offset=2

[mods] activemods=456,16,384,32 inactivemods=136,16,64,32 activemods_shiftup=544,128 activemods_shiftdown=544,160 activemods_deactivate=224,160 inactivemods_activate=224,128"

Do I put ",center" everywhere or something?

dorkster commented 2 years ago

All of the contents of the config menu are placed inside the menu frame. If you have menu_frame_width=640 and menu_frame_height=480 in your resolutions.txt, the config menu should be centered on the screen already.

WithinAmnesia commented 2 years ago

I have made the Icons too big lol. I need to make the icons file x2 not x4 for I turned one pixel of the old icons into 16 pixels not 4 lol (4x4, it should be 2x2 XD). 1 Sec. I have duplo when I should have legos XD.

"All of the contents of the config menu are placed inside the menu frame. If you have menu_frame_width=640 and menu_frame_height=480 in your resolutions.txt" I will make it so XD.

WithinAmnesia commented 2 years ago

"If you have menu_frame_width=640 and menu_frame_height=480" check resolutions "# Screen and icon resolution settings

menu_frame_width=2560 [HMM...] menu_frame_height=1920 [...MMMN]

icon_size=128

required_width=2560 required_height=1920

virtual_height=1920 virtual_dpi=91.754738 " AHH yes lol XD 1 sec.

WithinAmnesia commented 2 years ago

"Dumb question, but are you sure you have the entire window on screen? You could try maximizing the window to see if things at the bottom start to show up."

https://cdn.discordapp.com/attachments/872743295003000852/930674681172873256/unknown.png Woah lol maybe if I had an 8k monitor lol. Yeah It is a bit too big XD.

WithinAmnesia commented 2 years ago

I will try to turn virtual_height=1920 to virtual_height=960 lol. I think I messed up 2x2 = 4 into 4 x 4 = 16 XD.

WithinAmnesia commented 2 years ago

https://cdn.discordapp.com/attachments/872743295003000852/930676601283293244/unknown.png well that did something but it reminds myself of https://knowyourmeme.com/memes/wide-putin-walking-its-him

dorkster commented 2 years ago

2560x1920 should fit on a 4K (3840x2160) monitor, no?

I think I figured it out! If you have scaling on in Windows, Flare gets scaled up, too. I just tried this in a VM at 150% windows scaling, and setting the resolutions.txt to match my monitor made the title buttons go off screen.

WithinAmnesia commented 2 years ago

If you have scaling on in Windows.. Hmm how do I change that?

dorkster commented 2 years ago

Settings > System > Display > Scale and Layout > Change the size of text, apps, and other items

WithinAmnesia commented 2 years ago

image this?

WithinAmnesia commented 2 years ago

I this have this [Uploading image.png…]()

dorkster commented 2 years ago

Yes, that's the setting. You probably don't want to change that, so my recommendation is to target a lower resolution for Flare. Try 720p, 960p, or 1080p as a start.

WithinAmnesia commented 2 years ago

Hold on [Uploading image.png…]() (windowed) [Uploading image.png…]() (fullscreen) It looks like the full screen is twice as large as the windowed like the resolution is 8k?

dorkster commented 2 years ago

I think you need to wait for your images to finish uploading. The upload status is at the bottom of the comment box.

WithinAmnesia commented 2 years ago

So this: "# Screen and icon resolution settings

menu_frame_width=640 menu_frame_height=480

icon_size=128

required_width=2560 required_height=1920

virtual_height=1920 virtual_dpi=91.754738"

To this?

"# Screen and icon resolution settings

menu_frame_width=640 menu_frame_height=480

icon_size=128

required_width=2560 [these stay the same or change them?] required_height=1920 [these stay the same or change them?]

virtual_height=1080 [960 kind of made it 'wide putin', should it not be 1920?] virtual_dpi=91.754738"

dorkster commented 2 years ago

Oh, I found a work-around to disable Windows' scaling for just Flare. Edit the (or make a new) shortcut to Flare and go to Compatibility > Change high DPI settings

scaling
WithinAmnesia commented 2 years ago

https://cdn.discordapp.com/attachments/872743295003000852/930682823571042355/unknown.png (windowed) https://cdn.discordapp.com/attachments/872743295003000852/930682872719880212/unknown.png (full screen)

WithinAmnesia commented 2 years ago

https://cdn.discordapp.com/attachments/872743295003000852/930683459767263292/unknown.png That worked.

dorkster commented 2 years ago

Great! Perhaps I need to look into setting SDL_HINT_VIDEO_HIDPI_DISABLED.

WithinAmnesia commented 2 years ago

https://cdn.discordapp.com/attachments/872743295003000852/930684571664670780/unknown.png 128 x 128 icons are working now; I think?

WithinAmnesia commented 2 years ago

https://cdn.discordapp.com/attachments/872743295003000852/930685038562009158/unknown.png They are indeed working. That is a screen shot in game opened in paint.net and counting the pixels to be 120 x 120 (the same as the icon.png (x4).

dorkster commented 2 years ago

Looks like the icons are working. They're just a bit big for the rest of the game :)

WithinAmnesia commented 2 years ago

Yeah I also have 100 inventory spaces in this prototype XD.