Best way to check if an object is within the visible range of the play area?

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • I have a situation where I need to check if an instance of an object that is moving around is present within the actual visible play area. I mean the area that the player is currently seeing.

    I tried the condition of "is object in play area" but this does not work as it seems to indicate the actual borders of the whole game area? So if I have a game area of 2000x2000 this will be true whenever the object is somewhere inside this. I need to just have it be true if it is within the actual visible play area (for a scrolling game so what the camera is currently showing to the player)

    I have attached an example where the camera is centered on the player and there is 3 enemies present that are outside the area the player see. I have an event to count up a counter if the enemies are in the play area and I want this to only be true if they are actually in the play area the player sees instead as it is now. Do anyone know how to best achieve this? Is there another event that is something like "is player in visible play area" ?

  • You can get the coord of border

    X Left Frame, etc.

    Then you can compare the object coord to this, by manually making four compare conditions

    So just like this in the example? Seems simple enough and it seems to work, but not sure if there can be any situation I am not thinking about where it could act up.

  • That's right, but instead of using the object's X position, you may want to test the edges of the object - ie. "X coordinate of left edge", "Y coordinate of top edge" etc.
    That way, it'll work if any part of the object's bounding box is on screen, rather than just the hotspot (it's a small detail that may or may not be significant, but with larger objects especially, it makes sense).

    There's no condition to compare those directly though, so you'll need to use the object's "Compare expression to a value" condition (do NOT use "Compare two general values" if there are going to be multiple instances of the object).

    Also, note that if you just say "add 1 to a counter", it will add 1 if ANY instance is within view, but will never add more than 1, even if many instances are within view.
    Instead, set the counter to "Number of selected objects".

    eg.
    * Enemy: X Right( "Enemy" ) >= X Left Frame
    + Enemy: X Left( "Enemy" ) <= X Right Frame
    + Enemy: Y Bottom( "Enemy" ) >= Y Top Frame
    + Enemy: Y Top( "Enemy" ) <= Y Bottom Frame
    Counter : Set Counter to NSelectedObjects( "Enemy" )

  • Ah nice this could come in handy as I actually did the above method first and then also added a manual value to compensate for the objects width, but this sounds a lot more clean!

    Steam games: Please login to see this link.

  • another way to do it: create an invisible asset the size of the "screen", position it at 0.0 and uncheck "follow the scene" then test if "the object is in collision with the asset"
    at the same time I do "if object is not in collision": make invisible (speeds up the runtime enormously)

    That is interesting. Just to be clear, what part "speeds up the runtime enormously"? Is it making objects invisible when they are outside the visible play area? I was under the impression stuff like that was "automatic" in that they are not rendered when outside what is visually drawn on screen?

    Having an overlap event like this with all objects would be quite slow though overall? It is at least my impression that overlap checks are quite expensive?

    Steam games: Please login to see this link.

  • on android, i can have 40 fps without this technic and 60 using it! (with a lot of sprites)

    Huh :O Interesting. Again I was under the clear impression that any overlap event is quite heavy, especially if running for all object all the time. So basically the gain would come from somehow the visibile sprites outside the frame are still dragging performance unless they are made invisible outside it? Like in this example attached?

    I wonder if this could be specific for Android or if it would work the same in other runtimes?

  • Outcast  MuddyMole Already had the best answer to this, basically compare ranges, it's the fastest and cleanest way honestly
    As you are dealing with rectangle ranges, compare ranges like MuddyMole showed above (there is also a range expression for that) or in terms of circles, compare distances, other than that, I wouldn't really recommend checking for collisions, as it's not the most ideal way, not the cleanest and the slowest out of all methods (also the zone objects have to be on the same layer as the objects that gonna be inside the zone, and the only way to check for collisions with objects on other layers is to move them to that layer, check for overlap, then move back to the og layer)

    The collisions method should only be used for ranges that are not necessarily rectangles or circles..

    In terms of zoning objects, DON'T resize the object manually in the frame editor, rather, scale in events, as that would be a texture for each unique zone, so a 512x512 zone, would be a 512x512, which is not good for memory
    But in case you want to the convenience of just resizing objects in the frame editor, you can use Active System Box objects that act as spawners to spawn the real zone objects that are just normal Actives scaled to the size of the Active System Object that spawned them, then after the spawn procedure is done, destroy the active system boxes..
    But why do that when you can just use the Active System Objects as the zones outright instead of as spawners? they are slower than Actives, in fact, it's much slower than Actives especially on other runtimes, so I only use them as spawners of something to there convenience of being able to resize them in the frame editor without affecting memory usage (and also the cool ways I can customize there appearance, they can be used s great visualizers)

    Here is a very simple example I made before about limiting camera movement, it uses the zones method I just explained with the with ranging method MuddyMole explained, should be fairly simple to understand:

    Please login to see this picture.Please login to see this picture.Please login to see this picture.

    MFA: Please login to see this attachment.

    Note: If you want to check with multiple "players" (like enemies or something) you can slightly modify tthe way it checks for zones by running a foreach loop on the enemies then checking for that loop in the zone comparison event, like this:
    Please login to see this attachment.

    Game/App developer, artist and a community contributor.
    You can support my work on: Please login to see this link.

  • Ah very cool thank you! :)

    Steam games: Please login to see this link.

  • If you don't need to detect the exact moment that an object leaves the screen with absolute pixel-perfect precision, then there's a simpler way to do this. The following example will add 1 to an altVal of all splash objects that are on the visible part of the game area (or at least are close to it).

    Please login to see this picture.


    That's the method I use, and it works well. The -700 creates a margin around the outside of the screen so that objects must be beyond this margin before they are considered out of screen. That ensures that any objects 700x700px and smaller will be entirely out of sight (and not merely partly off-screen) before they are considered out of the visible area. Set the number to the maximum dimension of the objects you'll be testing, as a negative number. For example, if the largest object you'll be testing is 32x64px, then set the number to something like -65.




    The condition to use is this one:

    Please login to see this picture.


    ...and you must negate it:

    Please login to see this picture.

    Please login to see this link.
    My Fusion Tools: Please login to see this link. | Please login to see this link. | Please login to see this link.

  • Ah thanks that is also a neat way of doing it! :)

    Btw Volnaiskra I just want to take the opportunity to ask something else that I wonder about :) (I sent a private pm some weeks ago). I had saved a picture of how you had arranged alterable values a while back like so:

    Please login to see this attachment.


    I am curious how you made those even lines? Like ----------Movement----------. I have tried but I just get an error when trying to insert a - sign

    Steam games: Please login to see this link.

  • I am curious how you made those even lines? Like ----------Movement----------. I have tried but I just get an error when trying to insert a - sign

    I imagine they're a special unicode character rather than the normal minus sign on the keyboard

    The top left symbol in the first table that appears in Please login to see this link. on undicode box/line characters worked for me where the standard minus wouldnt

    Or you can copy/paste it from here: "─"

  • He's using dash characters instead of the minus symbol (that's also why the characters line up perfectly, with no gap in between).
    You're allowed to use a short "En dash" –
    ...or you can use a longer "Em dash" —
    See: Please login to see this link.

    Edit: Haha, never mind, too slow...

  • Yes, there are a bunch of different dashes of different lengths available. The one I use is the longest, and is called the "Three-Em Dash" (unicode U+2E3B): ⸻



    I use different characters and symbols a lot, to keep my code as organised and readable as possible. Though it's important to make the process of using these unusual symbols as quick and easy as possible so that they can aid your workflow rather than impede it.

    I've changed the firmware on my QMK keyboard to turn the CapsLock key into a special modifier key that can be used to output certain special characters. So I can press caps+minus for ⸻, caps+period for ……………, caps+space for an extra long space [ ] or caps+shift+space for an extra short space [ ]. Or caps+aeclonszx for the Polish letters ąęćłóńśżź. Also caps+tab/shift/tilde to turn the current selection into UPPER CASE / lower case / Title Case. (I can also press caps+F1 for the original CapsLock functionality).

    I can also output certain symbols that I use in altVal/string/flag names to denote what type of variable they are, which I find improves the readability of my code:

    Please login to see this picture.  Please login to see this picture.  Please login to see this picture.

    I've actually found appropriate keycaps for some of these, as shown above. For others I use my Stream Deck. For the rest, I use a clipboard manager called PhraseExpress (Ditto would work too):

    Please login to see this picture.




    Anyway, there are loads of useful characters you can use. I recommend using Character Map UWP from the Windows Store to find them - it's less laborious to use than the native Windows Character Map utility. Look through the fonts Segoe UI, Segoe Emoji, Segoe Historic, Segoe UI Symbol, Segoe MDL2 Assets.

    Some characters don't work in Fusion, or become illegibly small. But over the years I've built up a text file with categorised symbols that are confirmed to work well in Fusion (in group names, comments, altVal and object names, though some temporarily display as squares in the expression editor). I'll attach the text file below.

    Please login to see this picture.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!