Search the Community

Showing results for tags 'cursor'.



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

  1. Custom cursor that persists

    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?
  2. 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!
  3. 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
  4. 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
  5. 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
  6. 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.
  7. Phaser, is Cursor in collide area ?

    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; } }
  8. 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?
  9. 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?
  10. 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?
  11. change cursor to sprite

    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
  12. 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?
  13. Mouse cursor png

    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!
  14. 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?
  15. 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
  16. Xbox One / Edge - Enable Mouse Cursor

    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
  17. 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!
  18. 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..
  19. Quick way to Reset Mouse Cursor

    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?
  20. Directional swipe

    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!
  21. Hide Mouse Cursor?

    Hi! Is there a way to hide the mouse cursor built-in to phaser? If not, how can I do it in plain html5? I put a 'cursor: none' under canvas in my stylesheet, but I think the canvas that phaser makes takes precedence over it with: <canvas width="800" height="600" style="display: block; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default;"></canvas> as i can see with my debugging console. Thanks! Evan PS Just starting out with html5 game development and I am really loving Phaser!
  22. I have a viewable game window sized 800 by 600, but a "map size" of 1920 by 1200. The WASD keys move a sprite onscreen, and it rotates to aim at the mouse pointer. This is working very smoothly until I zoom in or out (from center) by manipulating a displayObjectContainer (I meant to put that in the title instead of stageContainer, which is the variable I chose personally). I have an inkling of what the problem is. When zoomed in or out, the upper left corner (e.g.) of the game window still registers as (0,0), but the sprite is pointing at what it originally considered to be (0,0) before the displayObjectContainer was scaled up or down. Thus it all goes out of whack unless the container is scaled (1,1). I know I either need to change the sprite to be able to recognize the "new" location of (0,0) after scaling, or make the cursor coordinates appear relative to the unscaled container (as the sprite now "sees" them). I'm adjusting the sprite's rotation according to cursor position as follows: // using jQuery$( "#game-canvas" ).mousemove(function( event ) { var parentOffset = $(this).parent().offset(); cursorX = (event.pageX-parentOffset.left); cursorY = (event.pageY-parentOffset.top); player.sprite.rotation = angleOfPointABFromXY(cursorX,cursorY,player.sprite.position.x,player.sprite.position.y); console.log(cursorX + "," + cursorY + " | " + event.pageX + "," + event.pageY);});and zooming thusly: var zoom = function(direction,speed) { if (direction === "in") { stageContainer.scale.x += speed; stageContainer.scale.y += speed; stageContainer.position.x -= speed*gameWidth/2; stageContainer.position.y -= speed*gameHeight/2; } else { stageContainer.scale.x -= speed; stageContainer.scale.y -= speed; stageContainer.position.x += speed*gameWidth/2; stageContainer.position.y += speed*gameHeight/2; };}If anyone could give me some advice I would greatly appreciate it. Thanks! An example of the problem is here (mouse wheel zooms in and out): http://belikewally.netai.net