Demo reel

Play Trailer

Works

Portfolio

Unity plugin: Off Screen Indicator

Asset Store Description

Requires Unity 5.3.2 or higher.

Off Screen Indicator is a plugin for Unity  and easily configurable system to handle UI indicators on-screen and off-screen, it allows to use any sprite, and also rotates the sprite if we are using any arrow image. It can display UI in a Canvas or in 3D World Space for VR (Tested in Oculus Rift).

Coded in C#, object oriented driven, allows code extension to handle other interface different than UI Canvas or world space for VR.We plan to add new features if they are useful for common use, and some customers ask for them. And we are open to help you if you need to understand the code.

unity-web-glSee the the WebGL demo

Package Content

DemoScenes

DemoScript.cs – Example code for demos, show how easily you can add a offscreen arrow in realtime via code.

FPSCanvasTest.unity – Demo Scene, where you can see how it works OffScreenIndicator with a FirstPersonCharacter Standard Asset, and displaying the arrows in Canvas.

FPSVRTest.unity – Demo Scene, using VR (Tested in Oculus Rift DK2) instead of Canvas.

ThirdPersonTopViewTest.unity – Demo Scene, using ThirdPersonCharacter with a cenital top view, and displaying the arrows in Canvas.

Scripts

Core classes.

Scripts / FirstPersonVRCharacter

You can remove this folder if you are not using VR. In this folder you can find the FirstPersonCharacter Prefab modified to work with VR, and display arrows in world space in a given distance to the viewer (easily configurable). The MouseLook is modified to change only character rotation, and pov camera will be moved only with the VR device.

Scripts / Helpers

Convenience methods for debugging.

Sprites

Example sprites used in the demo scenes.

Using the package from scratch

  1. Create empty 3D Project
  2. Import OffScreenIndicator package
  3. Add a plane for the ground
  4. Add a cube to use as target
  5. Create a Canvas adding for example a Text
  6. Create empty GameObject to add Logic
  7. Locate the script OffScreenIndicator/Scripts/OffScreenIndicator.css
  8. Add it as a script component to the empty GameObject
  9. Let’s add one Indicator
  10. Set color and sprites for the Indicator when the target is on screen and off screen, if you don’t set sprite it won’t be displayed
  11. Add the cube as a target, the IndicatorID is the desired element of the Indicators Array
  12. Set the Canvas object in the script component
  13. Press Play, and see how the Indicator in the canvas follows the target
  14. You can force the sprite to rotate pointing to the target
  15. Let’s add the FPSController from Standard Assets
  16. Disable the MainCamera and verify the FPSController Camera is tagged as MainCamera
  17. Move Character Controller and check how the Indicator works
  18. You can change the transition from the onscreen sprite to the offscreen sprite, as the duration
  19. You can change the indicator size and the padding to borders

Adding and removing Indicators in real time

  1. Let’s add a button to add a new target
  2. Create a new script to add the logic for the button
  3. This code is included in the DemoScenes folder
  4. This is the important stuff: the method AddIndicator(Transform target, int indicatorID) adds the indicator of the given transform using the Indicator id.
  5. Now link the button with the script
  6. Let know the script which object to instantiate
  7. Tune the OffScreenIndicator parameters to your needs
  8. You can create all the indicators you want with their given colors, sprites and transitions
  9. You can add an offset applied in the Canvas space (pixel units)
  10. Let’s use a random indicator in the AddTarget script

How to use VR (tested with Oculus)

  1. Locate the prefab OffScreenIndicator/Scripts/FirstPersonVRCharacter/Prefabs/FPSVRController.prefab
  2. Remove the old FPSController. Place FPSVRController on the scene
  3. Go to File > Build Settings > Player Settings > Other Settings and check the Virtual Reality Supported checkbox
  4. The component OffScreenIndicator must have checked the Virtual Reality Supported checkbox
  5. In the scene window you can see the debug information of the OffScreenIndicator, the green plane is where arrows are drawn
  6. Configure VR parameters to prevent the clipping, remember that the UI in VR has to be in the world space

FAQ

When I deploy the apk to an android device, the indicators do not show.

The size of the Canvas must be Constant Pixel-Size, or the resolution of the screen must have the same size of the Reference Resolution, otherwise, the canvas will resize to match the final screen size. This should be  probably the problem, there are some users who already have deployed to Android without any problem. Please, let us know if this is not your problem.

Regarding this stuff, the size of the arrows may vary from one mobile device to another (due to DPI), in most devices is not noticeable, but we plan to address this issue in a next version of OffScreenIndicator.

How can I notice if I’m adding indicators correctly?

You may notice this because you will have child objects attached to Canvas with the name “Indicator”.

 offscreen_pic_02_webIndicators are added correctly, but I can’t see them in scene

Locate the Indicators Gameobjects in the Hierarchy window and double click on them. You should see them in the scene view, confirm that they are inside of the canvas.offscreen_pic_01_web

 If the object is selected, but you yest can not see it, please verify that the color of the image is not transparent.offscreen_pic_03_web

 I can see the indicators, but they go out of screen, and they are not over the desired Gameobject.

The size of the Canvas must be Constant Pixel-Size, or the resolution of the screen must have the same size of the Reference Resolution, otherwise, the canvas will resize to match the final screen size.

offscreen_pic_04_web

If you want to Scale your own UI Canvas elements to all screen sizes and aspect ratios, then you should use Two different Canvas, one of them with your UI which will scale, and the other one with constant Pixel size.

offscreen_pic_05_web

 

Future Features

In this section we will add some possible features to be added to Off Screen Indicator, some of them may not be so necessary, any way they appear here, if we see users interested in those features they will be added.

Screen Proportional indicators size

Actually the size of the indicators are pixel size based, which may lead to problems when focused to mobile devices, due to DPI differences between models.

This feature let OffScreenIndicator display indicators in a a size proportional to screen.

Object Bounds Size

When targets are on screen the indicator resizes to object bounds.

Indicators display distance to camera / player

The Indicators show a text indicating the distance to the targeted object.

Indicators display a label

The indicators show a text indicating a label related to the object.

 

Please fill in this form to ask for any feature that you would need for this package