Search the Community

Showing results for tags 'mouse'.



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 79 results

  1. Get Mouse Position?

    Hi, I am very new to Phaser, so this is a very basic question. I want objects to follow the mouse around the screen. To do this I was going to get mouse position values and then set the x and y coordinates of a sprite to the mouse position. Unfortunately I could not find an example of this from the files and thought that the forums would be the quickest and easiest place for an answer. Thanks!
  2. Hi There is bug when BABYLON.GUI buttons that has been created with custom viewport on camera: buttons can be clicked even if mouse is out of button playground: https://www.babylonjs-playground.com/#08PH4F#1
  3. I wanted to know how to recreate the mouse movement effect I have found in an online example I am trying to recreate, the example is found here: https://www.g-star.com/en_gb/raw Currently I get Jerky movements and fast rotation, I'm looking for infinite gradual scrolling effect which increases depending on mouse position, this is what im using for my mouse movement are there any alternatives or changes I can make to fix this? var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed);
  4. Camera and Sprite

    I have been working tirelessly with this and really struggling to get anywhere, if anyone can offer some form of assistance I would be greatly appreciative. I have essentially set up a reel of characters (staff) as sprites organised by co'ords in three circles, 12 characters per circle, around the camera set at (0,0,0), (Radius of circles are 1.5/1.45/1.4 I have a scene built currently which is super buggy in movement as well. I need it to when the mouse hovers on the left or right side of the screen to rotate the camera continuously scrolling through the images on loop (Cant get working past following the mouse - no loop - no smooth movement as mouse movement on y axis also rotates the camera. This is my mouse movement code: var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); The second main issue i'm having is that the sprites keep disappearing when rotating the camera, I'm trying to create a constant panable image reel from inside to view members of staff, there is an example i'm trying to follow and recreate found here: https://www.g-star.com/en_gb/raw If anyone could tell me how to solve me mouse hover to move issue (with infinite looping) or a fix for the rendering of sprites issue it would be great! If anyone thinks they can help and needs any more code of any kinds just let me know and i''ll sort it! Thanks!
  5. Hi, On Firefox the camera stops rotating when your pointer leaves the canvas: http://playground.babylonjs.com/ Which doesn't happen on Edge, IE, Chrome or Opera
  6. Hey guys, I'm very new to babylon JS and I've a problem with understanding how to add a mesh to the cursors movement. Here is an example: try.matterport.com. I've created a playgroud: https://www.babylonjs-playground.com/#S0BZWE The mesh is changing its size and isn't always in front off all other meshes as shown in the exampel (matterport). Can somebody give me some light? Thanks in advance Benji
  7. I have a group of meshes that have OnPointerOverTrigger events. When I mouse over them the event triggers. However, when I mouse over them while they are behind another object that has no events, the OnPointerOverTrigger still triggers. Is there a simple way to make OnPointerOverTrigger not trigger when the mesh is behind another mesh?
  8. I have been having problems when I scale my gamemaker 2 html5 game to fit the height of the browser. Once it scales up it no longer detects the mouse position. Without it being scaled to height I am able to click on my enemies, but when it is scaled to browser height I am unable to. I figure it has to do with the scaling to the browser height Thanks in advance! if(os_type == os_windows){ ideal_width = 0; ideal_height = browser_height; start_b_width = browser_width; start_b_height = browser_height; aspect_ratio = browser_width/ browser_height; ideal_width = round(ideal_height / aspect_ratio); if(ideal_width & 1){ ideal_width++; } room_set_width(rm_game, ideal_width); room_set_height(rm_game, ideal_height); surface_resize(application_surface, ideal_width,ideal_height); room_goto_next(); alarm[0] = 60; } //In my alarm window_set_size(room_width,room_height); window_center();
  9. Hi, I did setup the LensRenderingPipeline and i noticed that the code i use for picking meshes work awkward away from the center of the screen once I enable lens distortions, if removed all is fine. I am using the pick results from scene.pick(scene.pointerX, scene.pointerY) and is only working with no distortion.
  10. Mouse control instead of keyboard

    In games agar.io and slither.io, player control is implemented with the mouse. The player is always in the center of the screen and moves in the direction the mouse cursor points to. Phaser.js offers us control only through the keyboard, as there https://phaser.io/examples/v2/camera/basic-follow. Perhaps someone already implemented control such as in agar.io and slither.io using phaser.js? Maybe someone has code samples?
  11. Hi guys, I'm having a hard time figuring out how to move a given object to the destination of a clicked mesh. Playground link (similar recreated scenario): http://www.babylonjs-playground.com/#2CFAMI#13 As you can see, the first two actions (hovering mouse in/out effect) work fine with every tile, but the animating action seems to always extract the position of the last added tile. I'm suspecting it's because I'm overwriting the tile variable (and thus its position values) or something. I also suspect that using instances for the tiles might be a better option, since in the game they also just use 5 different materials that are loaded before-hand...but first things first. Thanks in advance for taking a look!
  12. Finding mouse position in world

    How can I find the pointer's x/y coordinates in the world? Can I convert between camera and world coordinates?
  13. I have a dictionary of sprites displayed on the screen. I am trying to remove the sprite that the user clicks on. To do this I am trying to get the location of the mouse click, and get the sprite at that location. Is there a function to get a sprite on a stage based on location?
  14. Hey Guys! I am making a game when I need the player to look at mouse pointer. I implemented this. But Phaser seems to be giving coordinates only inside canvas bounds. which gives effect like this: demo I get mouse coordinates like this: lookAtMouse() { const mouseX = this.game.input.mousePointer.worldX, mouseY = this.game.input.mousePointer.worldY; this.lookAt( mouseX, mouseY ); } lookAt( targetX, targetY ) { const targetPoint = new Phaser.Point( targetX, targetY ), entityCenter = new Phaser.Point( this.body.x, this.body.y ); let targetAngle = ( 360 / ( 2 * Math.PI ) ) * this.game.math.angleBetweenPoints( targetPoint, entityCenter ) - 90; if ( targetAngle < 0 ) { targetAngle += 360; } this.angle = targetAngle; } Is there any way that I can get mouse coordinates outside of the canvas ?
  15. 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.
  16. How to know if NO sprites are clicked?

    I am working on a project in which the user creates a system of points by adding them one-at-a-time. These points are also draggable, and clicking on existing points sets the clicked point as active. That's all working fine. When using a simple mouseDownCallback, clicking one of these existing points creates interference between the activities of the new point and the old point. I want to be able to determine what sprites, if any, a clicked point contains and run a function only if the spot is unoccupied. If I can do this via the activePointer versus specifically mouse, that's preferred, but not necessary. Can someone point me in the correct direction?
  17. Hey guys, I'm newbie of Phaser so I hope you don't get mad for my simple problem. My code simply moves a tank sprite around the screen, along with rotating its barrel (its childSprite) by using the mouse position...that's it. The problem is the barrel: its rotation is completely broken! I used angleToPointer() directly from Phaser.io documentation but I can't find the solution of this problem. video: broken_rotation.wmv var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }) var player; var barrel; function preload() { game.load.image('tank', 'assets/PNG/Tanks/tankBlue_outline.png'); game.load.image("barrel", "assets/PNG/Tanks/barrelBlue_outline.png"); } function create() { player = game.add.sprite(200, 200, 'tank'); player.scale.setTo(0.5, 0.5); player.anchor.setTo(0.5, 0.5); barrel = new Phaser.Sprite(this.game, 0, 0, "barrel"); player.addChild(barrel); barrel.anchor.setTo(0,0.5) } function update() { if (game.input.keyboard.isDown(Phaser.KeyCode.W)) { speed = 3 var velocityX = Math.cos(player.angle * Math.PI / 180) * speed; var velocityY = Math.sin(player.angle * Math.PI / 180) * speed; player.x += velocityX; player.y += velocityY; } if (game.input.keyboard.isDown(Phaser.KeyCode.D)) { player.angle += 1; } if (game.input.keyboard.isDown(Phaser.KeyCode.A)) { player.angle -= 1; } if (game.input.keyboard.isDown(Phaser.KeyCode.S)) { speed = -2; var velocityX = Math.cos(player.angle * Math.PI / 180) * speed; var velocityY = Math.sin(player.angle * Math.PI / 180) * speed; player.x += velocityX; player.y += velocityY; } //barrel.angle += 1 the automatic rotation works perfectly!... barrel.rotation = game.physics.arcade.angleToPointer(barrel); // ...but not the input one sadly } function render() { game.debug.spriteInfo(barrel, 20, 32); }
  18. Brick Breaker

    Hey guys This is another one of my html5 games. It is the first html5 game that i have built using the Phaser framework. I have google analyse code in it but it isnt working. anyone that can help please do. Here is the link. I would appreciate the pointers and positive criticism. Cheers Pheaset
  19. My post about control mechanisms in JavaScript games was just published on Mozilla Hacks blog. It introduces a series of MDN articles about Implementing game control mechanisms: Mobile touch controls Desktop mouse and keyboard controls Desktop gamepad controls Unconventional controls The basic examples are available on GitHub at github.com/end3r/JavaScript-Game-Controls And the articles are using Phaser-based game Captain Rogers: Battle at Andromeda demo as a case study.
  20. Hey everyone I am not sure why but if I create two ScreenSpaceCanvas2D in two different scenes, one of the scenes being shown and not the other (stored in a parent object). The function Canvas2D.prototype._updatePointerInfo is called twice each time I move the mouse, once for the shown Canvas, and once for the canvas that is in the stored scene. Since I did not declare a camera in that stored scene the bit of code in babylon.max.js 44657 : Canvas2D.prototype._updatePointerInfo = function (eventData, localPosition) { ... var camera = this._scene.cameraToUseForPointers || this._scene.activeCamera; ... } return camera as undefined. And later on while the function tries to access camera.viewport it returns an error. This report is not really about solving the bug because if I declare a random camera for the stored scene (like a normal human being not trying to find bugs everywhere) i do not get the error. But I think it was not on purpose that events are captured on a canvas in a scene that is not currently rendered. All in all it is not a real problem for me but it might cause trouble for other people. To change between scenes I use this bit of code /* --- Start the render loop --- */ taskObject.engine.runRenderLoop(function () { taskObject.scenes[taskObject.currentScene].render(); }); This is the call stack for the error: Uncaught TypeError: Cannot read property 'viewport' of undefined @babylon.max.js:44665 Canvas2D._updatePointerInfo @ babylon.max.js:44665 Canvas2D._handlePointerEventForInteraction @ babylon.max.js:44628 (anonymous function) @ babylon.max.js:44549 Observable.notifyObservers @ babylon.max.js:3399 _onPointerMove @ babylon.max.js:15232 It seems the observables are set up at scene creation and down the callback chain there is no test to check wether the scene is currently being rendered (is that even possible?).
  21. 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 ^^")
  22. well.. this works.. but it is insufficient... if (game.input.mouse.button==2){ shootSensor();}if (game.input.mouse.button==0){shootFireball()}i need to set onDown events or ask for button.isDown ? i also need to find out when the button is NOT pressed anymore and i need to be able to press both buttons together and do 2 things at the same time... thx in advance!
  23. I found this topic where it says that graphics object in phaser has hitArea that can be any shape. I searched Phaser docs but didn't find hitArea property. Is it moved somewhere else or is there some new way how to make graphics object clickable and call certain function when a click event happens? Also how can I show cursor hand when rollover a clickable graphics object? I forgot to ask is there some official phaser example for this functionality? PS: I even searched DisplayObject class but didn't find hitArea there.
  24. Hello, I'm trying to handle right-click events on the sprites in my game so that I can display context menus, but I can't find a way to tell if the onInputDown event on the sprite was triggered by a right click. I've tried checking this.game.input.mouse.button, but it always comes up as -1. I've tried checking the rightButton property on the pointer passed into the onInputDown callback as a parameter, but rightButton comes up as undefined. How can I do this? I was expecting a simple way like onInputRightButton, or a parameter passed to the callback that would let me detect the source of the input. Thanks!
  25. Less than infinite mouse force with p2

    I am making a quick demo that is built of off the p2 ragdoll demo. I am not running Phaser, just standalone p2 with p2 renderer. I have a linkage that is anchored to a fixed point that can be articulated with the mouse. The issue is that the mouse can easily... dislocate the linkage due to the mouse having infinite force. I came across an example for Phaser called mouse spring but I was unable to adapt it to standalone p2 with p2rederer. I attempted to hijack the mouse down functions but I'm not really familiar with p2, this was meant to be a slapped together demo. Any help would be greatly appreciated, I have attached what I have so far. ragdoll.html