Jump to content

Sprite positions can't change indepently


Recommended Posts

Hi .i made a simple pixi app which tries to simulate spring forces but can't make it  work properly .

I've patched PIXI.ObservablePoint 

Object.assign(PIXI.ObservablePoint.prototype, {

    add: function(o) {
        this.set(this.x += o.x, this.y += o.y);
    radd: function(o) {
        return new PIXI.ObservablePoint(test, window, this.x + o.x, this.y + o.y);//test is a useless callback function that  do nothing .
    sub: function(o) {
        this.set(this.x -= o.x, this.y -= o.y);

    rsub: function(o) {
        return new PIXI.ObservablePoint(test, window, this.x - o.x, this.y - o.y);
    mult: function(o) {
        this.x *= o;
        this.y *= o;
    rmult: function(o) {
        return new PIXI.ObservablePoint(test, window, this.x * o, this.y * o);
    getAngle() {
        //in radians
        return Math.atan2(this.y, this.x);
    getLenght() {
        return Math.hypot(this.x, this.y);
    setLength(l) {
        let angle = this.getAngle();
        this.set(Math.cos(angle) * l, Math.sin(angle) * l);
    setAngle(a) {
        //in radians;
        this.set(Math.cos(a) * this.getLenght(), Math.sin(a) * this.getLenght());


 and this one is the sprite object 

class spring extends PIXI.Sprite {
    constructor(x, y) {
        this.texture = new PIXI.Texture.fromImage("assets/image.png");
        this.x = app.rw;//random width
        this.y = app.rh;//random height
        this.t = new PIXI.ObservablePoint(test,window,x,y);
        this.scale.set(.5 + Math.random() * .5);
    update() {
        this.d = this.t.rsub(this.position);
let arr = [];
for (var a = 0; a < 100; a++) {
    let bu = new spring(app.rw, app.rh);

app.ticker.add(() => {
    for (var i = 0; i < arr.length; i++) {
        let bu = arr[i];

when i tried to create spring objects they behave weirdly .

If there is only one spring object on array nothing happens unusual.But if there are more then one spring object they act like this and i can't change their positions independently beyond that if i disable friction  they fastly disappear from screen .

Link to comment
Share on other sites

not related - fromImage is not a constructor, you dont need "new" there. Also, Sprite has texture as first param:


As for real problem, I dont see is in the source code. You have to share the whole fiddle, or give me something that i can paste in http://pixijs.github.io/examples/#/basics/basic.js

The update looks like very unstable thing, but i dont see how can one ball affect another.

Link to comment
Share on other sites

Sorry i forgot to write them here I have a template for pixi applications (with  couple of patches   for velocity acceleration etc..).Here ,this is codepen link of it .Try to change position values of any object or remove friction .I think it has something to do with callbacks for observable point because  observablepoint  has got a default callback function for sprite position  named  onChange and it increases local_id variable .

Thanks in advance 

Link to comment
Share on other sites

Object.assign(PIXI.Sprite.prototype, {
    acc: new PIXI.ObservablePoint(test, window, 0, 0),
    vel: new PIXI.ObservablePoint(test, window, 0, 0),
    k: .1,

    interactive: false,
    buttonMode: false


That's the same velocity and acceleration for all sprite objects. You have to create new one for each object independently. After that fix it looks correct.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...