Jump to content

The Canvas doesn't show sprites


lucasdavidferrero
 Share

Recommended Posts

Hi community, I'm having a problem with canvas and sprites. I'm new in this matter and I hope that you could help me :D

The problem, as the title says, is that I can't see the sprites on canvas. I've tried to call the functions preload() and create() manually in the browser's console and I get a warning that says: Phaser.Cache.getImage: Key "bg" not found in Cache. The warning appears for every Key that I'm using for.

There is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cat Catcher</title>
    <script src="./js/phaser.min.js"></script>
    
    
    <script>

            var game = new Phaser.Game(800, 600, Phaser.CANVAS, {preload: preload, create: create, update: update});
            var cat, catcher, cursors, txtScore, score;
            function preload() {
                // load assets
                game.load.image('cat', '/img/cat.png');
                game.load.image('catcher', '/img/cat.png');
                game.load.image('bg', '/img/bg.png')
            }
    
            function create() {
                //setup game
                game.add.sprite(0, 0, 'bg');
    
                catcher = game.add.sprite(400, 300, 'catcher');
                catcher.anchor.setTo(.5,0);
                game.physics.enable(catcher, Phaser.Physics.ARCADE);
    
                cat = game.add.sprite( Math.random() * game.width, Math.random() * game.height, 'cat' );
                game.physics.enable(cat, Phaser.Physics.ARCADE);
    
                score = 0;
                var style = { font: '20px Arial', fill: '#FFF' };
                txtScore = game.add.text(10, 10, score.toString(), style);
    
                cursors = game.input.keyboard.createCursorKeys();
            }
    
            function update() {
                //game loop code
                if(cursors.left.isDown){
                    catcher.x -= 5;
                    catcher.scale.x = 1;
                }
    
                if(cursors.right.isDown) {
                    catcher.x += 5;
                    catcher.scale.x = -1;
                }
    
                if(cursors.up.isDown) {
                    catcher.y -= 5;
                }
    
                if(cursors.down.isDown) {
                    catcher.y += 5;
                }
    
                game.physics.arcade.overlap(catcher, cat, catHitHandler);
            }
    
        </script>
</head>
<body>
    

</body>
</html>

I'm using Phaser v2.10.0

I wish you could tell me where the problem is, Thanks!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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