changing the pointer sprite?

Nebulocity · February 6, 2014

Is it possible to change the pointer image to a custom sprite? I see in Phaser.InputHandler that we can specify <sprite>.input.useHandCursor = true, but what if we want to use something else for the cursor?

More specifically, I want the player to click an apple, have the cursor become an apple (to show that the player is "holding" it with the mouse), and then when I click a basket the cursor reverts back to normal (and the apple is added to the basket).

So far, I've got this, where the "listener" function just pops an alert, like the "Click on an image" exmaple:

apple.inputEnabled = true;

apple.events.onInputDown.add(listener, this);

apple.input.useHandCursor = true;

jpdev · February 6, 2014

It is not phaser specific, but you could try the things mentioned here:

http://stackoverflow.com/questions/2636068/hide-cursor-in-chrome-and-ie

They talk about hiding the curosr (which would be fine, since you could just display a phaser-sprite at the position of the mouse), but it also looks like it's possible to display png-images directly as a cursor.

You could try both

rich · February 6, 2014

Yeah I would override this from CSS really.

Nebulocity · February 6, 2014

Strange, nothing listed there seems to work. i can't find it in the files, but is there a reference to the canvas in there? Like, i can't use phaser.game to style something, right? For example, if i wanted to style the canvas, what element name is it given within Phaser?

rich · February 6, 2014

game.canvas

But I would suggest you insert your game in a div and then apply the CSS to the parent container.

Nebulocity · February 6, 2014

Rich,

So then stemming from the Phaser example for collecting the stars, do it this way? Since we don't create the canvas element by ourselves (Phaser does that for us), we just wrap the <script> tags in a div and apply everything to the parent div?

<!doctype html>

<head>

<title>Señor Burrito</title>

body {

margin: 0;

}

</style>

</head>

<body>

var game = new Phaser.Game(800, 608, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render});

// Game code goes here

</script>

</div>

</body>

</html>

rich · February 6, 2014

Like this:

<!doctype html> <html lang="en">     <head>         <meta charset="UTF-8" />        <title>Señor Burrito</title>        <script type="text/javascript" src="js/phaser.min.js"></script>        <style type="text/css">            body {                margin: 0;            }                </style>    </head>    <body>        <div id="game"></div>        <script type="text/javascript">                 var game = new Phaser.Game(800, 608, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render});             // Game code goes here        </script>    </body></html>

Nebulocity · February 7, 2014

So then this would, hypothetically, work in the latest FireFox/Chrome browser that supports CSS3, but yet...my cursor stays the same? Am I doing it wrong?

<style type="text/css">            body {                margin: 0;            }                    .game {                cursor: cell            }</style>

jpdev · February 7, 2014

Might just be your CSS-Syntax:

"." is the class selector.

"#" is the id selector

try

#game {

cursor:cell

}

Nebulocity · February 7, 2014

Might just be your CSS-Syntax:

"." is the class selector.
"#" is the id selector

try

#game {
cursor:cell
}

Good point, but even with this:

    <style type="text/css">            body {                margin: 0;            }                    #game {                cursor: cell            }    </style>

and the game constructor like this:

    var game = new Phaser.Game(800, 608, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render});

It still fails.

Ideally what I was going to use this for was to let the player click on an master item, and turn the cursor into that item (because it is "grabbing" it), and then wherever they dragged it to, the cursor would revert to normal. So like, "click and drag this object, and while you are dragging it, the cursor should be the same sprite as that object". If not that, then at least say "click and drag this object, and while you are dragging it, a copy of that object should follow the mouse cursor".

jpdev · February 7, 2014

Hi,

first a little note: the fourth parameter to the .Game() function has to be the id of the div you want the canvas to go in.

In your case "game" (no "#" nad no "canvas").

But the problem is, this is what phaser autocreates:

<body><div style="overflow: hidden;" id="game"><canvas style="display: block; cursor: default;" height="600" width="800"></canvas></div></body>

The (phaser-created) canvas-tag, has "cursor: default;" set. So I think you can't do anything about that. (Except change the phaser library to not create this style tag by editing it.)

Or maybe you could use javascript to remove this style tag after phaser has created it... hmmm.

jpdev · February 7, 2014

Okay, thinking about this real quick, I came up with a javascript manipulation.

here is a (jquery-based) solution:

http://janpeter.net/perma/phaser/orbit.html (use view sourcode, to view the hole thing)

(Mouse disappears if you move over the phaser canvas, and if you hold left, the star becomes your mouse.)

The trick: Include jquery, and in the create function of the state do this:

$("canvas").css("cursor", "none");

This sets cursor to none for all canvas tags on the page.

You could do this without jquery of course. (Just google "javascript manipulate style attribute", or something along those lines.)

Hope this helps.

With no cursor displayed, you are now free to move a sprite of your choosing to input.x, input.y and simulate the cursor this way.

Or you can use the method to set some other cursor than "none".

jerome · February 7, 2014

As it's HTML5, you don't need JQuery

something like :

document.querySelector('#game').style.cursor = none;

should work

rich · February 7, 2014

Try changing Input.js, line 533, to this:

            this.game.canvas.style.cursor = 'inherit';

Nebulocity · February 8, 2014

Rich,

This could be a very dumb question, but how would I make that change to input.js and have it affect my game? I use phaser.min.js, because it came with the example, and I've never tried using the full library. What do I point it to? Because pointing it to phaser\build\phaser.js (with the below directory structure) doesn't work. My apologies if this was answered elsewhere, but I couldn't find it in a forum search. I've never used a JS library before, sadly.

Z:\webroot\myGameZ:\webroot\myGame\phaserZ:\webroot\myGame\js  (phaser.min.js is in here).

