From 2fb2c4520261722eb791e4b68443c6a95691b88f Mon Sep 17 00:00:00 2001 From: Zutatensuppe Date: Sun, 18 Jul 2021 16:27:31 +0200 Subject: [PATCH] fancy animations! :p --- src/assets/lantern1.png | Bin 0 -> 822 bytes src/assets/lantern2.png | Bin 0 -> 820 bytes src/assets/player.jpg | Bin 710 -> 0 bytes src/assets/player1.png | Bin 0 -> 457 bytes src/assets/player2.png | Bin 0 -> 443 bytes src/assets/player_still1.png | Bin 0 -> 439 bytes src/assets/player_still2.png | Bin 0 -> 412 bytes src/assets/player_still_eyesclosed.png | Bin 454 -> 0 bytes src/main.js | 145 +++++++++++++++---------- 9 files changed, 90 insertions(+), 55 deletions(-) create mode 100644 src/assets/lantern1.png create mode 100644 src/assets/lantern2.png delete mode 100644 src/assets/player.jpg create mode 100644 src/assets/player1.png create mode 100644 src/assets/player2.png create mode 100644 src/assets/player_still1.png create mode 100644 src/assets/player_still2.png delete mode 100644 src/assets/player_still_eyesclosed.png diff --git a/src/assets/lantern1.png b/src/assets/lantern1.png new file mode 100644 index 0000000000000000000000000000000000000000..3d01b242723fbcf3ed6a816375f8e36e6e6ca775 GIT binary patch literal 822 zcmV-61Ihe}P);V=1|>`)zX4LTKuL2pO-ma@ZFi#<=z>qW8X=&0olCP?f%zO~ zdfRalk~B?Jai38%K`hOzlFe$^o^45}X1dPdHX_yxTAGMrMPnH9_bY!Uj6X% zJmK_*2R@M#4wJ#pYjCWBBE}x=o@!e|i1UKT~U6#oJ4iM(gJDP)x3nZ|+BD z@42I{MJ%mthCl=sA>Fjt?uaVd%t>b?Hlu%eePg{{BQ&l50})Duy-^$5AeK-b9@W1; zj$>E9TE-pBDMBJDnDxxYK%xB@A;&utsd$CKE1A0wzVVU7cs>KMf4`GC5pjiNnEoSY zN6sFxKARB~0$SUT8K#*%l6^Ik>H>5jR>^b{QG^oW)ly=GOgG6D5{=MoXJ@;h%%E$> zGd1G4DUEP75^?HC;wxo8fS8c7eLtUJYFY;}6`|E)qj{SQyj&FXkwr7x_&AHJ=8`e5 zaP@oF8l{w+#%9l?%lJUOb+YYPH0+Lk@FG*rWTfeN{`0DSAM^1;JMH6kskKJ8ioHzO1sn~CXx4o+6tyCL zQwXIIS}A^3o@MMAX)7fA)i2|;kP591hZf`7BnyiK5DmW^9B9`HsGcj>C^XVma+IOp zFXNN1!el}lGj+stto9ZO;KmZ=)VA6YNfXv1*~ljWyr)DdeX+H1ygZR1dJ>XVx^LP0 zm1Lrb5cc+e=S1p)G=V`gd&08~Y~TYQ3`B&=;QxO=Lj4s3KQGj`%W?_&D`V@U0an|7 z>_Zv}eRqV##VY>G>o~XhdtV1tqqV%w_X=_q-*zx!+(fRsX8-^I07*qoM6N<$f``L@ AssI20 literal 0 HcmV?d00001 diff --git a/src/assets/lantern2.png b/src/assets/lantern2.png new file mode 100644 index 0000000000000000000000000000000000000000..8db4f52c0406dc9a8904d2617e6e6110dad65eb4 GIT binary patch literal 820 zcmV-41Izr0P);Q_Fm6`oX55VZNNEii+YtKLks_6ZfCv1TP@n+;nSk8h|91TF2K_?<1wVF| z_kk{W!*4TCSRDueC_dk%gfR8)MQ`{WJ)m=ST*hz$pF(FSH7i33nU=tgUC`#!Fx-)9 zvdG#ALE3>?5`(#x#~80RU#+-0yfE%yAToa*Hmajeug$P$h^Yq26o zo1{smJ%j`4320jVdUs+Mfp)wRp<#?z24C5QBiZ+lB=^gNEREk2iFgED=R)^(Rk<5N z(j+6JG~A;8yq%{bq87u1s@8Z&cnur9bEMPX1NG1Od}d`|%}!hRU0B(J6ifqE-kx*NYSFU#)q?*>^(xM~ z%ZhtV5!n&^A*}6~_0G$_M>6%k?eX;%-gmYUkz_>FUwL>yayUck8DOs2Ci+{YdWM&NYj4QdLD@F>eAiwWQ=2~mk zc*`|837-02B2jojYb&+odRqSx3E+iVi{dyVNycgUuB?@NeildhZzTL;*HcH-V1X2BgDc;i?wDq yWVM^v&B%W9`{?_8a>wKtiG$w!e%fouRr~?q;&wztJjbg50000``2_j6xdp@o1cgOJMMZh|#U;coyG6VInuyV4pa*FVB^NNrR z{vTivwh= zDOELf4NWZ*Q!{f5ODks=S2uSLPp{yR(6I1`$f)F$)U@=B%&g*)(z5c3%Btp;*0%PJ z&aO$5r%atTea6gLixw|gx@`H1m8&*w-m-Pu_8mKS9XfpE=&|D`PM*4S`O4L6*Kgds z_3+W-Cr_U}fAR9w$4{TXeEs(Q$Io9Ne=#yJL%ap|8JfQYf&OA*VPR%r2lxYE m#}NLy#lXYN2#h>tL10Awu#hSK2!w}|KDcl0`DJ6bs0gUoNt&$fM)`KY%a-7;EVzff2lebw0g|MzS+o#{0*DR6+X+Q&pl+do861=$}WzD5b<+*SapX9#9`|QLX|h;(+qa zpOjJtHaQ~6aclouX04Rc8(;-U(W!KB?eEAsQaj|O(CbJm9ho+T2Wh!iuOUEiM}YU! zA8spMKvqw$61i^UXMiROUbM-tZ*pB2B_IN+|J9AO@0vPpMJ#sJdGQwxRseYVlj)^C zy>pIiddcalUeLRpF+IRuja=o7B-kC!m>=3d>*v$)-M!WW00000NkvXXu0mjfT{Oj+ literal 0 HcmV?d00001 diff --git a/src/assets/player2.png b/src/assets/player2.png new file mode 100644 index 0000000000000000000000000000000000000000..ed2e44891c806ace501e3123c8876efd6f81b996 GIT binary patch literal 443 zcmV;s0Yv_ZP)BOy^x6TjM%O$Gk)rJ&G9(&+mXNGtfBM6obIc7ktd zIW7hW6QHK47^NVmA!@3|ybEFhaMdmD9T01XtkArekQa!oPyEk?o75mu(Nmas+_M=m zgUIT@1ORv(iDpwRh|zz*9EdkxluE$ZBU=zVH7*ssv}z?VDho!pR1isx1O3d6vg*q0 zKt14@((HM}%;Y!gpDTHLcxq_%J4B3;U zn|UN9nU_pJ%77W!$xWJg;|d@h*-Sy0a^n%Heg!0~96p#T##sHH^_3nepaP%-k~^+F zNk+SXVn#-#A(eV*oytyD(*DF4*=^c@uwmQ}zpYX%uW2AL#v^r~+pV>ohhBgPa#C-I z?y{1$MCm;_P0>v}GV-F)hdMfs^s+OVx#?Ys*R|I2Hp`pYxA%$VjTV`q9N$?V(9zBy lTMcQzsJ$I@3g*a3@Cy)5^*|0P;9vj%002ovPDHLkV1h`w$Bh60 literal 0 HcmV?d00001 diff --git a/src/assets/player_still1.png b/src/assets/player_still1.png new file mode 100644 index 0000000000000000000000000000000000000000..ec5fe7abab267790c2f2501180440e8c09e29551 GIT binary patch literal 439 zcmV;o0Z9IdP)B| zdW}v?6uL64238~rO&RV(YZ3)k=0&_`RiX(c;u3En>}>HS0x&WjMM(ZmCs32C@eabX zooaRqH5zz?y01>3w|ARUiwewjrll2E(kCmT4ZML{7PW|t6y<#K{f1pD19y?5)o5)Z zf(<6K6;TErf{Ht`{gM?~vHj*ee=y2{$WE)3=f+IFVX*^PBy!@MdBNY=L9%^ntyt*5 zLXq9mYl#Rq;;X6wEWRJvc?%HmTkN*@iCDvpNJ^>sxk#iJWCkfERX=7b5@S?-|AmKt zah)Q@*sR!;ifE_B42p=lD%z=`#mpK3+S8|3@wyW1lgt z1Fn!5MJxi0jnpQ{3u|vz!vUZdyNh$B#?-Dgz-Q1siv;#Xh2^#KFK;i;qFfSOM(!| zv>NS}Aeu6@23919s!VC8H3_09b1>ViN>t%QT;ffnSS{W}017f5MOYq@6{Pfeal5V? zUh2_wat%BPS6f`O<=2rscxm9&{O1Gp$#p(>kX3~9Eu)%^(X=n%D-@SY6T>kpuGBBxugm3OmgChQxcGJuBC?}S2e>mMT+prl#djLHfHfpW>AGb)GE$3R7uMcZ!vTPw>@Kb=S4^F? z1~>=Zvq&g@xnOy&{KW0$S(F?$W)DvX9T&#Z*%^K~IEV@Fw2Ah7sZhuvp=HK8 zj1dR>uizv)pDB>jEz{HSDv3mwOsmt?5{afvt%DYcL{)}s)FzQ&We(yutrArz5tCRG zVXMWO2*Ai#6d}1q&LHyl MA|o_KDyy=Eh4DYGEJcQfjd5MnIeLs3Uu~@r(uZb7 zY7?dQ9prNiE=~kK&o1ocWzf4NxOqnC63Hi-ok*H)k)3qb{}5@9m^|_3{Lgb_2I*%H z#ep9vE8v3ClGx~gpvc+fB_hJDxKuU(;2|^Yi!v*c4^oGFv+Lp((S{k35JI)ROQbc( z4nhb^^Qg&)_kQX61A~8YU4{3)nz1bzSuKklB$4H;td_S= { 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