Sprite shown unexpectedly

Hi, I am playing around with the Phaser 3 examples by modifying them for experiments. With the following codes, the last sprite was displayed at the location (0,0) unexpectedly. It was caused by this.add.group(). What did I do wrong?

Sprite shown unrespected


**********************************************
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Playing cards - Part 1</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script>
class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.spritesheet('cards', 'assets/sprites/playing_cards_975_420.png', { frameWidth: 75, frameHeight: 105 });
    }

    create ()
    {
        const group = this.add.group({
            key: 'cards',
            frame: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 
            13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 
            26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 
            39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
            ],
            frameQuantity: 1
        });
    }
}
const config = {
    type: Phaser.AUTO,
    width: 1200,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: [ Example ]
};

const game = new Phaser.Game(config);
</script>

Hi @Marsx2,

I think it is because “group(params)” instantiates GameObjects from the config object passed in.
See: Phaser 3 API Documentation - Class: Group
See: Phaser 3 API Documentation - Namespace: Group

The default argument is to set the sprite’s visibility to ‘true’. Can you try writing the same thing, but adding the following parameter to the config object you’re passing into the group() method after the frameQuantity:1? See below.

visible: false

Hopefully this helps! I’m a bit new to Phaser and JavaScript, so I’m sorry if this doesn’t fix it.

If you pass key and frameQuantity then createMultiple() is called with those options.

1 Like

Hi @chemdatafarmer,

Thank you for your advice.

It really did the trick after set visible to false. :grinning:

1 Like

Hi @samme ,

Thank you.

Even I removed frameQuantity, it was the same.