rich · February 8, 2014

It would be quite tricky to edit the minified file. Why not grab phaser.js instead and use for that now? At least you can just edit it in a normal text editor (you *could* do that to the min file too, but I wouldn't recommend it). Literally just add phaser.js next to where you've got phaser.min.js and change the html so it loads it.

Nebulocity · February 9, 2014

Rich,

You said to edit input.js, and to call on phaser.js, and so I assumed that input.js would be called by phaser.js somewhere within the phaser.js file. After searching the file, though, search didn't come up with any references to input.js within phaser.js. So, does phaser.js call input.js, and should I still edit the input.js file? Or should I edit one of the 40,119 lines inside phaser.js? Sorry for being such a pain!

:: Edited for clarity ::

jpdev · February 9, 2014

Hey Nebu,

The way this works is the following:

When Rich edits phaser, he does not want to work with one large file, because that is just a mess to find things in and also for example the WebStorm IDE does not like it, when the source file is 1,3mb big. (Things get slow etc.)

So instead of working with one big file, when developing phaser Rich (and everybody else who wants to work on it) uses the many source files that are found here:

https://github.com/photonstorm/phaser/tree/master/src

The file Rich is talking about is this one:

https://github.com/photonstorm/phaser/blob/master/src/input/Input.js#L533

Now while editing some of those many phaser files the project, for testing the code, you need not just the one phaser script-tag (because that one big file is not being edited) instead you need about 140 script tags. (You can see them here: https://github.com/photonstorm/phaser/blob/master/build/config.php )

Now after all the changes are done and everything works, all those single files from the src-directory and it's child-directories are taken and are assembled into one large file.

To do this, Rich is using a grunt script (grunt is a nodejs utility that allows you to do all sorts of stuff automated, for example take a list of files and assemble them into one large one).

After this one big phaser file is build, the grunt script then does one more thing: It takes the phaser file, strips all comments, all linebreaks and all long variable names from it and creates the phaser.min.js file.

This is all done, so we (when using phaser) just have to use one simple scirpt tag, and we only have to deploy one file to our project.

When creating a new phaser game, you should use the phaser.js - because you get more meaningful errors, and you can read the phaser code with comments if necessary.

When your game is done (or you have a version, that you want to make public) you can switch to the phaser.min.js, because this downloads much faster and the people playing your game don't need the comments in the phaser library.

Now, since you want to edit phaser there are three ways to do this:

The long route is this:

1) get nodejs for your development machine (http://nodejs.org/)

2) get grunt to work (http://gruntjs.com/getting-started)

3) edit the src/input/input.js file line 533 (as rich posted)

4) run "grunt" in the rootdir of phaser

5) use the newly created phaser.js / phaser.min.js from the "dist" directory (that the gruntscript just made for you)

If you go this route, let me know if you get stuck anywhere.

Route 2:

Just use the phaser.js you already have and search for this code:

            this.game.canvas.style.cursor = 'default';

Change it to what rich posted. (In Phaser 1.1.4 this is line 14152)

You can now use the phaser.js (BUT you phaser.min.js will still be the same old code, and will not use the cursor from the div around the game-canvas).

(I just checked the phaser.min.js .. no chance in editing this there..)

Route 3:

Tell me which phaser version you are using, and I'll make the change and run the grunt script and upload the changed files (phaser.js & phaser.min.js ) for you

Nebulocity · February 11, 2014

JP, thank you very much for the write-up! My apologies for the late response, as I was out of commission for a while.

As for Route 2, I must have had the wrong file, because "this.game.canvas.style.cursor" was no where in it. Deleting my local version of Phaser, and re-cloning it on my desktop through the Github app, seems to have fixed this, as it's in there now!

I spent most of the day in the hospital, but when I feel better I'll put some time into my project and see if I can't get the cursor changed this time around. And read up on Grunt!

o0Corps0o · February 18, 2015

I know you're not really supposed to use this, but what if you set your css cursor to be !important? that should override any other style (as long as none of the others are !important)

Triplanetary · February 22, 2015

There are two things you need to know that haven't been brought up yet:

First, if you're specifying cursors in CSS, you must specify an "auto" fallback at the end of the definition. In my experience this seems to be the only way to make sure all browsers will use your custom cursor. For example, in my current game the cursor style is "url(assets/cursor.png),auto". Works fine.

Second, you can apply styles to Canvas element from within Phaser. In my game's "init" function, I have this line:

this.game.canvas.style.cursor = 'url(assets/cursor.png),auto';

which applies an inline "cursor" style to the game's Canvas. Here's a fiddle of it working: http://jsfiddle.net/mqwk93vu/

shohan4556 · January 14, 2016

On 2/22/2015 at 11:29 AM, Triplanetary said:

There are two things you need to know that haven't been brought up yet:

First, if you're specifying cursors in CSS, you must specify an "auto" fallback at the end of the definition. In my experience this seems to be the only way to make sure all browsers will use your custom cursor. For example, in my current game the cursor style is "url(assets/cursor.png),auto". Works fine.

Second, you can apply styles to Canvas element from within Phaser. In my game's "init" function, I have this line:

this.game.canvas.style.cursor = 'url(assets/cursor.png),auto';

which applies an inline "cursor" style to the game's Canvas. Here's a fiddle of it working: http://jsfiddle.net/mqwk93vu/

Hello there, your jsfiddle is not working, would you please fix this.

Thanks

WombatTurkey · January 15, 2016

It's impossible to change the mouse's cursor to be derived from a sprite.

What you need to do is hide the mouse cursor and track the user's mouse position and update the sprite accordingly to create the illusion.

These answer's are for single images and not a sprite based image, just fyi ^^.

changing the pointer sprite?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members