Loading animation groups hangs on mobile

[i3D]

Hi Guys

 

I am building a mobile game for a campaign on mobile,

 

Here is a link to the current game prototype. The controls are currently working under desktop (up and down arrow), still not functioning for mobile.

 

I have two main characters that have their animations stored in a texture atlas made by textureBaker. The Running man and the wolf.

 

I am pre-loading the textures in the preload function, then assigning the sprites and creating the animations in the create function.

this.game.load.atlasJSONHash('hero_animations', 'assets/hero_animations.png', 'assets/hero_animations.json');this.game.load.atlasJSONHash('wolf', 'assets/wolf_running.png', 'assets/wolf_running.json');

hero_running = game.add.sprite(game.world.centerX, 443, 'hero_animations', 'Hero_Running_Backward_00.png');...hero_running.animations.add('running_backward', [            'Hero_Running_Backward_00.png',            'Hero_Running_Backward_01.png',            'Hero_Running_Backward_02.png',            'Hero_Running_Backward_03.png',            'Hero_Running_Backward_04.png',            'Hero_Running_Backward_05.png',            'Hero_Running_Backward_06.png',            'Hero_Running_Backward_07.png',            'Hero_Running_Backward_08.png',            'Hero_Running_Backward_09.png',            'Hero_Running_Backward_10.png',            'Hero_Running_Backward_11.png',            'Hero_Running_Backward_12.png',            'Hero_Running_Backward_13.png',            'Hero_Running_Backward_14.png',            'Hero_Running_Backward_15.png',            'Hero_Running_Backward_16.png'        ], 30, true, false);...hero_running.animations.play('running_backward');...enemies.createMultiple(1, 'wolf');enemies.callAll('animations.add', 'animations', 'running', ['Wolf_Running_000.png',            'Wolf_Running_001.png',            'Wolf_Running_002.png',            'Wolf_Running_003.png',            'Wolf_Running_004.png',            'Wolf_Running_005.png',            'Wolf_Running_006.png',            'Wolf_Running_007.png',            'Wolf_Running_008.png',            'Wolf_Running_009.png',            'Wolf_Running_010.png',            'Wolf_Running_011.png',            'Wolf_Running_012.png',            'Wolf_Running_013.png'], 30, true, false); enemies.callAll('animations.play', 'animations', 'running');

I am also calling the enemy to appear on screen every two seconds roughly

game.time.events.loop(2200, this.addEnemy, this);

The character animations play very well under mobile and desktop, however before the wolf is created there is a small pause in the game and then a wolf animation is created, once the first wolf goes out of screen, the second wolf usually stops the game, in other times it's just another pause.

 

Here is the addEnemy function

addEnemy: function() {        var enemy = enemies.getFirstDead();        var enemy_s = this.enemie_shadow.getFirstDead()        if (!enemy && !enemy_s) {            return;        }        enemy_s.anchor.setTo(0.5, 0.5);        enemy_s.scale.setTo(0.42, 0.42);        enemy_s.reset(game.world.width + 100, 555);        enemy_s.body.velocity.x = -850;        enemy_s.checkWorldBounds = true;        enemy_s.outOfBoundsKill = true;        enemy.anchor.setTo(0.5, 1);        enemy.scale.setTo(0.42, 0.42);        enemy.reset(game.world.width + 100, 720);        enemy.body.velocity.x = -850;        enemy.checkWorldBounds = true;        enemy.outOfBoundsKill = true;    },

Does anyone know how to prevent the pause? I looked for preloading an animation and I couldn't find anything. Any help would be appreciated.

 

Thanks

[rich]

I don't believe the animation is the cause of the issue. I would wager that even if you removed the animation from the sprite it may still 'pause' on device.

 

First things first - how large is the texture atlas? (dimensions, not file size)

 

Second - which build of Phaser are you using? and what device are you testing on?

[i3D]

Hi Rich

 

Thanks for your reply.

 

The Character is 4x4K rec image, the wolf is a 2x2K rec image. Testing on iPhone 6+, iPhone 4s, Android Sony Z. and I am using 2.3.0

 

Thanks

[Tom Atom]

Hi, 4096x4096 is not mobile safe resolution for texture. New devices will handle it, but not-so-old-devices are capable up to 2048x2048 only...

[i3D]

Hi Tom

 

Thanks for your reply.

 

Here is a question then, The reason I made a 4x4K texture is because I couldn't figure out a way to load multiple texture atlas and assign them to a single sprite object, looking at the examples at Phaser.io didn't prove helpful. Is there a way to load multiple texture atlases, and assign the animation to the same object?

 

Thanks

[Tom Atom]

Hi, sorry for late reply. As far as is my knowledge, this is not possible.

 

 4096x4096 is really lot of graphics. You sprite is either very detailed or you have lot of frames. If first is true, then you can have problems with performance on older / non-hiend devices. If second is true, maybe some frames can be replaced with "composition" from smaller parts. For this you can create Phaser.Group and put several sprites into it. For example imagine windmill - you can have lot of frames with smooth propeller rotation, but you can replace it with two frames: building + propeller and create group with them. Additionaly, you can rotate propeller with updataing its rotation and thus achieve much smoother movement than with frames.