nor-bu Posted October 5, 2017 Share Posted October 5, 2017 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 5, 2017 Share Posted October 5, 2017 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 Quote Link to comment Share on other sites More sharing options...
nor-bu Posted October 5, 2017 Author Share Posted October 5, 2017 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 6, 2017 Share Posted October 6, 2017 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 Quote Link to comment Share on other sites More sharing options...
nor-bu Posted October 6, 2017 Author Share Posted October 6, 2017 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 6, 2017 Share Posted October 6, 2017 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. dmko 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 6, 2017 Share Posted October 6, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
dmko Posted October 8, 2017 Share Posted October 8, 2017 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.