Jump to content

Animation with Multipack Sprite Sheets


Recommended Posts

I have an 18 second video to incorporate into my canvas. The MP4 file has been exported as a 532 PNG sequence for me. When i pack it in TexturePacker I get 11 sprite sheets. I'm trying to come up with a good method for playing it as seamlessly as possible. Here is the test code I have been using. I only loaded 5 for brevity. Is this the suggested method? Anyone have a better way to do it? It definitely doesn't look fluid. 


My initial thought was to just play the MP4 file over the canvas but there is already an HTML5 video on the screen that is playing at the same time. This has to work on the iPad and I couldn't get both videos to play at the same time. Hence why I have a PNG sequence.

<html><body><div class="canvas">    <div id="simulator"></div></div><script src="//code.jquery.com/jquery-2.1.1.min.js"></script><script src="scripts/vendor/phaser.min.js"></script><script>var game = new Phaser.Game(727, 171, Phaser.CANVAS, 'simulator', { preload: preload, create: create});function preload() {    game.load.atlasJSONHash('handle_animation0', 'images/sprites/handle_animation0.png', 'images/sprites/handle_animation0.json');    game.load.atlasJSONHash('handle_animation1', 'images/sprites/handle_animation1.png', 'images/sprites/handle_animation1.json');    game.load.atlasJSONHash('handle_animation2', 'images/sprites/handle_animation2.png', 'images/sprites/handle_animation2.json');    game.load.atlasJSONHash('handle_animation3', 'images/sprites/handle_animation3.png', 'images/sprites/handle_animation3.json');    game.load.atlasJSONHash('handle_animation4', 'images/sprites/handle_animation4.png', 'images/sprites/handle_animation4.json');}function create() {    handle_animation0 = game.add.sprite(0, 0, 'handle_animation0');    var anim0 = handle_animation0.animations.add('play0');    anim0.onComplete.add(function() {        handle_animation1 = game.add.sprite(0, 0, 'handle_animation1');        var anim1 = handle_animation1.animations.add('play');        anim1.onComplete.add(function() {            handle_animation2 = game.add.sprite(0, 0, 'handle_animation2');            var anim2 = handle_animation2.animations.add('play');            anim2.onComplete.add(function() {                handle_animation3 = game.add.sprite(0, 0, 'handle_animation3');                var anim3 = handle_animation1.animations.add('play');                anim3.onComplete.add(function() {                    handle_animation4 = game.add.sprite(0, 0, 'handle_animation4');                    var anim4 = handle_animation1.animations.add('play');                    anim4.onComplete.add(function() {                        console.log('end.');                    }, handle_animation3);                    anim4.play('play',30,false);                }, handle_animation3);                anim3.play('play',30,false);            }, handle_animation2);            anim2.play('play',30,false);        }, handle_animation1);        anim1.play('play',30,false);        }, handle_animation0);    anim0.play('play',30,false);}</script></body></html>


Link to comment
Share on other sites

I did some more testing on this and part of the issue was that TexturePacker coudn't handle that many files. I create the individual sprite sheets manually it looks a lot better but there is still a slight pause switching between animations. I've looked all over for information on this and I know it's probably not your standard game question. Any help would be appreciated.



Link to comment
Share on other sites

  • 2 months later...

It is sad that TexturePacker not allow sorting by name exporting with Multipack (manually is so slow)  :(


I tested with a custom preload, 2 video tags and Phaser... but in mobile It takes too long to reproduce => http://phaser.azurewebsites.net/videos/ (Swipe left in screen to continue the next video)


My solution is this: http://phaser.azurewebsites.net/silbon/ (Phaser + GSAP to control the timeline)


Example in Codepen: http://codepen.io/jdnichollsc/pen/ZYeWEr


Regards, Nicholls  :) 

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

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.


  • Recently Browsing   0 members

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