Director.replaceScene for canvas scenes not working

[fariazz]

Hi,

I'm not able to replace scenes using director.replaceScene() when
using scenes defined with the Canvas renderer: new
lime.Scene().setRenderer(lime.Renderer.CANVAS);

I just get a blank screen. There is canvas element but it shows
nothing. It does work when I switch scenes with
director.pushScene().

If I remove the CANVAS renderer it works fine with replaceScene().

Is there a way to replace scenes that use the canvas? for a few scenes
it doesn't matter to have the rest hidden, but for too many of them it
could be too resource consuming.

I've tried using layers that are rendered as CANVAS, and doing layer.setDirty(255) after director.replaceScene.

Code below, as you can see if I remove the CANVAS rendering part it works fine.

//set main namespace
goog.provide('chapter6');


//get requirements
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Sprite');
goog.require('lime.fill.LinearGradient');
goog.require('lime.Label');
goog.require('goog.math');
goog.require('lime.Layer');
goog.require('lime.GlossyButton');



// entrypoint
chapter6.start = function(){

    var director = new lime.Director(document.body,480,320);
    director.makeMobileWebAppCapable();
    director.setDisplayFPS(false);

    var initialScene = new lime.Scene().setRenderer(lime.Renderer.CANVAS);
    var gameScene = new lime.Scene().setRenderer(lime.Renderer.CANVAS);

    // inital scene //////
    var initialLayer = new lime.Layer().setPosition(30,30).setRenderer(lime.Renderer.CANVAS);

    var initialContainer = new lime.Sprite().setPosition(0,0).setSize(420,260).setFill('#EEE0E5').setAnchorPoint(0,0);

    var initialTitle = new lime.Label().setText('WELCOME').setFontFamily('Arial').setFontColor('#000000').
        setFontSize(20).setAnchorPoint(0,0).setPosition(150,60);

    var startButton = new lime.GlossyButton().setSize(200,60).setPosition(200,150).setText('Start').setColor('#00CD00'); 

    initialLayer.appendChild(initialContainer);
    initialLayer.appendChild(initialTitle);
    initialLayer.appendChild(startButton);

    initialScene.appendChild(initialLayer);




    // game scene //////////////////////////////////////////////

    var gameLayer = new lime.Layer().setPosition(0,0).setRenderer(lime.Renderer.CANVAS).setAnchorPoint(0,0);

    //grass
    var grass_gradient = new lime.fill.LinearGradient().setDirection(0,0,1,-1)
        .addColorStop(0,'#7CCD7C').addColorStop(0.5, '#00FF00');

    var grass = new lime.Sprite().setSize(480,320).setPosition(0,0).
        setAnchorPoint(0,0).setFill(grass_gradient);


    goog.events.listen(startButton, ['mousedown', 'touchstart'], function(e) {
        director.replaceScene(gameScene);
        gameLayer.setDirty(255);
    });



    gameLayer.appendChild(grass);

    gameScene.appendChild(gameLayer);
    director.replaceScene(initialScene);

}

[sakhnenko]

I think I'm having the same issue too. I had it working fine in Canvas, but then I did a major refactoring of the code and now it only works when rendering in DOM. When I turn on CANVAS renderer, Firebug spits out a millon errors saying:

canvas.js (line 142)
Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMCanvasRenderingContext2D.save]
context.save()

[fariazz]

in my case I don't get any console errors, it just doesn't show anything on the screen.

[sakhnenko]

Yeah, in Chrome there were no console errors, but when I tried loading it up in FF with firebug running I saw those canvas.js failures

[tonistiigi]

Reference link with a workaround: https://groups.google.com/forum/#!topic/limejs/ijQSv2QV1qQ/discussion

[fariazz]

hi @tonistiigi that is exactly what my code above does.. I created this issue after trying the solution from Google Groups..

[tonistiigi]

