1

ぬりえ画面がある子供向けの Android アプリがあり、それを Cocos2d-js に変換しようとしています。私がこれを Android に実装した方法は、2 つの画像を重ね合わせることです。色付きの画像を下部に、グレースケールの画像を上部に配置します。タッチが検出されると、上部のグレー スケール画像がその場所で消去され、下部の画像が表示されます。

カラーリング エフェクト用の RenderTexture と、下のレイヤーを明らかにするための ClippingNode を見ていますが、RenderTexture を ClippingNode のステンシルとして設定すると、上のイメージは完全に透明になります (ステンシルは不透明ですか?)。

これはこれまでの私のコードです（最下層は画面全体をカバーする単なるスプライトであるため、最上層のみ）：

var GrayScaleLayer = cc.Layer.extend({

    winsize: null,
    _brushs:null,
    _target:null,
    _lastLocation:null,

    ctor:function () {
        this._super();
        this.init();
    },

    init:function () {

        if ('touches' in cc.sys.capabilities){
            cc.eventManager.addListener({
                event: cc.EventListener.TOUCH_ALL_AT_ONCE,
                onTouchesMoved:function (touches, event) {
                    event.getCurrentTarget().drawInLocation(touches[0].getLocation());
                }
            }, this);
        } else if ('mouse' in cc.sys.capabilities)
            cc.eventManager.addListener({
                event: cc.EventListener.MOUSE,
                onMouseDown: function(event){
                    event.getCurrentTarget()._lastLocation = event.getLocation();
                },
                onMouseMove: function(event){
                    if(event.getButton() == cc.EventMouse.BUTTON_LEFT)
                        event.getCurrentTarget().drawInLocation(event.getLocation());
                }
            }, this);

        // Get the screen size of your game canvas
        this.winsize = cc.director.getWinSize();

        this._brushs = [];
        this._lastLocation = cc.p(this.winsize.width, this.winsize.height);

        // Create the RenderTexture object
        var stencil = this.erase();
        stencil.setPosition(cc.p(this.winsize.width/2, this.winsize.height/2));

        // Create the clippingNode and add the RenderTexture as a stencil
        var clipper = new cc.ClippingNode();
        clipper.setPosition(cc.p(0,0));
        clipper.stencil = stencil;
        clipper.setInverted(true);
        this.addChild(clipper);

        // Create gray scale image and add it to the Clipping node
        var grayItem = new cc.Sprite(res.image_gs_png);
        var grayScale = this.winsize.width/grayItem.width;
        grayItem.setScale(grayScale, grayScale);
        grayItem.setPosition(cc.p(this.winsize.width/2, this.winsize.height/2));
        clipper.addChild(grayItem);

    },

    erase:function () {
        var target = new cc.RenderTexture(this.winsize.width, this.winsize.height);

        this._target = target;

        return target;
    },

    drawInLocation:function (location) {
        var distance = cc.pDistance(location, this._lastLocation);

        if (distance > 1) {
            var locLastLocation = this._lastLocation;
            this._target.begin();
            this._brushs = [];
            for(var i = 0; i < distance; ++i) {
                var diffX = locLastLocation.x - location.x;
                var diffY = locLastLocation.y - location.y;
                var delta = i / distance;
                var sprite = new cc.Sprite(res.brush_png);
                sprite.attr({
                    x: location.x + diffX * delta,
                    y: location.y + diffY * delta,
                    rotation: Math.random() * 360,
                    color: cc.color(Math.random() * 255, 255, 255),
                    scale: Math.random() + 0.25,
                    opacity: 20
                });
                sprite.retain();
                this._brushs.push(sprite);
            }
            for (var i = 0; i < distance; i++) {
                this._brushs[i].visit();
            }
            this._target.end();
        }
        this._lastLocation = location;
    },

    onExit:function () {
        for(var i in this._brushs){
            this._brushs[i].release();
        }
        this._super();
    }
});

RenderTexture で .clear(rgba) 関数を使用してみましたが、役に立ちませんでした。

js-tests の ClippingNode の例が DrawNode オブジェクトをステンシルとして追加していることに気付きました.RenderTexture を DrawNode に「変換」する方法はありますか?

4

1 に答える 1

1

clippingNodeこのために使用する必要はありません。

色付きのレイヤーを下に、グレースケールのレンダーテクスチャを上に配置するだけです。

タッチすると、このブレンド関数でレンダーテクスチャにスプライトを描画して透明度を消去します{src: gl_ZERO, dst: gl_ONE_MINUS_SRC_ALPHA}

于 2014-11-25T08:16:58.397 に答える