Change mouse to an image

I want to change my mouse to an png, how do I do that?

1 Comment

Hi PerpperBoi

There are at least two ways of doing that, which one is better depends on what you want to achieve.

Method 1: Change CSS

You can change the mouse cursor using css. This is generally the more responsive way, though this is not visible in the editor - only when you export your game. The editor ignores any css changes you make to your game, to make sure that your game is always editable (e.g. if you make a mistake). But the exported game will show the css cursor. 

If you want your cursor to always be the same image, you can just add this to your style.css file:

#wade_main_div {
  cursor: url(myCursor.png), auto;

If, instead, you want to change your cursor to different images depending on where it is:

var container = document.getElementById(wade.getContainerName());

myObject.onMouseIn = function() { = 'url(myCursor.png), auto';

myObject.onMouseOut = function() { = 'auto'

In either case, be sure to add 'myCursor.png' to the assets of your scene, so it's loaded and available when needed.

Method 2: Use a SceneObject

Edit style.css to hide the cursor everywhere:

#wade_main_div {
  cursor: none;

Then create a SceneObject with your own sprites, effects, etc. and add a global onMouseMove event = function(data) {
   var position = wade.screenPositionToWorld(layerId, data.screenPosition);

where layerId is the layer where you've created your cursor sprite(s).

Like I said, the editor will not show any changes you make to style.css (though the exported game will), so it will still always show the default cursor (on top of any cursor sceneObject that you may have).

If you want to also disable it in the editor, instead of editing the css, you can add this to your app.init function

var container = document.getElementById(wade.getContainerName()); = 'none';


Post a reply
Add Attachment
Submit Reply
Login to Reply