Using sprites in gui

[robertpaulson]

Hi, I would like to use some type of a separator for my gui frame. I tried creating a second frame right below it and was hoping for similar effect of what you get from "inventory and Crafting" wiondow where they are right beside each other, but it got created with a spacing and with a diff size. I assume flow would be needed to do that, but I never seen it done. So I tried using a graphic "sprite":

Code: Select all

frame["sar-table3"].add{type = "sprite", name="sar-table-separator"}

where sprite was:

Code: Select all

data:extend({

    -- sprites
    {
        type = "sprite",
        name = "sar-table-separator",
        filename = "__SpaceFlight__/graphics/separator.png",
        priority = "extra-high-no-scale",
        width = 32,
        height = 2
    }
})

color was bright red, so even with the 2 pixel height it should be noticeable, but nothing showed up, and no error neither. I am hoping for something similar to the vertical lines you see in resource screen when you start a new game.

I really enjoy modding this game but find it very hard to figure out how to change/add specifics. I often find it either through browsing data file itself or through different mods. I expect this to be handled by something like

data.raw["gui-style"].default["some-button-style"] =

since its for gui, but I could not find any resource to figure it out since "sprite_style" type doest work. Wiki is very vague when it come to implementation or listing full functionality so I turn to you guys again. Thanks for help in advance.

[eradicator]

and was hoping for similar effect of what you get from "inventory and Crafting" wiondow where they are right beside each other, but it got created with a spacing and with a diff size. I assume flow would be needed to do that,

Correct, you need to add them both into the same container (though gui.center is a container too), via something like:

Code: Select all

local main = player.gui.center.add{type='flow',direction='horizontal'}
main.add{type='frame',name='left'}
main.add{type='frame',name='right'}

If you want them directly next to each other you have to remove the spacing/padding on the flow and/or frames either by applying a style (defined in data stage) or by directly manipulating LuaGuiElement.style.

Code: Select all

  padding = 0,
  cell_padding       =  0,
  horizontal_spacing =  0, vertical_spacing   =  0,
  top_padding        =  0, right_padding      =  0,  
  left_padding       =  0, bottom_padding     =  0,  

There are many different values than affect this, try which ones you need.

If you want them to be equal size you also have to specify a fixed height/width on both frames to prevent them from scaling according to content (again via style).

Code: Select all

    minimal_width = 200,
    maximal_width = 200,
    width = 200, --new in 0.16 i think? same for height.

To select a good height/width you will want to consult the values of LuaPlayer.display_resolution and LuaPlayer.display_scale and handle the events on_player_display_resolution_changed and on_player_display_scale_changed.

[robertpaulson]

Thank you thats plenty of help