Jump to content

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


Recommended Posts

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.


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


// this.pixiInstance = app

and received an error


"[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.


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 by kkun
add note
Link to comment
Share on other sites

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.


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.

Link to comment
Share on other sites

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 by kkun
new idea and result
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...