PowerUI - Powerful HTML/CSS UI Framework


Please note: 1.9 is not available on the Asset Store - to get it, grab the version on the store then enter your Invoice number on the My PowerUI page.

PowerUI - Unity’s most powerful UI framework
PowerUI is a framework for Unity which lets you make interfaces or complete 2D games using standard HTML and CSS. After years of development and thousands of hours of developer time, PowerUI is absolutely jam packed with features.


The King of Performance
PowerUI is fast, and it’s always getting faster. We spent 8 months eliminating Unity’s text API because it wasn’t meeting our performance targets. We are extremely passionate about performance, plus we target the web, so PowerUI was built from scratch by performance experts. We have strict no bloat rules too - the core of PowerUI compiles to less than 500kb and can be stripped down well beyond that.


Every Unity Platform [WebGL unofficial currently]
PowerUI has no external dependencies - it’s all managed C# provided as source code. This means it often “just works” on Unity platforms, like WebGL, before we have even actively supported them. PowerUI works for both Unity Indie and Unity Pro users too. Our main target is Unities most restrictive platform, the web, with the mindset that if it can work there, it can work everywhere. We spent time back-porting PowerUI so it’s known to work in even the oldest Editor versions too.

Supreme Support
We’re proud to provide unbeaten support, night and day, every day, all year round. If you ever have any problems, we’re always here for you and always will be. With a range of more than 20 example scenes, well documented source and clear getting started guides, you’ll find it fun to be learning about what PowerUI can really do, with us as a friendly safety net if you ever get stuck. Plus, PowerUI is based on standard HTML and CSS so you probably even already know how to use it.


Goldmine of Hidden Gems
PowerUI is known for it’s myriad of features and it’s jam packed with epic things you’d never expect in a UI framework too. Go for a stroll through the source tree, or even through the example scenes, and you’ll find things that haven’t been mentioned at all. We simply don’t have the space!

Examples and a sandbox (Old! This will be updated soon): Click here.

Asset store: Click here.

PowerUI website: Click here.

