Jump to content

How to listen to a click anywhere on scene except for certain objects


Recommended Posts

Hi all!


In my game




You can select units by clicking on them and a bounding box shows it as currently selected.  If a user clicks anywhere on scene I want to deselect them. Obviously I can listen to canvas click natively but that won't tell me if no unit is under the mouse.


What is my correct strategy?


As a bonus does anyone know a good tweening lib for moving from (x1,y1) to (x2,y2). Basically I want to have a a unit acceleration to top speed and deceleration approaching end point.

Link to comment
Share on other sites

Hi Nikos


Just a few mods to our drag'n'drop playground demo.  In the onPointerDown func... line 83... showBoundingBox if a mesh was hit.

Then I added lines 93-99. If user clicked but didn't hit a mesh (else), then scan through all scene meshes, and if its bounding box is true, shut it off.

In fact, you could just set all bounding boxes false... whether any are set true or not.  (set them all false, no matter what.)  :)


Bonus:  That is called "easing" and the playground for easing is http://www.babylonjs-playground.com/?20  .  Documentation for easing is found at http://doc.babylonjs.com/tutorials/07._Animations   - section 4.  Good luck!

Link to comment
Share on other sites

For whatever reason this function is never excecuted pointerdown


    this.canvas.addEventListener("pointerdown", e => {
        if (e.button !== 0) {
        // check if we are under a mesh
        var pickInfo = this.scene.pick(this.scene.pointerX, this.scene.pointerY, function (mesh) {
          return mesh !== this.ground.mesh;
        if (!pickInfo.hit) {
          this.cores.forEach(core=> {
Link to comment
Share on other sites

Good job, Nikos.  A little experimenting and some console logging... gets the job done, eh? 


onPointerDown is a custom event HANDLER... but it is a standard HTML event, on a HTML canvas element.  So it follows standard HTML element bubbling and cascading.  There's plenty to read about canvas events on the web.


Likely, you will use a picking ray to test for laser target hits, so it doesn't matter what type of animation you use for the lasers.  Only if you are firing real mesh objects... do you need to be concerned with gaps between "pulses".  Particles work nice for this, but they CAN have a little delay time before they reach the target.  Also, intersect testing can be a challenge with particles.  A fine forum thread is http://www.html5gamedevs.com/topic/11278-controlling-particles/ ...  see the light sabers. 


In particular, notice the distance-measuring information and code.  I don't know if mesh intersect works on standard particles, so you may want to put a small invisible plane or box at the end of the particle stream.  Maybe check for intersect with THAT mesh... against a target.  This might not be the best approach, but it is AN approach.  :)


Good luck!

Link to comment
Share on other sites

Thanks Wingnut for this helpful and inspiring advice. I think for now I will focus on instantaneous weapons and only draw (thin very fast growing neon cylinders ) for the users benefit.


I'm quite excited about this game, its more fun coding it than playing existing RTS's out there as I can build it how I like and implement users feedback.


Once I get basic gameplay I will set up Peer to Peer with webRTC, do you think that is achievable with B..js?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...