Vue js hot reload

[nor-bu]

I have pixi combined with vuejs, all works fine except the hot reload, when i update one component then is each of my sprites doubled on the screen. How can a reload the whole renderer?

Thanks for help

[ivan.popelyshev]

I think its about stage, not the renderer. I think you are adding somewhere a ticker with "render(stage)" and forget to remove it on hot reload, thus two stages are working at the same time.

I dont know inner workings of vue.js , I know only angular 1  @dmko can help you with react. You're first here with vue, so its your job to investigate what the hell is happenning

[nor-bu]

No i have not add stage to times. I give you a little bit more background, i have integrated pixi in vue not in the regular way. I can use vue components to add container, sprites ..., vue has a update function ( Vue Lifecycle Diagram ) this is called when data is changed. This part works fine, but the same update function is called when i change some js code at development, when i change some code (sprite position) i see after the update the sprite on the old and a new instance on the new position. I think the solution is to call a reload function from pixi in the update version. I'm not so familiar with pixi, is there a function to reload the app or the renderer? I think the solution is one line of code or something little. 

 

[ivan.popelyshev]

Is it you first experience with flash-inspired 2d rendering? If so, forget about vue for some time and just study pixi. I cant explain all the things in one post

[nor-bu]

No it's not my first experience, i have used pixi js multiple times, what i mean is, pixi is not part of my daily work.

[ivan.popelyshev]

Ok, so really the part you need to watch out for is https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js . Even if you dont use application, you somehow combine stage+renderer+ticker+loader, and that are the components you have to shuffle around to achieve something with vue.

[ivan.popelyshev]

In general, its better to not re-create canvas itself, and store it in a service that exists all the time, while component just adds that canvas to DOM.

Also its better to avoid hot-reload of that resource, because, well, DESTROY on renderer should be called, otherwise videomemory wont be freed. Or at least you need to somehow lose old context. Hot-reload in general has problems with external resources, like when I debug something on server and hot-reload it, there are serious problems with websockets, both in scala and in js.

[dmko]

Also just to add if you call app.render() directly, you should setup the PIXI.Application with `autoStart: false`

I'm not sure if it makes a difference practically (e.g. double-render somehow), but it can only help