Search the Community

Showing results for tags 'click'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 46 results

  1. Click on emitter particles doesn't work

    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.
  2. 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?
  3. 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...
  4. 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!
  5. Click Function Called Twice

    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
  6. 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?
  7. How to move on right click to position ?

    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.
  8. 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?
  9. simply click button to restart

    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);; } }
  10. 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.
  11. 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.
  12. 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?
  13. 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
  14. 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.
  15. Hello, I try to develop a game compatible desktop and mobile, but I am faced with a big problem. I managed to handle the scroll of the camera with this great plugin: http://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/ Now I would like to handle the click, in addition to the scroll. I'm comparing pointers in the update function, but no way to differentiate the click pointer and the first pointer of the scroll (the following is good) I'm am already able to detect the first click of a scroll compared to the next with isClick param on : this.game.input.addMoveCallback ((point, x, y, isClick) => {}) But nothing to differentiate a simple click of a first click on a scroll event I tried with a setTimeout but I not get a great result. Any other ideas ? Thank you PS: Sorry for my english (i'm french ^^")
  16. Here is a little bit of nonsense, mainly a movie but there is an interactive choice to make, will you do it or not? http://www.babylonjs-playground.com/#124DXA#20 Anyone fancies adding sound, or other improvements? It will be interesting to see if there any developments and what they could be.
  17. I'm just starting out with getting to grips with Canvs2D. I'm using it to make a GUI I'm having a problem with my GUI buttons. I have meshes that you can interact with by clicking on and a GUI in front. If I try to click on one of my GUI buttons while a mesh is behind it the mesh is picked as well. Is there a built-in way to get around this?
  18. Hello, I want to convert the coordinates from a mouse click to canvas coordinates. The coordinates generated by jQuery.PEP "pointerdown" event are apparently "world" (browser?) coordinates, they are not canvas coordinates. I am also using the "hit" testing, which is fine for "selecting" meshes. But now I want to engage the canvas for "missed" hits, and respond to those clicks as well. Where might there be a "simple" translation I can use that doesn't involve a "positive" hit? Thank you... Michael Powell
  19. Click on sprite reflect on things under it

    Hi, I have a problem that i think be simple. When i click on a button/sprite, the tilemap is clicked too. I want that the click on button/sprite not reflect on tilemap. https://www.dropbox.com/s/malml7b8vhuyeum/Screenshot%202016-04-20%2013.41.30.png?dl=0 Thanks.
  20. The PIXI.sprite, which is underneath a PIXI.particles.Emitter, has some bound mouse events - mouseover and click... but they are being blocked by the particles. When mousing over the sprite or clicking on it, the event is not fired. I found someone having the same issue, and his solution was to set the containing PIXI.container's interactive property to false: https://github.com/pixijs/pixi.js/issues/1725 However, in my situation, I require that the container be interactive for dragging and zooming the map. How can I allow the sprite's mouse events to be fired, regardless of whether a particles emitter (or even another non-interactive sprite) is overlaid on top of it in respect to the z-axis - while still keeping the container's interactive=true?
  21. tink.js strange function

    Hey, I need help from somebody who know tink.js. I'm making a small game in pixi.js where I'm also using the tink.js library. In their introduction they are telling me to use this function to do something on click: anySprite.press = () => { //Do something when the pointer presses the sprite }; But it just sends me an error in the console. The structure looks weird to me.. Can this be the right way to use it? I have a text, where I want something to happen when it is clicked, so I used t.makeInteractive(varD); And then in the play function varD.press = () => { console.log("pressed"); }; But it just returns [Error] SyntaxError: Unexpected token ')' What am I doing wrong? Also, is there an easier way to do something on click? Perhaps just using pixi.js without tink.js? Hope someone can help
  22. //Create all of our creatures for (var i = 0; i < 30; i++){ creature.events.onInputDown.add(this.listenerClick, this); console.log(i); } // Essential i want to take var i from above and bring it to the function below. How do i do this? listenerClick: function (sprite, pointer) { console.log(sprite); creature[sprite].scale.set(0.0); },
  23. Hi, This is my codepen : http://codepen.io/WW/pen/LGzpVv what i wanna do is trying click on stage and get the mouse position value, but, there's nothing happens while clickiing on stage. the official example looks working great : http://pixijs.github.io/examples/index.html?s=demos&f=graphics-demo.js&title=Graphics but mine isn't. so, anyone any idea? thanks for help. PS : i guess the problem might because the stage width & height isn't fit to the renderer. just guess, still trying....
  24. Clicks fall through sprites

    Hello, I'm working on a close source project so the amount of example code I can supply is relatively limited, so let me see if just simply describing my problem will help. We have three containers, linePoints and lineSegments, these containers are children of the line container. They are all interactive and in buttonMode We have two types of sprites, the points, and segments, these are children within their respective containers. These sprites are created also interactive and in buttonmode with events tied to them. Points get all of the drag related events (mosedown, mouseup etc) and Segments get just the click event. The structure : line(container, interactive) -linePoints(container, interactive) -points(sprite, interactive, draggable) -lineSegments(container, interactive) -segments(sprite, interactive, clickable) The problem : My points are drawn on top of the line segments, yet when I click on them to drag them around, this fires the click event on the lines lying beneath them (which actually creates a new point, so things get a bit messy) So my question is, are click events supposed to fall through sprites and activate on sprites underneath them in the draw order? If so then is there a way to properly block this from happening ? What I've tried : binding null to the click event on the points: point.on("click", null) debinding the click event on the points : point.off("click") - thought I couldnt actually find documentation on .off() so I'm not sure this even does anything changing the size of my points to be absolutely sure they are covering the lines - the clicks are definitely "falling through" and not just sneaking around, I'm clearly getting two interaction events at the same time here, one on the point when I mousedown to drag, and one on the line underneath it. So there's my issue, if this really isn't enough to explain or illustrate the problem, I can make a fiddle on request, but I'd like to avoid doing the extra work if it's not required. It's efficiency not laziness! Thanks all in advance
  25. How to decrease value on click

    So I have been working on this tycoon game for a few days now, (you can try what I have so far here) http://www.newgrounds.com/projects/games/935963/preview As a next feature I was going to add a money system, where each tile would cost $15 to place down Here is the code I'm using to place a tile down if (game.input.mousePointer.isDown) {if(!outarange){ if (sandbox.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)) != currentTile) { mtween.x = this.input.activePointer.worldX; mtween.y = this.input.activePointer.worldY-50; mtween.visible = true; money -=15; sandbox.putTile(currentTile, layer.getTileX(marker.x), layer.getTileY(marker.y)); } }}If you tried the demo, you might have realised that the money value goes down every frame while you're holding down the click button. How would I do it so it only gets decreased by 15 everytime a new tile is placed. Thanks for the interest