ui a main menu a join a host lobby
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Rounded Rect Mask 2D</title>
|
||||
<link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
/* outline: 1px solid red; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* THESE ENSURE THE WEBVIEW WILL BE OF CORRECT HEIGHT
|
||||
* =======================================================================
|
||||
*/
|
||||
|
||||
html {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: 'Inter';
|
||||
background-color: #F7F5EB;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
body :first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
body :last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/* FIXES SCROLLING
|
||||
* =======================================================================
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* MAIN STYLING
|
||||
* =======================================================================
|
||||
*/
|
||||
|
||||
:root {
|
||||
--default-text-color: #333333;
|
||||
--muted-text-color: #666666;
|
||||
--link-color: #f05675;
|
||||
|
||||
--muted-border-color: #dddddd;
|
||||
--muted-background-color: #eeeeee;
|
||||
|
||||
--codeblock-background-color: #222222;
|
||||
--codeblock-text-color: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 16px;
|
||||
|
||||
line-height: 1.5rem;
|
||||
color: var(--default-text-color);
|
||||
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid var(--muted-border-color);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-inline-start: 1.8rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 2px;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
del {
|
||||
color: var(--muted-text-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
|
||||
color: var(--codeblock-text-color);
|
||||
background-color: var(--codeblock-background-color);
|
||||
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code {
|
||||
background-color: var(--muted-background-color);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-inline: 0px;
|
||||
padding-block: 12px;
|
||||
padding-left: 16px;
|
||||
|
||||
color: var(--muted-text-color);
|
||||
border-left: 2px solid var(--muted-border-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote :last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.6rem 1rem;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--muted-border-color)
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 1rem;
|
||||
background-color: var(--muted-background-color);
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="rounded-rect-mask-2d">Rounded Rect Mask 2D</h1>
|
||||
<p><img src="./Resources/RRM2D_Banner.png" alt="screenshot" /><br />
|
||||
available on the <a href="https://assetstore.unity.com/packages/slug/326028" rel="noopener noreferrer" target="_blank">Asset Store</a></p>
|
||||
<h2 id="documentation">Documentation</h2>
|
||||
<p><img src="./Resources/RRM2D_ScreenshotScene.png" alt="screenshot" /></p>
|
||||
<h3 id="basics">Basics</h3>
|
||||
<ul>
|
||||
<li>All Graphics (<a href="https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/comp-UIVisual.html" rel="noopener noreferrer" target="_blank">Visuals</a> & <a href="https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/comp-UIInteraction.html" rel="noopener noreferrer" target="_blank">Interactions</a>) components child of the Rounded Mask need the <em>Default UI (Rounded Mask)</em> material to work.</li>
|
||||
<li>All TextMeshPro texts need the <em>TMP SDF-Mobile (Rounded Mask)</em> material inside the TMP_FontAsset that needs to work with the rounded corners. If your text is only clipped on the straight edges of the mask, they don't need to be changed.</li>
|
||||
<li>You will need one <em>Default UI (Rounded Mask)</em> material per RoundedRectMask2D radius configuration. If you always use the same corners throughout your project, you can use the Material provided in the package. Same for the TMP_FontAssets.</li>
|
||||
<li>If you have different radii in your project, either <strong>duplicate the materials</strong>, or tick the checkbox <strong>Clone maskable materials on Start</strong> to automatically create new instances of the materials (for both Default UI & TMP_FontAsset's material).</li>
|
||||
</ul>
|
||||
<h3 id="limitations">Limitations</h3>
|
||||
<ul>
|
||||
<li>As Rounded RectMask2D uses a special UI shader to work, it can only be used with normal UI (ie: Images with no special material). If you have custom UI shaders for your UI you will need to tweak them to support the RoundedRectMask2D component (otherwise the corners will not be correctly clipped).</li>
|
||||
<li>Moreover, you will need one Material per corners configuration. If you always use the same values, you can use one Material for all of your UI, but otherwise, RoundedRectMask2D can auto instantiate your materials at runtime, allowing you to have any mask values.</li>
|
||||
<li>Softness doesn't work with RoundedRectMask2D. If you need softness in your mask, you will have to use both RoundedRectMask2D & a regular RectMask2D nested into each other.</li>
|
||||
</ul>
|
||||
<h3 id="custom-shaders">Custom Shaders</h3>
|
||||
<p>If you have custom UI shaders and would like them to work with the RoundedRectMask2D component, you will need to edit them, to support the feature. You can check how it's done in the custom Shaders (UI Default & TMP_SDF Mobile). <br />
|
||||
Here is what you need to do:</p>
|
||||
<ol>
|
||||
<li>Either move your shaders to the AntoineCherel/RoundedRectMask2D/Shaders folder, or copy & paste the <em>RoundedMaskCommon.hlsl</em> library to your custom shader's folder</li>
|
||||
<li>in the <em>Pass</em>, include the library <br />
|
||||
<code>#include "RoundedMaskCommon.hlsl"</code></li>
|
||||
<li>in the Vertex to Fragment or Vertext to Pixel struct, add <br />
|
||||
<code>float3 posLocal : TEXCOORD8;</code></li>
|
||||
<li>fill it in the V2F or V2P function <br />
|
||||
<code>OUT.posLocal = v.vertex.xyz;</code></li>
|
||||
<li>in the frag or pixel return function, replace the existing clipping method by<br />
|
||||
<code>clip( RMUnityUIClipRect(IN.posLocal.xy, _ClipRect, _ClipRectRadii) - 0.5);</code><br />
|
||||
all of these added lines should be encapsulated inside <code>#ifdef UNITY_UI_CLIP_RECT</code> statements.</li>
|
||||
</ol>
|
||||
<p>If something goes wrong double check with the implemented shaders inside the Shaders folder.<br />
|
||||
You can also reach out to me contact (at) antoinecherel.dev</p>
|
||||
<h2 id="credits">Credits</h2>
|
||||
<p>Unity Plugin, developped by <a href="https://www.antoinecherel.dev/" target="_blank">Antoine Cherel</a></p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user