From 237dc36a6274ea0bd6dfe7858973fbb2ef73fb84 Mon Sep 17 00:00:00 2001 From: Arne van Iterson Date: Tue, 14 Apr 2020 17:50:53 +0200 Subject: [PATCH] Styled logo, title, tutorial and gameover screens --- css/game.css | 9 +++++ res/images/asdf-logo.png | Bin 0 -> 5434 bytes res/images/keys/arrows.png | Bin 0 -> 437 bytes res/images/keys/ctrl.png | Bin 0 -> 372 bytes res/images/keys/q.png | Bin 0 -> 383 bytes res/images/keys/space.png | Bin 0 -> 304 bytes res/images/keys/t.png | Bin 0 -> 339 bytes res/images/logo.png | Bin 0 -> 1146 bytes res/images/tutorial/interact.png | Bin 0 -> 672 bytes res/lang/default.js | 2 +- src/entities/chest.js | 4 +- src/helpers/stats.js | 12 +++--- src/screens/gameover.js | 12 +++--- src/screens/logo.js | 17 ++------- src/screens/title.js | 46 +++++++++++++++++++++-- src/screens/tutorial.js | 61 ++++++++++++++++++++++++++----- 16 files changed, 124 insertions(+), 39 deletions(-) create mode 100644 res/images/asdf-logo.png create mode 100644 res/images/keys/arrows.png create mode 100644 res/images/keys/ctrl.png create mode 100644 res/images/keys/q.png create mode 100644 res/images/keys/space.png create mode 100644 res/images/keys/t.png create mode 100644 res/images/logo.png create mode 100644 res/images/tutorial/interact.png diff --git a/css/game.css b/css/game.css index 24b2dd1..ab1bd22 100644 --- a/css/game.css +++ b/css/game.css @@ -1,3 +1,8 @@ +@font-face { + font-family: 'Minecraft'; + src: url('../res/fonts/Minecraft.ttf'); +} + html, body { margin: 0; padding: 0; @@ -46,4 +51,8 @@ div#menu > ul { div#menu > ul > li { padding-top: 10px; cursor: pointer; +} + +div#board > canvas { + letter-spacing: 2px; } \ No newline at end of file diff --git a/res/images/asdf-logo.png b/res/images/asdf-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..c895e3be8b59df96d0c8c80af44346662cb74642 GIT binary patch literal 5434 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 QXEP!_Z6mD)O_$q$1K-9VcK`qY literal 0 HcmV?d00001 diff --git a/res/images/keys/arrows.png b/res/images/keys/arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..5adef2c12b114703661527df3bb469eff9c0f199 GIT binary patch literal 437 zcmV;m0ZRUfP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0ZK_kK~z{r?Uu0) z!XOZaTc5$r8sp;N3%NM@SdK2fkb{e9tefwkLVASIgC1~5N%|!frTlWo9dK3Y)O{Px zy4igCuOyyb%Q831p9tfd<*M56wtbJA+x<~>?-z>`i@uEpGyZ(N$j5~0ChFZccjIFuOQC-eeG0fvAXxF!;V4@ju9K+v2+S$udx-&) zOCezp6`!$Vutgw*c@zJLj({NaLgK1Oi$<-0?<$(BmrE}{U?Yas^Evfu6WdAwtT@BQ z=F(eFAxxMHmo2CRQ!*Z~*;JePH)cFkmXL>nociJ~vVj9w?JoM@8N)S(s<+LB^`Q}< zOyq((xeqqIHHA1QOl7=au!*VIHX#)*y^4V7pn{FfrB@LML0`cTIP}FIqpFyazdX^4 fG1=isyuPi!+C1@kyex#Y00000NkvXXu0mjfUQ@nP literal 0 HcmV?d00001 diff --git a/res/images/keys/ctrl.png b/res/images/keys/ctrl.png new file mode 100644 index 0000000000000000000000000000000000000000..c0e53fc7e2348ac7140853315d82692728f35b4c GIT binary patch literal 372 zcmeAS@N?(olHy`uVBq!ia0vp^qCl*`!3HG%E->x@QjEnx?oJHr&dIz4a#+$GeH|GX zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjKn7X)1ej_E6C%s+l_yVTPo1(B&Y|L$4zzhO>0-?YnTK# zSYMS_{(L>+`nJ#Yj<*--8H-;3`f%G^`>kQAHUBpE`yEYwVZ-KPx#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0Tf9@K~zXf)s!&~ z!Y~X)6T}hNC_*d@OssGb7DkT6$ihWnWny4Kh_Z2q(r?8fX_68b35h4QNz?krb{(s4 z(PmVmVqBSN7WeW-wseDWF&L`Zbb`l^oG({ZJ|85~H*22pcE2+-pUrAbBff3~58 zbNIYLP-k1h%Y89iLqVUl88F6Nt6^4Krwj&Qdj_V d>IX_G{Q`tyb=v`=+P44z002ovPDHLkV1k`umJ0v? literal 0 HcmV?d00001 diff --git a/res/images/keys/space.png b/res/images/keys/space.png new file mode 100644 index 0000000000000000000000000000000000000000..3ca89ff09b6196454b3f5bc9fbab3ae7bb815ccd GIT binary patch literal 304 zcmeAS@N?(olHy`uVBq!ia0vp^4nVBH!3HE3&8=$zQjEnx?oJHr&dIz4a#+$GeH|GX zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*6J)E{-7?&TnTJ@*Oe|V9CAb;4a|heDME$ zC&%Uhr|I@BZ!#bM;639zaqH!`TF>XKzp(OJk!;@T=^V>`3g3II`1$b9Ai3{>xA#B) zSv9@#ryGa*{=+lG_g)ucn97r|zFz8+&ikLN5gSt&!gM4XOm``B?Y-{xmzQhn;U7X7 z(-+=2cq6~XlWEy{##@#JJ}qX~-YWD+3o-gPZ?RExS`xS5`>eGaM7xNn{1`ISV`@iy0XB4ude`@%$AjK*1NDE{-7{-pLC@44g9AA|-$R4^Rty@Nsf` z!rla?C6R6}vmCvB1&^q5th>AG{D&uJgEuJZ1Q_mkW~n{BAu~on)rM`2SPBD&L8B)Z z!yQ%whE0rY3F{oioY{R0{!iv|sB);%{C3E|pkd+_7Z&CXM_9@kJsKh!)`-1hDq`s3 zKEe9o49l~L90`_19n2~A6QuY$gg80=F*6IzIo!c`;S$G@losiP%mmgn0k4T0TuS~N zG88!KF}H+)r9fPPc}DgI)#4QKhQIz=4X-41CpIvMaDQ-6QB`bY&@fym;h@zZ$-tB{ fm7Rx&r-$KqNa$=SCD(O8KQnl``njxgN@xNA5X@~T literal 0 HcmV?d00001 diff --git a/res/images/logo.png b/res/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..5d092f7c16829e3ce28f6845bc0cac21ab2447b3 GIT binary patch literal 1146 zcma)5`!gE`9FIqDsXL*k>3tcvt`d0OM0(@E>Cdtviw_yv)Z=xJS(0K1>()A-dC9^jiZ< zo*YCC&6m(80X$JZEZUkZt|qlblP5?Gm82D@U{e5QNjtM6%^hWd~%9sbF~ zaeB)2d5!#f{S$3*Vh?Zhn5noszAgeREqDC@;wNmo@cYtoUHJIq|L9}F>@xT9$hami z323H^_?e;J4URAT)~gyNVDt?Yd86j~b!)df5#@?fkqUCpHH`uMhv$HkDehvom)_YG zY2e{bbsjiv5Wg6K3p8gcf)-cZ_`mfRx)k7e;JN;xwb#8)<@OkMxh>)~cV06lPJrkd zQ?Qcp2X|E8QK7a19S&ln-HxuEKxx=%$JmMS_g2#Z&YiFB2Q0)iZLPMVM=f-s&8#f$ zyebYtrYvfG1((R{^)1r}?n(A#)B(Yuyw3ISjTo=^^#YjaJ(7hJVf<$n*WKTgSg({_ znCgA*CeH5$@3qc}oi7kmFeMtaFPXCWDN)E`tKl!+^eunm?YHZAB8;w@!cvLH{?L8V zp|)Xi;Qq&ms+q^LkZ4Vpq=QS#n?K&b|89_}walSCrw^?qI4Fas+ZrpNGZ5)i(5V@x zdSN?se+0`J(?m%ft{r7@3~aAJ@u{!d1CVe))sR2^V#UVx8PalA@)K|w2YCOSj)Hk73<1iqwrJ0HR2$%AhbYCqgq(+`;9@>IQFsn_!xA=h?ys(F%~GTHEH~-hO;|%NM(s zum1`U9Axhkv%7=2Op||MXNnr&d7m$i+3kyfxuBB@aM>s5+aLT@soSx1n*HI z+#+69Y+ZVU1DEYKC1WaG4WX2zh!))r!Vo(9tTHeQ4?DB+bb1uk2{a}!>vwbI)&^fx c$U{t}(OHW})kzbp&px*|EF==%8+^O^U%BBXnE(I) literal 0 HcmV?d00001 diff --git a/res/images/tutorial/interact.png b/res/images/tutorial/interact.png new file mode 100644 index 0000000000000000000000000000000000000000..967f11fe0c781b8660bd1cffe7a83acea13039cc GIT binary patch literal 672 zcmV;R0$=@!P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!T6f*%Q2Z}3 zjVysPz-#>Z=>@cMb^;A61H7L0E}e$%x7$#a0g|WyFpVtIdjP@j1!1jy!m$SsuDyU? z`zDwm`(9ERU_AucqJaQ7Ur=O05Y3;)CPj2Fks$z9y2zRzqB+ypq=@b%vcP))VMfn2 z(Y#M6>%;m=9`FzD8Yuf-k*@;Mky=!+1SriKjRvBz@oW-zx=9$&^$BXY4ZSDE|-NFK>mq-zYk3$5>V>% z_+965`d1n7A2Z;(l1G2m>>k<2b(H}QgaLSY`-BnH_cI>9>pa#PmR-lQLS+Ec$fBx% zs0#Q&C$nTS2_>r4Dr=3$s|w@`1^ADzuA=WnE|-Jy{!672Yl#^QhtR8fT~z^Mg(+yZ zTF|fOd+7T1A=GHzK&hX}WT2Ee^oPnY3|qPJ)L-7(gZlCQcnkINPhXz*AB)AHLHw&t zkf{(Wa+X<zay;q)0000 { const sprite = new TileSprite(tilemap, tileSize, tileSize); sprite.frame = {x: tilemapFrames[44].x / tileSize, y: tilemapFrames[44].y / tileSize}; - sprite.pos = {x: index * 26 + 270, y: 286}; + sprite.pos = {x: index * 26 + 290, y: 286}; this.children.push(sprite); }); } diff --git a/src/screens/gameover.js b/src/screens/gameover.js index 4bdc639..5d404ef 100644 --- a/src/screens/gameover.js +++ b/src/screens/gameover.js @@ -1,9 +1,9 @@ const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Texture, Text, Container, Sprite } = asdf; +const { Text, Container, Rect } = asdf; const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "24px Arial"}; +const fillStyle = {fill: "#ffffff", font: "24px Minecraft"}; class GameOver extends Container { constructor(game, keys, onEnd) { @@ -14,12 +14,14 @@ class GameOver extends Container { this.children = []; - var gameover = new Text(text.gameOver.dead, {fill: "#ffffff", font: "32px Arial"}); - gameover.pos = { x: 200, y: 200 }; + this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" })); + + var gameover = new Text(text.gameOver.dead, {fill: "#bb0a1e", font: "60px Minecraft"}); + gameover.pos = { x: 188, y: 150 }; this.add(gameover); var instruction = new Text(text.gameOver.instruction, fillStyle); - instruction.pos = { x: 200, y: 236 }; + instruction.pos = { x: 125, y: 216 }; this.add(instruction); } diff --git a/src/screens/logo.js b/src/screens/logo.js index b289d87..4696ac2 100644 --- a/src/screens/logo.js +++ b/src/screens/logo.js @@ -1,9 +1,8 @@ const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Texture, Text, Container, Sprite } = asdf; +const { Texture, Container, Sprite } = asdf; -const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "24px Arial"}; +var logo = new Texture("../res/images/asdf-logo.png"); class Logo extends Container { constructor(game, onEnd) { @@ -12,16 +11,8 @@ class Logo extends Container { this.onEnd = onEnd; this.children = []; - - const textPos = { x: 200, y: 150 }; - for (let index = 0; index < text.logoScreen.length; index++) { - const element = new Text(text.logoScreen[index], fillStyle); - element.pos = { - x: textPos.x, - y: textPos.y + 24 * index - }; - this.add(element); - } + + this.add(new Sprite(logo)); this.lifetime = 2; } diff --git a/src/screens/title.js b/src/screens/title.js index b55fc96..4ba948b 100644 --- a/src/screens/title.js +++ b/src/screens/title.js @@ -1,9 +1,16 @@ const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Texture, Container, Sprite, Text } = asdf; +const { Texture, Container, TileSprite, Text, AnimManager, Rect, Sprite } = asdf; const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "24px Arial"}; +const fillStyle = {fill: "#ffffff", font: "24px Minecraft"}; + +const textures = { + space: new Texture("../res/images/keys/space.png"), + t: new Texture("../res/images/keys/t.png"), + q: new Texture("../res/images/keys/q.png"), + logo: new Texture("../res/images/logo.png") +}; class Title extends Container { constructor(game, keys, onStart, onTutorial, onQuit) { @@ -19,13 +26,46 @@ class Title extends Container { this.children = []; - const textPos = { x: 200, y: 200 }; + this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" })); + + this.add(new Sprite(textures.logo)); + + this.keyCaps = [ + new TileSprite(textures.space, 64, 16), + new TileSprite(textures.t, 16, 16), + new TileSprite(textures.q, 16, 16) + ]; + + this.keyCaps.forEach(element => { + element.scale = { x: 1.5, y: 1.5 }; + element.anims = new AnimManager(element); + element.anims.add("press", [0, 1].map(y => ({ x: 0, y })), 0.50); + element.anims.play("press"); + console.log(element); + }); + + const textPos = { x: 220, y: 240 }; for (let index = 0; index < text.titleScreen.instructions.length; index++) { + const keyCap = this.keyCaps[index]; + if (index == 0) { + keyCap.pos = { + x: textPos.x - 120, + y: textPos.y + (28 * index) - 18 + }; + } else { + keyCap.pos = { + x: textPos.x - 56, + y: textPos.y + (28 * index) - 20 + }; + } + const element = new Text(text.titleScreen.instructions[index], fillStyle); element.pos = { x: textPos.x, y: textPos.y + 28 * index }; + + this.add(keyCap); this.add(element); } } diff --git a/src/screens/tutorial.js b/src/screens/tutorial.js index 74e300c..a893593 100644 --- a/src/screens/tutorial.js +++ b/src/screens/tutorial.js @@ -1,9 +1,16 @@ const asdf = require("asdf-games"); // eslint-disable-next-line no-unused-vars -const { Texture, Container, Text, Sprite } = asdf; +const { Texture, Rect, Container, Text, TileSprite } = asdf; const text = require(__dirname + "/../../res/lang/default.js"); -const fillStyle = {fill: "#ffffff", font: "20px Arial"}; +const fillStyle = {fill: "#ffffff", font: "16px Minecraft"}; + +const textures = { + space: new Texture("../res/images/keys/space.png"), + arrows: new Texture("../res/images/keys/arrows.png"), + ctrl: new Texture("../res/images/keys/ctrl.png"), + interact: new Texture("../res/images/tutorial/interact.png") +}; class Tutorial extends Container { constructor(game, keys, onEnd) { @@ -12,16 +19,52 @@ class Tutorial extends Container { this.keys = keys; this.onEnd = onEnd; + this.pos = { x: 0, y: 0 }; this.children = []; - const textPos = { x: 50, y: 150 }; + this.add(new Rect(this.game.w, this.game.h, { fill: "#333333" })); + + const title = new Text("Tutorial", {fill: "#ffffff", font: "36px Minecraft"}); + title.pos = { x: 12, y: 44 }; + this.add(title); + + this.images = [ + new TileSprite(textures.arrows, 48, 32), + new TileSprite(textures.ctrl, 21, 16), + new TileSprite(textures.space, 64, 16), + new TileSprite(textures.interact, 64, 39) + ]; + + this.instructions = []; for (let index = 0; index < text.tutorial.length; index++) { - const element = new Text(text.tutorial[index], fillStyle); - element.pos = { - x: textPos.x, - y: textPos.y + 24 * index - }; - this.add(element); + this.instructions.push(new Text(text.tutorial[index], fillStyle)); + } + + // Controls direction + this.images[0].pos = { x: 24, y: 60 }; + this.instructions[0].pos = { x: 12, y: 108 }; + + // Controls sprint + this.images[1].pos = { x: 24, y: 116 }; + this.instructions[1].pos = { x: 12, y: 148 }; + + // Controls action + this.images[2].pos = { x: 24, y: 156 }; + this.instructions[2].pos = { x: 12, y: 188 }; + + // Interact + this.images[3].pos = { x: 24, y: 196 }; + this.instructions[3].pos = { x: 12, y: 254 }; + this.instructions[4].pos = { x: 12, y: 274 }; + + // Back to menu + this.instructions[5].pos = { x: 12, y: 308 }; + + for (let index = 0; index < this.instructions.length; index++) { + if (this.images[index]) { + this.add(this.images[index]); + } + this.add(this.instructions[index]); } }