Phaser y TimelineLite

index.html

<div id="game"></div>
<div id="parent">
  <div id="slider"></div>
  <span id="timer" />
</div>

Phaser y TimelineLite.markdown

Phaser y TimelineLite

Tween timeline in Phaser

A Pen by Juan David Nicholls Cardona on CodePen.

License.

script.js

var game = new Phaser.Game(480, 320, Phaser.AUTO, 'game', {
  preload: function(){
      this.game.stage.backgroundColor = '#FFF';
      this.scale.pageAlignHorizontally = true;
      this.game.load.spritesheet('player', dataURI, 72, 72);
      this.game.load.image('play', playURI);
      this.game.load.image('pause', pauseURI);
      this.game.load.image('reverse', reverseURI);
  },
  create: function(){
      var text =this.game.add.text(-100, //Posicion en X
                         this.game.world.centerY, //Posicion en Y
                         'cargando...', //Texto
                         { font: '30px Arial', fill: '#000' });
      text.anchor.setTo(0.5, 0.5);
      
      //Tween animation with Sprites o.O
      this.player = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY + 50, 'player');
      this.player.anchor.setTo(0.5, 0.5);
      var playerFrames = this.player.animations.frameData.getFrames();
      
      //Establecer el fondo
      this.game.stage.backgroundColor = 0xffffff;
    
      tl.to(this.game.stage, 0, { backgroundColor: 0xff0000 }, "+=1")
      tl.to(text, 3, { x: this.game.world.centerX });
      tl.to(text, 3, { angle: 360 }, 0)
      tl.to(this.game.stage, 2, { backgroundColor: 0xffffff, ease:Power2.easeInOut }, "-=1.5");
      //http://greensock.com/forums/topic/11177-animate-phaser-sprite-with-tweenmax-frame-by-frame/
      tl.to(this.player, 2, { frame: playerFrames[playerFrames.length - 1].index, roundProps: "frame", ease: Linear.easeNone }, 0);
      tl.play();
    
    
    
      var play = this.game.add.image(this.game.world.centerX, this.game.height, 'play');
        play.anchor.setTo(-1, 1);
        play.inputEnabled = true;
        play.events.onInputDown.add(function () {
            tl.play();
        });
        var pause = this.game.add.image(this.game.world.centerX, this.game.height, 'pause');
        pause.anchor.setTo(0.5, 1);
        pause.inputEnabled = true;
        pause.events.onInputDown.add(function () {
            tl.pause();
        });
        var reverse = this.game.add.image(this.game.world.centerX, this.game.height, 'reverse');
        reverse.anchor.setTo(2, 1);
        reverse.inputEnabled = true;
        reverse.events.onInputDown.add(function () {
            tl.reverse();
        });
  }
});

var tl = new TimelineLite();
tl.eventCallback("onUpdate", updateSlider);

$("#slider").slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tl.pause();
    //adjust the timeline's progress() based on slider value
    tl.progress( ui.value/100 );
    }
});
function updateSlider() {
  $("#timer").html(tl.time().toFixed(2));
  $("#slider").slider("value", tl.progress() *100);
} 	

//IMAGE NINJADEV IN BASE64
var dataURI = 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAkAAAABIBAMAAADseFdBAAAAD1BMVEUAAAAAAAADAwP/xpz9/f1j4d9PAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAFSSURBVHja7dvbjcIwEIVht+ASSAu0kP5rQlyiOMHxjLExh+ifBxTE0XDme1hpV9oQNhNfEwqjlrHnuWOa2rZIHg8QQAD9QQYggAAaAXRpZsmNasYGqtsCEEAAAdQ3UwtU+EzrMIAA0sgABBBAAJ0I6PqYGOd5fdoXUsvYQNYWJ6Pi8QABdFKg9OmotFomf75nC0AAAaQFtJ18IbXM0fmlLdsUQAAB9HsgK6SYKSNGY7Z77q/pE0AAATQGyFqzBBWB7NP9QAtPSgQQQABpAI1E7NfH06bTD2mAAAJIAMhDqALk7yNXSK2PXCG1PnKF1Pp0Kw0QQAAB9C2g3r8ctn/X2D5yhdT6yBVS6yNXSK2P2B+6RgCFqtvFDgMIII1MR6A1mH+Xyx0nrA3v1cob8pma89N3+/99BggggAD6BMjXGSCAADobkDfRDmRvAggggP4e6AZSvlLUboiQ/QAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNC0wOC0yM1QxMzo0Nzo0Ny0wNzowMKou++wAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTQtMDgtMjNUMTM6NDc6NDctMDc6MDDbc0NQAAAAAElFTkSuQmCC';

var playURI = 'data:image/jpeg;base64,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';

var pauseURI = 'data:image/jpeg;base64,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';

var reverseURI = 'data:image/jpeg;base64,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';

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.2.1/phaser.min.js"></script>

style.css

#parent{
  position:relative;
  text-align:center;
}
#slider{
  width: 580px;
  margin:10px auto;
}
#timer{
  font-size: 20px;
  font-weight: bold;
  margin: 0px auto;
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />