Search the Community
Showing results for tags 'click'.
-
Hi, I'm trying to develop a game in Phaser 3 where player is able to select a stage (basically a scene) of their choice. I want this selection menu to be like a map. This is how SVG file looks like. <svg> <g> <path id="land" class="land" d="M138.114,402.543l0.683,1.604l-1.204.(truncated)"> <path id="ice" class="ice" d="M238.114,402.543l0.683,1.604l-1.204..........."> <path id="water" class="water" d="M538.114,402.543l0.683,1.604l-1.204........"> </g> </svg> How do I add event to each of these path ? They all are inside one svg file. Normally, in vanilla JS we could select an element by id or class. If I load entire image at once using load.svg() adding event affects entire svg image. I can't tell which path was clicked. After more digging, I thought of drawing the map using Phasers graphics.fillPoints(). That way I could have reference to each area I draw. But again fillpoints expects arguments to be an array of Geom.Point and SVG's path attribute has different format (d="M238.114,402.543l). So, I can't do this either. I appreciate any help or suggestions for achieving what I am trying to do.
-
So, I'm having trouble understanding how to do something when clicking on a specific object. I'm creating game objects with this function: createBurger(){ this.newBurger = new Burger(this,this.input.mousePointer.x+cam.scrollx,this.input.mousePointer.y,'11'); this.newBurger.setScale(1.2); cant_burgers++; ctnr_burgers.push(this.newBurger); this.newBurger.setInteractive(); this.newBurger.setData({sideA: 1, sideB: 1, cooked:0, flip: 0, celda: undefined}); this.input.on("pointermove", this.follow, this); this.input.on("pointerup", this.drop, this); this.input.on("drag", this.drag, this); F_burgerPicked = 1; } When the pointer is up, I want to add data to the specific object that's being clicked, not the last one created. I tried adding another event listener in the update function, to no avail. Is there a better way of doing this?
-
Hi everyone, one of my functions is triggered twice for some reason. It is a simple click on an element. // the player stops touching the house confirmHouse(sprite, pointer) { console.log('confirmed'); // logs 2x confirmed if(MMM.candidateSprite == sprite && MMM.menuOpen == false){ var _this = this; ........ } } // function to set a single house with specific postion setOneHouse(posX, posY, id, reference){ var house = this.game.add.image(posX, posY, reference); house.id = id; house.anchor.setTo(0.5); house.inputEnabled = true; house.events.onInputDown.add(this.selectSprite, this); house.events.onInputUp.add(this.confirmHouse, this); console.log('House set'); // logs 1x house set MMM.backgroundobjects.add(house); }Is it due to the nature of the events.onInputUp function? This double execution of my confirmHouse function is causing some nasty problems. Hope you guys can help me
-
Hello, I am trying to use the Pixi.js example for mouse trails, and I wanted to spice it up with switching up the mouse trail every time I click a button Here is the HTML <!doctype html> <html> <head> <style> body{ margin: 0; } </style> </head> <body> <button id = "trailSwap">Swap Trail Color</button> <script src="pixi.js"></script> <script src="mouse-trail.js"></script> <script type="text/javascript"> </script> </body> </html> And here is the Javascript that I changed, the actual following and functionality of the trail works perfectly, however the actual act of switching between the trails doesn't. var app = new PIXI.Application({ backgroundColor: 0x1099bb }); document.body.appendChild(app.view); var bol = false; var swap = document.getElementById("trailSwap"); var picture = 0; let trailTexture = PIXI.Texture.from('pic/trail0.png'); var historyX = []; var historyY = []; var historySize = 20; var ropeSize = 1000; var points = []; // Create history array. for (let i = 0; i < historySize; i++) { historyX.push(0); historyY.push(0); } // Create rope points. for (let i = 0; i < ropeSize; i++) { points.push(new PIXI.Point(0, 0)); } // Create the rope let rope = new PIXI.SimpleRope(trailTexture, points); // Set the blendmode rope.blendmode = PIXI.BLEND_MODES.ADD; app.stage.addChild(rope); rope.interactive = true; rope.buttonMode = true; swap.addEventListener('click', onClick); function onClick(){ alert("here"); bol = !bol; if (bol){ let trailTexture = PIXI.Texture.from('pic/trail1.png'); } else{ let trailTexture = PIXI.Texture.from('pic/trail0.png'); } let rope = new PIXI.SimpleRope(trailTexture, points); alert("here again"); } The rest of the code isn't important to this as it is just making the trail smooth and follow the mouse properly. Any help would be splendid. Thank you!
-
Hi, Can anyone tell me please what the best way to hide a "BETTING CONFIGURATION" container by clicking anywhere on the screen other than that container? Actually i'm detecting the mouse coordinates and comparing with the window / container coordinates, but it's good practice? public static isColliding(mouse: any, object: any): boolean { return !(mouse.x < object.x || mouse.x > (object.x + object.width) || mouse.y < object.y || mouse.y > (object.y + object.height)); } this.baseContainer.interactive = true; this.baseContainer.addListener('pointerdown', () => { if (Utils.isColliding(this.mouseCoord, betConfigUI)) { console.log('you are in window space'); } else { console.log('you are not in the window space'); } }) Thanks in advance!
-
Refer to the playground url below, sprite is in front of the sphere, however the click / pick event triggered on backend sphere first regardless of the sprite's position. Url: https://www.babylonjs-playground.com/#9RUHH#29 Expected result: Player clicked will be triggered instead of Sphere clicked.
-
This is my code right now to check if left or right mouse button is down: // Left button down app.stage.on("mousedown", function() { // code... }); // Right button down app.stage.on("rightdown", function() { // code... }); But it doesn't seems to be possible that both events happen at the same time. How would I check if both mouse buttons are pressed? Left and right.
-
I was posting this thread at the wrong place (it was in Phaser 2). OK, I am having a very bad time with clickable objects. It works perfectly on desktop browser but when I run it on my Android mobile the hot spot is totally off. Please refer to the attached picture to have an idea what I am talking about. The blue square is the clickable object (it's a .png picture). Tapping the object won't fire the input event but if I tap around the position where I draw the marquee it will. In other words, the clickable area is off of the picture. I found this thread where the OP had a similar issue and mentioned that is could be related to the mobile devicePixelRatio when using Phaser.CANVAS but I couldn't establish a coherent relationship between the DPR and the displacement (otherwise it could be "compensated" with code). I really cannot see how to solve this. I am about to give up Phaser and try a different engine. Any idea?
-
I'm working with PixiJS to create a web app with OS-like functionality (source here: https://github.com/steverichey/OpenGNOP) so I obviously need to have stuff related to mouse and touch events. I've tried stuff like this (based on the examples): this.interactive = true;this.mousedown = this.touchstart = this.onClick.bind(this);this.mouseup = this.touchend = this.mouseupoutside = this.touchendoutside = this.onRelease.bind(this);But it's hit or miss. BitmapText will function normally but DisplayObjectContainers may or may not, and Graphics seem to never register clicks. Is there something I'm missing? It appears that all of these elements should support mouse and touch events.
-
Hey everyone! I am trying to achieve a zoom on an element using PIXI I have currently a graphics rectangle (see first image) It is the child of my stage which is the main container being rendered. My main container is as big as the browser screen. On clicking the graphics element I want the stage to zoom in in a way that I get this output (see second image) As you can see on the desired output I want the rectangle to take up the whole container. I am confused with what pivots do I choose and what new positioning do I set to achieve this and till what point do I scale this?
-
Hi! I have a background plane and rendering text over top in another smaller plane. I'm then registering an OnPickTrigger to select the background plane: // this.shapeRoot is a Plane mesh this.shapeRoot.actionManager = new BABYLON.ActionManager(scene); var action = new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { console.log("node picked!"); }); this.shapeRoot.actionManager.registerAction(action); This all works, but the event is not triggered on the background plane where it's blocked by the text plane. How can I tell the event system to ignore my text plane or bubble the event to the background plane? Thanks! -
Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/phaser.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(game.world.centerX, game.world.centerY, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'}); clicker.events.onInputDown.add(listener, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
-
Hi, I am new on Phaser framework actually, but i am trying to find out. I have an easy test game, where emitter moving from left to right, and drop particle, which is candy with 3 different state. So i have to click on particle, and it has to change animation frame. When i click 3 time, particle have to disapear. Here is my game code, but actually, i cannot make click event working. It looks like something wrong with my code, but i don't know where <script> function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } var game = new Phaser.Game('100%', '100%', Phaser.AUTO, '', { preload: preload, create: create, update: update }); var emitter; function preload() { game.load.spritesheet('waffle', 'waffle_sprite.png', 150, 150, 3); } function create() { // game.physics.startSystem(Phaser.Physics.ARCADE); emitter = game.add.emitter(game, 100, 100, 20); emitter.inputEnableChildren = true; emitter.onChildInputDown.add(onDown, this); emitter.gravity = 0; emitter.minRotation = -100; emitter.maxRotation = 100; emitter.setYSpeed(150, 300); emitter.setXSpeed(50, 50); emitter.makeParticles('waffle', 0); setInterval(function(){ emitter.x=getRandomInt((game.width * 0.1), (game.width - game.width * 0.1)); emitter.start(true, 5000, null, 1); }, 1000) } function update() { } function onDown (sprite) { console.log(sprite); } </script> Can you please help me fix click event on every child? Thank you! I will continue my developing after fix this issue.
-
I am working on a project that switches between a handful of scenes. To do this I load all of my scenes at the start so you can switch between them quickly. You start out in an overall view of the area and you can click markers to go into rooms. In the rooms are more makers that are hooked up to click events. However If one of the markers in the scene is in the bottom left of the screen per say and I move to a different scene, If I would click in the bottom left of the screen the click event of the previous room triggers. How do I make sure that click events are only active for the currently active scene?
-
Hey guys, I'm wondering if anyone can spare some time to please help me? The issue exists within an existing project so is difficult to debug. I'm hoping people can just suggest anything rather than seeking a specific fix while I continue to debug 1. I create an object and place it on the renderer. 2. Then I attach a function to the "pointerdown" event on that object. furni.interactive = true; furni.on('pointerdown', function(){ game.ui.showElecFurniInfo(this); }); 3. I then create sprites above it that act like flashing/rotating spot lights e.g. light = PIXI.Sprite.fromImage("png/spotlight3.png"); light.width= 64*2; light.height= 64*3; light.x = furni.x+44; light.y = furni.y+10; light.height = light.height /2; light.anchor.set(0.5); light.alpha = 1; light.rotate = -180 light.blendMode = PIXI.BLEND_MODES.ADD; game.render.lights.addChild(light); game.flashingLights.push(light); //This will change the opacity every now and then game.rotatingLights.push(light); //This will rotate the light every now and then This is where the problem starts. The pointerdown event isn't firing if one of the rotating lights happens to be over where I click. Even though light.interactive is not set, and even explicitly setting it doesn't resolve the issue. Notes: Removing the lights does fix the issue. Adding the same pointerdown function to the lights fixes the issues but the lights are bigger than the object so it's a crap 'fix'. See test case below In my real code there are multiple containers both above and below these objects which may have click events Test case outside of the project shows the issue should not occur: [Some form of fix] The problem can be fixed with: light.hitArea = new PIXI.Rectangle(0, 0, 0, 0); This just adds to the confusion more to be honest...
-
Hello. I am very new to PIXI, so please bare with me. I have been in search of good API for my game. The game uses a map which contains tiled images as well as a bunch of path on the screen. Think Google Map, except a lot simpler. I was able to use PIXI to implement the map background where it scrolls and loads tiled map images as needed. I was also able to draw paths onto the map. Now the problem is that I cannot figure out how to interact with those paths. I used PIXI.Graphics to create and draw a path. I applied mouse events to it. But no event is fired. I was able to get the even to fire if I made the graphic into closed path will fill. But unfortunately that will not work for my purpose. Is there any way to accomplish this? Any way to interact with just a path (could be complex paths with multiple segments and/or curves) rather than enclosing shape? Thanks in advance!
-
I'm developing point&click quest adventure (something like Machinarium) I have a background, for example, like on the bkg1.ipg I want to define some zone where the character can move. Example on bkg1-marked.jpg. Reaching the end of the red zone the character should stop. Also, it would be great to have ability to make it with some pathfinding like f.e. there are stairs on the background image and the character stays somewhere else on the "first floor". Player clicks on top of the stairs and the character goes there, according to the zone where he can walk Does Phaser have any tools for that?
-
Hi, I'm new on Phaser and my english isn't perfect, so i'll try to be careful. I made a 2D mini game like that : (see screenshot). What I need is to move my character on right click. - I handeled my right click (so it's ok). - I have in an array the path I need the character to use (ex : [[0.0],[0.1],[0.2],[0.3],[0.4],[0.5]]). My character have got a speed (equals to 1) and I need my character to move from the first point to the last of my array by passing by the others ... like a unit in Warcraft 3, League of legend, etc. Do you know how i can do that please ? Thanks for your time. Antoine Duval.
-
The default setup for buttons in Phaser is that if you click on a button, then move the mouse (or finger on mobile) off the button, when you let go it still registers as a click/tap. Is there a way to have Phaser buttons perform like most buttons - where if you move the input off the button before you release, it does not activate the button?
-
hi. I'm having a bit of a brain dead moment!!! I need a super simple if button is clicked restart the game state in the pause menu. (Im using the game pause as a cheat end game screen) this is the function I'm working on - all I need is to be able to click 'rePlay'. endGame: function() { this.game.paused = true; this.game.add.text(this.game.world.centerX - 150, this.game.world.centerY - 100, "game over", { font: "60px Raleway"} ); // place the reset button this.rePlay = game.add.sprite(this.game.world.centerX - 150, this.game.world.centerY + 100, 'rePlay'); this.rePlay.anchor.setTo(0.5, 0.5); // if replay is pushed --- this if (this.rePlay.event) { game.state.start(game.state.current);; } }
-
Hello gamedevs! I just jumped into Phaser, and feel realy well prepared after the Zenva course, Examples and the help of the Forum. But I just run into a problem where I can't find any solution. I just setup a Emitter who is creating world/another colliding bubbles within a mask. What I now want is to collide them also with my Input (mouse/touch). (Everyone knows the effect of run the mouse into a particle bubble bath :D) I tried following: -Find any Emitter function in the docu -Move a colliding box to the position where I clicked (he doesnt moves bubbles who within the box, just colliding with the ones who newly fall into it) -Add a Drag function to Particles (emitter.input.enableDrag(true); doesnt work; cant find any equal function in docu) Maybe I am just looking for the wrong keywords, but cant understand this common effect of colliding emitter particles with Mouse Input is that hard to find Would be awesome if you can point me!! Thanks in advance, have a nice day //Update #1 It seems like their is a problem with Dragging Sprites and their correct collision detection. For another smilar problem I want a red ball to drag out of this bubble bath. Same problem, but now I let them drag out via follow mouse, collision works now correct.
-
I feel embarrassed, but after doing a lot of research I can't seem to be able to implement this simple feature. Can anyone here who's familiar with pixi walk me through how I might accomplish this? Things I've tried... I'm trying to use .on('click', move) and then I have the move function right now set to just return the value of the pointer. I can't even get my code to return anything, let alone move the sprite. I've tried doing stage.on('click', move); and it just doesn't work. I get no errors in the console. nothing. It just doesn't work. After that, I tried creating a rectangle and using rectangle.on('click', move); I even fill in the rectangle with a color to make sure it's actually there. Nothing. my code is just unresponsive. No errors no nothing. The only time my code works is when I use the .on('click', move) on the actual sprite I'm trying to move! sprite.on('click', move). It will then return 'undefined' indicating that I at least got that far... I can provide my code if needed. But first I wanted to just check in and see what the best practice is for this, and if I'm just missing something elementary.
-
Hello. I tried the following code in one state in my game but it didn't work: var x=50,y=300; state1 = function(){}; state1.prototype = { preload: function(){ game.load.image('cover', 'lovely.png'); }, create: function(){ game.stage.backgroundColor = "#ba55ae"; cover1 = game.add.sprite(x+100+0,y,'cover'); cover2 = game.add.sprite(x+100+100,y,'cover'); cover3 = game.add.sprite(x+100+200,y,'cover'); cover4 = game.add.sprite(x+100+300,y,'cover'); cover5 = game.add.sprite(x+100+400,y,'cover'); cover1.scale.setTo(0.35,0.35); cover2.scale.setTo(0.35,0.35); cover3.scale.setTo(0.35,0.35); cover4.scale.setTo(0.35,0.35); cover5.scale.setTo(0.35,0.35); cover1.events.onInputDown.add(listener,this); }, update: function(){ }, listener: function() { console.log("lovely"); } }; I base it on this example: https://phaser.io/examples/v2/basics/02-click-on-an-image. Why do you think it is not working?
-
I'm unable to remove event listener from a particular sprite in consideration. Please refer the following code and the comments for more details: TheGame.prototype={ //..more code here create: function() { game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; this.createLevel(); }, createLevel: function() { var nodeCounter = 1; for (var i = 1; i <= gameOptions.rows; i++) { for (var j = 1; j <= gameOptions.cols; j++) { this.addNode(i, j, nodeCounter); } } }, addNode: function(x, y, c) { var node = game.add.sprite(100 * x, 100 * y, "node"); node.belongsTo = null; node.coordinate = new Phaser.Point(x, y); node.pos = c; nodes[c - 1] = node; node.inputEnabled = true; //On mouse down 'assignNode()' is called node.events.onInputDown.add(TheGame.assignNode, node); //But on mouse up 'assignNode()' is not removed from the listener node.events.onInputUp.remove(TheGame.assignNode, node); } } TheGame.assignNode = function(node) { //does something } Thanks & Regards -
Hey Phaser people, I'm currently working on a 2d upperview point & click game, using Arcade physics. What I want to develop is a "smart movement" system, where if you click on a part of the map, your character shouldn't get stuck in obstacles, but pass around them. For now, I'm using tweens to move my character to the mouse position, which cancels the collision. Thus, it's a no go. this.game.input.onDown.add(this.movePlayer, this); movePlayer: function (pointer) { var time = 9.5; var duration = (this.distance(this.player.x, this.player.y, pointer.x, pointer.y) * time); this.tween = this.game.add.tween(this.player).to({ x: pointer.x, y: pointer.y }, duration, Phaser.Easing.Linear.None, true); } Any suggestions ? Thanks ! I've also attached a small screenshot/ drawing of what I strive to achieve.
