🤑 Indie game store🙌 Free games😂 Fun games😨 Horror games
👷 Game development🎨 Assets📚 Comics
🎉 Sales🎁 Bundles

Let's talk about the Superpowers UI

A topic by pixelrobin created May 22, 2016 Views: 586 Replies: 11
Viewing posts 1 to 5
(Edited 4 times) (+1)

Superpowers' UI

Superpowers is a great engine (specifically superpowers-game). I started using it just to mess around a bit and now I can't go back to what I've been using before. It taught me how to use HTML5 and WebGL in a friendly way, very much unlike other HTML5 engines I've tried.

But the ui if superpowers needs more work. In terms of usability, I think it's great, solid and straightforward. However, it's presentation could use some work.

I think it has a lot of potential, and the cute little icons for assets and buttons definitely set it apart from other engine's flat, boring icons. I love the attitude it has, but it's rough in a lot of edges. Here are some changes I propose.


There are unnecessary borders and misaligned sections everywhere. The gray dock doesn't align with the tab strip (A personal pet peeve :D). Things just feel out of place. I think more work should be put in making the different parts of the editor itself flow together better.


I think the component editor needs work. As of now, it gets the job done but it can be confusing with so many properties to edit. expanding a component can make the scrollbar appear, offsetting all the buttons. I'm not sure 100% how it could be made better, but I think it can. Perhaps somehow, there could be a way to integrate it into the Actor hierarchy itself?

Scene Editor Menu

The scene editor would look better with some proper icons. The text and radio buttons work, but they're just plain and boring. Adding some icons for most actions instead of text would fit the aesthetic better and give more room to edit the scene, as icons take less space than words.


Probably won't help in any useful way, but would make things look cooler :). Adding tweens to the tabs and asset trees when they're moved, etc. Would give the program a bit more personality.

Custom Themes

A huge one. Having support for easily created custom themes is a must-have for any application. I think this could work as a single CSS doc that the entire program pulls it's stye information from or something along those lines. However, if there will be no support for custom themes, there could at least be an option for dark mode for late night superpowers sessions.

These are the things that I could think of at the top of my head. Sorry if I sounded rude or harsh anywhere, that's not the tone I'm going for :). I would like to hear everybody's thoughts and feedback on this subject. Let's extend the conversation!

Elisee and Bilou have a lot on their hands, so is anyone willing to contribute to this effort? I'm going to be busy, but I want to work on it as soon as I can, as long as people are for it.

EDIT: Here is the trello for this topic. If you would like to contribute, please fill out the short form linked in the trello page.


Hi, I am new with SuperPowers and I do agree with you. This engine is already great and with some support it can become a huge one.
I am still discovering it so I cannot be very helpful for now, but I definitely want to give a hand when I'll feel confortable enough with it.
For the custom themes topic I guess the actual theme is in core/public/styles. I think the easiest way to achieve it is to use SASS. Like that you can expose variables (for the colors for examples), so that you can easily try and create new themes.
The editor should also be customisable depending on the theme, for that I would definitely recommend ace, if it is not already the case.
But I don't think custom themes is the main issue for now...

No they're not the main issue, but they're still important. Thanks for your interest! I'm not too accompanied with the guts of superpowers too much myself, so I think I'm in a similar position as you :p.

(Edited 1 time) (+1)

It's definitly something Superpowers could improve upon. Tooltips could also be used to make the tool more approchable for new users. I also hope they will improve the Scripting API to make it more formal and less Javascript-y.

Imo, there is room for a lightweight (ligther than Unity) game-engine for prototyping and producing game with small web build.


Hi, I'ms also quite new with superpowers and haven't had the time to fully explore all the features it has to offers, but I totally agree what have been said by you guys.

Also I find GrandSchtroumpf's idea about getting a easier way to customize the UI by creating easily new theme more interesting than just adding statics new ones.

Finally, and I talk as a graphic designer, I think that this engine have to use his "outside the box" look as far as possible, compared to others (enven non web) engine it's a big plus. If the possibility to easily customize the editor & UI (like in Zbrush) is added (while keeping his user-friendly design), it will be far more friendly for those who are more into graphic creation than development.

I don't know if my advice is very usefull because far less precise than the other but I will post others feedbacks as soon as I have new ones !

(Edited 1 time)

Is there any tutorial where we can find what is each directory of the "core" ? It would be very helpful for us to start building something. The description on the github of each repository is not so explicit.
Here is the trello of the team (it would be stupid to duplicate what they are already doing) : https://trello.com/b/eQUeNKrq/superpowers

There isn't a tutorial, but I'm pretty sure the main devs would be happy to answer any questions. I asked a lot so far from Elisee and didn't get yelled at or told to leave.... yet.

Ok, I will explore that deeper and see if we can make some README for each subdirectory.
What about starting a Trello to put on what we should work ?

Yes, a trello would be useful. Do you have the paid account? I don't :p

No... I don't. I have create an Asana project instead, but the problem is that you need a (free) account to see it. We can use it, or Trello.
Here is the URL : https://app.asana.com/0/135850392389025/1358503923...
If one of the founders wants to join us to help us to understand the core content of Superpowers it would be cool =)

(Edited 2 times)

In that case let's just use trello to keep things simple. It's ok if it's public. Here's one I made. What is your username?


Ok let's do that : Grand_Schtroumpf