Hi all!

Good progress on the editors redesign!

So far, Character, NPC, and items editors has been already remade using the embeded browser!

NPC editor

Character editor

Item editor

Using Unity UI, this work took me 20-30 hours in total, but using HTML and CSS, took me like 15~ hours in total, because I didn't need to handle prefabs, components, scripts, etc. Everything is in simple .html files!

Let's get more detail into the UI itself:

Attributes card

Almost every editor share this card. This is to edit simple attributes.

It was fairly easy to do, no problems or difficulties.

In the case of the NPC editor, I had to add another tab for parameters, so, because of that, a scrollbar was needed, getting a little "ugly". But oh well, I'll fix that another day.

Actions and patterns card

I like how these looks.

A green button to add new elements, a little arrow indicating the order for elements, and little buttons on each card for edit, delete, and modify the order.

Actions sets are functionalities/scripts that every NPC/Item/Character has, and movement patterns (Exclusive to NPCs) is how the NPC move, depending on stages, variables, and other actions. I'll talk in detail about these two another day.

Sandbox

And last, this is the sandbox. I'll talk in more detail about this another day, but this is basically a place to play with NPCs, players, etc. You can move them, copy them, place items and tiles.

Simple card to spawn everything, and a little menu in the top right to select the mouse action

Sidenav

I've also added some elements to the sidenav. Temporal icons, as I used the material ones, but I wanted some custom ones.Challenges

The biggest challenge here was the "components".

Let me explain:

The bad part of this way of doing UI, is that you only have HTML. You don't have fancy templates.

So I have 2 ways of doing this:

• Creating a simple HTML file with everything -> Lot of repeated code
• Creating separated HTML files, and loading them, either through iframes, or using jquery.

Iframes are ugly, and you have to specify a width and a height. So I choose the jquery option.

Using the load (https://api.jquery.com/load/) function, I could load "templates" of HTML, and pass parameters using jQuery.

That is great, because I had the goods of having a "template" system.

What was the problem? I needed to nest multiple components that were the same.

For example, there is a "Condition" type, that is basically and "Or", so that condition would be true, if any of the children conditions are true, and that requires to nest "ConditionEditor" components. Each component has the same IDs, the same function names, but need to edit their own views.

The solution? Give each HTML an unique ID, and append to each view ID, that unique ID. #condition-list would be #VIEWID-condition-list. The same happened to the functions. RefreshConditionList() would be VIEWID_RefreshConditionList()

That solved the problem.

Roadmap status

 So far, we did a good progress this week

Some atlas:

• Not done
• In progress
• Done
• Big change/phase/stage

• Editors UI Redesign
  • NPC editor
  • Character editor
  • Item editor
  • Map editor
  • Actions editor
• Resource packs
  • Config file definition
  • Loader/Binder class in C#
  • Visual editor
  • Interactive tile
• Things not in the roadmap/Pending to break down
  • HUD editor
  • Map events system  
  • Map editor improvements  
  • Sandbox system  
  • Simple addons  
  • Procedural and random systems