How do I overlap two images?

[yaim904]

I want to do this

Imagen.png (8.08 KiB) Viewed 1797 times

I want to start with the turret

What item should I use?

Code: Select all

Picture.type = "choose-elem-button"
Picture.type = "sprite-button"

This is the picture of the turret

Code: Select all

Picture.sprite = "item/gun-turret"

This is the image of the sight.

Code: Select all

Picture.sprite = "utility/turret_attack_modifier_constant"

How do I overlap two images?

[Silari]

About to leave so can't type much, but you want the layers property that sprites have. Put each of your images in it's own layer and the game will composite them into a single image. There's some info on the Sprite page on the wiki - https://wiki.factorio.com/Types/Sprite#layers

[robot256]

Like Silari said, you have to define new Sprite objects in data raw which have multiple entries in the layers property. The composite sprite is rendered when the game loads. You can procedurally generate composited sprites for each item if you need to. The GUI element itself can only take one sprite at a time, so you give it the pre-made composited version that you want.

[yaim904]

So, Cannot be overlapped the images when the game has started, I have to create the prototype.

I thought that if the game shows it, it means that the prototype already exists, but I can't find it.

I looked in the prototypes and did not find them.

Code: Select all

-- data-final-fixes.lua
data.raw[ "utility-sprites" ][ "default" ] 

I am right??

[robot256]

The utility sprites are image files in the "base/graphics" folder IIRC. You need to reference the PNG files directly in your "sprite" prototype definition, using the "__core__" prefix instead of "__modname__".

[yaim904]

