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

[Nikos123]

Hi all!

 

In my game

 

http://quantuminformation.github.io/Density-Wars/

 

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.

[Wingnut]

Hi Nikos

http://playground.babylonjs.com/#ZVHBC

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!

[Nikos123]

Thanks wingnut! Next step lasers.

 

Do you think its better to have instantaneous laser speed or have more bullet like speed? With bullets have to allow chance of missing and complications.

[Nikos123]

Also is pointerdown a custom event fired by babylon that bubbles up?

[Nikos123]

For whatever reason this function is never excecuted pointerdown

 

    this.canvas.addEventListener("pointerdown", e => {

 

        if (e.button !== 0) {

          return;

        }

 

        // 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=> {

            core.deselect();

          })

        }

      },

      false);

[Nikos123]

I managed to get the onpointer down to work like so:

    this.scene.onPointerDown = (evt, pickResult:PickingInfo) => {      if (evt.button !== 0) {        return;      }      this.addMoveCommand(pickResult.pickedPoint);    }

[Wingnut]

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!

[Nikos123]

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?