Search the Community
Showing results for tags 'cursor'.
-
Hi everyone, I checked many articles about this topic. All what I tried didn`t work for me. But unfortunately there is no clear vision what are the steps to make your custom designed (from your png or cur file) cursor view. Just simply change from default one (white arrow) to my own. The questions are the follows: What kind of variables I should declare? Where in the code I should declare them (like global, or in setup function, or update function)? Examples: Complete code to use cursor defined in CSS file? ( example of css, and js file). Nothing else, just using cursor style defined in CSS. Complete code of defining your own cursor in js file (pixi application). Nothing else, just using my own cursor style (png, cur) in PIXI application. Any other solution. I think replies on these questions will shed the light on this mysterious topic. What I checked: And finally this one: https://github.com/pixijs/pixi.js/issues/4238 + some minors Thank you in advance,
-
Hi, I noticed that after sprite manager component refactoring, cursor change system was removed from scene, and added inside sprite manager but only for sprites, so meshes don't have pointer cursor any more. Is there any other way now to add pointer cursor for active meshes ? Are there any plans to add it back using component system, or pointers will be only for sprites from now ? Thank you.
-
How to pass the cursor object to a method that belongs to a class that inherits the Phaser.Sprite class? I have a class that inherits from Phaser.State in which I create a cursor object and pass it to the update method from another class. class Play extends Phaser.State { create() { this.physics.startSystem(Phaser.Physics.ARCADE) ... this.player = new Player({ game: this.game, x: 32, y: this.world.height - 150, asset: 'dude' }) this.game.add.existing(this.player) } update() { const cursors = this.input.keyboard.createCursorKeys() this.player.update(cursors) } } Player class - problem occurs in the if condition: class Player extends Phaser.Sprite { constructor({ game, x, y, asset }) { super(game, x, y, asset) this.game.physics.arcade.enable(this) this.body.bounce.y = 0.2 this.body.gravity.y = 300 this.body.collideWorldBounds = true this.animations.add('left', [0, 1, 2, 3], 10, true) this.animations.add('right', [5, 6, 7, 8], 10, true) } update(cursors) { this.body.velocity.x = 0 if (cursors.left.isDown) { this.body.velocity.x = -150 this.animations.play('left') } } } Error message: "TypeError t is undefined"
-
Hi, I just updated an old version of pixi.js we had been using. The cursor used to change to "pointer" when hovering over a DisplayObject in our embedded chromium browser (CEF). After v4.4.0 the cursor does not change on hover. I pinpointed that the last version it was working with our embedded browser was v4.3.5. Does anyone know why this might be and what I can do to fix it? Thank you
-
Hello, i have a question about rotating an cube driven by the position of the cursor. Have created an playground: http://www.babylonjs-playground.com/#NPOXN#5 The cube rotates by not follow the cursor. When the cursor is left, 0° rotate, cursor right litle more as 90°. The code that i use: document.getElementById("renderCanvas").addEventListener("mousemove", function (event) { //console.log(scene.pointerX); //box.rotation.y = scene.pointerX / 2; box.rotation.y = (scene.pointerX / canvas.width) * 2; // We try to pick an object //var pickResult = scene.pick(scene.pointerX, scene.pointerY); }); I want that the Z Axis follow the cursor 360°. Can anyone give me a right hint ?
-
Hey all! I am trying to use a custom cursor in my game. It works at first, but when I roll over a Phaser button (in latest Chrome and latest Safari), it switches back to the regular hand cursor. I have tried setting the cursor through CSS: canvas { cursor: url('./assets/images/hand_blue.png'), auto; } And Phaser: game.canvas.style.cursor = "url(assets/images/hand_blue.png), auto"; It fails using both methods, when the input goes over a Phaser button. Any thoughts on this?
-
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!
-
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
-
Hello everyone! I'm new with babylon.js and now I'm trying to make a third person shooter game. The idea is to make an ArcRotateCamera that is able to perform unlimited alpha rotation. However, I'm struggling with the mouse cursor as it has a limited movement (that is the border of the browser), making an unlimited alpha rotation impossible. Is there any way to make it possible? Thank you in advance
-
Howdy, In my game I lock the cursor to canvas, so I use a pointer lock and then track/draw a "virtual cursor" manually. However, this causes sprite click callbacks to no longer trigger: sprite.inputEnabled = true; sprite.events.onInputUp.add(this.OnSpriteClick, this); Is there any way to get it working ? As a workaround, I figured I can manually check but I am having a hard time since figuring it out. sprite.getBounds() returns local bounds - how do I translate the my cursor position to sprite's local space? I couldn't find a matrix member under Sprite definition in the docs... Any
-
Hello, I am working on a game using tilemap and phaser framework. I want select the multiple coordinates on tilemap using phaser (cursor) and then can be able to store into an array. Is this possible using phaser? suggest me some solution for this.
-
Hi everyone, I am using arcade physics and my collisions are definer by a Tiled layer. this.collisionLayer = collisionLayer; this.map.setCollisionByExclusion([], true, this.collisionLayer); I have a sprite attached to my cursor, but it seems that (in update) if (this.phaserGame.physics.arcade.collide(this.marker, this.collisionLayer)) { console.log('hey, cursor is over collide area !!'); } won't work because Phaser check if a Sprite is gonna collide, not if it's actually colliding. What I simply need is to know if my marker (or directly my input.activePointer) is colliding. Any clues ? EDIT : Actually : when updating marker position, I get the tile below my cursor. If there is a tile AND his property 'canCollide' is set to true, I did not update marker position. private setMarker() { let marker: Phaser.Sprite = this.marker, tilePointBelowPointer: Phaser.Point = this.pointToTilePosition(); // get tile coordinate below activePointer let tileBelowPointer: Phaser.Tile = this.map.getTileWorldXY(tilePointBelowPointer.x, tilePointBelowPointer.y, 16, 16, this.collisionLayer); if (tileBelowPointer && tileBelowPointer.canCollide) { // do something if you want } else { marker.x = tilePointBelowPointer.x; marker.y = tilePointBelowPointer.y; } }
-
I'm referring to the https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API to keep the mouse from leaving your game window, however we're having a problem that after you engage the lock, we can't find a method to keep using the mouse functionality to click on things within the box. The mouse is locked to some arbitrary spot, and while we can map its movements to move a fake sprite mouse around, we can't click from that fake sprite mouse. Does anyone know of any examples that accomplish this? -
If I set a parent to be interactive and then add some interactive children to it, their defaultCursor property does not work. Demonstration. Should be pretty obvious what I am trying to do, but in case it's not: I intend to allow the user to scale that green thing with those handles. The code to look at is let handle4 = new PIXI.Graphics().beginFill(0xFF0000, 1).drawCircle(handleRect.x+wonderfulRectangle.width, handleRect.y+wonderfulRectangle.height, 10).endFill(); handle4.interactive = true; handle4.button = true; handle4.hitArea = new PIXI.Circle(handle4.x, handle4.y, 10) handle4.defaultCursor = "nwse-resize"; handleRect.addChild(handle4); handleRect is added to the wonderfulRectangle. wonderfulRectangle is interactive (can be moved around as you can see). If I set defaultCursor on the wonderfulRectangle (i.e. - parent), it works fine. But neither handleRect nor handle4 work. Is this a bug, or am I missing some undocumented steps here?
-
I know that I need to use .buttonMode = true and .defaultCursor = "inherit", but I want to change the cursor to an image (like in CSS). defaultCursor = "url(http://www.image.com/jpeg.png)" doesn't seem to be working. How can i achieve this?
-
Hey guys, I really wonder why I was not able to find anything about changing a cursor with PIXI.js or very little with incomplete practical examples. I found out that I need to set something like this: sprite.buttonMode = true; sprite.interactive = true; sprite.defaultCursor = someSprite; What I'd like to do is to change the cursor right on start and keep it that way for the whole canvas area. How do I achieve that? greets Charlie
-
I looked through the examples and searched online but I can't find anyone else having ever done this to use as an example; I'm trying to hide the default computer mouse pointer and replace it with a sprite in my game that is very reactive; eg changing to different art depending on what you're mousing over or if you're giving and order or something. Does anyone have an example of this I could look at?
-
Hello, I have this weird problem, I am trying to add a specific cursor png for my game. I couldn't find any solutions on how to do it with phaser, so I did it with css for the specific div, but somehow it works for the first three seconds, but when I hover a button in the game the png disappears, on reload it shows up again, and when I hover a button it disappears again? Is there a way to do this with phaser? Am I missing something? Thanks!
-
I have a sprite with .useHandCursor = true and events.onInputOver.add(this.OnMouseOver, this); BUT: If the mouse is already over the sprite I have to move it out and back again for the event to trigger. Now this is not a problem becouse I can rectangle.contain check the mouse cursors position when my button shows but that is only a graphical change. I need to also change the cursor to pointer. I also got this to work but I have to move the cursor (atleast 1 pixel) for the cursor to change. Is this a browser/html thing? If not how could I instantly change the cursor?
-
Hello, i would like to create a selector like this : http://threejs.org/examples/#webgl_interactive_voxelpainter (I know it's three.js but I don't find it with babylon) My goal is to allow the user to create a cube at the cursor position. I manage to move the red mesh which represent the cursor but i don't know how to detect the collision and stop the movement of the mesh. I tried to use moveWithCollisions but it don't work well when i move fast the pointer. Do you have an issue ? Thank you in advance
-
Hello developers! I have a very urgent project running for a customer und target platform is Xbox One aswell. Its a website that you should be able to look on in the Xbox One's Edge Browser aswell. Now my problem: The Xbox One disables the mouse cursor on my site and show me a notification, that it (the mouse cursor) has been automatically disabled. Now I can't use my website (which is basically a big phaser driven canvas). Question: How can I reenable my mouse? Can it be done using javascript? A response would be very kind as I am out of ideas. Thank you! Chris
-
Heya I'm having this bug that makes it so after I remove/hide something that's clickable the "hand-cursor" becomes the active cursor forever. This code brings it on, I've tried looking at source code, and following the code it seems to change back, but it doesn't. function playCallback(button, pointer){ this.buttons.menuGroup.visible = false; }menuGroup is a Phaser.Group. Also wondering what's the "best" option if I want something like a menu to dissapear when the game starts, visible = false is what I'm using now. Is there something better? Thanks in advance!
-
Hi there, I'm literally brand new to WebGL and BabylonJS ( although already a programmer and 3d artist ), but having a lot of fun learning it, great job on the engine/api so far guys. What i'm trying to figure out, is if there is a way to discover the rgb texture value where the mouse has been clicked.. Having a look at PickingInfo, it looks as though getTextureCoordinates() might be used to read the position on a bitmap texture for example ( just wild theories at this point of course ), although i can see no way to access the rgb data of a bitmap or texture object anywhere in the Babylon API. Any idea if this might be possible? Basically what i'm trying to achieve is - i have an object, with a texture on it, and i would like the user to be able to click on different parts of the object to make stuff happen. So i was thinking, if the texture had say a blue area, the user clicks on the blue, it does something, they click on a red part, it does something else.. The other more obvious way i think to achieve this would be to either break the object up into separate clickable meshes and go from there, or have invisible hotspot meshes that detected clicks in specific areas.. But i just wanted to try and figure out if this would be possible. Texture hotspots based on colour would be a handy thing to have for general interactivity..
-
I'm using button.input.useHandCursor = true; to change the cursor when it's over buttons, and I need to reset the cursor to the default at some point. I know I can set this to false but it doesn't work unless the cursor is moved off of the button. I've seen game.stage.canvas.style.cursor = "default"; being used, but that doesn't work, as it gives me an error saying canvas is not defined, even though I've made the game using Phaser.CANVAS. So what I'm asking is there a way to quickly reset the cursor to it's default image?
-
Hello everyone, I'm fairly new to Phaser, and I'm just starting to figure things out. I made a simple prototype that uses "game.input.keyboard.createCursorKeys()" to listen and process the keyboard's cursor keys. Basically I have a sprite that moves up, down, left and right depending on input. Now I'm trying to achieve the same using touch events: when I swipe left, the sprite moves left; when I swipe up, the sprite moves up, etc.... but with no success. I've managed to detect swipe using a solution that user @imshag posted in this topic: http://www.html5gamedevs.com/topic/3862-swipe-to-jump/?hl=%2Bswipe+%2Bphaser#entry24473 It detects swipe, but doesn´t give me info on the direction of it. I could really use your help... How can I detect the direction of a swipe, and limit it to "up", "down", "left" and "right? Thanks in advance!