I'll try to explain this with little apples, maybe the idea is lost in the translation or I'm not explaining myself well (I think it's the second one)

This is the prototype of the technology that I will use as a sample, you can find it in the technology window.

Code: Select all

[ 'toolbelt' ] = {
    [ 'type' ] = 'technology',
    [ 'name' ] = 'toolbelt',
    [ 'icon_size' ] = 256,
    [ 'icon_mipmaps' ] = 4,
    [ 'icons' ] = {
        [ 1 ] = {
            [ 'icon' ] = '__base__/graphics/technology/toolbelt.png',
            [ 'icon_size' ] = 256,
            [ 'icon_mipmaps' ] = 4,
        },
        [ 2 ] = {
            [ 'icon' ] = '__core__/graphics/icons/technology/constants/constant-capacity.png',
            [ 'icon_size' ] = 128,
            [ 'icon_mipmaps' ] = 3,
            [ 'shift' ] = {
                [ 1 ] = 100,
                [ 2 ] = 100,
            },
        },
    },
    [ 'prerequisites' ] = {
        [ 1 ] = 'logistic-science-pack',
    },
    [ 'effects' ] = {
        [ 1 ] = {
            [ 'type' ] = 'character-inventory-slots-bonus',
            [ 'modifier' ] = 10,
        },
    },
    [ 'unit' ] = {
        [ 'count' ] = 100,
        [ 'ingredients' ] = {
            [ 1 ] = {
                [ 1 ] = 'automation-science-pack',
                [ 2 ] = 1,
            },
            [ 2 ] = {
                [ 1 ] = 'logistic-science-pack',
                [ 2 ] = 1,
            },
        },
        [ 'time' ] = 30,
    },
    [ 'order' ] = 'c-k-m',
},

In this technology the effect is: to increase the player's space of inventory, but the sample image is a combination of two images, one is the character and the other is the modifier.

Character.png (2.35 KiB) Viewed 1726 times

This is the prototype of the character image

Code: Select all

[ 'character_inventory_slots_bonus_modifier_icon' ] = {
    [ 'filename' ] = '__core__/graphics/icons/entity/character.png',
    [ 'priority' ] = 'extra-high-no-scale',
    [ 'size' ] = 64,
    [ 'scale' ] = 0.5,
    [ 'mipmap_count' ] = 2,
    [ 'generate_sdf' ] = true
    [ 'flags' ] = {
        [ 1 ] = 'icon',
    },
},

This is the prototype of the improvement

Code: Select all

[ 'character_inventory_slots_bonus_modifier_constant' ] = {
    [ 'filename' ] = '__core__/graphics/icons/technology/effect-constant/effect-constant-capacity.png',
    [ 'priority' ] = 'extra-high-no-scale',
    [ 'width' ] = 64,
    [ 'height' ] = 64,
    [ 'generate_sdf' ] = true
    [ 'mipmap_count' ] = 2,
    [ 'flags' ] = {
        [ 1 ] = 'gui-icon',
    },
},

What I want??

I want to get this result in a "choose-elem-button" or "sprite-button", in other words, from control.lua

Character.png (2.35 KiB) Viewed 1726 times

The sprite may exist, but I don't know how to find it.
How can I see the utility sprites that I can use from Control.lua

[robot256]

If you load Factorio and open/start a map, you can see all the available prototypes by pressing "Ctrl-Shift-E". Select the "sprites" or "utility" category to see what is loaded.

The "sprite" and "sprite-button" gui elements can have their icon specified by anything listed in the SpritePath defintion, which includes the "utility" category and the "technology" category. If you select a utility-sprite, it will appear by itself, with no other icons in the background.

The prototype of "utility-sprites" is not a normal sprite, but a giant list of sprites. If the sprite that you want is in the utility-sprites list, you can put it in the button (in its original state). The actual image files are located on your hard drive at "data/core/graphics/icons/technology/effect-constant/effect-constant-capacity.png".

Many of the utility-sprite images are used by the game to make overlays in the technology effects display, but these overlays are hardcoded. You cannot make composite icons at runtime that appear in sprite-button gui elements.

You can add new composite icons as standalone "sprite" prototypes in the data stage. You can use the same PNG files in your composite that are used in the utility sprites. You must reference the actual path of the PNG file. Based on "data/core/prototypes/utility-sprites.lua", the file path can be specified as "__core__/graphics/icons/technology/effect-constant/effect-constant-capacity.png" (for example, for the three-stacked-squares icon in your example).

(Technically, you could retrieve the file path from the data.raw["utility-sprites"]["character_logistic_trash_slots_modifier_constant"].filename, but it would have exactly the same effect and would be more cumbersome in my opinion.)

To actually make the composite sprite, you have to make a new sprite prototype with multiple layers, and then reference that sprite in your gui element. For example (see Prototype/Sprite for all the other parameters):

Code: Select all

data.raw:extend( {
  {
    type = "sprite",
    name = "my-character-capacity-sprite",
    layers = {
      {
        filename = "__core__/graphics/icons/entity/character.png",
        size = 64,
        mipmap_count = 4,
      },
      {
        filename = "__core__/graphics/icons/technology/effect-constant/effect-constant-capacity.png",
        size = 64,
        mipmap_count = 4,
      }
    }
  }
} )

The second image in the list will be drawn on top of the first image in the list. The "tint" property can be used to make individual layers different colors or semi-transparent.

With this in your data.lua, the prototype viewer will show "my-character-capacity-sprite" in the "sprites" category. Setting the gui element "sprite" property to the string "my-character-capacity-sprite" will make it appear on the button.

[yaim904]

If you load Factorio and open/start a map, you can see all the available prototypes by pressing "Ctrl-Shift-E". Select the "sprites" or "utility" category to see what is loaded.

This has helped me a lot.

I have created a code to overlap the images.

About to leave so can't type much, but you want the layers property that sprites have. Put each of your images in it's own layer and the game will composite them into a single image. There's some info on the Sprite page on the wiki - https://wiki.factorio.com/Types/Sprite#layers

To actually make the composite sprite, you have to make a new sprite prototype with multiple layers, and then reference that sprite in your gui element. For example (see Prototype/Sprite for all the other parameters):

Thanks for the help.