how to handle clicks on an object in js?

Post reply
0 favourites
  • 8 posts
From the Asset Store
I-Spy (Hidden objects)
$49 USD
Welcome! I-Spy (Hidden objects) is an educational puzzle that is more than just seek-and-find activities.
sanjibnanda's avatar
sanjibnanda

  • 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
	}
);

  • 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?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • 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");
		}
	}
}
Post reply
  • 8 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)