Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Change Sprite Image on Click

ANSWERED

I have a sprite in one of my apps and I want it to costumes on click.

 

Here is the code I have so far:

In the widgets.gui section ...

<symbol id="frames" href="#sprite-image">
  <animate id="anim" attributeName="value" begin="enable"
    from="1" to="4" dur="0.3" repeatCount="indefinite" />
  <image href="h1-frame_1.png" width="25%" height="20%" x="165" y="187" />
</symbol>

In the index.js section ...

const myAnimation = document.getElementById("myAnimation");
myAnimation.animate("enable");

 

Basically, when the screen is clicked, I want the h1-frame_1.png to change to h2-frame_1.png, and then with another click, it changes back to h1-frame_1.png, etc.

 

I have not figured out a way to do so yet. Any suggestions?

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

Never mind. I figured out how to make my sprite toggleable. For those curious, the code is below.

index.js:

import * as document from "document";
const sprite = document.getElementById("sprite");
sprite.addEventListener("click", (evt) => {
  if (sprite.href === "s1-frame_1.png" || sprite.href === "s1-frame_2.png" || sprite.href === "s1-frame_3.png" || sprite.href === "s1-frame_4.png") {
  sprite.href = "s2-frame_1.png";    
  } else {
  sprite.href = "s1-frame_1.png";    
  }  
})

widgets.gui:

<image id="sprite" href="s1-frame_1.png" width="25%" height="20%" x="165" y="182" pointer-events="visible"/>

 

View best answer in original post

Best Answer
0 Votes
9 REPLIES 9

Give the <image> an id, use getElementById() on it in JS, then change .href on that object in your onclick() handler or equivalent.

Peter McLennan
Gondwana Software
Best Answer
0 Votes

@Gondwana wrote:

Give the <image> an id, use getElementById() on it in JS, then change .href on that object in your onclick() handler or equivalent.


Thank you so much. Would you mind giving me the code fully written out? I am not a great programmer, so I am not quite sure how to do so.

Best Answer
0 Votes

I have been fiddling around on the Fitbit Studio, but I have had no luck with being able to change my sprite image on click. I was wondering if anyone else has any suggestions. Thanks in advance.

Best Answer
0 Votes

I finally figured out how to give my <image> an id, use the getElementById() on it in JS, but I am unable to register that the <image> has been clicked, let alone change the href. This is the code I have so far in the index.js file:

import * as document from "document";

const sprite = document.getElementById("sprite");

sprite("click", (evt) => {
  console.log("Clicked!");
});

 And this is the code I have in the widgets.gui file:

<image id="sprite" href="frame_1.png" width="25%" height="20%" x="165" y="182" />

 Any suggestions?

Best Answer
0 Votes

In your <image>, try including pointer-events="visible"

Peter McLennan
Gondwana Software
Best Answer
0 Votes

Thank you; that solved the issue of the clicks not registering. I then figured out how to change the .href, but I want the following section of code to loop so that the user can toggle back and forth between the two costumes.

 

sprite.addEventListener("click", (evt) => {
  console.log("Clicked");
  sprite.image = "s2-frame_1.png";
  sprite.addEventListener("click", (evt) => {
    console.log("Clicked");
    sprite.image = "s1-frame_1.png";
});
});

 

Any suggestions?

Best Answer

Only add ONE listener; otherwise you'll have a chain of them, all of which will be called when the event occurs.

 

A lazy way to do it would be to check the filename currently assigned to the .href, and assign the other filename. There would be more efficient ways, but that should do.

Peter McLennan
Gondwana Software
Best Answer
0 Votes

If I get rid of one listeners, my sprite is even less toggleable. Also, if I wanted to check the filename currently assigned to the .href, and assign the other filename, how would I go about doing so?

Best Answer
0 Votes

Never mind. I figured out how to make my sprite toggleable. For those curious, the code is below.

index.js:

import * as document from "document";
const sprite = document.getElementById("sprite");
sprite.addEventListener("click", (evt) => {
  if (sprite.href === "s1-frame_1.png" || sprite.href === "s1-frame_2.png" || sprite.href === "s1-frame_3.png" || sprite.href === "s1-frame_4.png") {
  sprite.href = "s2-frame_1.png";    
  } else {
  sprite.href = "s1-frame_1.png";    
  }  
})

widgets.gui:

<image id="sprite" href="s1-frame_1.png" width="25%" height="20%" x="165" y="182" pointer-events="visible"/>

 

Best Answer
0 Votes