Suggestions or Ideas for Nodes Off Screen

Cocos Creator
#1

The game I am making involves a lot of nodes spawning at the top of canvas (off canvas) and then moving down the canvas. Does anyone have any suggestions to better handle determining when the nodes are passed the bottom of the canvas?

Just curious because I’m tired of constantly determining nodes Y positions (plus half their height) to check if they are off the canvas. It would be great if there was a way in Cocos Creator to aid in these calculations that I don’t know about yet. I also prefer to not use collisions unless they aren’t as expensive as I think they are? There will be a LOT of nodes on the screen.

Thanks!

#2

I don’t know if this works neither if you already tried it but the Camera component has this method:

/**
!#en
Check whether the node is in the camera.
!#zh
检测节点是否被此摄像机影响
@param node the node which need to check
*/
containsNode(node: Node): boolean;

#3

I should add that doing this entirely in code is perfectly fine. I’m just curious if there are features of the editor that I’m not taking advantage of that I don’t know about because I’m new (very new… two/three days in, new).

Thanks

#4

Taking a look through the source it seems to only work with the camera culling mask settings. It no longer reports as true if I disable the culling mask in the camera settings that the node belongs to, but it would be handy if nodes had a “lastRendered” type of property or a “drawing” flag.

Anyways, thanks for the suggestion!

#5

Thank you, I didn’t know about Camera.containsNode(). However, in my quick test, containsNode() seems to be always claiming true, for nodes that are not only out of view, but are also marked inactive.

Am I missing something?

#6

I had just continued doing the calculations manually. However, if anyone else out there runs into this thread looking for an idea, I ended up doing a couple things.

I tried a hidden collider at the bottom of the screen. This worked nicely but I was already far along doing the manual method that I didn’t want to rewrite everything dealing with the onCollisionEnter event. If I had thought of this before I started coding everything I would have definitely used it.

I ended up making a bounds check for my purposes. I will share the method I used, and then attempt to add onto it for a more universal approach.

outBounds(object)
{
    return (object.y <= -((this.canvas.height / 2) + (object.height / 2)));
}

The “this.canvas” is usually a simple:

this.canvas = this.node.parent;

Depending on your tree and setup, it may even be “this.node.parent.parent”

Here is one I did for all sides:

// assumes 'this.canvas' is assigned to your "Canvas" node
outBounds(object, location)
{
    switch(location)
    {
        case 'top':
            return (object.y >= ((this.canvas.height / 2) + (object.height / 2)));
        case 'right':
            return (object.x >= ((this.canvas.width / 2) + object.width / 2));
        case 'bottom':
            return (object.y <= -((this.canvas.height / 2) + (object.height / 2)));
        case 'left':
            return (object.x <= -((this.canvas.width / 2) + (object.width / 2)));
    }

    return false;
}

Usage should be obvious but an example is:

if(this.outBounds(this.node, 'bottom'))

I hope this helps someone out there trying to learn Cocos Creator.

Perhaps the more advanced developers here can point out any mistakes or share some tips.

Thanks

#7

You could change

this.canvas = this.node.parent;

to

this.canvas = cc.find('Canvas');
1 Like
#8

Nice!

I’m assuming it’s the same node? I had seen cc.find() looking through random documentation/help. I assumed cc.find() would run an iteration to find the node by name, and I thought this.node.parent is a direct link to the node object.

Am I mistaken?

Thanks!

#9

https://docs.cocos2d-x.org/creator/manual/en/scripting/access-node-component.html
cc.find() finds by the global path like cc.find(‘Canvas/Menu’) will return the Menu Node being a child of the Canvas Node

1 Like
#10

Awesome, that just made things easier for me, thanks!

1 Like