Jump to content

Help with background image


acidmatta
 Share

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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;


        }


    };

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...