Going from Spritesheet to Texture Atlas

flan · February 25, 2016

"There is no technical advantage of using a sprite sheet at all. They tend to use more space both in memory and bandwidth because they don’t pack frame data as efficiently as a texture atlas does. However, there are lots of legacy graphics out there in that format, and its still quite popular today. So we support them. But you should try and pack graphics into atlases where possible to save on ram."

After reading this quote by Richard Davey, I thought I'd try it out, and can't seem to make it work..."Uncaught TypeError: Cannot read property 'x' of undefined" at line 224?

I've labeled 224 below and left both the spritesheet and texture atlas code intact side by side with the SS commented out...can anyone offer any suggestions? Thanks in advance!

-flan

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>boysaver. just...for...love.</title>
        <script src="phaser.js"></script>
            <style type="text/css">
                html{
                    background-color: black;
                }
        </style>
    </head>
    <body>

var game = new Phaser.Game(840, 420, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

        var player;
        var cursors;
        var map;
        var layer;
        var water;
        var hitler;
        var jaws;
        var music;
        var count = 0;
        var gameOverText;

        function preload () {
            game.load.audio('music', ['boysavermusic.mp3', 'boysavermusic.m4a']);
            game.load.tilemap('level', 'map.json', null, Phaser.Tilemap.TILED_JSON);
            game.load.image('water', 'water.png');
            game.load.image('tiles', 'real_tileset.png');
            game.load.image('jaws', 'jaws.png');
            game.load.image('hitlerCounter', 'hitlerCounter.png');

            //SPRITESHEET
            //game.load.spritesheet('scottRunning', 'playerSpritesheet.png', 70, 70);
            //game.load.spritesheet('hitlerRolling', 'hitlerSpritesheet.png', 70, 70);

            //ATLAS
            game.load.atlas('atlas', 'spritesheet.png', 'atlas.json', Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);

        }


        function create() {
            game.stage.backgroundColor = "#66EEFF";
            music = game.sound.play('music');
            text = game.add.text(680, 25, "" + count + "", {
                font: "40px Tahoma"
            });
            gameOverText = game.add.text(game.world.centerX, game.world.centerY, "", {
                font: "100px Tahoma"
            });
            gameOverText.anchor.setTo(0.5, 0.5);
            gameOverText.fixedToCamera = true;
            text.anchor.setTo(0.5, 0.5);
            text.fixedToCamera = true;
            map = game.add.tilemap('level');
            map.addTilesetImage('real_tileset', 'tiles');
            map.setCollision([0, 1, 3, 4, 6, 7, 8, 10, 11, 12, 23], true, 'layer_2');

            layer2 = map.createLayer('layer_2');
            waterlayer = map.createLayer('waterlayer');
            game.physics.startSystem(Phaser.Physics.ARCADE);




            //origin point and dimensions of the background
            game.world.setBounds(0, 0, 3500, 420);

            //ATLAS
            player = game.add.sprite(92, game.world.centerY, 'atlas');
            //SPRITESHEET
            //player = game.add.sprite(92, game.world.centerY, 'scottRunning');

            game.physics.enable(player);
            game.camera.follow(player);
            player.anchor.setTo(0.5, 0.5);
            player.scale.x = 1.45;
            player.scale.y = 1.45;
            player.body.bounce.y = 0.2;
            player.body.collideWorldBounds = true;


            //SPRITESHEET
            //player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8], 12, true);
            //player.animations.add('right', [9, 10, 11, 12, 13, 14, 15, 16, 17], 12, true);
            //player.animations.add('up', [18], 8, true);

            jaws = game.add.sprite(2735, game.world.centerY + 100, 'jaws');
            game.physics.enable(jaws);
            jaws.body.collideWorldBounds = true;

            water = game.add.sprite(2660, 350, 'water');
            game.physics.enable(water);
            water.body.collideWorldBounds = true;
            water2 = game.add.sprite(2800, 350, 'water');
            game.physics.enable(water2);
            water2.body.collideWorldBounds = true;
            water3 = game.add.sprite(2520, 350, 'water');
            game.physics.enable(water3);
            water3.body.collideWorldBounds = true;
            water4 = game.add.sprite(2450, 350, 'water');
            game.physics.enable(water4);
            water4.body.collideWorldBounds = true;
            water5 = game.add.sprite(2940, 350, 'water');
            game.physics.enable(water5);
            water5.body.collideWorldBounds = true;
            water6 = game.add.sprite(3010, 350, 'water');
            game.physics.enable(water6);
            water6.body.collideWorldBounds = true;

            //SPRITESHEET
            //hitler = game.add.sprite(200, game.world.centerY, 'hitlerRolling');

            //ATLAS
            hitler = game.add.sprite(200, game.world.centerY, 'atlas');
            hitler.animations.add('rollleft', Phaser.Animation.generateFrameNames('rollleft', 1, 12), 12, true);
            hitler.animations.add('rollright', Phaser.Animation.generateFrameNames('rollright', 1, 12), 12, true);

            game.physics.enable(hitler);
            hitler.body.bounce.setTo(.5, .5);
            hitler.scale.x = .5;
            hitler.scale.y = .5;
            hitler.body.velocity.x = 250;
            hitler.body.collideWorldBounds = true;

            //SPRITESHEET
            //hitler.animations.add('rollleft', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 8, true);
            //hitler.animations.add('rollright', [11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 8, true);
            hitlerCounter = game.add.sprite(650, 0, 'hitlerCounter');
            hitlerCounter.scale.x = .50;
            hitlerCounter.scale.y = .50;
            hitlerCounter.fixedToCamera = true;

             //ATLAS
            player.animations.add('dead', Phaser.Animation.generateFrameNames('dead', 1, 9), 12, true);
            player.animations.add('left', Phaser.Animation.generateFrameNames('left', 1, 9), 12, true);
            player.animations.add('right', Phaser.Animation.generateFrameNames('right', 1, 9), 12, true);
            player.animations.add('up', Phaser.Animation.generateFrameNames('up', 1, 1), 12, true);
            player.animations.add('still', Phaser.Animation.generateFrameNames('still', 1, 1), 12, true);

            game.physics.arcade.gravity.y = 300;





            cursors = game.input.keyboard.createCursorKeys();

}

        function update () {
            player.body.velocity.x = 0;
            game.physics.arcade.collide(hitler, layer2);
            game.physics.arcade.collide(player, layer2);
            game.physics.arcade.overlap(player, hitler, destroyHitler);
            game.physics.arcade.overlap(jaws, player, destroyPlayer);
            game.physics.arcade.overlap(water, player, drownPlayer);
            game.physics.arcade.overlap(water2, player, drown2Player);
            game.physics.arcade.overlap(water3, player, drown3Player);
            game.physics.arcade.overlap(water4, player, drown4Player);
            game.physics.arcade.overlap(water5, player, drown5Player);
            game.physics.arcade.overlap(water6, player, drown6Player);

            game.physics.arcade.overlap(water, player, gameOver, null, this);
            game.physics.arcade.overlap(water2, player, gameOver, null, this);
            game.physics.arcade.overlap(water3, player, gameOver, null, this);
            game.physics.arcade.overlap(water4, player, gameOver, null, this);
            game.physics.arcade.overlap(water5, player, gameOver, null, this);
            game.physics.arcade.overlap(water6, player, gameOver, null, this);
            game.physics.arcade.overlap(hitler, player, updateText, null, this);

            function gameOver(){
                gameOverText.setText("GAME OVER");
            }

function updateText(){
    count++;
    text.setText("" + count + "");
}



            if (cursors.up.isDown)
                {
                player.frame = 18;

                    if (player.body.onFloor())
                        {
                            player.body.velocity.y = -300;
                        }
                }

            if (cursors.left.isDown)
            {
                player.body.velocity.x = -300;
                player.animations.play('left');
            }

            else if (cursors.right.isDown)
            {
                player.body.velocity.x = 300;
                player.animations.play('right');
            }

            else
            {
                player.animations.stop();
                player.frame = 19;
            }

            if (hitler.body.velocity.x >= 1)
            {

224-->     hitler.animations.play('rollright');
            }
            else if (hitler.body.velocity.x <=0)
            {
                hitler.animations.play('rollleft');
            }

        //game.reset();

        }

        function reset()
        {
            game.gameStarted = false;
            game.gameOver = false;

        }

        function destroyPlayer (player, jaws){
            player.animations.play('dead');
            gameOverText.setText("Game Over");
            jaws.kill();
        }
        function destroyHitler (hitler, player){
            //means the player kills the hitler
            count+=1;
            text.setText("" + count + "");
            player.kill();
        }
        function drownPlayer (player, water){
            player.animations.play('dead');
            gameOverText.setText("Game Over");
            water.kill();
        }
        function drown2Player (player, water2){
            player.animations.play('dead');
            gameOverText.setText("Game Over");
            water2.kill();
        }
        function drown3Player (player, water3){
            player.animations.play('dead');
                gameOverText.setText("Game Over");
            water3.kill();
        }
        function drown4Player (player, water4){
            player.animations.play('dead');
                        gameOverText.setText("Game Over");
            water4.kill();
        }
        function drown5Player (player, water5){
            player.animations.play('dead');
                        gameOverText.setText("Game Over");
            water5.kill();
        }
        function drown6Player (player, water6){
            player.animations.play('dead');
                        gameOverText.setText("Game Over");
            water6.kill();
        }
        //FOR EXAMPLE OF GAME OVER http://phaser.io/examples/v2/p2-physics/state-reset
        function render () {
            game.debug.cameraInfo(game.camera, 32, 32);
            game.debug.spriteCoords(player, 32, 500);
            debugger;
        }

</script>
</body>
</html>

lukaMis · February 25, 2016

When you use atlas there is an additional argument you need to pass to add sprite function:

// (x, y, atlas_key, name_of_image_in_atlas)
this.mySprite = this.game.add.sprite(0, 0, 'atlas_key', 'name_of_image_in_atlas');

Sign In

Going from Spritesheet to Texture Atlas

Recommended Posts

flan

Link to comment

Share on other sites

lukaMis

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity