Mirrors/Unciv
1
0
Fork 0
mirror of https://github.com/yairm210/Unciv.git synced 2025-02-20 19:56:51 +01:00
Code Issues Packages Projects Releases Wiki Activity
gh-pages
Unciv/Developers/UI-development/index.html

1559 lines
38 KiB
HTML
Raw Permalink Blame History

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="prev" href="../Translations%2C-mods%2C-and-modding-freedom-in-Open-Source/">
<link rel="next" href="../Uniques/">
<link rel="icon" href="../../assets/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.5">
<title>UI Development - Unciv</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.8608ea7d.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="amber">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#ui-development" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="Unciv" class="md-header__button md-logo" aria-label="Unciv" data-md-component="logo">
<img src="../../assets/Icon.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Unciv
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
UI Development
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="amber" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7M9 21a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1H9z"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="teal" data-md-color-accent="amber" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7M9 21v-1h6v1a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1m3-17a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/yairm210/unciv" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
yairm210/unciv
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="Unciv" class="md-nav__button md-logo" aria-label="Unciv" data-md-component="logo">
<img src="../../assets/Icon.png" alt="logo">
</a>
Unciv
</label>
<div class="md-nav__source">
<a href="https://github.com/yairm210/unciv" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
yairm210/unciv
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Welcome to Unciv!
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Credits/" class="md-nav__link">
<span class="md-ellipsis">
Credits
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Guiding-Principles/" class="md-nav__link">
<span class="md-ellipsis">
Guiding Principles
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Privacy-Policy/" class="md-nav__link">
<span class="md-ellipsis">
Privacy Policy
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" checked>
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
Developers
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Developers
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../Building-Locally/" class="md-nav__link">
<span class="md-ellipsis">
Building Locally
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Coding-standards/" class="md-nav__link">
<span class="md-ellipsis">
Coding standards
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../From-code-to-deployment/" class="md-nav__link">
<span class="md-ellipsis">
From code to deployment
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Game-Making-Tips/" class="md-nav__link">
<span class="md-ellipsis">
Game Making Tips
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Map-rendering/" class="md-nav__link">
<span class="md-ellipsis">
Map rendering
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Project-structure-and-major-classes/" class="md-nav__link">
<span class="md-ellipsis">
Project structure
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Saved-games-and-transients/" class="md-nav__link">
<span class="md-ellipsis">
Saved games and transients
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Testing-Android-Builds/" class="md-nav__link">
<span class="md-ellipsis">
Building for and testing on Android
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../Translations%2C-mods%2C-and-modding-freedom-in-Open-Source/" class="md-nav__link">
<span class="md-ellipsis">
Translations, mods, and modding freedom in Open Source
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
UI Development
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
UI Development
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#the-fasteruidevelopment-class" class="md-nav__link">
<span class="md-ellipsis">
The FasterUIDevelopment class
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#the-gdx-scene2d-debug-option" class="md-nav__link">
<span class="md-ellipsis">
The 'Gdx Scene2D debug' option
</span>
</a>
<nav class="md-nav" aria-label="The 'Gdx Scene2D debug' option">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#gdx-actor-debug-lines" class="md-nav__link">
<span class="md-ellipsis">
Gdx Actor debug lines
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mouse-coordinates-and-fps" class="md-nav__link">
<span class="md-ellipsis">
Mouse coordinates and FPS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#descriptor-of-the-actor-under-the-mouse" class="md-nav__link">
<span class="md-ellipsis">
Descriptor of the Actor under the mouse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#coordinate-scales" class="md-nav__link">
<span class="md-ellipsis">
Coordinate scales
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../Uniques/" class="md-nav__link">
<span class="md-ellipsis">
Uniques
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Modders
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Modders
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../Modders/Mods/" class="md-nav__link">
<span class="md-ellipsis">
Introduction to Mods
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Making-a-new-Civilization/" class="md-nav__link">
<span class="md-ellipsis">
'My first mod' - Making a new Civilization
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Images-and-Audio/" class="md-nav__link">
<span class="md-ellipsis">
Images and Audio
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_4" >
<label class="md-nav__link" for="__nav_6_4" id="__nav_6_4_label" tabindex="0">
<span class="md-ellipsis">
Mod file structure
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_4">
<span class="md-nav__icon md-icon"></span>
Mod file structure
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../Modders/Mod-file-structure/1-Overview/" class="md-nav__link">
<span class="md-ellipsis">
Mod file structure Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Mod-file-structure/2-Civilization-related-JSON-files/" class="md-nav__link">
<span class="md-ellipsis">
Civilization-related JSON files
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Mod-file-structure/3-Map-related-JSON-files/" class="md-nav__link">
<span class="md-ellipsis">
Map-related JSON files
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Mod-file-structure/4-Unit-related-JSON-files/" class="md-nav__link">
<span class="md-ellipsis">
Unit-related JSON files
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Mod-file-structure/5-Miscellaneous-JSON-files/" class="md-nav__link">
<span class="md-ellipsis">
Miscellaneous JSON files
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_5" >
<label class="md-nav__link" for="__nav_6_5" id="__nav_6_5_label" tabindex="0">
<span class="md-ellipsis">
Special Mods
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_5">
<span class="md-nav__icon md-icon"></span>
Special Mods
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../Modders/Creating-a-custom-tileset/" class="md-nav__link">
<span class="md-ellipsis">
Creating a custom tileset
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Creating-a-UI-skin/" class="md-nav__link">
<span class="md-ellipsis">
Creating a UI skin
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../Modders/Unique-parameters/" class="md-nav__link">
<span class="md-ellipsis">
Unique parameters
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/uniques/" class="md-nav__link">
<span class="md-ellipsis">
Uniques
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Type-checking/" class="md-nav__link">
<span class="md-ellipsis">
Type checking
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Scenarios/" class="md-nav__link">
<span class="md-ellipsis">
Scenarios
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Modders/Autoupdates/" class="md-nav__link">
<span class="md-ellipsis">
Autoupdates
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-ellipsis">
Other
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
Other
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../Other/Force-rating-calculation/" class="md-nav__link">
<span class="md-ellipsis">
Force rating calculation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Installing-on-macOS/" class="md-nav__link">
<span class="md-ellipsis">
Installing on MacOS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Intentional-departures-from-Civ-V/" class="md-nav__link">
<span class="md-ellipsis">
Intentional departures from Civ V
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Multiplayer/" class="md-nav__link">
<span class="md-ellipsis">
Multiplayer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Regions/" class="md-nav__link">
<span class="md-ellipsis">
Regions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../Other/Translating/" class="md-nav__link">
<span class="md-ellipsis">
Translating
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#the-fasteruidevelopment-class" class="md-nav__link">
<span class="md-ellipsis">
The FasterUIDevelopment class
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#the-gdx-scene2d-debug-option" class="md-nav__link">
<span class="md-ellipsis">
The 'Gdx Scene2D debug' option
</span>
</a>
<nav class="md-nav" aria-label="The 'Gdx Scene2D debug' option">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#gdx-actor-debug-lines" class="md-nav__link">
<span class="md-ellipsis">
Gdx Actor debug lines
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#mouse-coordinates-and-fps" class="md-nav__link">
<span class="md-ellipsis">
Mouse coordinates and FPS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#descriptor-of-the-actor-under-the-mouse" class="md-nav__link">
<span class="md-ellipsis">
Descriptor of the Actor under the mouse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#coordinate-scales" class="md-nav__link">
<span class="md-ellipsis">
Coordinate scales
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="ui-development">UI Development</h1>
<p>Unciv is backed by <a href="https://libgdx.com/wiki/graphics/2d/scene2d/scene2d">GDX's scene2d</a> for the UI, so check out <a href="https://libgdx.com/wiki/graphics/2d/scene2d/scene2d">their official documentation</a> for more info about that.</p>
<p>We mainly use the <a href="https://libgdx.com/wiki/graphics/2d/scene2d/table"><code>Table</code> class</a> of scene2d, because it offers nice flexibility in laying out all the user interface.</p>
<h2 id="the-fasteruidevelopment-class">The <code>FasterUIDevelopment</code> class</h2>
<p>This class is basically just a small helper GDX application to help develop UI components faster.</p>
<p>It sets up the very basics of Unciv, so that you can then show one single UI component instantly. This gives you much faster response times for when you change something, so that you can immediately see the changes you made, without having to restart the game, load a bunch of stuff and navigate to where your UI component would actually be.</p>
<p>To use it, you change the <code>DevElement</code> class within the <code>FasterUIDevelopment.kt</code> file so that the <code>actor</code> field is set to the UI element you want to develop. A very basic usage is there by default, just showing a label, but you can put any UI element there instead.</p>
<p>Once it's up and running, your UI element is centered in the window and gets an orange border. You can toggle Scene2D debugging with the middle mouse button (click the wheel).</p>
<p>Note that the parent your UI element will get doesn't set the size (which in reactive nested layouts would be its responsibility), so if your element is a WidgetGroup like Table, just pack() it. Or ignore the orange dot left over from the border. Also please do not resize the window - there's no support for that at the moment and no guarantees can be given for the results.</p>
<div class="highlight"><pre><span></span><code><span class="kd">class</span><span class="w"> </span><span class="nc">DevElement</span><span class="p">(</span>
<span class="w"> </span><span class="kd">val</span><span class="w"> </span><span class="nv">screen</span><span class="p">:</span><span class="w"> </span><span class="n">UIDevScreen</span>
<span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="kd">lateinit</span><span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nv">actor</span><span class="p">:</span><span class="w"> </span><span class="n">Actor</span>
<span class="w"> </span><span class="kd">fun</span><span class="w"> </span><span class="nf">createDevElement</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="n">actor</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">&quot;This could be your UI element in development!&quot;</span><span class="p">.</span><span class="na">toLabel</span><span class="p">()</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="kd">fun</span><span class="w"> </span><span class="nf">afterAdd</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>You can then simply run the <code>main</code> method of <code>FasterUIDevelopment</code> to show your UI element.</p>
<p>There's two ways to do so:
* Open this file in Android Studio under project:docs/Developers. That line above has a little green arrow in the left gutter that can be clicked.
* Create a Run Configuration similar to <a href="../Building-Locally/#with-android-studio">the desktop one described here</a>, but with classpath <code>Unciv.tests.test</code> and main class <code>com.unciv.dev.FasterUIDevelopment</code>.
<img alt="image" src="/Unciv/assets/FasterUIDevelopment.png" /></p>
<h2 id="the-gdx-scene2d-debug-option">The 'Gdx Scene2D debug' option</h2>
<p>This option (on the secret 'Debug' page) turns on several UI debug features:
* Gdx Actor debug lines
* Mouse coordinates and FPS
* Descriptor of the Actor under the mouse
* Coordinate scales</p>
<h3 id="gdx-actor-debug-lines">Gdx Actor debug lines</h3>
<p>See <a href="https://libgdx.com/wiki/graphics/2d/scene2d/table#logical-table">Gdx wiki</a>
The Scene2D debug option turns on mouse-over Gdx debug lines at the stage level using <code>setDebugUnderMouse</code>, <code>setDebugTableUnderMouse</code> and <code>setDebugParentUnderMouse</code>.
* Blue lines are Table bounds - Each Table has dimensions as a Widget and as a logical table determined by the cells. They will coincide if there is both expandX and expandY set somewhere.
* Red lines are Cell bounds - the part within cell padding.
* Green lines are Actor bounds of the Cell contents. If the Cell has both Fill directions set, they disappear below the red cell bounds (that is, unless the content Actor has a maxSize limiting the fill).</p>
<h3 id="mouse-coordinates-and-fps">Mouse coordinates and FPS</h3>
<p>On the bottom right is a semi-transparent panel with 3 numbers on top: X and Y of the mouse in Gdx stage coordinates, and FPS.</p>
<h3 id="descriptor-of-the-actor-under-the-mouse">Descriptor of the Actor under the mouse</h3>
<p>The lower part of said panel shows a string helping to identify which Actor the mouse is over. This will look for the actor's parent and potentially children, and the optional Actor.name field. Java class names or Label text are used when appropriate - it tries to build something short, but just descriptive enough. It uses the following separators / symbols:
* <code>:</code> a colon separates class name from Actor.name - or Actor.name is used undecorated if it contains the class name.
* <code>"</code> double-quotes show actual Label or TextButton text, max 20 characters, prefixed directly with the class name.
* <code>.</code> a dot separates parent from hit Actor: If the above alone does not yield a descriptive label, the parent (if any) is added as descriptive label per the rules above or as simple class name.
* <code>(</code>..<code>)</code> after the above designates a sample from the children (the first nicely descriptive one), only if the parent won't add good recognition value.</p>
<h3 id="coordinate-scales">Coordinate scales</h3>
<p>The bottom and right edges of the screen get tiny tick marks, each 20 units in the Gdx stage coordinates, to help estimate paddings or sizes.</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": [], "search": "../../assets/javascripts/workers/search.f8cc74c7.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.f1b6f286.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink