{"id":10211,"date":"2024-07-13T01:45:35","date_gmt":"2024-07-13T05:45:35","guid":{"rendered":"https:\/\/www.sceneri.com\/?post_type=sceneri-pro-docs&p=10211"},"modified":"2024-11-08T06:43:58","modified_gmt":"2024-11-08T11:43:58","slug":"widgets-2d","status":"publish","type":"sceneri-pro-docs","link":"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/","title":{"rendered":"Widgets & 2D"},"content":{"rendered":"

Overview<\/h3>\n

Sceneri\u2019s 2D components are essential for creating user interfaces, HUDs (heads-up displays), and visual feedback for players. These components allow developers to design interactive elements like buttons, health bars, notifications, and textual information, which can overlay or supplement the 3D game environment. Two of the primary 2D components in Sceneri are Widgets<\/strong> and Text Components<\/strong>. This article provides a comprehensive look at these components, explaining their properties, use cases, and examples of how they can be configured to create responsive and engaging 2D interfaces.<\/p>\n

Components<\/h3>\n<\/div><\/div><\/div>

Icon<\/p>\n<\/div><\/div><\/div>

Description<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>

  • <\/span><\/div><\/div><\/div>

    Text<\/h4><\/div>

    Displays customizable, real-time text on the screen, ideal for showing information like scores, dialogue, and instructions within the game interface.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

    <\/div><\/div><\/li>\n
  • <\/span><\/div><\/div><\/div>

    Widget<\/h4><\/div>

    Provides a flexible 2D interface element used for creating interactive UI components like buttons, sliders, and icons, enabling player interaction and visual feedback within the game.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

    <\/div><\/div><\/li>\n<\/ul><\/div><\/div><\/div>

    Integrating Widgets and Text<\/h3>\n

    Combining Widgets<\/strong> and Text Components<\/strong> allows for a cohesive and interactive interface. Here are a few ways to integrate them:<\/p>\n

      \n
    • HUD Displays<\/strong>: Use widgets as background elements for health, stamina, or ammo bars, with text components overlaid to show numeric values. This setup helps players easily monitor vital stats during gameplay.<\/li>\n
    • Menus and Buttons<\/strong>: Create in-game menus by combining clickable widgets (e.g., buttons) with text labels. Text components can provide descriptions or labels for each button, guiding players through options like inventory or settings.<\/li>\n
    • Notifications and Alerts<\/strong>: Use text components for alerts or objective updates and pair them with widgets that include icons or background images. For instance, when a new quest is added, a widget with a quest icon and a text component displaying quest details can appear briefly on the screen.<\/li>\n<\/ul>\n<\/div><\/div><\/div>

      Summary<\/h3>\n

      Sceneri\u2019s Widgets<\/strong> and Text Components<\/strong> provide developers with versatile tools for creating polished, functional, and visually appealing 2D interfaces. By combining these components, you can design custom HUDs, interactive menus, notifications, and more, tailored to enhance the player experience. Utilizing animations, dynamic content, and layering, Sceneri\u2019s 2D components make it easy to build responsive, immersive interfaces that keep players informed and engaged.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

      Text components can be handy for a variety of use cases. They can be a simple tutorial located within your world to a complete sign that covers a wall in your scene.<\/p>\n","protected":false},"author":251212454,"featured_media":0,"parent":10195,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"sceneri-docs-tag":[1720],"class_list":["post-10211","sceneri-pro-docs","type-sceneri-pro-docs","status-publish","format-standard","hentry","sceneri-docs-tag-components"],"acf":[],"yoast_head":"\nWidgets & 2D - Sceneri<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Widgets & 2D\" \/>\n<meta property=\"og:description\" content=\"Text components can be handy for a variety of use cases. They can be a simple tutorial located within your world to a complete sign that covers a wall in your scene.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/\" \/>\n<meta property=\"og:site_name\" content=\"Sceneri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/sceneriapp\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-08T11:43:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@sceneriapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/\",\"url\":\"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/\",\"name\":\"Widgets & 2D - Sceneri\",\"isPartOf\":{\"@id\":\"https:\/\/www.sceneri.com\/#website\"},\"datePublished\":\"2024-07-13T05:45:35+00:00\",\"dateModified\":\"2024-11-08T11:43:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sceneri.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets & 2D\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sceneri.com\/#website\",\"url\":\"https:\/\/www.sceneri.com\/\",\"name\":\"Sceneri\",\"description\":\"Collaborate in 3D.\",\"publisher\":{\"@id\":\"https:\/\/www.sceneri.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sceneri.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.sceneri.com\/#organization\",\"name\":\"Sceneri\",\"url\":\"https:\/\/www.sceneri.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.sceneri.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.sceneri.com\/wp-content\/uploads\/2024\/06\/sceneri-logo-inverted.png\",\"contentUrl\":\"https:\/\/www.sceneri.com\/wp-content\/uploads\/2024\/06\/sceneri-logo-inverted.png\",\"width\":1630,\"height\":512,\"caption\":\"Sceneri\"},\"image\":{\"@id\":\"https:\/\/www.sceneri.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/sceneriapp\",\"https:\/\/x.com\/sceneriapp\",\"https:\/\/www.reddit.com\/r\/sceneriapp\/\",\"https:\/\/www.twitch.tv\/sceneriapp\",\"https:\/\/www.youtube.com\/@sceneriapp\",\"https:\/\/www.linkedin.com\/company\/sceneri\/\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Widgets & 2D - Sceneri","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/","og_locale":"en_US","og_type":"article","og_title":"Widgets & 2D","og_description":"Text components can be handy for a variety of use cases. They can be a simple tutorial located within your world to a complete sign that covers a wall in your scene.","og_url":"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/","og_site_name":"Sceneri","article_publisher":"https:\/\/www.facebook.com\/sceneriapp","article_modified_time":"2024-11-08T11:43:58+00:00","twitter_card":"summary_large_image","twitter_site":"@sceneriapp","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/","url":"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/","name":"Widgets & 2D - Sceneri","isPartOf":{"@id":"https:\/\/www.sceneri.com\/#website"},"datePublished":"2024-07-13T05:45:35+00:00","dateModified":"2024-11-08T11:43:58+00:00","breadcrumb":{"@id":"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/widgets-2d\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sceneri.com\/"},{"@type":"ListItem","position":2,"name":"Components","item":"https:\/\/www.sceneri.com\/sceneri-pro-docs\/components-interface\/"},{"@type":"ListItem","position":3,"name":"Widgets & 2D"}]},{"@type":"WebSite","@id":"https:\/\/www.sceneri.com\/#website","url":"https:\/\/www.sceneri.com\/","name":"Sceneri","description":"Collaborate in 3D.","publisher":{"@id":"https:\/\/www.sceneri.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sceneri.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.sceneri.com\/#organization","name":"Sceneri","url":"https:\/\/www.sceneri.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.sceneri.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.sceneri.com\/wp-content\/uploads\/2024\/06\/sceneri-logo-inverted.png","contentUrl":"https:\/\/www.sceneri.com\/wp-content\/uploads\/2024\/06\/sceneri-logo-inverted.png","width":1630,"height":512,"caption":"Sceneri"},"image":{"@id":"https:\/\/www.sceneri.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/sceneriapp","https:\/\/x.com\/sceneriapp","https:\/\/www.reddit.com\/r\/sceneriapp\/","https:\/\/www.twitch.tv\/sceneriapp","https:\/\/www.youtube.com\/@sceneriapp","https:\/\/www.linkedin.com\/company\/sceneri\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.sceneri.com\/wp-json\/wp\/v2\/sceneri-pro-docs\/10211"}],"collection":[{"href":"https:\/\/www.sceneri.com\/wp-json\/wp\/v2\/sceneri-pro-docs"}],"about":[{"href":"https:\/\/www.sceneri.com\/wp-json\/wp\/v2\/types\/sceneri-pro-docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.sceneri.com\/wp-json\/wp\/v2\/users\/251212454"}],"version-history":[{"count":0,"href":"https:\/\/www.sceneri.com\/wp-json\/wp\/v2\/sceneri-pro-docs\/10211\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.sceneri.com\/wp-json\/wp\/v2\/sceneri-pro-docs\/10195"}],"wp:attachment":[{"href":"https:\/\/www.sceneri.com\/wp-json\/wp\/v2\/media?parent=10211"}],"wp:term":[{"taxonomy":"sceneri-docs-tag","embeddable":true,"href":"https:\/\/www.sceneri.com\/wp-json\/wp\/v2\/sceneri-docs-tag?post=10211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}