blocklyでobjectを動かす。 その10

3020 ワード
obelisk.js Blockly Plunker Blockly テキストリンク

概要

blocklyでobjectを動かして見る。
obelisk.js、やってみた。

写真

ステージを作る。

<canvas id="canvas" width="300" height="300"></canvas>

ブロックを書く。

Blockly.Blocks.say = {
    init: function() {
        this.jsonInit({
            message0: "say x %1 y %2 z %3",
            args0: [{
                type: "input_value",
                name: "x",
                check: "Number",
                align: "RIGHT"
            },{
                type: "input_value",
                name: "y",
                check: "Number",
                align: "RIGHT"
            },{
                type: "input_value",
                name: "z",
                check: "Number",
                align: "RIGHT"
            }],
            previousStatement: null,
            nextStatement: null,
            style: "text_blocks",
            tooltip: Blockly.Msg.TEXT_PRINT_TOOLTIP,
            helpUrl: Blockly.Msg.TEXT_PRINT_HELPURL
        })
    }
};

フローを書く。

objectを書く。


Blockly.JavaScript.say = function(a) {
    var b = Blockly.JavaScript.valueToCode(a, "x", Blockly.JavaScript.ORDER_COMMA) || 0,
        c = Blockly.JavaScript.valueToCode(a, "y", Blockly.JavaScript.ORDER_COMMA) || 0;
        a = Blockly.JavaScript.valueToCode(a, "z", Blockly.JavaScript.ORDER_COMMA) || 0;

    return "k0.saa(" + b + "," + c + "," + a + ");\n"
};

var canvas = document.getElementById('canvas');
var point = new obelisk.Point(100, 100);
var pixelView = new obelisk.PixelView(canvas, point);
var kame = function(pixelView) {
    this.pixelView = pixelView;
};
kame.prototype.saa = function(x, y, z) {
    var p3d = new obelisk.Point3D(30 * x, 30 * y, (32 + 1) * z);
    var cubeDms = new obelisk.CubeDimension(30, 30, 32);
    var cubeColor = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.getRandomComfortableColor());
    var cube = new obelisk.Cube(cubeDms, cubeColor, false);
    this.pixelView.renderObject(cube, p3d);
};
var k0 = new kame(pixelView);

成果物

以上。