Surface Views for Mobile Platforms
Having Coherent UI view on a surface for iOS and Android was probably one of the most requested features of Coherent UI. The reason we didn’t have it from the start was that the limitations of the mobile platforms and devices made it too expensive to be usable. Now, our tests show that it takes about 20ms for a 512×512 texture, which makes it work well enough for static views and rarely changed views such as billboards and displays.
Starting from version 1.8.0.0 Coherent UI has support for views on surfaces inside Unity3D. These views are called SurfaceViews.
Creating a SurfaceView
Creating and using a SurfaceView takes just three steps:
- Add the MobileSurfaceView component to the surface.
- Set the URL for the view, its size and whether it is transparent or not.
- Call the UpdateView() method of the component whenever you need to update the surface in Unity3D to match the view.
The MobileSurfaceView component will create a texture with the same size, add it to the object and update it every time the UpdateView() method is called.
Here is a method that modifies the view by executing a JavaScript function and updates the texture
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public void SetColor(string color) { var surfaceView = GetComponent<MobileSurfaceView>(); if (surfaceView != null && surfaceView.View != null) { var color = string.Format("setColor('{0}');", color); surfaceView.View.ExecuteScript(color); surfaceView.UpdateView(); } } |
Forwarding touches to a SurfaceView
One of the very first questions we got for the surface views was how to make them respond to touch events. So I did a little sample that allows playing a mini-game on a rotating pane. Having touch events forwarded to a SurfaceView requires to compute the point of the touch in view coordinates and send it to the view via a simple JavaScript function. Here is a sample MonoBehavior that can be attached to the game object containing the SurfaceView and whenever the object is touched, makes a raycast from the camera to get the texture coordinates of the touch in the view and forwards it using a simple global touch(x, y) function that takes the coordinates of the touch event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
public class SurfaceInput : MonoBehaviour { [SerializeField] public Camera m_Camera; void OnMouseDown () { RaycastHit hitInfo; if (Physics.Raycast(m_Camera.ScreenPointToRay(Input.mousePosition), out hitInfo)) { var collider = hitInfo.collider.gameObject; var surfaceView = collider.GetComponent<MobileSurfaceView>(); if (surfaceView == null) { surfaceView = collider.GetComponentInChildren<MobileSurfaceView>(); } if (surfaceView != null && surfaceView.View != null) { var touchX = (int)(hitInfo.textureCoord.x * surfaceView.Width); var touchY = (int)(hitInfo.textureCoord.y * surfaceView.Height); surfaceView.View.ExecuteScript(string.Format("touch({0},{1})", touchX, touchY)); } } } } |
Here is the implementation of the touch function – it gets the HTMLElement that is on the supplied coordinates and generates a mouse click event:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function touch(x, y) { var tile = document.elementFromPoint(x, y); if (tile !== undefined) { var clickEvent = document.createEvent('MouseEvent'); clickEvent.initMouseEvent('click', true, true, window, 0, x, y, x, y, false, false, false, false, 0); tile.dispatchEvent(clickEvent); engine.trigger('updateView'); } } |
At the end – it triggers the updateView event in order to tell us that the MobileSurfaceView needs to be updated.
You can try the some yourself by downloading it from here and importing the unitypackage in a project with Coherent UI.
Sample preview of mobile surface views
Find out more Coherent UI tutorials Here 🙂
Follow Dimitar on Twitter: @DimitarNT
