Surface Views for Mobile Platforms

by Dimitar Trendafilov February. 20, 14 0 Comment

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:

  1. Add  the  MobileSurfaceView  component to the surface.
  2. Set the URL for the view, its size and whether it is transparent or not.
  3. 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

 

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.

Here is the implementation of the touch function – it gets the HTMLElement that is on the supplied coordinates and generates a mouse click event:

 

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

Tags:
Social Shares

Related Articles

Leave a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.