Search the Community

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?

Hey everyone! I wanted to get a bit of help getting a function working whereby when I hover my mouse over character sprites it will show a there name and title just above the mouse position for each different sprite, I'm unsure if I need to look at going down the route of a mouse hover/mouse over function or i need to create an event listener. If anyone could make a demo that I could play with and learn from or something that would be perfect! Thanks guys! Mezz

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

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!

Hi, I am currently developping a Tower Defense style game and I want a nice effect when the mouse hovers a sprite. So I was wondering if it was possible to achieve something similar to this image without the necessity of making another image. I'm talking about the yellow shape when the cursor is on the sprite. I need to have this effect even during an animation, which is why I think it would be complicated to manage if I had to switch between two types of images. And also collision detection with the cursor needs to be relatively precise. When the cursor is OUT : When the cursor is OVER : Thanks

Continuation of my Phaser game that I've been working on for the last few months. Working on a menu system now and trying to polish up the buttons with a hover state. I based my button code off of the example from Phaser. My issue stems from it doesn't work as it should. Right now it doesn't do any hover over change unless you hold down the mouse button and then move your mouse off and on the button. So rather than being able to change between the over and out images and then on click images it currently only has a change for on click and if you hold down the mouse button on a button and move the cursor out and over the button it changes.I know it is super wordy but I don't know how else to explain it. Here is my code: var newgameButton; this.newgameButton = this.game.add.button(50, 50, 'NewGame', this.newGameOnClick, this, 1, 0, 2); this.newgameButton.onInputOver.add(this.over, this); this.newgameButton.onInputOut.add(this.out, this); this.newgameButton.onInputUp.add(this.up, this); up: function() { console.log('button up', arguments); }, over: function() { console.log('button over'); }, out: function() { console.log('button out'); }, newGameOnClick: function() { this.game.state.start('LevelTut'); },

Hello guys, What I wanted to do is when the user hovers the mouse over the sprite then the game will display border around it. I've created two sprites one is a normal sprite and the second one is just a border. At the beginning I put both sprites on the same position and I hide the second sprite. When the user hovers mouse over I set visible property of the second sprite to true, on hover out I set it to false. Simple and it works. But I was wondering is there a way to achieve this without adding second sprite?

Hi all, I'm having problems in a project where I load a portion of a texture. When I hover over the image, I want another image to load. However, when my cursor leaves the image, I want it the original texture to load again, but at its cropped size. I'm not really sure how to do this. Here is a demo of what I'm talking about and here is its source code: var game = new Phaser.Game(800, 600, Phaser.AUTO, "game", {preload: preload, create: create, update: update});var block;function preload () { game.load.image("logo", "phaser.png"); game.load.image("space_guy", "exocet_spaceman.png");}function create () { bmd = game.make.bitmapData(150, 150); mask = game.make.bitmapData(500, 500); mask.fill(50, 50, 50); rect = new Phaser.Rectangle(100, 100, 100, 100); bmd.alphaMask("space_guy", mask, rect); sprite = game.add.sprite(10, 10, bmd); game.physics.arcade.enable(sprite); sprite.inputEnabled = true over = function () { sprite.loadTexture("logo"); }; out = function () { sprite.loadTexture("space_guy"); }; sprite.events.onInputOver.add(over, this); sprite.events.onInputOut.add(out, this);}function update () {}As you can see in the demo, the spaceman sprite is originally cropped to a certain size. When you hover over it, another image loads in its place. The problem that I'm having is that I'm not sure how to put the cropped image back once the cursor goes off of the image, as the image is loaded but without its cropped size.

Hi guys, I am looking for a solution to add an effect in addition to the callback for the over/hover state in the button instance, for instance in: button = game.add.button(game.world.centerX, game.world.centerY, 'button', actionOnClick, this, 'hover' , 'out', 'down');actionOnClick(){ button call action.......}Is it possible or how would you implement a callback for a hover sound effect and the concurrent hover button response in the hover positon? for instance: button = game.add.button(game.world.centerX, game.world.centerY, 'button', actionOnClick, this, function , 'out', 'down');actionOnClick(){ button call action.......}function(){sound effect...hover effect...}how would any of you go about implementing this efficiently if possible? thanks alot