Sign in to follow this  
lucasdavidferrero

The Canvas doesn't show sprites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.