Posted April 01, 2020 by CocoaStudios
#The Legend Of RPG #Zelda #Zelda Maker #2D #RPG
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:
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: