Cutscene Editor UI

After finish the level editor design. I started to work on the level editor according to how I designed it. I started with the easier part—cutscene editor. Cutscene is simpler since there is only one actionlist that needs to be run. Everything is ordered.

First I did the main screen UI and it looks like this:

levelEditorScreen1

 

From here you can add new cutscene by pressing the small “+” in the cutscene pool. You can press the write file button to write the cutscene data you just edit out to an xml file to save that. You can also load the xml file you saved before to edit again. This is the same as Level part on the right. But for now they are only UI and have no actual functions at all.

Next is the actual cutscene edit screen UI which look like this:

cutsceneScreenUIHere I used an element called list in Flash that is super convenient and allows you to:1. add items in it and it will add a scroll bar itself. 2. listen to mouse click event so I can add functions like drag double click and so on.

On the right are all the functions that you can use to make a cutscene. All you need to do is to drag the functions to actionlist.

For now I realize a part that when you put your mouse on the function it will show a description of what the function can do like this:

descriptionBox

 

 

 

 

 

 

 

 

 

To realize this I add a text box element that would wrap the text automatically. I set the text in it to be dynamic so I can change it according to the current function the mouse is on. The background of the text box is yellow.

I added the description text to the item when i init them:

cutsceneFunctionDescription

 

 

 

Then I display them when I detected a mouse on event:displayDescription

 

 

Leave a Reply

You must be logged in to post a comment.