How to split screen or have variable layer size


I think the method I am proposing works just fine. I think that is what many folks do to achieve these types of games. I don’t have time to start from scratch and make a working sample for you, however. I have some things to finish up for GDC and updates to docs.


Can anyone else help me in this?


check out GitHub, I think there are several examples of this type of game.


Ok I will check there too. Thanks


@stevetranby have any interesting advice here. @DarkNemesis wants to create a up/down side scrolling game. He wants advice on how to move the layers as the players sprite moves up and down the level. I see many ways for this to happen. What are your thoughts?


The layers are moving with setPosition, and a lot many other methods that I tried. I want to make them move, but do not increase their content size. I want to clip them to a desired size.

IOS 10 issue with scroll ontouch

Your TMX layer is what you want moving as it contains where your Sprite is moving around. AFAIK, you load the whole size of the TMX in and it goes off screen if it doesn’t fit in the visible size. You then move the TMX up or down depending upon the players movements. You never change the contentsize to do this.


@energyy @iPruch any thoughts about the OP’s question?


we not yet experimented with thif - need to check with devs if there is any easy advice. Could check meanwhile:

#70 (6.1 MB)

Can you please play test this game. I created this game using SFML, and this is what I want to achieve. You move using the arrow keys in this game.


It is a Windows game?


Yes it is!


You tried the game?


I took a look at the whole thread. Let me say what I’ve understood and correct me if I’m wrong:

@DarkNemesis wants to separate the screen in two layers, the upper part for the gameplay and the lower part for the UI. The gameplay layer should be able to scroll its content (the tilemap and sprites) but that content shouldn’t render behind the UI layer (it should be clipped by the limits of the upper layer), but it is being rendered though. Am I right?

In that case, I think this is what you need:

    // Create a cocos2d::ui::Layout instead of a cocos2d::Layer
    auto *theLayerYouWantToClipItsContents = cocos2d::ui::Layout::create();

Add the TMX and sprites to that Layout and do everything you need with it as if it was the same Layer you used before. I don’t know if using this cocos2d::ui::Layout instead of a cocos2d::Layer has any disadvantage, but I’m using it a lot for my game Tappy Tiki (because I use Cocos Studio 2 and there you can create Layout objects, not Layers) and it does the job :wink:


Yes @iPruch, that’s exactly what I want to do.
Although is this Layout a Studio only API? Because Intellisense is showing me only 2 types under cocs2d::ui. One is Scale9Sprite and other is Widget.


Sorry, I forgot to mention that you have to write this include:

#include "ui/CocosGUI.h"

You don’t need to download anything, it’s included in cocos2d-x, but it isn’t inside cocos2d.h. But just include that file and volia :wink:


I have a quick question. If I setClippingEnabled, does that apply to all the children inside?
Second, can I attach a layer to this layout, and keep everything in that layer as it is? I think not, because when I tried this, the layout (which had a default green background color and which I want to remove but don’t know how to yet) got clipped, just like I wanted, but the child layout who further had the child map and child sprite, didn’t get clipped. I assume this is because using layer inside a layout is a bad idea!


Also, can you suggest me the best way to make the layout scrollable? And have you uploaded the source code of your game Tappy Tiki on any online repository. I would like to go through it once, if possible.


About the background thing, I thought it was transparent as default value. Anyway, I believe you can change it to transparent like this:


I can’t help you with the other questions right now. I never added a Layer to a Layout as a child. I think you should use Layouts always inside a Layout. Also, I don’t have experience with scrollable views or cameras in cocos2d-x (but I will need it soon in a project, so I’d really appreciate if you share your progress on this).
I’m sorry, Tappy Tiki isn’t open source, but even if it was you wouldn’t find what you’re looking for. I only used Layouts to separate foreground, background and UI, all three overlapped and without using the clipping feature because I don’t need it for my game.

Good luck with your project!


I use Layers inside ScrollViews so it does work.