[Resolved] Transitions on Layers

cocos2d-x JavaScript
#1

Hi, Sorry if this has been answered. I searched forums but could not find actual answer I was looking for.

Basically what I want to do is darken child layers when I display a new layer on top. I have a main scene which is built up of several layers. Scoreboard, game area, etc. Now when I display a popup layer on top I want to be able to darken all other layers until popup box goes.

I have looked at the transition code but it all seems to be based on scene changing. I did consider just setting the alpha on each object in scene but this is no good as i will get horrid effect.

If there is no sdk functionality to do this then I can easily just load a small black sprite and display it full screen with amount of alpha to give me the desired effect but if there is something built in then I would rather use it.

Thanks

B.T.W loving cocos2d html5 its a very nice sdk.

#2

Hi!

In my experience, there is no built-in function to do so. I always used the method you suggested, using the black sprite with the right amount of alpha :slight_smile:

Or maybe you can take a look and play a bit with actions CCTintTo and CCTintBy. Maybe if you run the action on the overall scene layer you can obtain what you are looking for!

Let me know, I’m interested as well in this!

Davide Jones

#3

I usually use a cc.LayerColor.
I init the Layer in black color and alpha 0 this.init(cc.c4b(0,0,0,0)); and on onEnterTransitionDidFinish I run an Action to change the alpha in a desired time

this.runAction(
    cc.FadeTo.create(0.5,50) 
);

Also this layer swallows the touches so the other layers doesn’t receive the touches.
I hope this helps

Cheers.

#4

Very nice indeed. May I ask you, are the touches automatically swallowed, or you have to instruct the layer to do so?

Davide Jones

#5

@davidejones88 You have to doit yourself.

I set the Layer to detect touches and swallows true by using the second parameter of setTouchEnabled(enabled,swallows).
Also I set the touch priority to something higher than the cc.Menupriority, because if there are some cc.Menu in the other layers behind the “popup layer”, they will detect the touches before the Layer.
Example code:

//in the init
this.setTouchPriority(cc.MENU_HANDLER_PRIORITY - 3);
this.setTouchMode(cc.TOUCH_ONE_BY_ONE);
this.setTouchEnabled(true,true);

And in the onTouchBegan:

onTouchBegan: function (touch, event)
 {
    var location = touch.getLocation();
    if(!cc.rectContainsPoint(this._container.getBoundingBox(),location))
    {
         this._closeDialog();
         return true;
     }
      return true;  //claims the touch anyways
}

In this example if the user touch outside the “container” of the popup screen, the popup is closed, but if the touch is inside this “container”, do nothing but claims the touch so no one else can receive it.
Also, I set the priority of the cc.Menu in this popup window to the same of the layer or higher.

Hope this clarify my approach, if you have any question don’t hesitate to ask.

Cheers

#6

Hi, @davidejones88

Please notice that the two parameters this.setTouchEnabled(true,true); is available only in the current develop branch of Cocos2d-html5, not in version 2.2.2

otherwise to swallow touches you can use mode touch one by one, then touches will be automatically swallowed if you return true in your handler.

// in the init of Layer
this.setTouchMode(cc.TOUCH_ONE_BY_ONE);

Huabin

#7

Yep, I forgot to mention that I’m currently using the develop branch :stuck_out_tongue:

Cheers

#8

Thanks for responses. Got the LayerColor working nicely. Couldn’t get the swallows on input working though even with the latest code from git. Its not a problem though as I have created a focus setting for all my layers and in my scene manager I can just set focus on or off to control input for that layer so all good :slight_smile: