flan

Going from Spritesheet to Texture Atlas

Recommended Posts

"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>

    <script type="text/javascript">

        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>

Share this post


Link to post
Share on other sites

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');

 

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.