Thursday, 8 July 2010

Visual Scripting Editor (Video)

It's 6:45 in the morning and the scripting editor is finally ready for a short demonstration. Spend most of the time cleaning up the node-system and made it a LOT easier to add additional node types in the future. The scripts are now directly stored inside the level file and can be stored separately if desired (for re-use in other levels)

In the video you will see two simple scripts, one animating a box and the other toggling a point light on and off. You'll also see the new Level Manager window, more on that later.

(Watch in HD & Fullscreen!)


  1. This looks like a really nice feature, good job!!

    I assume the scripting area is a custom windows control? Just out of interest though if it is a custom control, how are you drawing the lines between each node?

    My knowledge of drawing lines in WinForms limits me to only drawing thin straight lines :D

  2. The scripting area is a custom TabPage (part of the TabControl) that contains all the nodes and connections between them and repaints the lines (Graphics.DrawBezier) whenever the Paint event is triggered.

  3. Cool thanks, I have never even noticed that method before. So I see the method takes in two control points, how are you generating these? I have just been searching and found nothing :\. Maybe you have a good reference which shows you how to do this?

  4. First I calculate the location of the connector. I do this by adding the center of the connector (location + (size / 2)) to the location of the mainpanel (containing all the connectors and labels of a particular node) This is because Controls inside of other Controls (two Panels in this case) use relative locations.

    You now have the location of your first Point inside of the TabPage. You do the same for the other connector. To get a proper curve in your line you generate two control points that use the previously calculated Point + offset (to give it a direction) To get the offset value I test to see what connector type I'm trying to link (Input, Output, Touched, UnTouched etc.) and derive the proper offset from that type (Input should point to the left so Point(-40, 0) and the Output should point right so Point(40, 0)

    Result: a start and end Point + two Points with an offset to give your BezierCurve its curvature. :) I hope this will get you started, I don't really have a good article of page to get you started otherwise.