How to run animatedsprite outside ticker

[j0k3r]

Hey guys,

So I have a game where all regular non-animated sprites update and whole game updates in a ticker.

Code:
 

app.ticker.add(delta => gameLoop(delta));
}

function gameLoop(delta){
app.stage.removeChildren();
//... rest of the code to update whole game

But if I add animatedsprite in the same ticker then animation will stop on the next tick update since I run "removeAllChildren()" method on the begining of update loop.

 

I have a shooter game and I want to play animated explosion sprite once another player dies but as soon as next update tick happens it removesAllChildren which stops the animation

Should I not run animated sprites inside the ticker? Maybe I should play animatedsprite somehow when 'death' event is received on websocket? How?

[botmaster]

Well you shouldn't remove all children at each tick to start with. Are you saying you remove everything and add back everything at each tick? This is really bad practice and it's just gonna slow down everything. You should instead think about better ways to organize your code.

[j0k3r]

Just now, botmaster said:

Well you shouldn't remove all children at each tick to start with. Are you saying you remove everything and add back everything at each tick? This is really bad practice and it's just gonna slow down everything. You should instead think about better ways to organize your code.

hello, I managed to do it by removing all children except running animations itself (i also had to use plugin pixi-layers because anims would be hidden by repaint on every tick), but if you have a big map and a player moving through it, you'd have to repaint everything, theres no way to avoid that right?

[ivan.popelyshev]

In general: handle animations, events and cleanups separately. 

 

app.ticker.add(() => {
   //code that updates ALL MY ANIMATIONS MANUALLY
});

app.ticker.add(() => {

   // suppose we want to clear someContainer
   let children = someContainer.children;
   let j = 0;
   for (let i=0;i<children.length;i++) {
       var child = children[i];
       if (child.dead) {
          //delete it somehow, remove from list of animations and so on
       } else {
           children[j++] = i;
       } 
   }
   children.length = j;
});

Of course it has to be adapted to your style of coding and your case.

I know that most people when they start something more than stupid demo stumble across the problem, and I provided PR in PixiJS that adds API but it was too experimental for our team, it was rejected. I'll try to make it again this summer. It was about `detachChild` thing that handles actual removal later, after all events.

 

[j0k3r]

21 minutes ago, ivan.popelyshev said:

In general: handle animations, events and cleanups separately. 

Of course it has to be adapted to your style of coding and your case.

I know that most people when they start something more than stupid demo stumble across the problem, and I provided PR in PixiJS that adds API but it was too experimental for our team, it was rejected. I'll try to make it again this summer. It was about `detachChild` thing that handles actual removal later, after all events.

 

Thanks a lot! By the way, is it possible to integrate CSS with PIXI? Also, how would you go on making the responsive pixi app? Are there any libraries for responsiveness?

[Exca]

There's plenty of responsive design threads with more info. But here's a short list of how canvas applications are usually done to make them responsive:

- Have fixed canvas resolution. Use css to transform to wanted size. Keep aspect locked.
- Resize canvas and scale elements inside to fit wanted area. Game aspect is fixed.
- Build some logic inside your game that handles resizing into different aspect ratios and different sizes.

What I usually is to have some logic that positions ui elements depending on device resolution. Then have the main game area fill one dimension with fixed width/height and then let another dimension go with whatever the aspect is. That way on some devices you might see more of your game but the most impacting dimension (vertical/horizontal) is locked on separate devices. Though trying to prevent from going over scale of 1 (assetwise) as then graphics start to get blurry. At that point I usually switch to css upscaling as rendering on larger resolution would not really benefit much.