HeavenStudio/Assets/Auto Letterbox/Documentation/Help.html
minenice55 8d571f6443
Icon Improvement Concept & Resizeable Window (#104)
* Editor: mostly PoC icon effects

* slightly more responsive selection

* resizeable window

game camera still doesn't letterbox properly, will need a bit more work

* letterbox both in editor and in fullscreen

* restore camera rects when returning to editor
2022-06-13 22:24:41 -07:00

186 lines
11 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Letterbox Ratio Doc</title>
<style type="text/css">
body {
border: none;
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
line-height: 1em;
color: black;
background-color: #fdf9f1;
display: block;
}
</style>
<script language="javascript"> function toggle(togglableText, title) {
var ele = document.getElementById(togglableText);
var text = document.getElementById(title);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
} </script>
</head>
<body>
<h1 style="text-align: center;"><span style="font-family: Helvetica,Arial,sans-serif;"></span>Auto Letterbox Plugin</h1>
<div style="margin-left: 40px;">Welcome to the Auto Letterbox Plugin, for fixing your Camera Aspect Ratio! The fastest way to get started is to go to the <span style="text-decoration: underline;"><span style="font-weight: bold;">GameObject</span></span>
menu and click <span style="text-decoration: underline;"><span style="font-weight: bold;">Create Force Camera Ratios Object</span></span>.<br>
This will set your scene up for displaying in a set
ratio (<span style="font-style: italic;">Target Viewport
Ratio</span>) by creating Letterboxes to fit your Screen. You can
edit the system using the 'Force Camera Ratios' GameObject you've just
created.<br>
<br>
This documentation will delve into the rest of the options you have on
the Component.</div>
<p style="text-align: center;"><img style="border: 1px solid ; width: 1101px; height: 546px;" alt="" title="Clicking the &quot;Create Force Camera Ratios Object&quot; Button under the GameObject Menu is the fastest way to get started" src="Imgs/CreatePic.png" hspace="3" vspace="3"></p>
<table style="width: 90%; height: 166px; text-align: left; margin-left: auto; margin-right: auto;" border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>
<h2 style="text-align: left; margin-left: 40px;"><a style="font-family: Helvetica,Arial,sans-serif; color: rgb(127, 118, 102); font-weight: bold;" id="displayText1" href="javascript:toggle('toggleText1', 'displayText1');">Standard
Use</a></h2>
<div id="toggleText1" style="display: none;">
<div style="text-align: center;">
<div style="text-align: left;"><img style="width: 356px; height: 76px; float: right;" alt="" src="Imgs/Setup.png">&nbsp;&nbsp;&nbsp; <span style="font-weight: bold; text-decoration: underline;">Target
Viewport Ratio<br>
</span>A Vector2 which sets the Viewport ratio for all
Cameras. You can set this using the provided interface or access this
publically and safely in code. The default is 16:9.<br>
<br>
&nbsp;&nbsp;&nbsp; <span style="text-decoration: underline;"><span style="font-weight: bold;">Ratio on Awake<br>
</span></span>Forces each Camera Viewport to a
re-calculated Viewport when this components' <span style="font-style: italic;">Start()</span> function
runs at
the start of the scene. By default this is on as other-wise you would
have to call <span style="font-style: italic;">CalculateAndSetAllCameraRatios()</span>
through your own code (though
this function can be called at any time).<span style="text-decoration: underline;"><span style="font-weight: bold;"><span style="text-decoration: underline;"><span style="font-weight: bold;"><br>
<br>
</span></span></span></span>&nbsp;&nbsp;&nbsp;
<span style="text-decoration: underline;"><span style="font-weight: bold;">Ratio in Realtime</span></span><br>
Forces each Camera Viewport to recalculate its Viewport every frame.
This is useful if you wish to change the <span style="font-style: italic;">Target Viewport Ratio</span>
in real
time or if you allow the user to resize the Game window.</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 style="text-align: left; margin-left: 40px;"><a style="font-family: Helvetica,Arial,sans-serif; color: rgb(127, 118, 102); font-weight: bold;" id="displayText2" href="javascript:toggle('toggleText2', 'displayText2');">Letterbox
Camera</a></h2>
<div id="toggleText2" style="display: none;">
<div style="text-align: center;">
<div style="text-align: left;"><img style="width: 367px; height: 49px; float: right;" alt="" src="Imgs/AutoCreateBorderCam.png"> The Letterbox Camera
renders the bars at the sides of the screen which appear when
the&nbsp;<span style="font-style: italic;">Target
Viewport Ratio</span> doesn't match the screen ratio. Not having
a Letterbox Camera could cause ugly artefacts when changing the screen
size or altering the camera ratio.<br>
<br>
There are two ways of creating a Letterbox Camera:<br>
&nbsp;&nbsp;&nbsp; <span style="text-decoration: underline;"><span style="font-weight: bold;">Automatically Create Border Camera<br>
</span></span>When <span style="font-style: italic;">Create Border Camera</span>
is true a Letterbox Camera will automatically be created on <span style="font-style: italic;">Start()</span> at a depth
of -100 and render to a color of your choosing. This is the default
option.<br>
<br>
<img style="width: 367px; height: 48px; float: right;" alt="" src="Imgs/CustomBorderCam.png">&nbsp;&nbsp;&nbsp;
<span style="text-decoration: underline;"><span style="font-weight: bold;">Custom Letterbox Camera</span></span><br>
When <span style="font-style: italic;">Create Border
Camera</span> is false you must assign your own in-scene Camera
to be a Letterbox Camera. This Camera will be ignored by the <span style="font-style: italic;">FindAllCamerasInScene()</span>
function so you can do whatever you want with it's viewport. This is
useful if you want to do something clever with your Letterbox bars like
render an image in the empty space (For an example try the <span style="font-style: italic;">Bitey Dragon</span> Demo
scene included with the package.)</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 style="text-align: left; margin-left: 40px;"><a style="font-family: Helvetica,Arial,sans-serif; color: rgb(127, 118, 102); font-weight: bold;" id="displayText3" href="javascript:toggle('toggleText3', 'displayText3');">Managing
your Cameras</a></h2>
<div id="toggleText3" style="display: none;">
<div style="text-align: center;">
<div style="text-align: left;"><img style="width: 360px; height: 67px; float: right;" alt="" src="Imgs/AutoSeekCameras.png">&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold; text-decoration: underline;">Auto
seek Cameras<br>
</span>When <span style="font-style: italic;">Auto
seek Cameras</span> is true, the <span style="font-style: italic;">Force Camera Ratios</span>
component will search for cameras in your scene on <span style="font-style: italic;">Start()</span> and apply
the same Viewport anchor&nbsp;to each. This is the default setting.<br>
<br>
&nbsp;&nbsp;&nbsp; <span style="text-decoration: underline;"><span style="font-weight: bold;">Manual Camera Managment</span></span><img style="width: 360px; height: 340px; float: left;" alt="" src="Imgs/FinAllCameras.png"><br>
When <span style="font-style: italic;">Auto seek Cameras</span>
is false, you may manually assign and manage each Camera that needs
Letterboxing. The <span style="font-style: italic;">Find
All Cameras in scene</span> button will call <span style="font-style: italic;">FindAllCamerasInScene()</span>
filling the Camera array quickly and defaulting each Camera Anchor to <span style="font-style: italic;">Center.</span><span style="text-decoration: underline;"><span style="font-weight: bold;"><span style="text-decoration: underline;"><span style="font-weight: bold;"></span></span></span></span><span style="text-decoration: underline;"><span style="font-weight: bold;"><br>
<br>
</span></span><span style="font-weight: bold;"><span style="font-weight: bold;">&nbsp; &nbsp; </span></span><span style="font-weight: bold; text-decoration: underline;"><span style="font-weight: bold;"></span>Camera Anchor<br>
</span>The <span style="font-style: italic;">Anchor
</span>enum anchors each camera when its' resized due to a
viewport ratio recalculation. This is useful for when you have multiple
cameras on screen, for example, split screen multiplayer. By setting up
Player one's and Player two's Viewports adjacently and setting their
respective Anchors to <span style="font-style: italic;">Left</span>
and <span style="font-style: italic;">Right</span>,
the plug-in will re-calculate their ratio and seamlessly keep their
Viewports to the left and right of each other. It works similarly to
Unitys' UI Anchoring system.<br>
<br>
(For an example of this in action, try the <span style="font-style: italic;">Multi Camera Demo </span>scene
included with the package.)<br>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h2 style="text-align: left; margin-left: 40px;"><a style="font-family: Helvetica,Arial,sans-serif; color: rgb(127, 118, 102); font-weight: bold;" id="displayText4" href="javascript:toggle('toggleText4', 'displayText4');">Contact</a></h2>
<div id="toggleText4" style="display: none;">
<div style="text-align: center;">
<div style="text-align: left;"><img style="width: 232px; height: 232px; float: right;" alt="" src="Imgs/mug.png">&nbsp;&nbsp;&nbsp; <span style="font-weight: bold; text-decoration: underline;">Stuck?<br>
</span>If you're having trouble or have a question, further
support is available.&nbsp;Feel free to send me an email via <a href="mailto:tom@tomsayshi.com">tom@tomsayshi.com</a>
or tweet at me via <a href="https://twitter.com/Tom_SaysHi">@Tom_SaysHi</a>.<br>
<br>
This document is still a work in progress and your experiences are very
much part of it so don't be shy! Speaking of which;<br>
<br>
&nbsp;&nbsp;&nbsp; <span style="text-decoration: underline;"><span style="font-weight: bold;">Got an Opinion?</span></span><br>
STILL feel free to e-mail me via <a href="mailto:tom@tomsayshi.com">tom@tomsayshi.com&nbsp;</a>or
tweet at me via <a href="https://twitter.com/Tom_SaysHi">@Tom_SaysHi</a>.<br>
<br>
Feedback, good or bad, is always welcome for incorporation into future
updates and products!<br>
<br>
&nbsp;&nbsp;&nbsp; <span style="text-decoration: underline;"><span style="font-weight: bold;">Hey kid, wanna' play some Video
Games?</span></span><br>
I'm just gonna' leave this <a href="http://store.steampowered.com/app/391210/">here</a>.
It's an arena game with laser swords called <span style="font-weight: bold;">Arclight Cascade</span>.
What? It's my docs and I'll plug what I want to!<br>
<br>
<h3 style="text-align: center;"><span style="text-decoration: underline;">Thank you so much for
using the Auto Letterbox Plug-in! I hope you have a swell day!</span></h3>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div style="text-align: center;"><a href="http://tomsayshi.com"><img style="border: 0px solid ; width: 100px; height: 100px; float: right;" alt="" title="Oh to be a smol sensitive boi" src="Imgs/TomRound.png"></a><br>
<a href="http://tomsayshi.com">Written by Tom Elliott 2020</a><br>
tom@tomsayshi.com<br>
<a href="http://littlegrimlight.daportfolio.com/">Bitey Dragon Demo Art by Matthew Seprini</a><br>
</div>
</body></html>