{
  "schemaVersion": "0.11.0",
  "canonical": "https://www.pystone.net/notes/unreal-ui-solution/",
  "atlas": "https://www.pystone.net/?node=unreal-ui-solution#knowledge-atlas",
  "markdown": "https://www.pystone.net/notes/unreal-ui-solution.md",
  "context": "https://www.pystone.net/notes/unreal-ui-solution.context.json",
  "knowledgeVersion": "224c990773de.5fa8af6e39fa",
  "build": {
    "siteCommit": "224c990773de166d23a886306577dd90379529ce",
    "notesCommit": "5fa8af6e39fa3891d1b9b4832bfa6c4e0ecaaf0a",
    "builtAt": "1970-01-01T00:00:00.000Z",
    "version": "224c990773de.5fa8af6e39fa"
  },
  "id": "note:unreal-ui-solution",
  "slug": "unreal-ui-solution",
  "title": "UI方案",
  "type": "note",
  "visibility": "public",
  "idStability": "rename-stable",
  "author": {
    "name": "Perrin Yong",
    "profile": "https://www.pystone.net/profile/"
  },
  "publisher": {
    "name": "Perrin Yong",
    "profile": "https://www.pystone.net/profile/"
  },
  "aliases": [],
  "summary": "UI方案",
  "contentRole": "unspecified",
  "isMoc": false,
  "mocRecognition": "none",
  "generated": false,
  "attribution": "unspecified",
  "domain": "10-计算机、信息技术与工程",
  "tags": [],
  "mocs": [],
  "contentHash": "dd157423bca890123804d35951ee3c487ea2afbc963eb5ac79b2ca30f19af0b7",
  "assets": [
    {
      "reference": "assets/0007 - UI方案__resource-001-08dd4240f357.png",
      "url": "/media/5ddcc4357a0c1ccb2795.png",
      "mediaType": "image/png",
      "contentHash": "5ddcc4357a0c1ccb279531274bbd2c4815b9add5bd2b793dfbf3b99b2c76d7a3",
      "byteLength": 73422,
      "width": 1030,
      "height": 400
    },
    {
      "reference": "assets/0007 - UI方案__resource-002-bd90b8483b95.png",
      "url": "/media/c19fefbd7a46a732b188.png",
      "mediaType": "image/png",
      "contentHash": "c19fefbd7a46a732b188ffa2d59e70431d531288098dd44c8d01a63c03b51506",
      "byteLength": 18254,
      "width": 766,
      "height": 173
    }
  ],
  "headings": [
    {
      "depth": 1,
      "text": "UI方案",
      "anchor": "ui方案",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#ui%E6%96%B9%E6%A1%88"
    },
    {
      "depth": 2,
      "text": "技术方案说明",
      "anchor": "技术方案说明",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#%E6%8A%80%E6%9C%AF%E6%96%B9%E6%A1%88%E8%AF%B4%E6%98%8E"
    },
    {
      "depth": 3,
      "text": "Why Should we Use C++?",
      "anchor": "why-should-we-use-c",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#why-should-we-use-c"
    },
    {
      "depth": 3,
      "text": "mix Blueprints and C++",
      "anchor": "mix-blueprints-and-c",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#mix-blueprints-and-c"
    },
    {
      "depth": 3,
      "text": "UMG vs. Slate",
      "anchor": "umg-vs-slate",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#umg-vs-slate"
    },
    {
      "depth": 4,
      "text": "同行经验",
      "anchor": "同行经验",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#%E5%90%8C%E8%A1%8C%E7%BB%8F%E9%AA%8C"
    },
    {
      "depth": 2,
      "text": "UMG",
      "anchor": "umg",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#umg"
    },
    {
      "depth": 3,
      "text": "Widgets",
      "anchor": "widgets",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#widgets"
    },
    {
      "depth": 3,
      "text": "UserWidgets",
      "anchor": "userwidgets",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#userwidgets"
    },
    {
      "depth": 4,
      "text": "Creating a UserWidget in C++",
      "anchor": "creating-a-userwidget-in-c",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#creating-a-userwidget-in-c"
    },
    {
      "depth": 4,
      "text": "Creating new UWidgets in C++",
      "anchor": "creating-new-uwidgets-in-c",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#creating-new-uwidgets-in-c"
    },
    {
      "depth": 2,
      "text": "Slate",
      "anchor": "slate",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#slate"
    },
    {
      "depth": 2,
      "text": "Refs",
      "anchor": "refs",
      "citation": "https://www.pystone.net/notes/unreal-ui-solution/#refs"
    }
  ],
  "claims": [],
  "outgoing": [],
  "incoming": [
    {
      "id": "note:game-graphics-and-runtime",
      "title": "游戏图形与运行时",
      "url": "https://www.pystone.net/notes/game-graphics-and-runtime/",
      "atlas": "https://www.pystone.net/?node=game-graphics-and-runtime#knowledge-atlas",
      "label": "游戏图形与运行时",
      "origin": "explicit",
      "humanReviewed": true,
      "context": "Unreal中的“UI方案”导航项",
      "citation": "https://www.pystone.net/notes/game-graphics-and-runtime/#unreal"
    }
  ],
  "contentMarkdown": "# UI方案\n\n# UI方案\n\n> 创建时间：2022/3/2 12:14\n\n* 技术方案说明\n    * Why Should we Use C++?\n    * mix Blueprints and C++\n    * UMG vs. Slate\n      * 同行经验\n  * UMG\n    * Widgets\n    * UserWidgets\n      * Creating a UserWidget in C++\n      * Creating new UWidgets in C++\n  * Slate\n  * Refs\n\n## 技术方案说明\n\n### Why Should we Use C++?\n\n![](assets/0007 - UI方案__resource-001-08dd4240f357.png)\n\nhttps://benui.ca/unreal/ui-cpp-basics/\n\n### mix Blueprints and C++\n\nput all **the data-related logic in C++** , and **the visual logic in Blueprints**.\n\n### UMG vs. Slate\n\nSlate is the old Unreal UI system, and is what the UMG and the editor are built on. It uses some funky-looking C++ to simplify setting up widgets. It's important to understand that just because it's the \"old\" system doesn't mean it's obsolete. You will gradually need to learn Slate in order to add more complicated functionality to your UIs.\n\nUMG is the newer UI system that was added as part of Unreal 4. It is designed to be more Blueprint-friendly and let designers visually lay out their UIs in the editor. Each UMG widget generally has an almost-identically named Slate class inside it. The **xxSlate** class handles most of the logic, and its corresponding UMG class is a wrapper around it. e.g. UImage is the UMG class, and it contains a SImage instance inside it.\n\nUMG is simply a editor- and Blueprint-friendly **wrapper for Slate**.\n\n#### 同行经验\n\nUE引擎内如果开发Editor插件的话，界面UI是用UMG还是Slate比较合适?\nSlate.\nUMG是针对runtime的，因此一些editor的控件不会提供，比如propertyEditor\n当然slate也会更底层一些，性能更高\n一般是尽量做个slate底层，然后导出各种蓝图接口，然后就可以用脚本植入主体逻辑\n\n## UMG\n\nUnreal Motion Graphics UI Designer (UMG)\n\n最好的UI Dev上手方法： **try out each widget and see what you can do with it**\n\nSlots - When a widget is put inside another, we can customise how it behaves inside its parent through its Slot property.\n\n### Widgets\n\n![](assets/0007 - UI方案__resource-002-bd90b8483b95.png)\n\n### UserWidgets\n\nUserWidgets are used to create reusable objects with custom logic for user interfaces.\n\n#### Creating a UserWidget in C++\n\n```xml\npublic class AGenericClass<T> where T : IComparable<T> { }\n\n```\n```xml\npublic class AGenericClass<T> where T : IComparable<T> { }\n\n```\n\n#### Creating new UWidgets in C++\n\n```xml\npublic class AGenericClass<T> where T : IComparable<T> { }\n\n```\n```xml\npublic class AGenericClass<T> where T : IComparable<T> { }\n\n```\n\n## Slate\n\n## Refs\n\nhttps://benui.ca/unreal/ui-cpp-basics/\nhttps://benui.ca/unreal/ui-introduction/\n"
}