Coherent UI - HTML5-based User Interface middleware

Hi everyone,

We are glad to present to you our latest video tutorial and specifically - how to add GUI elements to your game. In this tutorial you'll see a practical example for enhancing your game with a functional user interface using Coherent UI. We'll take the Unity's Stealth project and add a health bar, enemy radar and alarm indicator widgets one by one. As a final step we'll combine all the widgets to complete our new UI and enjoy the game.


After watching this video, you will be able to:

1. Create your own UI elements in your favourite HTML/CSS/JavaScript editor in minutes!

2. Use the tons of already existing JavaScript frameworks to make stunning interfaces with next to no effort!

3. Bring the power of web programming in your game with Coherent UI!

We hope this video was helpful for you and please, stay tuned for more


Links:

Health bar: http://css-tricks.com/css3-progress-bars/

Radar: https://github.com/hakimel/Radar

 

Whoops, appears I have; sorry!

I need them in 3D space and not right on the camera like the HUD.

I can't believe it's that simple. For some silly reason I didn't think to do this, lol. Thank you very much!

Ah, great; yeah I don't think I'll need to use an on-demand view in this case. Thanks again!

 

From the beta announcement for Coherent UI Mobile I saw that it supports WebGL, but I don't seem to be able to get it working on my iPad. Using the desktop everything's fine, but when I build and run on the device it just fails to initialise the WebGL systems. I've tried my own WebGL application, some Three.JS demos, and a page from a beginner's WebGL tutorial and none of them seem to be working.

Am I missing something on either the JS or Unity front to get this working?

 

Hi Molt,

We are going to check that and get back to you.
What version of iOS you have?

 

Hi,

Just to let you know that the fix for this issue is going to be available with the next release of Coherent UI.
It is expected by the end of the month. Please contact us at support@coherent-labs.com if you can't wait until then.

 

Just to let everyone, who is using Coherent UI views with "Supports Click Through" checked on Mac OS X, know that the following issues
will be fixed in the next release of Coherent UI:

• the 3D Axis disappear in the Unity3D editor after starting and stopping the scene.
• the editor crashes on the second running of the scene
• the editor crashes after running the scene and changing the layout of the editor

The next release is expected by the end of the month.

 

Ok, I have my floating scores done and working, but my issue is the material shader when rendering the view on a plane. If I assign my own shader it doesn't seam to matter as it always gets replaced by the internal coherent ui one (IMO it should use the material provided and look for _mainTexture to add the texture, if missing then do nothing), which is transparent diffuse. The issue is I want it unlit. How can I make it use my own material or at least my own shader? Do I need to change this in code after I create the view (hope not, be great if this was a view parameter). I know changing the shader works fine, because as soon as I hit Play I hit Pause, change its shader to transparent unlit, hit unpause, and it's exactly how I want it (not affected by lighting).

Edit: Ok, I changed it with a simple script file, but for the future it'd be great if it'd be able to respect and use the material already set on the plane.

 

It's iOS 6.1.3 running on a '3rd gen' iPad.

 

I'm having an odd issue. If I run my game without Coherent from a clean Unity start, everything is fine. If I load my game with coherent, it starts to run extremely poorly. If I then turn off Coherent, it STILL runs poorly, until I restart Unity.

The only unique thing I'm doing really is socket reads and writes. Maybe they're interfering with the Coherent host thing?

Using Coherent Basic 1.5.3 on Unity 4.2.2 on OSX Mavericks.

 

Hi, we are performing tests on this now. However it is likely a Unity issue not strictly related to Coherent UI. In this thread: http://forum.unity3d.com/threads/20...using-Mac-OS-10-9-(Mavericks)-and-Unity-4-2-2 a lot of people seem to have the same issue you describe with Unity itself.
I'll keep you posted when we have more information.

 

WoW, coherent UI Standard is on sale.. . I have mobile version could I possibly upgrade to standard and only pay the difference? That would be sooo awesome!!

Btw, I have asked this question before but standard was not on sale back then but now it would be a sin not to upgrade ^^

 

Hi everyone,

