Creating a visual language by coding

Unity Engine
,
1

Hi! I’m creating a game where players have to program robots to get through different levels by connecting blocks of command, or more specifically, I want my levels to be like the coding lessons on code.org, Scratch, Alice, etc. Therefore, players can experience exciting lore while improving their programming logic.

Moving the robots forward, to the left and right, jumping and turning is fine, but I haven’t thought of any ways to create If Else blocks, For Loop, etc.

If you have any ideas, please let me know. Thank you very much!

2

That is a fairly massive project.

I suggest you either start with something far simpler or else a far simpler subset of things.

If you want some practice, write code to parse text and act on it over time.

For instance, try writing some code to parse this line from a text file:

createbox( 10,10)

to create a box at location (10,10) in world coordinates.

You’ll soon see the scope of what you contemplate.

To parse text either use the basic string methods or perhaps regular expressions (regex) parsing.

2 Likes
3

Thank you for your suggestion! I actually created the coding blocks using UI images (like the image below) and check if they are in a layout, the corresponding functions of those actions will be added to a list and the robot will execute it. But I don’t know how to do it with statements like If else, the same way doesn’t work.
9015043--1243039--Silexa original - Kiko Prologue Scene.jpg

4

Well, languages like scratch actually work the same way. However if statements are much larger blocks and they have to be dynamic in size. They usually have a middle section (the if body) that is essentially “carved out”. So adding elements to the inner part of the if statement block would make that block grow in size. Since the blocks should be docked to their parent object, things following the if block should just move along with it when the size changes.

Though it’s up to you how you want to design your scripting language. This growing if block with the slightly indented body is a quite common design, but not necessarily the only one. Growing in the x direction would also work so it would form some kind of tree structure. However that’s usually even more complicated as nesting if statements would make it quite complex to handle larger scripts. The linear approach has the advantage that it keeps rather slim and mainly grows in height. Though other node like approaches are of course possible. I just had to think about the “Werkkzeug” demo tool which uses simple boxes as nodes and they simply “connect” when they touch each other either on the top or bottom. The flow is generally from top to bottom. The nodes do not really stick together but are placed on a grid so they can be aligned nicely by the user. As I said as long as there’s overlap, they are connected. That way you could go for a tree like structure, but he user / player is responsible for arranging the blocks which of course is kinda annoying when you want to change something in the middle. However a rubber-band multi-selection was of course part of this. So you can move several blocks / nodes at once.

Languages like scratch try to streamline the UI so it’s a bit easier for the user, but of course harder for the programmer (you).

1 Like
5

Okay, you’re far further along than I assumed from your post. Congrats! :slight_smile:

So the way an if statement will work is simply to check something and change the course of the instruction pointer, whatever that means in your context.

1 Like
6

We had a similar topic quite recently, you might want to check my comments there, because I’m also naming some specific examples of what can be done with the blocks. Perhaps you’ll find it useful.

1 Like
7

You can design specific nodes / code blocks that always come in pairs: if_start and if_end. You obviously render these in a manner that hides this fact, and in such a way to indent the embraced contents, but still allow the blocks to be individually moved up or down. This is actually very close to how asm works, only the logic is inverted.

where asm would go like

if x == 0 jump to continue
do #1
do #2
continue:
do #3

here you do

if !(x == 0) jump to continue // if_start
do #1
do #2
continue: // if_end
do #3

you can do a similar thing for everything else block-related, like for or while, but also else or switch.

Edit:
The point of the latter example is to make it render as following

IF [x == 0]
| do #1
| do #2
------
do #3
1 Like
8

Using interfaces could help. They are like the lego blocks of programming.

public interface IBlock
{
    void Execute();
}

public interface IPlug : IBlock { }

public interface ISocket : IBlock { }

public interface IParent : ISocket
{
    IChild Next { get; }
}

public interface IChild : IPlug
{
    IParent Previous { get; }
}

public interface IEvaluator : ISocket
{
    ICondition If { get; }
}

public interface ICondition : IPlug
{
    IEvaluator Evaluator { get; }
    bool Evaluate();
}

public sealed class IfBlock : CodeBlock, IParent, IChild, IEvaluator
{
    public IParent Previous { get; private set; }

    public ICondition If { get; private set;  }
    public IChild Then { get; private set;  }

    public IChild Next { get; private set; }

    public override void Execute()
    {
        if(If is null || If.Evaluate())
        {
            Then?.Execute();
        }

        Next?.Execute();
    }
}
2 Likes
9

Btw if you’re worried about how to actually let the user define a condition, you may go down the route of simply choosing the operator and the operands via simple drop lists. It all depends on how complex your machines should get.

1 Like