Open FostUK opened 3 years ago
Spine objects do not respect camera zoom when running in canvas mode if inside a scaled container.
Webgl: https://www.bbc.co.uk/games/embed/cbeebies-genie-storybook?versionOverride=latest&viewNonPublished=true&theme=today-i-am-five-and-a-half
Canvas: https://www.bbc.co.uk/games/embed/cbeebies-genie-storybook-kindle?versionOverride=latest&viewNonPublished=true&theme=today-i-am-five-and-a-half
On initial page, watch the clock and fishbowl but also more obvious on later pages where the girl character does not scale with zooms.
Tried to make a sandbox but it doesn't seem to save - if you go here: https://labs.phaser.io/edit.html?src=src/spine/add%20spine%20object%20to%20group.js&v=3.53.1
and replace the code with:
let spineboy let container class Example extends Phaser.Scene { constructor () { super({ pack: { files: [ { type: 'scenePlugin', key: 'SpinePlugin', url: 'plugins/3.8.95/SpinePluginDebug.js', sceneKey: 'spine' } ] } }); } preload () { this.load.image('logo', 'assets/sprites/phaser.png'); this.load.setPath('assets/spine/3.8/demos/'); this.load.spine('set1', 'demos.json', [ 'atlas1.atlas' ], true); } create () { this.add.image(0, 0, 'logo').setOrigin(0); container = this.add.container() spineboy = this.add.spine(400, 600, 'set1.spineboy', 'idle', true); container.add(spineboy) container.setScale(0.5) } update(time, delta) { this.cameras.main.setZoom(Math.sin(time / 1000)); } } const config = { type: Phaser.CANVAS, parent: 'phaser-example', width: 800, height: 600, backgroundColor: '#2d2d2d', scene: Example }; const game = new Phaser.Game(config);
You can see how, compared to the background image, it seems to double the zoom effect. Ignore the missing parts - that's just spine meshes not working in canvas and is expected. If you flick between WEBGL and CANVAS you can see the scale mismatch.
how do you solve this if not change to use webgl?
Description
Spine objects do not respect camera zoom when running in canvas mode if inside a scaled container.
Example Test Code
Webgl: https://www.bbc.co.uk/games/embed/cbeebies-genie-storybook?versionOverride=latest&viewNonPublished=true&theme=today-i-am-five-and-a-half
Canvas: https://www.bbc.co.uk/games/embed/cbeebies-genie-storybook-kindle?versionOverride=latest&viewNonPublished=true&theme=today-i-am-five-and-a-half
On initial page, watch the clock and fishbowl but also more obvious on later pages where the girl character does not scale with zooms.
Tried to make a sandbox but it doesn't seem to save - if you go here: https://labs.phaser.io/edit.html?src=src/spine/add%20spine%20object%20to%20group.js&v=3.53.1
and replace the code with:
You can see how, compared to the background image, it seems to double the zoom effect. Ignore the missing parts - that's just spine meshes not working in canvas and is expected. If you flick between WEBGL and CANVAS you can see the scale mismatch.