fancy animations! :p

src/main.js

@@ -19,6 +19,11 @@ var hud = new PIXI.Container();
 var endC = new PIXI.Container();
 endC.visible = false
 
+
+const PLAYER_ANIM_SPEED_MOVING = .1
+const PLAYER_ANIM_SPEED_STILL_1 = .01
+const PLAYER_ANIM_SPEED_STILL_2 = .1
+
 const resources = PIXI.loader.resources
 
 var player, state, objects, maxX, lastKey, PTS_WATER, PTS_COWS, END_TXT
@@ -26,18 +31,24 @@ var lanterns
 var moos
 var shader, quad
 PIXI.loader
-  .add("assets/player.png")
+  .add("assets/player1.png")
-  .add("assets/player_still.png")
+  .add("assets/player2.png")
-  .add("assets/player_still_eyesclosed.png")
+  .add("assets/player_still1.png")
+  .add("assets/player_still2.png")
   .add("assets/cow.png")
   .add("assets/water.png")
   .add("assets/vodkaguy.png")
   .add("assets/grass.png")
-  .add("assets/lantern.png")
+  .add("assets/lantern1.png")
+  .add("assets/lantern2.png")
   .load(setup);
 
+
+function now () {
+  return new Date().getTime()
+}
+
 function setup () {
-  const playerTexture = resources['assets/player_still.png'].texture
   const cowTexture = resources['assets/cow.png'].texture
   const waterTexture = resources['assets/water.png'].texture
 
@@ -63,12 +74,14 @@ function setup () {
   hudCow.height = 24
   hudCow.y = 50
   hudCow.x = 20
+  hudCow.anchor.set(0,0)
 
   const hudWater = new PIXI.Sprite(resources['assets/water.png'].texture)
   hudWater.width = 24
   hudWater.height = 24
   hudWater.y = 20
   hudWater.x = 20
+  hudWater.anchor.set(0,0)
   hud.addChild(PTS_COWS)
   hud.addChild(hudCow)
   hud.addChild(hudWater)
@@ -83,7 +96,12 @@ function setup () {
   grass.x = 0
   grass.y = 0
 
-  player = new PIXI.Sprite(playerTexture);
+
+  player = new PIXI.AnimatedSprite([
+    resources['assets/player_still1.png'].texture,
+    resources['assets/player_still2.png'].texture,
+  ]);
+  setPlayerMode('still')
 
   player.anchor.x = 0.5
   player.anchor.y = 0.5
@@ -104,51 +122,51 @@ function setup () {
 
   left.press = () => {
     player.vx = -SPEED
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
   left.release = () => {
     if (!right.isDown) {
       player.vx = 0
     }
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
 
   right.press = () => {
     player.vx = SPEED
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
   right.release = () => {
     if (!left.isDown) {
       player.vx = 0
     }
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
 
   up.press = () => {
     player.vy = -SPEED
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
   up.release = () => {
     if (!down.isDown) {
       player.vy = 0
     }
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
 
   down.press = () => {
     player.vy = SPEED
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
   down.release = () => {
     if (!up.isDown) {
       player.vy = 0
     }
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
 
   space.release = () => {
     player.taps.push(true)
-    lastKey = new Date().getTime()
+    lastKey = now()
   }
 
   f5.release = () => {
@@ -214,24 +232,29 @@ function setup () {
   const lanternDist = availableWidth / (LANTERN_COUNT-1)
 
   lanterns = []
-  for (let i = 0; i < LANTERN_COUNT; i++) {
-    // lantern on bottom
-    const lantern = new PIXI.Sprite(resources['assets/lantern.png'].texture)
-    lantern.anchor.set(.5, .5)
-    lantern.x = TARGET_AREA_WIDTH + (lantern.width / 2) + (i * lanternDist)
-    lantern.y = HEIGHT - lantern.height /2
-    lanterns.push(lantern)
-    container.addChild(lantern)
-  }
-  for (let i = 0; i < LANTERN_COUNT; i++) {
-    // lantern on top
-    const lantern = new PIXI.Sprite(resources['assets/lantern.png'].texture)
-    lantern.anchor.set(.5, .5)
-    lantern.x = TARGET_AREA_WIDTH + (lantern.width / 2) + (i * lanternDist)
-    lantern.y = lantern.height /2
 
-    lanterns.push(lantern)
+  const makeLantern = () => {
-    container.addChild(lantern)
+    const lantern = new PIXI.AnimatedSprite([
+      resources['assets/lantern1.png'].texture,
+      resources['assets/lantern2.png'].texture,
+    ]);
+    lantern.animationSpeed = .02
+    lantern.play();
+    lantern.anchor.set(.5, .5)
+    return lantern
+  }
+
+  for (let i = 0; i < LANTERN_COUNT; i++) {
+    const bottom = makeLantern()
+    bottom.x = TARGET_AREA_WIDTH + (bottom.width / 2) + (i * lanternDist)
+    bottom.y = HEIGHT - bottom.height /2
+    const top = makeLantern()
+    top.x = TARGET_AREA_WIDTH + (top.width / 2) + (i * lanternDist)
+    top.y = top.height /2
+    lanterns.push(bottom)
+    lanterns.push(top)
+    container.addChild(bottom)
+    container.addChild(top)
   }
 
   container.addChild(player)
@@ -351,8 +374,36 @@ function end(delta) {
 }
 var time = 0
 
-var blinkStart
+function setPlayerMode(mode) {
-const BLINK_DUR = 250
+  if (player.mode === mode) {
+    return
+  }
+  player.mode = mode
+  if (mode === 'still') {
+    player.textures = [
+      resources['assets/player_still1.png'].texture,
+      resources['assets/player_still2.png'].texture,
+    ]
+    player.gotoAndPlay(0)
+    player.animationSpeed = PLAYER_ANIM_SPEED_STILL_1
+    player.onFrameChange = () => {
+      if (player.currentFrame === 1) {
+        player.animationSpeed = PLAYER_ANIM_SPEED_STILL_2
+      } else {
+        player.animationSpeed = PLAYER_ANIM_SPEED_STILL_1
+      }
+    }
+  } else if (mode === 'moving') {
+    player.textures = [
+      resources['assets/player1.png'].texture,
+      resources['assets/player2.png'].texture,
+    ]
+    player.gotoAndPlay(0)
+    player.animationSpeed = PLAYER_ANIM_SPEED_MOVING
+    player.onFrameChange = () => {}
+  }
+}
+
 function play(delta) {
   player.x += player.vx
   player.y += player.vy
@@ -374,28 +425,12 @@ function play(delta) {
     player.scale.set(1, 1)
   }
   if (player.vy === 0 && player.vx === 0) {
-    player.texture = resources['assets/player_still.png'].texture
+    setPlayerMode('still')
   } else {
-    player.texture = resources['assets/player.png'].texture
+    setPlayerMode('moving')
   }
 
-
+  const _now = now()
-  let now = new Date().getTime()
-  if (now - lastKey > IDLE) {
-    if (blinkStart) {
-      // is blinking
-      if (now - blinkStart > BLINK_DUR) {
-        // should stop blinking
-        blinkStart = null
-        lastKey = now
-        player.texture = resources['assets/player_still.png'].texture
-      }
-    } else {
-      // is not blinking
-      player.texture = resources['assets/player_still_eyesclosed.png'].texture
-      blinkStart = now
-    }
-  }
 
   container.x = -(player.x + player.width/2 - WIDTH/2)
 
@@ -466,8 +501,8 @@ function play(delta) {
   for (const c of objects) {
     if (c.type === 'cow') {
       if (c.vrot > 0 && c.ticks > 0) {
-        if (c.lastmoo === 0 || (now - c.lastmoo > 500)) {
+        if (c.lastmoo === 0 || (_now - c.lastmoo > 500)) {
-          c.lastmoo = now
+          c.lastmoo = _now
           const moo = new PIXI.Text('!moooo', {fontFamily : 'Arial', fontSize: 14, fill : 0xff0000, align : 'center'})
           moo.x = c.x
           moo.y = c.y