Features

  • Runs on HTML/CSS. Includes some custom CSS properties (e.g. rotate:, scale: ) to make your UI great in Unity.
  • Nitro included! This is a scripting language that looks like javascript and can be used to bring your UI alive in intuitive ways. Nitro can be used for player written scripts too (but not on iOS due to Apple’s TOS).
  • It’s completely dynamic. Stream entire UI’s if you want. Even let players make them too.
  • Provided as fully documented source code.
  • Almost always one drawcall. PowerUI has been built to perform.
  • Live chat support is available (directly to me, the developer). Ask whatever you want and I’ll be more than happy to help!
  • Unity’s most powerful localisation. We care a lot about making games accessible to everybody, no matter what language they speak. PowerUI contains lots of features for making this a breeze.
  • In game world UI support too.
  • Style animations, e.g. document.getElementById(“elem”).animate(“color:#00ff00”,2f);
  • Graphical animations (GIF like) in a compact custom format built for Unity.

If you have any questions, please ask here, try out our live chat or contact us - We’re always happy to help out!

1 Like
  • Post reserved for updates -

We’ve decided to slash the price from $75 to $40!

Stay tuned on the asset store as it might take a few days for this update to take affect. If you’d like it right now at the reduced price, please don’t hesitate to contact us over on the PowerUI site :slight_smile:

On asset store description I read it work just on web player… It works also on mobile platform?

Then it is possible open external HTML URL like Google?

Thanks

Hey kaz!

Yes it does also work on mobile platforms :slight_smile:

It can also load simple websites but it’s not designed to browse the web though due to javascript. As we target the webplayer we can’t simply use a premade javascript engine to run javascript from the web, so have instead built our own. Our engine however runs a custom language called Nitro; that’s a language which looks a lot like javascript and has been constructed to be optimal for use in Unity. But as Nitro isn’t actually javascript, it can’t successfully run javascript code from the web.

I hope that helps! :slight_smile:

All the best,
Luke Briggs

Very clean explanation :slight_smile:

I will buy as soon as possible.

However javascript would be a good component to add.

Thanks

Great, glad I could help! :slight_smile:

I’ll take a look into potentially porting a full javascript engine or alternatively making Nitro as close as possible to it; we’ve got plans for a few Nitro features that should make it much closer in the pipeworks at the moment.

I try to be on live chat as often as possible (most days) over on the powerUI website - if there’s anything else I can do please feel free to let me know; I’m more than happy to help with whatever I can. Alternatively drop messages here or send over an email to luke@kulora.com :slight_smile:

All the best,
Luke Briggs

1 Like

Does it support HTML table layout?

Hi eskimojoe!

Yes it does however it currently requires defining the width of every cell; Due to popular demand this is actively being worked on and will be no longer the case in version 1.4 which is getting released to the store sometime within the next 24 hours :slight_smile:

All the best,
Luke Briggs

I tried this in the sandbox but it doesn’t show anything:
Hello
Hello 2

Any chance of supporting this?

Hey Elecman!

It can currently be done with a span, e.g. Hello, however adding the font tag too should be pretty straightforward so I’ll stick that in there :slight_smile:

Thanks.

Also,
If I have an mp3 file which I link to in the HTML code, can I automatically display a little play/pause button where it shows up?

Yep that would certainly be possible - the html5

Click me!

… The playAudio function (Nitro):

Alternatively, PowerUI supports custom tags so adding the audio tag to run something like the above code when clicked would be quite simple.

I hope that helps! I’m currently on live chat if there’s anything else too :slight_smile:

Thanks! That will do the trick.

Can you improve the text quality? It doesn’t look pixel perfect at times.
1474035--81231--$text result.png

Edit:
Another thing I noticed is that this code produces different results in my HTML editor and PowerUI:

First line.<div>
</div><div>Another line after one blank line.</div>

HTML Editor:
1474035--81235--$edit program.jpg

PowerUI result:
1474035--81236--$PowerUI test.jpg

How can I fix that?

Thanks for adding the color tags by the way. Works perfectly.

Heya!

The text quality depends on which filter mode its using, which is FilterMode.Pixel by default (which if you’ve ever used before is a little hit and miss regarding its results). Try out e.g.

UI.TextFilterMode=FilterMode.Bilinear;

And see how that goes :slight_smile:

As for the
thing, PowerUI expects a block element before the br if it is going to generate a gap (br’s themselves are block elements too). Placing the
after your div should generate the same thing in both the html editor and PowerUI (or alternatively just a double br):

Either:

First line.<div></div>
<div>Another line after one blank line.</div>

Or:

First line.

<div>Another line after one blank line.</div>

Should look the same in both your editor and PowerUI :slight_smile:

The Bilinear filter looks much better :slight_smile:

The line break works great too now. Thanks!

One other thing. My app is mostly 2D GUI based. How can I stop Unity from rendering when nothing on the screen has changed? I want to save some battery. Lowering the frame rate is not really an option because the user input response suffers from that.

No problem! :slight_smile:

PowerUI internally buffers and caches at multiple levels and will only redraw when either your CSS or html actually changes. If it’s idling, it won’t be doing anything at all other than Unity just drawing the mesh on the screen (just like any other 3D mesh) :slight_smile:

General performance notes

If you’d like to make it as performant as possible, the UI rate defines the fastest rate that it will redraw when redraws are required, which is often actually quite a rare thing. In web browsers, these redraw events are called reflow, and standard reflow optimizing for browsers applies to PowerUI too. Something like this kind of thing might be useful to you for just that: https://developers.google.com/speed/articles/reflow.

Following similar lines, pulling properties such as contentHeight from an element will force a reflow to happen if the element is known to require one. Accessing the computed style (element.style.Computed.ContentHeight) does not force reflows, so if you know e.g. the height didn’t change then using computed styles directly can be a little quicker, but this only really applies if you’re doing e.g. a style change and then grabbing the contentHeight rapidly in a loop.

Some things such as changing the color, color-overlay, opacity, scale, translate and rotate etc CSS properties are all post processes and cause no reflow at all in PowerUI, so animating those are brilliant for performance.

As for memory considerations if you’re targeting really low memory devices, PowerUI has the ability to turn off image atlasing (happens automatically). This exchanges GPU/rendering time for lower memory and CPU use - check out UI.RenderMode if you’re interested in that.

In general though, we have been pretty brutal with PowerUI and built it from the ground up with speed in mind, so you can chuck most things at it and it will be fine anyway. I hope that makes sense! :slight_smile:

When Play mode is active, my CPU uses about 6% for Unity, and 0% when not in Play mode. This is when everything is static. So presumably the CPU usage is caused by Unity drawing the mesh on screen. Is there no other trick to force Unity not to draw anything when it is not required? I know that Camera.Render only works with RenderTextures… Perhaps there is another way?

Edit:
Also, does PowerUI have an inertial scrolling feature (not just by using a CSS scrollbar) similar to this?
http://mootools.net/demos/?demo=Drag.Scroll

Edit 2:
I am trying to get the click-to-play-mp3 feature to work. I tried this:

this is an mp3<div onmousedown="playAudio" src="test.mp3"><img src="play.jpg" /></div>

<script type='text/nitro'>
function playAudio(e:UIEvent){

   var audioSrc:string = e.target["test.mp3"];
   var audioFile:AudioClip = (Resources.Load(audioSrc)) : AudioClip;
}
</script>

But I get this error:

Maybe adding a custom tag is a better idea because I have many audio file references and modifying them all by hand and adding a separate function for each of them is too much work. My crappy HTML editor (actually, its a flashcard editor and I don’t have much choice) gives this tag for an mp3 file:

So if I can get that to work without adding extra functions, that would be great. If I have to change the format of the tag, that would be fine, as that can be automated.

I am not sure how to add a custom tag. I must say that I am not a fan of automated API documentation, but that is a personal preference :wink:

Heya!

As for the first question, you can restrict the Unity framerate (Application.targetFrameRate) which allows Unity to leave the screen alone for longer periods of time - I believe that doesn’t work in the editor though, so you could try just having a play around with it and see how it fairs :slight_smile:

The scrolling thing is something quite a few people have actually implemented themselves (someone also sent over a scene containing an implementation and said it could be used in an example scene) - from everything I’ve seen, it’s quite simple to implement directly with element.scrollTo and straight unity input/ PowerUI input - if you’d like some more pointers just let me know :slight_smile:

As for the error, I can first see a small problem on line 6 of the code above:

var audioSrc:string = e.target["test.mp3"];

Should be:

var audioSrc:string = e.target["src"];

The thing in the brackets is the name of the attribute you’d like to pull from the element :slight_smile: E.g. can be used as e.target[“bananas”] - the value obtained being “fruitey!”. The function itself is re-useable because of this.

Also the src=“test.mp3” in your element should have no file type (that’s a slightly wierd Unity thing!) - e.g. src=“test”. Alternatively, strip the file type from within the function (this is what PowerUI does with images).

As for the error, sorry! I didn’t test out the code, but you’ll want to use the overload/ alternative:

Resources.Load(audioSrc,AudioClip);

Making a custom tag - starting from an existing one

If you’d still like to add a custom tag, then the best place to start is by grabbing a copy of an existing one and modifying it to suit your needs - for this case I’d imagine the a tag would be a great place to go from as it has attributes and also a custom click method. You can find it at Your/Path/To/PowerUI/Source/Engine/TagHandlers/a.cs

Copy and paste that to somewhere outside of PowerUI (just incase you update, you won’t want to loose your tags!), and rename it to e.g. sound.cs. For now I’ll assume . Pop it open and change:

  • All cases of “ClickLinkTag” for “SoundTag”.

  • The GetTags() function should return “sound” rather than “a”. You could actually have e.g. “sound”,“audio” here if you’d like to cover multiple tags too.

  • At this point, you’ve got a valid new tag! It’s missing style though, so you could either open up Path/To/PowerUI/Resources/style.html, and copy+paste the ‘a’ selector (search for a{ ), renaming it to sound, or paste it into /Your/Custom/Path/Resources/customStyle.html if you’d like to get it out of the PowerUI folders.

So at this point you’ll have a tag that also has some default styling, but it’s now acting like a link, so time to fix that!

  • Change all mentions of Href and “href” to Src and “src” (or just use ).

  • Look for the “Time to go to our Href” comment (line 56). At this point, you’d load the sound from Src and play it using e.g. Resources.Load(Src). Hopefully, assuming everything went to plan and your computer and/or desk didn’t spontaneously leap out of a window, you should be good to go! :slight_smile:

As for the automated documentation hehe; PowerUI consists of over a megabyte of code spread out over many hundreds of methods, so grabbing all of that method documentation and running it through manually would have been quite the task! :stuck_out_tongue: