A-frame set jump height to a variable

Question

I am making a video game in Aframe and I'm wondering how can I set my jump height to a variable. Here is the code I'm currently using

<a-entity id="rig"
            position="17.5 50.1 0" 
            movement-controls="speed: 0.2;"
            kinematic-body="enableJumps: true;"
            jump-ability="distance: 1.8;"
         
                networked="template:#avatar-template;attachTemplateToLocal:false;"
                spawn-in-circle="radius:3"
            tracker>
    <a-entity camera="far: 1000;"
              wasd-controls
              look-controls="pointerLockEnabled: true;"
              position="0 1.6 0">
        
    </a-entity>
  </a-entity>

What I would like to happen is to set the jump-ability to equal a variable. For example: jump-ability="distance: VARIABLE;" Does anybody know how I can achieve this?

It's A-frame. An html framework for vr on the web. Website: https://aframe.io — Aidan Young, May 13 '21 at 20:14
Maybe my question was too general, I'm asking because throwing variables into html elements looks like [angular template variables](https://angular.io/guide/template-reference-variables) (Im not sure how it's called in react) — Piotr Adam Milewski, May 13 '21 at 21:15
I tried running the code and the radius didn't change when running outside of the stack overflow page. Is the first part of the code using any sort of framework? Also is there an example of this with player speed or jump height? — Aidan Young, May 13 '21 at 23:10
[resizing](https://jsfiddle.net/xtw8y76u/1/) and [changing speed](https://jsfiddle.net/5b02ouq3/1/) in fiddles. No frameworks involved — Piotr Adam Milewski, May 13 '21 at 23:20
The code is running fine in fiddles but not working in my scene with my camera set up. Here is the current code for my camera: https://codepen.io/CreateVR/pen/VwpamVK For some reason when I exchange the movement controls with wasd-controls the code starts to bug and movement stops working along with the button change speed. — Aidan Young, May 14 '21 at 00:06
you don't need to use the `wasd-controls`, just change it to modyfing the `speed` of the `movement-controls` - `el.setAttribute("movement-controls", "speed", )` [fiddle](https://jsfiddle.net/7pzbcx9o/). The same for the jumping, or whatever property you need to change — Piotr Adam Milewski, May 14 '21 at 00:16
Still not working for some reason, I'm not sure if the other controls in the camera entity are preventing it from working. Would you mind showing me where I went wrong? I'm really trying to get this to be able to create a game. This is my current code: https://glitch.com/edit/#!/cactus-future-sweatpants?path=public%2Findex.html%3A8%3A7 — Aidan Young, May 14 '21 at 00:59
It's not working for a couple of reasons. for example in my fiddle i change the `speed` of `movement-controls` (`setAttribute("movement-controls", "speed", acceleration);`) - you do it in a different order, and with a typo (`setAttribute("speed", "mouvement-controls", acceleration)`). Also in the fiddle I change the attributes of the rig, not the camera. fixed glitch [here](https://glitch.com/edit/#!/stack-67524575?path=public%2Findex.html%3A37%3A0) — Piotr Adam Milewski, May 14 '21 at 07:25
It works! Thank you very much, I've been trying to find a way to get this for a while now! Thanks again! — Aidan Young, May 14 '21 at 13:01

score 2 · Accepted Answer · answered May 13 '21 at 21:35

Without any framework (like angular, or react) you can't use js variables within html elements.

The if you want some external js script to modify the property, you should do this with setAttribute():

// either use any logic in a js script
const btn = document.querySelector("button");
const sphere = document.querySelector("a-sphere");
btn.addEventListener("click", e => {
  // set the radius to a random number
  sphere.setAttribute("radius", Math.random() * 1 + 0.5);
})

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<button style="z-index: 999; position: fixed">RESIZE</button>
<script>
  // or preferably within a custom component
  AFRAME.registerComponent("foo", {
    init: function() {
      const btn = document.querySelector("button");
      const sphere = document.querySelector("a-sphere");
      btn.addEventListener("click", e => {
        // no need to duplicate the script logic
        // sphere.setAttribute("radius", Math.random() * 1 + 0.5);
      })
    }
  })
</script>
<a-scene foo>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
</a-scene>

Which changes the radius value each time the button is clicked.

score 1 · Answer 2 · answered May 14 '21 at 07:45

Fixing your code

Your component has errors and will never work the way it is.

This is your code fragment:

AFRAME.registerComponent("foo", {
  init: function() {
    var acceleration = 100;
    const cam = this.el.sceneEl.camera.el;
    const btn = document.querySelector("button");
    btn.addEventListener("click", e => {
      acceleration = acceleration === 100 ? 25 : 100;
      cam.setAttribute("speed", "mouvement-controls", acceleration);
    })
  }
})

you have a typo in mouvement-controls instead of movement-controls
you try to setAttribute in the wrong order. This is what your code tries to do speed="mouvement-controls: {acceleration}". But you want to have it like this movement-controls="speed: {acceleration}". You have to change the order of arguments
last thing - you need to set the movement-controls on your rig, not the camera
also a note: speed 1 is simmilar to acceleration 65. So setting speed to 100 will make you move in light speed

This is a fixed version of your component

AFRAME.registerComponent("foo", {
  init: function() {
    var acceleration = 1;
    const rig = document.getElementById("rig");
    const btn = document.querySelector("button");
    btn.addEventListener("click", e => {
      acceleration = acceleration === 1 ? 0.1 : 1;
      rig.setAttribute("movement-controls", "speed", acceleration);
    })
  }
})

A-frame set jump height to a variable

2 Answers2

Fixing your code

Linked