Javascript animation?


#1

ok So I’m trying to make the ball move on its own using javascript and I tried using w3schools to help out but that didn’t work so if anyone knows howto do this plz comment!!!


#2

Check out this type of movement: https://playcanvas.com/editor/scene/365100
if you are looking for animations like it says try this: https://developer.playcanvas.com/en/tutorials/animation-blending/


#3

um sry bro but the code doesn’t work I tried everything I can think of


#4

yes the scripts are legacy but you need to know how to convert them… so on the first one it would turn into this:

var Enemy = pc.createScript('enemy');

Enemy.attributes.add('limitA',{
    
 type: 'number',
    default: -1
});
Enemy.attributes.add('limitB', {
    type: 'number',
    default: 1
});
Enemy.attributes.add('velocity', {
    type: 'number',
    default: 1
});

// initialize code called once per entity
Enemy.prototype.initialize = function() {
    
};

// update code called every frame
Enemy.prototype.update = function(dt) {
    var currX = this.entity.getPosition().x;

            if (((currX <= this.limitA) && (this.velocity < 0)) ||
                ((currX >= this.limitB) && (this.velocity > 0))) {
                this.velocity = -this.velocity;
            }

            this.entity.translate(this.velocity * dt, 0, 0);
};

So thus legacy script fits the terms of the new script…
Now for the animation blending this is what it would look like:

var AnimationBlending = pc.createScript('animationBlending');

AnimationBlending.states = {
    idle: {
        animation: 'male.json'
    },
    punch: {
        animation: 'male_uppercut_jab.json'
    }
};

// initialize code called once per entity
AnimationBlending.prototype.initialize = function() {
    this.blendTime = 0.2;

    this.setState('idle');

    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.keyDown, this);
    this.app.keyboard.on(pc.EVENT_KEYUP, this.keyUp, this);
};

AnimationBlending.prototype.setState = function (state) {
    var states = AnimationBlending.states;

    this.state = state;
    // Set the current animation, taking 0.2 seconds to blend from
    // the current animation state to the start of the target animation.
    this.entity.animation.play(states[state].animation, this.blendTime);
};

AnimationBlending.prototype.keyDown = function (e) {
    if ((e.key === pc.KEY_P) && (this.state !== 'punch')) {
        this.setState('punch');
    }
};

AnimationBlending.prototype.keyUp = function (e) {
    if ((e.key === pc.KEY_P) && (this.state === 'punch')) {
        this.setState('idle');
    }
};

This script is correct now all you need to do is make sure you have the animations and that everything is correctly named in the script and put on the correct entity
I hope this helps a little better


#5

umm yes That was what I was looking for but I meant just making the entity move side to side like left and right but I guess I can just use an animation to make that easier.Anyway’s thnx :slight_smile:


#6

Yes making move side to side is just to get you started


#7

ummmm ok thnx I’ll try it and why I talking do you know any software for multiplayer matchmaking beside photon,playfab,or nodejs


#8


do you want lie matchmaking menu? like clicking join game? or like a server list?
Or just multiplayer?


#9

click and joiningis what I would want


#10

ok check out this project:
Has click and join functions - https://playcanvas.com/project/585801/overview/caeds-hostis-battle-royal


#11

ehh I’ll just want a multiplayer


#12

Ok goto socket its nice