Using canvas renderer only on the layer(not scene) and calling gameLayer.setDirty(255); after replaceScene() didn't make the scene appear for you?

I'll try to look into it in next couple of days.

[fariazz]

I was missing removing the canvas rendering from the scene! now it works. full working code:

//set main namespace
goog.provide('canvas_layers');


//get requirements
goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Sprite');
goog.require('lime.fill.LinearGradient');
goog.require('lime.Label');
goog.require('goog.math');
goog.require('lime.Layer');
goog.require('lime.GlossyButton');



// entrypoint
canvas_layers.start = function(){

    var director = new lime.Director(document.body,480,320);
    director.makeMobileWebAppCapable();
    director.setDisplayFPS(false);

    var initialScene = new lime.Scene().setRenderer();
    var gameScene = new lime.Scene().setRenderer();

    // inital scene //////
    var initialLayer = new lime.Layer().setPosition(30,30).setRenderer(lime.Renderer.CANVAS);

    var initialContainer = new lime.Sprite().setPosition(0,0).setSize(420,260).setFill('#EEE0E5').setAnchorPoint(0,0);

    var initialTitle = new lime.Label().setText('WELCOME').setFontFamily('Arial').setFontColor('#000000').
        setFontSize(20).setAnchorPoint(0,0).setPosition(150,60);

    var startButton = new lime.GlossyButton().setSize(200,60).setPosition(200,150).setText('Start').setColor('#00CD00'); 

    initialLayer.appendChild(initialContainer);
    initialLayer.appendChild(initialTitle);
    initialLayer.appendChild(startButton);

    initialScene.appendChild(initialLayer);




    // game scene //////////////////////////////////////////////

    var gameLayer = new lime.Layer().setPosition(0,0).setRenderer(lime.Renderer.CANVAS).setAnchorPoint(0,0);

    //grass
    var grass_gradient = new lime.fill.LinearGradient().setDirection(0,0,1,-1)
        .addColorStop(0,'#7CCD7C').addColorStop(0.5, '#00FF00');

    var grass = new lime.Sprite().setSize(480,320).setPosition(0,0).
        setAnchorPoint(0,0).setFill(grass_gradient);


    goog.events.listen(startButton, ['mousedown', 'touchstart'], function(e) {
        director.replaceScene(gameScene);
        gameLayer.setDirty(255);
    });



    gameLayer.appendChild(grass);

    gameScene.appendChild(gameLayer);
    director.replaceScene(initialScene);

}

[sakhnenko]

Hmm.. settingDirty after replacing Scene doesn't seem to make the Canvas layers visible for me. But perhaps it's because I have four different layers in my scene.
Maybe you can take a look at the code here http://sakhnenko.com/games/wldn.zip (the main scene/layer stuff is in game.js and gamelevel.js)

I set all but one layer to CANVAS and as you see only the DOM layer is drawing. In Console I can 'turn on' the other layers by changing the Renderer by typing:
walden.d.sceneStack_[0].children_[1].setRenderer(lime.Renderer.DOM) (for children_ 1-3)

Get in touch at [email protected] if need be... Cheers!

[tonistiigi]

Sorry but I have trouble understanding whats going on in this code. I did notice that the size of the canvases appears ~450000x450000 so I guess this is related to the problem. If you can limit the problem to a smaller example you can bring it up again in the forums(or here if you think its a bug of limejs).

[sakhnenko]

It looks like my issue was that the 'canvas' element for my Scene had css set to "display:none". When I hardcoded a css for the page to have ".lime-scene {display:block !important};" the scene showed up just fine.

[didigameboy]

Well I know its late but I had the same problem and after trying a lot I found some fix:

don't call .setRenderer() before calling your scene to stage. I mean don't call scene2.setRender(lime.Rederer.CANVAS) before calling director.replaceScene(scene2). The same with pushScene.

I think this is like limejs works. Limejs don't have only one canvas, and create it on the fly so.. idk its just a guess, but I did it and it works.