gsko Posted December 12, 2014 Share Posted December 12, 2014 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>Thanks Link to comment Share on other sites More sharing options...
gsko Posted December 15, 2014 Author Share Posted December 15, 2014 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. Thanks Link to comment Share on other sites More sharing options...
jdnichollsc Posted February 24, 2015 Share Posted February 24, 2015 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 Sir_G 1 Link to comment Share on other sites More sharing options...
Recommended Posts