We are more than thrilled to let you know that Coherent UI Standard package is ON SALE, starting today and available until November 15th.

This is your chance to get our product with 55% off the price and thus pay only $157.50 instead of $350

Buy now!

 

Thanks stoyannk, what's happening exactly describes what they're talking about. Loading more things into memory must exacerbate the issue.

 

I'm on the same situation!

I've asked for that in the Unity Asset Store (as suggested by some Unity members) here:
http://feedback.unity3d.com/suggest...graded-from-lite-to-pro-paying-the-difference

 

We're starting to work on this as well, and I don't see any posts newer than this. I totally understand that libraries can be very expensive - Unity doesn't support runtime loading of mp3 for the same reason.

However, since you're using ffmpeg, it appears that there are open source libraries available for handling mp3. For instance, LAME:

http://lame.sourceforge.net/

is suggested for mp3 on the ffmpeg.org website:

http://ffmpeg.org/general.html#LAME
and http://ffmpeg.org/general.html#Audio-Codecs

Are there technical limitations to building ffmpeg for chromium with LAME? Can you point me at where you're pulling the source files from to build the dll, so I can try building a version with LAME? I have little experience compiling dlls from outside visual studio, but I can at least give it my best shot

 

Awesome to hear about the sale! We want to grab a couple licenses, but I have to go through management to do so. How long is the sale going on?

