Access Pixi instance from within Vue , 'Converting circular structure to JSON' or other best practice for dynamic updating

[kkun]

Hi all, i am trying to use Pixijs inside a vue instance and have encountered a strange issue.

I know it might no be directly related to Pixi.js and you can jump to the tl;dr section for a question about how to update sprites locations, thanks,

------------------------------

All worked as expected when i used the particle container example from Pixi's official website.

https://jsbin.com/jewapiyuzo/1/edit?html,js,console,output

But now I want to have more control over the location of those sprites, like using an array to re-assign x, y, of each sprite. so I add a reference of pixi instance as vue's data element at line 12

Quote

// this.pixiInstance = app

and received an error

Quote

"[Vue warn]: Error in render function: \"TypeError: Converting circular structure to JSON\"

It would throw a similar error if I want to pass a reference of ``maggots`` by using this.pixiInstance = maggots.

jsbin seems to have added some protection or sandboxed this but it would caused a stackoverflow if you run this directly inside Chrome.

 

So I am really desperate here on how to access ``maggots`` so I can loop thru and update all its elements...

My last resort would be removing the canvas dom element and redraw it everytime i have to update the sprites data. i really don't want to do that

Edit1: I am using the import below to import pixi, not sure if this would make any difference.

Quote

import * as PIXI from 'pixi.js'

=================TL;DR and Pure Pixijs question=========================

Once you have initialized a Pixjs instance and have added sprites to it, what's the best way to access the instance so you can loop and update sprites' x, y values?

Edited August 1, 2017 by kkun
add note

[ivan.popelyshev]

I dont know how vue works, but I think it doesnt like when you add complex objects there. PIXI objects arent plain, there are many properties and circular links. Try that one: https://github.com/GreyRook/POM or look at how https://greensock.com/1-20-0 does that.

== pure pixi answer 

app.ticker.add((delta) => {

delta = Math.min(delta, 5); //if user switched tab - it'll stop, so lets cap the delta to 5 frames or so.

//UPDATE EVERYTHING HERE
//CALL GREENSOCK HANDLER, MAKE TWEENS
});

You have to determine how exactly do you subscribe your elements for this ticker update. There are so many ways to do it, it heavily depends on user style of coding.

Simple solution:

1. create eventemitter

2. subscribe element to its update signal when the element is added to the stage

3. unsubscribe when removed from stage

How to detect that element entered stage or left it is up to you too, pixi doesnt have that.

[kkun]

I just have a new idea while thinking about your pure pixi solution, instead of referencing pixi instance in vue ,  i can reference a dynamically-updated vue data instance inside the pixi ticker.

Edit2: did a quick mock-up test and all went thru nicely!

Edited August 1, 2017 by kkun
new idea and result