2024-05-12 17:20:19 +02:00

126 lines
8.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Proxima Inspector</title>
<link rel="icon" href="../icons/favicon.ico" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<meta property="og:type" content="website">
<meta name="description" property="og:description" content="Proxima Inspector lets you connect to your live game from a web browser to inspect and edit any property. Just like the Unity editor!">
<meta name="image" property="og:image" content="../images/proxima-1200x630.png">
<meta http-equiv="content-security-policy" content="">
<link href="../_app/immutable/assets/_layout-1f0a7e97.css" rel="stylesheet">
<link href="../_app/immutable/assets/_layout-6847360b.css" rel="stylesheet">
</head>
<body>
<div>
<div class="flex flex-col items-center text-gray-300 w-full min-h-screen bg-[#222]"><div class="flex w-full justify-center items-start bg-[#111] text-white fixed z-20"><div class="flex grow justify-between items-center max-w-[1600px] p-4"><a href="https://www.unityproxima.com"><img src="../images/proxima_logo.png" class="w-[150px]" alt="Logo"></a>
<button class="lg:hidden"><img class="w-10" src="../icons/menu.png" alt="Menu"></button>
<div class="flex gap-10 items-center max-lg:hidden">
<a href="https://assetstore.unity.com/publishers/72095?aid=1101lqSYn" class="text-xl font-logo" referrerpolicy="origin" target="_blank" rel="external">Store</a>
<a href="https://app.unityproxima.com/connection" class="text-xl font-logo" referrerpolicy="origin" target="_blank" rel="external">Demo</a>
<a class="text-xl font-logo" href="../docs.html">Docs</a>
<a href="https://discord.gg/VM9cWJ9rjH" class="" referrerpolicy="origin" target="_blank" rel="external"><img width="100px" class="mt-1" src="../icons/discord.png" alt=""></a></div></div>
</div>
<div class="pt-[83px] w-full h-full flex flex-col items-center"><div class="w-full flex flex-col items-start min-h-screen max-w-[1600px] px-4"><button class="text-white font-body pt-5 lg:hidden">Go to page &gt;</button>
<div class="flex w-full min-h-full relative"><div class="h-full fixed border-r-orange-400 bg-[#222] border-r-2 max-lg:hidden"><div class="flex pt-10 flex-col w-[300px] gap-2 border-[#21a6f0] min-h-0 h-full overflow-auto"><b class="text-orange-400">Getting Started</b>
<a href="../docs.html" class="svelte-yue6wq">Installation</a>
<a href="../docs/features.html" class="svelte-yue6wq">Feature Overview</a>
<b class="text-orange-400 mt-5">Connection</b>
<a href="../docs/supported_platforms.html" class="svelte-yue6wq">Supported Platforms</a>
<a href="../docs/connect.html" class="svelte-yue6wq">Connect to Your Game</a>
<a href="../docs/security.html" class="svelte-yue6wq">Security Considerations</a>
<a href="../docs/all_config.html" class="svelte-yue6wq">All Configuration Options</a>
<b class="text-orange-400 mt-5">Inspector</b>
<a href="../docs/inspector.html" class="svelte-yue6wq">GameObject Inspector</a>
<a href="../docs/buttons.html" class="svelte-yue6wq">Adding Buttons</a>
<a href="../docs/faq.html" class="svelte-yue6wq">Frequently Asked Questions</a>
<b class="text-orange-400 mt-5">Logs</b>
<a href="../docs/logs.html" class="svelte-yue6wq">Log Viewer</a>
<a href="../docs/viewing_logs_offline.html" class="svelte-yue6wq">Viewing Logs Offline</a>
<b class="text-orange-400 mt-5">Console</b>
<a href="../docs/console.html" class="svelte-yue6wq">Console Window</a>
<a href="../docs/console_built_in.html" class="svelte-yue6wq">Built-in Commands</a>
<a href="../docs/console_custom.html" class="svelte-yue6wq">Custom Commands</a>
<b class="text-orange-400 mt-5">Extras</b>
<a href="../docs/deeplinks.html" class="svelte-yue6wq">Deep Links</a>
<div class="h-[200px] shrink-0"></div></div></div>
<div class="flex flex-col w-full lg:pl-10 py-10 lg:ml-[300px]"><div class="doc flex flex-col gap-5 svelte-yue6wq"><h1>Connect to Your Game</h1>
<h2>Building your Game with Proxima (non-WebGL)</h2>
<ul class="list-decimal ml-5 leading-8"><li>Add an empty GameObject to your scene and add a Proxima Inspector component.</li>
<li>Assign a 4 or 5 digit port number that is not already in use on your target device.</li>
<li>If you want your connection to be encrypted, <a href="../docs/security.html">enable HTTPS</a>. <b>This is required for Android and iOS.</b></li>
<li>Your Proxima Inspector component should look something like this:
<img class="p-5" src="../docs/device-config.png" alt="Proxima Component Configuration"></li>
<li>Build, deploy, and run your game.</li></ul>
<h2 class="text-zinc-100 text-xl mt-5">Connecting to Your Game (non-WebGL)</h2>
<ul class="list-decimal ml-5 leading-8"><li>Ensure that both the device running your game and the device running your browser are connected to the same local network.</li>
<li>If you&#39;ve enabled the &quot;Instantiate Connect UI&quot;, you can click the Proxima icon and click &quot;Open in Browser&quot;. Otherwise:</li>
<li>Navigate to <b>http://[your-ip-address]:[port]</b>. <a href="#ipaddress">How do I find my device&#39;s IP address?</a></li></ul>
<div class="bg-gray-800 p-5 text-zinc-300">If you&#39;ve enabled HTTPS, your browser may warn you that Proxima&#39;s certificate is not trusted. It is ok to bypass this warning if you&#39;re connecting to your device&#39;s IP directly on your local network.
See the <a href="../docs/security.html">Security Considerations</a> page for more information.
</div>
<h2 class="text-zinc-100 text-xl mt-5">Building and Connecting to Your Game (WebGL)</h2>
<ul class="list-decimal ml-5 leading-8"><li><b>WebGL</b> builds connect directly through a BroadcastChannel in the browser. The port and HTTPS options are not used.</li>
<li>This also means you cannot connect to WebGL builds remotely. You must connect in the same browser that is running the game,
and you must use the same URL origin.
</li>
<li>If you&#39;ve enabled the &quot;Instantiate Connect UI&quot;, you can click the Proxima icon and click &quot;Open in Browser&quot;. Otherwise:</li>
<li>Navigate to <b>http://your-game-address/path/to/game/<span class="text-yellow-600">StreamingAssets/Proxima/index.html</span></b></li></ul>
<h2 id="ipaddress" class="text-zinc-100 text-xl mt-5">How do I find my device&#39;s IP address?</h2>
<p>If you checked <b>Instantiate Status UI</b> on the Proxima Inspector component, your device IP will be displayed at the bottom of your game.</p>
<img src="../docs/status-ui.png" alt="Proxima Status UI">
<p>Alternatively, you can also find your device&#39;s IP address by:</p>
<ul class="list-disc ml-10"><li>Windows: In the command line type: <div class="ml-5 text-orange-400 font-mono">ipconfig | findstr /C:&quot;IPv4 Address&quot;</div></li>
<li>macOS: In the terminal type: <div class="ml-5 text-orange-400 font-mono">ifconfig getifaddr en0</div></li>
<li>Android: Go to &quot;Settings &gt; Wi-Fi Settings &gt; ... &gt; Advanced&quot; and scroll to the bottom.</li>
<li>iOS: Go to &quot;Settings &gt; Wi-Fi &gt; Your Wi-Fi&quot; and scroll down.</li></ul>
<h2 class="text-zinc-100 text-xl mt-5">Troubleshooting</h2>
<p>If you&#39;re unable to connect to Proxima, check the following:</p>
<ul class="list-disc ml-10"><li>Your game is running (not paused or in the background).</li>
<li>Both devices are on the same network.</li>
<li>The chosen port is open on the device.</li>
<li>Your device&#39;s firewall is not blocking the chosen port.</li>
<li>Your router&#39;s firewall is not blocking the chosen port.</li>
<li>For WebGL builds, you are using the same browser as the game and the same URL origin.</li></ul></div></div></div>
</div>
<div class="h-[200px] flex flex-col"><p class="text-gray-400 m-10">© 2023 Virtual Maker Corporation</p></div></div></div>
</div>
</body>
</html>