j0k3r

How to run animatedsprite outside ticker

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.