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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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