Replacing cursor with some other icon

🧑‍💻 Technical Support
1

I am playing around with ‘cactus World Effects’ A-frame. Is it possible or is there a workaround to replace the cursor icon image with something else? I want it to look like a magic wand for kids, so when they tap with it, it has the ‘power to create’ something :slight_smile:

2

That sounds awesome! I’ll see if I can get a working example setup, in the meantime I would suggest using a-cursor and styling it with CSS.

3

Thanks. I’ll probably just wait for your working example :slight_smile: . For some reason, I don’t see any HTML file(s) after I cloned the project as described in the tutorial video to add markup code for a-cursor. I’m new to 8th wall and webAR(A-frame), so learning as I go.

4

I got eager and added a head.html to my clone of the cactus World Effects project


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>A-Frame Cursor Example</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <style>
      .custom-cursor {
        color: red;
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-asset-item id="cursor-model" src="./assets/trishul_-_shivas_trident.glb"></a-asset-item>
      </a-assets>

      <!-- Use the cursor model as a cursor -->
      <a-camera>
        <a-entity gltf-model="#cursor-model" position="0 0 -1"></a-entity>
      </a-camera>
    </a-scene>
  </body>
</html>
``` In this example, the `a-cursor` is styled with a custom CSS class called `custom-cursor`.

BUT that didn’t modify the cursor I tap to create the cactus into the model I set as a-cursor. What did I miss here?

5

@GeorgeButler We met at the Niantic Developer Accelerator Fund kickoff. I am the Guinness record choir singer :slight_smile:

Did you get a working example setup or have any feedback on my head.html code? Many kids would love that!

6

Hi Sriram!

Looking into it now!

7

Hi George,
There will be many many happy kids thanks to you :)!. Do you think the magic wand, maybe to create flowers and more magical stuff is doable by Halloween?

8

Hi!

Here’s the steps to replacing the default browser cursor with a custom one in studio.

  1. Upload the image you want to use as your cursor. In this case I uploaded this one I found online:
    wand
    wand128×128 3.62 KB

    Screenshot 2024-10-18 at 9.20.07 AM
    Screenshot 2024-10-18 at 9.20.07 AM320×151 6.84 KB
  2. Create a CSS file with any name, usually I pick something standard like app.css
    Screenshot 2024-10-18 at 9.21.59 AM
    Screenshot 2024-10-18 at 9.21.59 AM313×170 8.6 KB
  3. Add the following code to your CSS
body {
  cursor: url('assets/wand.png'), auto;
}
  1. Import your CSS file in the tap-place.ts component to load it.
    Screenshot 2024-10-18 at 9.23.41 AM
    Screenshot 2024-10-18 at 9.23.41 AM418×127 10.3 KB
  2. Make a bunch of children happy! (The most important step)

Here’s what it should look like once you’re done.

1 Like
9

Thanks @GeorgeButler.
As a next step, I’m trying to recreate a flower emerging on tap like described in this tutorial: https://youtu.be/6nmsHC_FA0M but this project now uses only the tap-place.ts component rather than with a body.html and head.html like in the tutorial and its not clear how a new glb object can be added now without the body.html as per the tutorial. I see a ecs.gltfmodel referred to in tap-place.ts but not the glb directly. So how do I change the cactus to any other glb?

10

Hi Sriram,

Here’s a tutorial on replacing the cactus model in Niantic Studio:

Also if you’re looking for 3D models to use in your project I recommend https://poly.pizza/

1 Like
11

@GeorgeButler Is there a way for the magic wand cursor to show up when the webapp is opened up on a phone? Right now, any one can click and the flower is spawned but when we place the finger over the camera view, I don’t see the magic wand cursor which shows up in simulator and when opening the webapp on desktop.

12

There isn’t a quick way to toggle it, you’d have to code it yourself by creating an html element in the tap-place component (outside the component registration) and moving it around using CSS when the screen is touched.

13

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.