[Edit: I eventually found a page mentioning that the sale is going on for 15 days. I thought this was a Coherent sale, but apparently it's a Unity thing.

https://www.assetstore.unity3d.com/#/sale ]

 

@Julien.Lynge

The source code for Chromium's FFmpeg library is at http://src.chromium.org/svn/trunk/deps/third_party/ffmpeg/
As of Coherent UI v1.5.4 the revision we use is 203786. See the README.chromium file for instructions on building the library. The ffmpeg.gyp contains different predefined set of configurations (with different codecs available) based on the branding of the build.

Note that the current version of FFmpeg that comes with Chrome is not binary compatible with the one we use, so you can't just replace it anymore.

You should also be aware that building FFmpeg with LAME mp3 support won't save you from having to obtain a licence for using the decoder. The LAME library itself is LGPL, but the encoder/decoder it uses is patented. You can check licensing terms here - http://mp3licensing.com/royalty/software.html .

As for the sale, as you noticed, it's a Unity thing .

 

Does this support UTF-8 char set and display RTL languages correctly? if yes please respond before the offer end

 

Hi mrbdrm,

Yes it does support UTF-8 char. set and does display RTL languages correctly

Cheers!

 

i got it and i love it.
i have a request to add PlayMaker Actions for us artists
HTML and JavaScript are my day job so this is fantastic for me.

 

Hi Guys,

When i start my game, my firewall alerts me for CoherentUI_Host.exe trying to connect some page on github servers. What is this for?

Thanks.

 

Coherent UI does not connect to any github host by itself. Are you trying this on some of our samples - they depend on some JavaScript libraries and WebFonts and might download resources from there. If you experience this in your pages, please check if any of the code that you include doesn't do that.
If the problem persists, feel free to write to support@coherent-labs.com and some of our engineers will help you solve the case

 

I'm upgraded to 1.5.4 and am getting this error, leaving me with a huge apk file on android

java: I: Checking whether sources has changed...
I: Smaling...
I: Checking whether resources has changed...
I: Building resources...
Exception in thread "main" brut.androlib.AndrolibException: brut.androlib.AndrolibException: brut.common.BrutException: could not exec command: [aapt, p, --min-sdk-version, 11, --target-sdk-version, 19, -F, /var/folders/05/bj3799f57dg26pr_f4gs1j540000gn/T/APKTOOL7148059890227672970.tmp, -0, arsc, -I, /Users/sschwirzke/Library/apktool/framework/1.apk, -S, /Users/sschwirzke/Dropbox/Guurgle/Assets/../Temp/CouiApkRepack/res, -M, /Users/sschwirzke/Dropbox/Guurgle/Assets/../Temp/CouiApkRepack/AndroidManifest.xml]
at brut.androlib.Androlib.buildResourcesFull(Androlib.java:358)
at brut.androlib.Androlib.buildResources(Androlib.java:283)
at brut.androlib.Androlib.build(Androlib.java:206)
at brut.androlib.Androlib.build(Androlib.java:176)
at brut.apktool.Main.cmdBuild(Main.java:228)
at brut.apktool.Main.main(Main.java:79)
Caused by: brut.androlib.AndrolibException: brut.common.BrutException: could not exec command: [aapt, p, --min-sdk-version, 11, --target-sdk-version, 19, -F, /var/folders/05/bj3799f57dg26pr_f4gs1j540000gn/T/APKTOOL7148059890227672970.tmp, -0, arsc, -I, /Users/sschwirzke/Library/apktool/framework/1.apk, -S, /Users/sschwirzke/Dropbox/Guurgle/Assets/../Temp/CouiApkRepack/res, -M, /Users/sschwirzke/Dropbox/Guurgle/Assets/../Temp/CouiApkRepack/AndroidManifest.xml]
at brut.androlib.res.AndrolibResources.aaptPackage(AndrolibResources.java:357)
at brut.androlib.Androlib.buildResourcesFull(Androlib.java:336)
... 5 more
Caused by: brut.common.BrutException: could not exec command: [aapt, p, --min-sdk-version, 11, --target-sdk-version, 19, -F, /var/folders/05/bj3799f57dg26pr_f4gs1j540000gn/T/APKTOOL7148059890227672970.tmp, -0, arsc, -I, /Users/sschwirzke/Library/apktool/framework/1.apk, -S, /Users/sschwirzke/Dropbox/Guurgle/Assets/../Temp/CouiApkRepack/res, -M, /Users/sschwirzke/Dropbox/Guurgle/Assets/../Temp/CouiApkRepack/AndroidManifest.xml]
at brut.util.OS.exec(OS.java:93)
at brut.androlib.res.AndrolibResources.aaptPackage(AndrolibResources.java:355)
... 6 more
Caused by: java.io.IOException: Cannot run program "aapt": error=13, Permission denied
at java.lang.ProcessBuilder.processException(ProcessBuilder.java:478)
at java.lang.ProcessBuilder.start(ProcessBuilder.java:457)
at java.lang.Runtime.exec(Runtime.java:593)
at java.lang.Runtime.exec(Runtime.java:466)
at brut.util.OS.exec(OS.java:84)
... 7 more
Caused by: java.io.IOException: error=13, Permission denied
at java.lang.UNIXProcess.forkAndExec(Native Method)
at java.lang.UNIXProcess.<init>(UNIXProcess.java:53)
at java.lang.ProcessImpl.start(ProcessImpl.java:91)
at java.lang.ProcessBuilder.start(ProcessBuilder.java:452)
... 10 more

 

@nikxio,
Thanks for the quick reply! We did end up poking around and came to the same conclusion you did. It's very strange that the mp3 libraries are open source, but you can't actually use them without a license.

We should be able to use LAME without purchasing a license at least for testing and demoing. According to the licensor, up to 5000 copies of a game can be distributed before license fees kick in.

As I understand it, there are licensing fees to use AAC in addition to mp4, and h.264 is free for now but may one day require fees. Is that your understanding too?

 

@Holon777
Maybe for some reason the aapt executable (located in Assets/CoherentUI/Editor/apktool-1.5.2/) that is needed for repacking the APK does not have executable rights? We're not aware of such issue but we will investigate that.

@Julien.Lynge
Both AAC and h264 are patented and require licenses. Cisco have recently open-sourced their h264 implementation and claimed that they will pay the royalties when using it, but it's mainly targeted for WebRTC usage and I haven't read in detail if you can freely use for other purposes. Bear in mind that I'm no lawyer so in the end, you might want to consult someone else before making a decision whether you can or cannot use those formats

 

That was it, as Paul from support suggested

"You can open a terminal window and navigate to that folder, then execute chmod +x aapt" did the trick! I now have correctly sized apk.

How it got in that state I have no clue, but I can move forward.

 

I have Coherent UI running on my Nexus 7 device and everything works fine except for the html input element (including text, email, password,etc...). The first time an html input has focus, it works but once it loses focus all inputs stop working as intended. They don't receive single characters from the keyboard but they can receive strings from the keyboard. For example, pressing the smiley-face key works or swype text works as well. My device is running Android 4.3 and I'm building out to Android 4.2 with API 17. Thanks.

 

Question about caching:

I've been looking into turning off caching for testing of new UI elements. I saw the documentation on CachePath - it makes a lot of sense and seems easy enough to use. However, CachePath appears to only affect disk caching. Is there a way to disable memory caching too, just for the purposes of testing and being able to refresh a Coherent View to update the contents?

 

Hi there,

nice plugin, I enjoy it a lot! Two quick questions please:

1. is there a way to globally disable the info-spam in the console, CoherentUI causes? Yes, I could disable it in my console, but I use it for my own debugging quite a lot and would love to disable Coherent UI's logging to console of info-stuff. Can that be done?

2. for multiple reasons I want to keep NGUI in my project/scenes. As UICamera takes over clickevent-control, is there maybe somewhere an example/experience how you deal with that? Of course the CoherentUIView on my plane in the game view doesn't receive clicks (and focus for that matter) because of the NGUI-CoherenUI-combination. Is there a workaround or do I have to extend the CoherentUIView-plane by a script that takes the click through NGUI and activate the focus of the CoherentUIView?

Thanks!

 

Just updated to latest release and now my console is being slammed by like 50 info messages. I understand the need to debug and have info, but please turn it off by default. It makes it really annoying to debug legitimate issues when I have to wade though a ton of info messages. Stuff like the below.

Code (csharp):

1.  
2. [Coherent UI] (Info) Initializing Coherent UI ver. 1.5.4.1
3. [Coherent UI] (Info) Selected DirectX device info:
4. [Coherent UI] (Info) Device name {\\.\DISPLAY1}, DeviceId {26624}
5. [Coherent UI] (Info) PID: 9148 | 9628 05:01:48.972948 Staring Coherent UI Host ver. 1.5.4.1
6. [Coherent UI] (Info) Coherent UI system initialized successfully
7. etc...
8.  

 

@Avengix
I saw that you opened a ticket in the support system (which is the right thing to do) so we'll keep the discussion there. For anyone else affected by the issue I'm pasting the response from our support engineer:

You need to change the line in the "Assets/Standard Assets/Scripts/CoherentUI/Detail/SystemListener.cs" file:

Code (csharp):

1.  
2. if (!UnityEngine.TouchScreenKeyboard.visible  visible)
3.  

to:

Code (csharp):

1.  
2. bool wasInvisible = !UnityEngine.TouchScreenKeyboard.visible || (CoherentUISystem.Instance.TouchscreenKeyboard == null);
3.  
4. if (!wasInvisible  visible)
5. {
6.     return;
7. }
8.  
9. if (wasInvisible  visible)
10.  

@Julien.Lynge
You cannot disable the memory caching, but the View class has an API for refreshing (Coherent.UI.View.Reload) which accepts a parameter that can ignore the cache.

@Deepestblue, @Krileon
We lowered the log level compared to previous versions since the info for the version and other things is important to know when clients send logs to our support and saves some round-trips Your remarks for spam messages are noted, though, we'll consider lowering the level of other logs so we can stay with the default Info level. In the meantime, you can increase the log level in "Assets\Standard Assets\Scripts\CoherentUI\CoherentUISystem.cs" in the "CoherentUI_Native.InitializeUISystem" call from Severity.Info to Severity.Warning or Severity.Error.

@Deepestblue
Please write at support@coherent-labs for your issue with the lack of focus/clicks. I'm not familiar with the problem, but our support engineers may have tackled the problem already.

 

Hello, I have been trying to get in contact with sales@coherent-labs.com since a week back regarding upgrading my Coherent UI Mobile version but haven't got any response back. Could someone please help me out?

 

That makes sense, but I suggest making it a parameter of the System so we can just adjust it as needed. This would significantly improve the convenience of enabling and disabling logging as needed without you having to make releases to adjust it.

Thanks, worked.

 

That framework is fantastic.
I would like to know some things:

1. Is possible to use ".swf" and ActionScript with Coherent UI + Unity?

2. Is possible to send Friend Requests via Facebook "Request Dialog"? If yes, is there any way to get the response of the request sent?

3. About: SPLASH AND LOADING SCREENS. Is possible put a LoadingBar or a simple Mini-game while the Unity is loading a new Scene? (I am asking this, because when we call the Application.LoadLevel(), the app stays blocked until the new scene is loaded, and even with LoadLevelAsync or Additive this happens).

 

You need to use LoadLevelAsync. CoherentUI is not paused during it. It's what I use and I have a loading screen working perfectly fine through CoherentUI. LoadLevel will pause the game, but this has nothing to do with CoherentUI and is just how that function works.

 

Any news of how CoherentUI works with the new Unity 4.3... any known issues?

 

Hi fanjules,

Coherent UI works perfectly on Unity 4.3 as well

Cheers,

 

Can also confirm it works fine. There is an obsolete warning as shown below though.

Code (csharp):

1.  
2. Assets/CoherentUI/Editor/CoherentUI/CoherentExposeProperties.cs(156,30): warning CS0618: `UnityEditor.Undo.RegisterUndo(UnityEngine.Object, string)' is obsolete: `Use Undo.RecordObject instead'
3.  

 

I'd like to know more information about Coherent UI performance in Unity. For a relatively complex UI, such as an RTS, a game like Sim City, MMORPG, etc., are there optimizations in place to minimize draw calls? How does it compare to Scaleform?

What it comes down to is this: is Coherent UI a good solution for user interfaces if you're looking to push the hardware?

 

As far as I can tell, it's always 1 draw call. I fooled with Scaleform some, and this seems more performant to me. I'm making what equates to an RTS, but on the iPad, so I was also very concerned with performance, and I have not had any issues. UI animations can drop framerate if you're not careful about what you're doing, and extremely large images being moved about is bad (might be an iOS webkit bug), but I've had no issue with health bars etc. following my units around, or the static controls. I'm not done with my game, so take these as impressions rather than fact, but I've been very pleased with the results.

 

Having had the same concerns I simply implemented the same UI (just the main screens and only 2 levels down) with 4 packages: (1) DF GUI, (2) NGUI, (3) ScaleForm and (4) CoherentUI. The learnings for my (!) setup were:

1. DF GUI is fastest in regards to creation, but time is lost because you have to take care of the event handling / input management. Atlas-based, so you can control your draw calls quite well. Highly recommended.

2. NGUI was second slowest in creation, but offers this nice input management system out of the box. Atlas-based, and due to the "live drawcall display" very handy for optimizations. Yet still, overall only recommended if you dig 3D GUIs.

3. ScaleForm ... well, not being a friend of Flash at all, I simply don't like it at all. Plus it was slowest overall to set the GUI up.

4. CoherentUI was the second fastest in creation, but I think that was only due to the fact that I had to refresh some HTML5/CSS3 knowledge, in any further tests it would probably be fastest. I was surprised about the performance. I really couldn't tell a difference between local DHTML in Chrome and the UI in Unity. First I thought I have to preload certain stuff and activate/deactivate on demand, but I could drop even that and could make calls to new ui-pages right when needed. E.g. at first I had instances of CoherentUIViews attached to my units to display their healthbars and names, and later switched it to one instance that would display the data for all units. As different unit types had different ui-pages, I had to reload ui-pages on the fly and didn't notice any lag at all. I haven't tested having lots of images in any ui-screen though except for the main screen which gets loaded at the start anyway, so I can't say anything in regards to that.

Overall the outcome is that for our next bigger project we will use CoherentUI while to finish the current much smaller one as quickly as possible, we will go with DF GUI. The only real negative thing (for us) is that you have seperate assets for your game and the ui. Instancing a 3D-object on the fly and using it e.g. as a rotating indicator next to a description that popped up next to your unit is (to my knowledge) not possible with CoherentUI.

 

Should be possible. You just need to do a little trickery - YOu could render the 3D model on a different layer in Unity so its not affected by scene lighting, physics, etc. Then you could either ensure the 3D model is always in the right position on the screen, or you could use a camera to focus on it and render-to-texture, then display the texture at a specific position on the player camera.
Lots of different ways and solutions there.

 

Yes, you are right about that for sure. Actually what you describe is what I ended up doing when playing around - I left NGUI in my project to use UICamera for the input handling and to film 3D Objects with the NGUI-Camera, and used it as an overlay onto the shelf that was done in CoherentUI.

In my post I meant natively in CoherentUI without doing a kind of secondary UI system/displays yourself.

 

I do really like the idea of building out front end UI stuff with jQuery, since that is basically my day job. Think I might have to check this one out.

 

I have some issues on the Android side. When i make a build of the demo scene MobileInput it runs the app on my testing device with an error browser page saying it can't find the coui://UIresources/etc files. In this case i can see the 3D environment from the scene. Now when i make a build and manually copy and instal the .apk file i get the ui and it response to my input. But there's a white background and i can not see the 3D scene. I'm puzzling for about 2 days now but i can't get it to work right. I'm on a Mac 10.9 with Unity 4.2 and also 4.3 and my testing device is a Galaxy Tab 10.1 with Android 4.0.4

All works great on my iOS devices but i also wan't it to run great on Android devices...

 

@sandolkakos

1. It is possible to embed flash movies in your HTML, you just need the Adobe Flash plugin installed on the client machine.
2. I'm not familiar with the FB API but as far as I can tell it's just JavaScript so there should be no problems doing that
3. You should be able to show a loading screen with LoadLevelAsync as @Krileon noted. We have a small example for a loading screen in the MenuAndHUD demo scene.

@CodeMonkeyCharlie, @Mr Brent

We have 1 draw call in the client process There are, of course, more draw calls in the Coherent UI Host process where all the rendering happens. Coherent UI is based on WebKit and we always use the hardware accelerated compositing. Thus, the optimizations you are looking for are minimizing re-layouts and re-flows on the page. You can find a popular article talking about that here - http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

@wjpeters

Are you using the "Build run" option? We do have an issue with that since a post-build step is required to repack the coui:// resources and remove the unneeded files. Unfortunately, Unity first pushes the non-repacked APK to the device and then executes the post-build step. There are no suitable events in the Unity pipeline that we can attach to to prevent this. The workaround is to either use "Build" and install the APK manually using the adb shell or make an Eclipse project.
As for the transparency, did you make sure you ticked the Is Transparent checkbox in the Inspector? You should also make the background of your HTML transparent using "rgba(0,0,0,0)" for example.

 

Hello,

We are using AngularJS for HTML development and need to know more about the coui:// protocol so that we can properly deploy to device.

AngularJS uses a location service that provides a system of application routing and URL rewriting, which appears to work okay in Play Mode in Unity but not when built to a (iOS) device.

http://docs.angularjs.org/guide/dev_guide.services.$location

@nikxio are there any guidelines or specific recommendations for how best to use coui:// in this context, so that we can get the build working on the device? Any further info on how coui works would be very helpful.

Happy to post more info soon.

 

For iOS in particular, we're using the NSURLProtocol class to reroute coui:// links.

If you have a simple example of what you're trying to do and what's not going as expected, you can open a ticket on our support system (mail to support@coherent-labs or use http://coherentlabs.zendesk.com) so we can investigate the issue quicker

 

@nikxio Thanks for your quick response!

I can workaround the Unity "Build and Run" option. Thanks for clearing that up

The Transparent checkbox is checked and the background of the HTML is transparant. But the end result on Android has a white non transparent background. I used the sample scene (MobileInput) from your package and no changes were made. On iOS there is no white background only on Android.

 

Thanks, I've just created a support ticket with a sample file. Looking forward to further correspondence.

Thanks for the prompt response!