Help with background image

[acidmatta]

Hey

I'm having a problem and I hope you guys can help me.

I'm trying to put a background image for my stage.

The stage is already done the way I want, but the background image is not showing up.

This is the code: 

window.onload = function() {

        var game = new Phaser.Game(1200, 600, Phaser.AUTO, 'game-area', { preload: preload, create: create, update: update, render: render });

        var manager = null;
        var emitter = null;
        var circle = null;

        function preload() {

            game.forceSingleUpdate = true;

            game.load.image('background', 'bg.jpg');
            game.load.image('uni', 'uni2.png');
            game.load.path = 'assets/particles/';

            game.load.images(['red', 'blue', 'yellow', 'white']);

        }

        var uni;
        var background;

        function create() {

            manager = this.game.plugins.add(Phaser.ParticleStorm);

            background = game.add.tileSprite(0, 0, 1200, 600, 'background');

            var data = {
                lifespan: 6000,
                image: ['red', 'blue', 'yellow', 'white'],
                vy: { min: 1, max: 2 },
                blendMode: 'ADD',
                scale: { initial: 0, value: 0.3, control: [ { x: 0, y: 1 }, { x: 1, y: 0 } ] }
            };

            manager.addData('basic', data);

            emitter = manager.createEmitter();

           /*var well1 = emitter.createGravityWell(200, 100, -0.5);*/
            var well2 = emitter.createGravityWell(900, 50, 10, 200);
            var well2 = emitter.createGravityWell(850, 400, 20, 200);

            circle = manager.createCircleZone(8);

            emitter.addToWorld();

            emitter.emit('basic', 0, 0, { zone: circle, total: 6, repeat: -1, frequency: 20 });

            //  To make the sprite move we need to enable Arcade Physics
            game.physics.startSystem(Phaser.Physics.ARCADE);

            uni = game.add.sprite(game.world.centerX, game.world.centerY, 'uni');
            uni.anchor.set(0.5);

        }

        function update() {

            circle.shape.x = game.input.x;
            circle.shape.y = game.input.y;

            uni.x = game.input.x-30;
            uni.y = game.input.y - 50;

        }

    };

 

I really do not know why this line of code "background = game.add.tileSprite (0, 0, 1200, 600, 'background') " is "breaking" the canvas.

Not even the animation is running.

Sorry for my bad english. Not my first language. 

Thanks

[FakeWizard]

the code seems ok, can you see any errors in your browser's console? Are you testing this purely in your browser or from a http server?

[mattstyles]

If the animation stops it implies the JS thread has blown up for some reason (rather than just the image failing to load) so yeah, a console error would be handy to diagnose the problem.

[acidmatta]

Here is the console log 

[acidmatta]

18 hours ago, FakeWizard said:

the code seems ok, can you see any errors in your browser's console? Are you testing this purely in your browser or from a http server?

From a local host with Xammp 

[MikeW]

Just a general guess -- can you move the scope of the variable temporarily to a global level - so when it dies you can go to the console and work with it. Guesses are scope issue -- or it's not the type of object you think it is. 

[acidmatta]

11 minutes ago, MikeW said:

Just a general guess -- can you move the scope of the variable temporarily to a global level - so when it dies you can go to the console and work with it. Guesses are scope issue -- or it's not the type of object you think it is. 

Outside the main function? 

Like this : 

var background =  game.add.tileSprite(0, 0, 1200, 600, 'background');

window.onload = function() {

        var game = new Phaser.Game(1200, 600, Phaser.AUTO, 'game-area', { preload: preload, create: create, update: update, render: render });

        var manager = null;
        var emitter = null;
        var circle = null;

        function preload() {

            game.forceSingleUpdate = true;

            game.load.image('background', 'bg.jpg');
            game.load.image('uni', 'uni2.png');
            game.load.path = 'assets/particles/';

            game.load.images(['red', 'blue', 'yellow', 'white']);

        }

        var uni;

        function create() {

            manager = this.game.plugins.add(Phaser.ParticleStorm);

            var data = {
                lifespan: 6000,
                image: ['red', 'blue', 'yellow', 'white'],
                vy: { min: 1, max: 2 },
                blendMode: 'ADD',
                scale: { initial: 0, value: 0.3, control: [ { x: 0, y: 1 }, { x: 1, y: 0 } ] }
            };

            manager.addData('basic', data);

            emitter = manager.createEmitter();

           /*var well1 = emitter.createGravityWell(200, 100, -0.5);*/
            var well2 = emitter.createGravityWell(900, 50, 10, 200);
            var well2 = emitter.createGravityWell(850, 400, 20, 200);

            circle = manager.createCircleZone(8);

            emitter.addToWorld();

            emitter.emit('basic', 0, 0, { zone: circle, total: 6, repeat: -1, frequency: 20 });

            //  To make the sprite move we need to enable Arcade Physics
            game.physics.startSystem(Phaser.Physics.ARCADE);

            uni = game.add.sprite(game.world.centerX, game.world.centerY, 'uni');
            uni.anchor.set(0.5);

        }

        function update() {

            circle.shape.x = game.input.x;
            circle.shape.y = game.input.y;

            uni.x = game.input.x-30;
            uni.y = game.input.y - 50;

        }

    };

[acidmatta]

Hey guys

Thank's for all the help. 

I was able to overcome the problem. 

I was using a CE version of the phaser and not the latest official release. As soon as I changed the lib, the background appeared.

Thanks again