Search the Community

Showing results for tags 'click'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 50 results

  1. Zooming a graphic/container/element on click

    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?
  2. 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!
  3. Hi, I have a button in my game which has two child elements(a text aligned top center in and another text aligned bottom center). The issue is the child texts are also taking click of the button which should not happen. Here is the code for this: Fiddle : var game = new Phaser.Game(480,320,Phaser.AUTO,''); var gameStates = {}; gameStates.Main = function(game){}; gameStates.Main.prototype = { preload: function() { this.load.crossOrigin = "Anonymous"; this.load.image('shop',''); }, create:function(){ var btnText = this.add.text(0,0,"Game Loaded",{fill:"#ffffff"}); var infoText = this.add.text(0,0,"This is a description of the game. It is only an informative text and it should not take click of its parent button. Try clicking this text",{fill:"#ffffff", wordWrap:true,wordWrapWidth:450}); var shopBtn = this.add.button(0,0,'shop', function(){ btnText.text = "Shop Clicked";}, this); shopBtn.anchor.setTo(0.5, 0); shopBtn.addChild(infoText); shopBtn.addChild(btnText); btnText.alignTo(shopBtn, Phaser.TOP_CENTER); infoText.alignTo(shopBtn, Phaser.BOTTOM_CENTER,0,20); shopBtn.x =; shopBtn.y =*0.2; } } game.state.add('main',gameStates.Main); game.state.start('main');
  4. Click event on sprite

    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=""></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(,, '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'});, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  5. 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?
  6. 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...
  7. 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!
  8. 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?
  9. 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.
  10. 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?
  11. 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() { = true; - 150, - 100, "game over", { font: "60px Raleway"} ); // place the reset button this.rePlay = game.add.sprite( - 150, + 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);; } }
  12. 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.
  13. 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.
  14. 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.
  15. 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);,this); }, update: function(){ }, listener: function() { console.log("lovely"); } }; I base it on this example: Why do you think it is not working?
  16. 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); //But on mouse up 'assignNode()' is not removed from the listener, node); } } TheGame.assignNode = function(node) { //does something } Thanks & Regards
  17. 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); movePlayer: function (pointer) { var time = 9.5; var duration = (this.distance(this.player.x, this.player.y, pointer.x, pointer.y) * time); this.tween ={ 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.
  18. 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: 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 : ((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 ^^")
  19. Here is a little bit of nonsense, mainly a movie but there is an interactive choice to make, will you do it or not? Anyone fancies adding sound, or other improvements? It will be interesting to see if there any developments and what they could be.
  20. 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?
  21. 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
  22. 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. Thanks.
  23. 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: 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?
  24. 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: = () => { //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 = () => { 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
  25. //Create all of our creatures for (var i = 0; i < 30; i++){, 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); },