diff --git a/src/assets/lantern1.png b/src/assets/lantern1.png new file mode 100644 index 0000000..3d01b24 Binary files /dev/null and b/src/assets/lantern1.png differ diff --git a/src/assets/lantern2.png b/src/assets/lantern2.png new file mode 100644 index 0000000..8db4f52 Binary files /dev/null and b/src/assets/lantern2.png differ diff --git a/src/assets/player.jpg b/src/assets/player.jpg deleted file mode 100644 index 4ff4f4d..0000000 Binary files a/src/assets/player.jpg and /dev/null differ diff --git a/src/assets/player1.png b/src/assets/player1.png new file mode 100644 index 0000000..c9b8e30 Binary files /dev/null and b/src/assets/player1.png differ diff --git a/src/assets/player2.png b/src/assets/player2.png new file mode 100644 index 0000000..ed2e448 Binary files /dev/null and b/src/assets/player2.png differ diff --git a/src/assets/player_still1.png b/src/assets/player_still1.png new file mode 100644 index 0000000..ec5fe7a Binary files /dev/null and b/src/assets/player_still1.png differ diff --git a/src/assets/player_still2.png b/src/assets/player_still2.png new file mode 100644 index 0000000..2095d69 Binary files /dev/null and b/src/assets/player_still2.png differ diff --git a/src/assets/player_still_eyesclosed.png b/src/assets/player_still_eyesclosed.png deleted file mode 100644 index dd5f981..0000000 Binary files a/src/assets/player_still_eyesclosed.png and /dev/null differ diff --git a/src/main.js b/src/main.js index 00f25bb..f04b769 100644 --- a/src/main.js +++ b/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/player_still.png") - .add("assets/player_still_eyesclosed.png") + .add("assets/player1.png") + .add("assets/player2.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) - container.addChild(lantern) + const makeLantern = () => { + 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 -const BLINK_DUR = 250 +function setPlayerMode(mode) { + 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') } - - 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 - } - } + const _now = 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)) { - c.lastmoo = now + if (c.lastmoo === 0 || (_now - c.lastmoo > 500)) { + 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