how to handle clicks on an object in js?

From the Asset Store
112 High-Quality destruction sounds for videogames
  • how to handle clicks on an object in js?

    async function OnBeforeProjectStart(runtime)

    {

    var a;

    a=runtime.globalVars["level"];

    alert(a);

    console.log(a);

    runtime.spite1.click(){

    }

    runtime.addEventListener("tick", () => Tick(runtime));

    }

    Tagged:

  • 	runtime.objects.button.addEventListener("click", () => {
    		//CodeHere
    	}
    );
    
  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hello Igordias,

    this is not working. I added a Button instance and this code. Nothing happens...

    runtime.objects.Button.addEventListener("click", () => {
    		console.log("Hello World!");
    	}
    );
    

    What do i missing?

  • runtime.objects.Button is an object type, not an instance. Try using getFirstInstance() to get the instance of a Button, then add the click event handler to that.

  • Now it works, thank you:)

    runtime.objects.Button.getFirstInstance().addEventListener("click", () => {
    		console.log("Hello World!");
    	}
    
  • programmer__r: If you would like to get clicks on a sprite, i think you need to use "containsPoint(x, y)". Here is an example:

    I added the two sprites to a family and add a "mousedown" event. On every click it will loop through the family children and checks, if a child is under the current mouse coordinates:

    async function OnBeforeProjectStart(runtime)
    {
    	// add corresponding txtFields UID and a counter variable to instances of sprites
    	runtime.objects.Sprite1.getFirstInstance().txtUID = runtime.objects.txtSprite1.getFirstInstance().uid;
    	runtime.objects.Sprite2.getFirstInstance().txtUID = runtime.objects.txtSprite2.getFirstInstance().uid;
    	runtime.objects.Sprite1.getFirstInstance().myCounter = 0;
    	runtime.objects.Sprite2.getFirstInstance().myCounter = 0;
    	
    	// add an EventListener mousedown
    	runtime.addEventListener("mousedown", e => OnMouseDown(e, runtime));
    	
    	runtime.addEventListener("tick", () => Tick(runtime));
    }
    
    
    function OnMouseDown(e, runtime){
    	// call click functions, here you could filter wich function you want to test
    	SpritesClicked(e, runtime);
    }
    
    function SpritesClicked(e, runtime){
    	const sprites = runtime.objects.Sprites.getAllInstances();
    	// loops through all sprites
    	for(var i = 0; i < sprites.length; i++) {
    		// checks if sprite contains mouse x,y point
    		if(sprites[i].containsPoint(e.clientX, e.clientY)){
    			sprites[i].myCounter += 1;
    			runtime.getInstanceByUid(sprites[i].txtUID).text = "Clicks: " + sprites[i].myCounter.toString();
    		}
    	}
    }
    

    I think this is the way you would simulate the "Mouse on Object clicked Event".

  • That won't always work, because JavaScript input event positions (clientX/clientY) aren't always the same as layer co-ordinates. You should use the layer cssPxToLayer method to convert clientX/clientY to layer co-ordinates before testing containsPoint.

  • Thanks again. Here the solution Ashley mentioned:

    async function OnBeforeProjectStart(runtime)
    {
    	runtime.addEventListener("mousedown", e => OnMouseDown(e, runtime));
    	runtime.addEventListener("tick", () => Tick(runtime));
    }
    
    function OnMouseDown(e, runtime){
    	// get the actual layout with first layer
    	const currentLayer = runtime.layout.getLayer(0);
    	const mouseXYAr = currentLayer.cssPxToLayer(e.clientX, e.clientY, 0);
    	const sprites = runtime.objects.sprites.getAllInstances();
    
    	// loops through all sprites
    	for(var i = 0; i < sprites.length; i++) {
    		// checks if sprite contains mouse x,y point
    		if(sprites[i].containsPoint(mouseXYAr[0], mouseXYAr[1])){
    			console.log("spirte clicked");
    		}
    	}
    }
    
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)