Skip to main content

News

Topic: Code.org and visual programming (Read 2765 times) previous topic - next topic

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Code.org and visual programming
So code.org, a website whose goal is to teach programming visually, apparently celebrated a birthday. For it, they have a "Flappy Birthday" tutorial on creating a Flappy Bird clone with code.org's visual editor and it's pretty good; apparently I finished it in less than 10 minutes and now have a weird, very randomized Flappy clone of my own.

Would there be any interest in a visual editor for Sphere similar to how code.org does it? It looks to generate standard JavaScript in the background and attaches preset behaviors via the visual editor, though I wouldn't be surprised if they have some sort of library to which they offload the heavy lifting like Three.js or something (I haven't dived into the code yet for analysis).

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Code.org and visual programming
Reply #1
I tried it out, it's really quite good! I should go make this a plugin in Sphere. That said it does seem to rely heavily on a backend game library called 'Flappy'. The Sphere API won't cut it since there would also need to be other pieces of code to handle events. I'd have to create a framework for handling that in JS and the my editor must use that framework for your game to work. So it's doable but not straight out of the gate so to speak.

Fortunately I have my RadLib library, and it's state manager is totally tuned to doing that kind of thing. So, I'll totally try to make a code generator for it. But right now I doubt I'll have a lot of time to devote to doing that, but I'll try to at least make some sort of skeleton system operational.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Code.org and visual programming
Reply #2
The original Blockly visual programming project: https://code.google.com/p/blockly/

Maybe we can start by having a framework-specific node-webkit webapp like DaVince's SpheRun? We'd need to have a project framework then.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Code.org and visual programming
Reply #3
I had been toying around with the blockly concept, and while I haven't made the editor for it yet, I started to look at how it would generate the JS code, and an interesting pattern came up.

I wanted to continue to work on my Blockman project, and specifically wanted to code spell effects and enemy AI. But I want to achieve that by writing less code, while seeing the bigger picture. Every time I wrote enemy AI code, I'd simply get lost in waves of switch statements and call-backs so much so it'd make my head spin. This blockly conceot is awesome. Programmers might think it's shameful to use these drag and drop code editors since it's not programming in the true sense of the word, but I think this approach in the most sensible option for tweaking AI or status effect code. Really anything that has interaction or reaction.

Let's put it this way, this pseudo code is easy to say, hard to write:
Code: (text) [Select]

Enemy "Bug"
    "create":
        this.state = "idle";
        this.chargetime = new Timer;
    "idle":
        this.randomWalk;
        if (player within 100)
            this.state = "far attack";
            this.chargetime.set(5); // 5 seconds
        else if (player within 16)
            this.state = "attack";
        if (this.life <= 0)
            this.setState("destroy");
    "far attack":
        this.chargetime.update();
        if (this.chargetime.finished())
            this.setFace("leap").leapTo("player").damage("player", this.atk * 2).resetFace().setState("idle");
        else
            this.moveTo("player");
    "attack":
        this.animate("attack").damage("player", this.atk).setState("idle");
    "destroy":
        this.createAnimation("die").kill();


But physically typing that out can be hard. Plus tweaking it can be a bitch. But in the background there are some obstacles I need to code in, for example:
Code: (text) [Select]

            this.setFace("leap").leapTo("player").damage("player", this.atk * 2).resetFace().setState("idle");


The above line of code is a giant queue, doing the actions from left to right in order. Therefore behind-the-scenes there needs to be an event manager per entity, and each entity needs to derive from an interface exposing this. So once I get that interface built, something like the above can totally work in a drag and drop code generator scheme.

Here's a spell:
Code: (text) [Select]

Spell "fireball"
    "create":
        this.drain = 25;
        this.power = player.intellect / 5 + 10;
    "mouse-left-down":
        if (player.hasMp(25))
            this.drainMp("player", 25);
        else
            this.cancel();
    "mouse-left-hold":
        if (this.power < player.intellect * 10)
            this.power += game.time * 100;
    "mouse-left-release":
        game.createProjectile("fireball", this.power, game.player.direction);

Projectile "fireball"
    "create":
        this.setState("move");
    "move":
        this.move(this.direction);
        if (this.obstructed())
            if (this.obstruction is Enemy)
                this.animate("explode").obstruction.damage(this.power); // example may change
            this.setState("destroy");
    "destroy":
        this.createAnimation("die").kill();


So, things like Spell, Projectile, and Enemy do much more behind the scenes. So, while I don't see drag and drop code creation useful for general code creation, I do see uses in AI "workflow" programming and spell effect "workflow" programming. Basically, anything with scripted events that need tweaking on the fly are better done in a visual fashion than by hand. Better yet is a direct game window to the left where you can immediately try out your changes, but that's for a different day.

I could do this instead of in my editor in a game. Then you can do game programming in your game with the mouse. I attempted this once with a Pokemon game (Pokemon Azure) back in the day and had mild success with it.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Code.org and visual programming
Reply #4
In a coffee haze I started making a Sphere-specific blockly for the web. I'll post it and the framework I'm using to test it.

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Code.org and visual programming
Reply #5
http://www.spheredev.org/blockly/

Doesn't have a lot and the web shim I made for Sphere's API is super basic, but a game() function can be populated and run.

Re: Code.org and visual programming
Reply #6
There seems to be some bug with the window size growing.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Code.org and visual programming
Reply #7
That's awesome! But I must say that's way too general of a use. What I liked about the Flappy version is that it had a lot of abstraction so you could do a few things like on click: flap.

I still think you should do 90% of your game in hand-coded JS and 10% of it in this blockly format for enemy/player AI and effects, but that requires a core library all games use. In fact, this could be the crowning achievement of a JS web-game engine; how many game engines out there do this kind of thing for newcomers to programming?
  • Last Edit: March 02, 2014, 06:24:17 pm by Radnen
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: Code.org and visual programming
Reply #8
I actually like this kind of tool, but mostly for collecting thoughts and making the implementation clear. I have in the past used AppleWorks Draw (remember when that was a thing?) and then some GNU tool I forget the name of to lay out charts a bit like this to make my own designs clearer to myself.

It would be interesting if, after laying out that kind of chart, at least some code could be generated. Even if it was incomplete or of suspicious quality.

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Code.org and visual programming
Reply #9
@Radnen - I mainly wanted to see how easy it was to create Sphere blocks and the code it could generate. In the future, we can certainly have versions tailored towards specific engines, like persist.js-specific functions, RadLib functions, Majestic functions, etc, now that I've seen how easy it is to actually customize.

@Flying Jester
Re bug: I started mostly copy-pasting from the sample Blocklys and one that I copied from attached a handler to window.onresize. As I was mostly in coffee mode, I didn't pay much attention to cleaning up that particular function but I'll do it later.
Re chart: Do any chart programs, UML, Dia, or otherwise, allow writing export plugins? That sounds like a thing to get behind for custom storyboarding capabilities in the future.