bedrock-samples/resource_pack/ui/game_tip_screen.json

{
  "namespace": "game_tip",

  //---------------------------------------------------------------------------
  // Game Tip UI elements
  //---------------------------------------------------------------------------

  "fade_animation": {
    "anim_type": "alpha",
    "easing": "linear",
    "from": "$anim_alpha_from",
    "to": "$anim_alpha_to",
    "duration": "$anim_duration",
    "$anim_event_name|default": "game_tip_animation_in_finished",
    "end_event": "$anim_event_name"
  },

  "tip_animation": {
    "anim_type": "aseprite_flip_book",
    "initial_uv": [ 0, 0 ]
  },

  "game_tip_animation": {
    "$animation_image_size|default": [ 84, 64 ],
    "type": "image",
    "texture": "#texture",
    "size": "$animation_image_size",
    "anchor_from": "left_middle",
    "anchor_to": "left_middle",
    "offset": [ 0, -4 ],
    "layer": 50,
    "uv_size": "$animation_image_size",
    "uv": "@game_tip.tip_animation",
    "disable_anim_fast_forward": true,
    "bindings": [
      {
        "binding_name": "#animation_name"
      },
      {
        "binding_type": "view",
        "source_property_name": "('textures/ui/game_tip_animations/' + #animation_name)",
        "target_property_name": "#texture"
      }
    ]
  },

  "game_tip_animation_panel": {
    "type": "panel",
    "size": [ "100%c", "0px" ], // Animation can be higher than game tip frame, so it's height shouldn't be counted.
    "anchor_from": "left_middle",
    "anchor_to": "left_middle",
    "controls": [
      {
        "animated_icon@game_tip.game_tip_animation": {}
      }
    ]
  },

  "game_tip_label": {
    "type": "label",
    "layer": 3,
    "text_alignment": "left",
    "color": "$body_text_color",
    "max_size": [ 120, 100 ],
    "line_padding": 1.5,
    "$label_text|default": "#text",
    "$label_text_binding_type|default": "global",
    "text": "$label_text",
    "bindings": [
      {
        "binding_name": "$label_text",
        "binding_name_override": "$label_text",
        "binding_type": "$label_text_binding_type"
      }
    ]
  },

  "game_tip_text_panel": {
    "type": "stack_panel",
    "size": [ "100%c", "100%c" ],
    "controls": [
      { "upper_padding": { "type": "panel", "size": [ 0, 5 ]} },
      {
        "label@game_tip.game_tip_label": {}
      },
      { "lower_padding": { "type": "panel", "size": [ 0, 5 ]} }
    ]
  },

  "game_tip_arrow_image": {
    "type": "image",
    "alpha": 1.0,

    "anchor_from": "$arrow_anchor_point",
    "anchor_to": "$arrow_anchor_point",

    "texture": "$arrow_texture",
    "size": "$arrow_size"
  },

  "game_tip_arrow_panel": {
    "type": "panel",
    "size": [ "0px", "0px" ], // Arrow shouldn't be included in size calculation for the game tip frame.
    "$arrow_offset|default": [ 25, -3 ],
    "$arrow_texture|default": "textures/ui/gameTipArrow_down",
    "$arrow_anchor_point|default": "left_middle",
    "$arrow_size|default": [ 8, 12 ],
    "$arrow_direction|default": "bottom_left",

    "variables": [
      {
        "requires": "($arrow_direction = 'left')",
        "$arrow_texture": "textures/ui/gameTipArrow_left",
        "$arrow_size": [ 8, 12 ]
      },
      {
        "requires": "($arrow_direction = 'right')",
        "$arrow_texture": "textures/ui/gameTipArrow_right",
        "$arrow_size": [ 8, 12 ]
      },
      {
        "requires": "($arrow_direction = 'up')",
        "$arrow_texture": "textures/ui/gameTipArrow_up",
        "$arrow_size": [ 28, 15 ]
      },
      {
        "requires": "($arrow_direction = 'down')",
        "$arrow_texture": "textures/ui/gameTipArrow_down",
        "$arrow_size": [ 28, 15 ]
      }
    ],

    "anchor_from": "$arrow_anchor_point",
    "anchor_to": "$arrow_anchor_point",
    "offset": "$arrow_offset",

    "controls": [
      {
        "tip_arrow@game_tip.game_tip_arrow_image": {}
      }
    ]
  },

  "game_tip_panel": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%c", "100%cm" ],
    "use_child_anchors": true,
    "controls": [
      { "animated_panel@game_tip.game_tip_animation_panel": {} },
      { "middle_padding": { "type": "panel", "size": [ 7, 0 ]} }, // Padding between animation and text.
      { "label@game_tip.game_tip_text_panel": {} },
      { "right_padding": { "type": "panel", "size": [ 9, 0 ]} } // 7px padding between text and frame + 2px frame border.
    ]
  },

  "game_tip_item_background": {
    "type": "image",
    "texture": "textures/ui/gameTipBorder",
    "layer": 50,

    "min_size": [ "default", 40 ],
    "size": [ "100%c", "100%cm" ],

    "$tip_anchor_from|default": "top_right",
    "$tip_anchor_to|default": "top_right",
    "$game_tip_offset|default": [ 0, 0 ],
    "$ignore_arrow|default": false,

    "anchor_from": "$tip_anchor_from",
    "anchor_to": "$tip_anchor_to",
    "offset": "$game_tip_offset",

    "alpha": "@game_tip.fade_animation",
    "propagate_alpha": true,

    "controls": [
      { "horizontal_container@game_tip.game_tip_panel": {} },
      {
        "arrow_panel@game_tip_arrow_panel": {
          "ignored": "$ignore_arrow"
        }
      }
    ]
  },

  //---------------------------------------------------------------------------
  // UI helpers
  //---------------------------------------------------------------------------

  "chat_stack_game_tip_panel": {
    "type": "stack_panel",
    "orientation": "vertical",
    "controls": [
      {
        "top_padding": {
          "type": "panel",
          "size": [ "100%", 7 ]
        }
      },
      { "game_tip_background@game_tip.game_tip_item_background": {} }
    ]
  },

  //---------------------------------------------------------------------------
  // Game Tip Factories 
  //---------------------------------------------------------------------------

  "game_tip_factory": {
    "type": "panel",
    "size": [ "default", "default" ],
    "factory": {
      "name": "game_tip_item_factory",
      "max_children_size": 1,
      "control_ids": {
        "game_tip": "game_tip@game_tip.game_tip_item_background"
      }
    }
  },

  "game_tip_chat_stack_factory": {
    "type": "panel",
    "size": [ "default", "default" ],
    "factory": {
      "name": "game_tip_chat_stack_item_factory",
      "max_children_size": 1,
      "control_ids": {
        "game_tip": "game_tip@game_tip.chat_stack_game_tip_panel"
      }
    }
  }
}