Low FPS in spine objects and image objects in the same container or in the same parent container

[lkmproject]

Version

• Phaser Version:3.55.2
• Operating system: iPhone 6s Plus, IOS 14.4.1
• Browser: Safari

Description

Low FPS in spine objects and image objects in the same container or in the same parent container

Example: create 15 spine objects and image objects in the same container or in the same parent container

Example Test Code

import Phaser from 'phaser'

export class DemoScene extends Phaser.Scene{

  preload ()
  {
      this.load.image('img', 'exit_btn.png');
      this.load.setPath('/gob').atlas
      this.load.spine('goblin', 'goblins.json', 'goblins.atlas')
  }

  createSpin(scene:Phaser.Scene,group:Phaser.GameObjects.Container,xS:number,y:number){
      let x = xS 
      for(let i = 0 ; i < 5 ; i++){
          //create spine object
          const boy = this.add.spine(x, y, 'goblin', "walk", true)
          boy.setSkinByName('goblin')

          //create image
          let img = this.add.image(x,y,'img') 

          //add spine object to container
          group.add(<any>boy);

          //add image object to container
          group.add(img)

          x = x + 150
      }
  }

  create ()
  {
      let t = this.add.text(0, 8, '0');
      t.setFontSize(40)
      this.events.on('render', ()=>{
          console.log(this.game.loop.actualFps)
          t.setText(`${this.game.loop.actualFps}`)
      });

      const group = this.add.container(0,0)
      this.add.existing(group)

      let y = 400
      this.createSpin(this,group,100,y)
      this.createSpin(this,group,100,y+330)
      this.createSpin(this,group,100,y+660)
  }
}

Additional Information

[photonstorm]

This is to be expected and is explained in the documentation. You're literally breaking the Spine batched renderer with every Image it comes across. This is why we added the SpineContainer Game Object, so you can batch together Spine Game Objects.

In short, do not mix them up like this. Every time Phaser hits a Spine object in the display list, it needs to completely halt all rendering and pass over to Spine. Spine will then take over control of rendering, draw the Spine object and, if there aren't any others in the list, return back to Phaser again. If you mix different object types together, you create a ping-pong effect between the renderers. This is the downside of Spine. Organise your display list more carefully to avoid it.