186 lines
11 KiB
HTML
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 "Create Force Camera Ratios Object" 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"> <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>
|
||
|
|
<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>
|
||
|
|
<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 <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>
|
||
|
|
<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">
|
||
|
|
<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">
|
||
|
|
<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 to each. This is the default setting.<br>
|
||
|
|
<br>
|
||
|
|
<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;"> </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"> <span style="font-weight: bold; text-decoration: underline;">Stuck?<br>
|
||
|
|
</span>If you're having trouble or have a question, further
|
||
|
|
support is available. 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>
|
||
|
|
<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 </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>
|
||
|
|
<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>
|