EasyRPG / Editor

Game editor similar to RPG Maker
https://easyrpg.org/editor/
GNU General Public License v3.0
336 stars 59 forks source link

Suggestions - Modernizing Editor's UI #182

Open jetrotal opened 2 years ago

jetrotal commented 2 years ago

Overview

Inspired by the RMUI's concept art , I started drawing some some concept arts for EasyRPG's UI:

image

It's based on Google's Material Design. There's a Qt framework for this kind of design, It's called Qaterial

All Icons came from the https://materialdesignicons.com/ an open-source community that designs multiple icons based on the Material Design Style.

Header

image The header would be simplified, I tried to move all the tools that used to be in the header, closer to relevant panels.

Tilesets Tab

image The drawing tools would be placed vertically, imitating modern Drawing Apps. The zoom options are closer to the Zoom Tool. And the map's tilesets can be changed on the fly.

Layers Tab

image I thought about naming the Layers "Terrain", "Decoration" and "Events", instead of "Lower", "Up" and "Events".

The "Decoration" layer comes with multiple indexes. Those indexes would work as a replacement to blank Events that are just used for decoration, like in the tree decorations bellow: image

Events Explorer Tab

image

A suggestion for a new tool, that let the User list all the events placed on each map, then making it easy to find, edit, copy or remove project's event. It would also include Commons Events.

image Those Transparent icons on the bottom, are a way to separate Blank Events from Events with commands, in case the Decoration Index suggestions can't be used.

Project Tree Tab

image Basically the current Map Tree Tab. With buttons for adding and removing maps

Map Properties Tab

image A live version of the "Map Properties Window". "Save Map" and "Revert Map Changes" are also included.


Those are some thoughts I put over the Editor's UI. Maybe it's too far from what you guys have been planning. But I hope some ideas on it can be considered.

Thanks in advance!

Ghabry commented 2 years ago

This looks really cool. Maybe should really learn qtquick UI stuff compared to QWidgets. More design freedom :)

jetrotal commented 2 years ago

SplashScreeen

Inspired by RM2K Splash screen: image

It consists on a file that displays random pics of community screenshots or fanarts. It uses Koubit001 and TinyUnicode, the same CC fonts used on the newer player splashscreen.

PNG Reference: image image

Editable: SVG File

image image


Icon

I experimented reversing the color fills and the overall shape, so the user could easily distinguish what is what image image player / editor

QML Tests

Basic implementation of the QML Code: image

https://jetrotal.github.io/easyRPG_UI/ https://github.com/jetrotal/easyRPG_UI

It has unnescessary ammount of Javascript, you guys probably know better how to make the code cleaner and dynamic.

ryliejamesthomas commented 1 year ago

The layers and events lists are really neat ideas