From 7358d5c6bbca8ecb1b1fc9c793a56c8f1ec565b4 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Tue, 9 Oct 2018 09:59:36 +0300 Subject: [PATCH] Loader: Add blur and image testing --- public/index.html | 1 + public/src/css/titlescreen.css | 6 +- public/src/js/canvasdraw.js | 53 +++++++++--- public/src/js/canvastest.js | 144 +++++++++++++++++++++++++++++++++ public/src/js/keyboard.js | 4 +- public/src/js/loader.js | 21 +++-- public/src/js/main.js | 1 + public/src/js/titlescreen.js | 27 +++++-- public/src/js/view.js | 4 +- 9 files changed, 231 insertions(+), 30 deletions(-) create mode 100644 public/src/js/canvastest.js diff --git a/public/index.html b/public/index.html index c6524f9..e40cd8e 100644 --- a/public/index.html +++ b/public/index.html @@ -49,6 +49,7 @@ + diff --git a/public/src/css/titlescreen.css b/public/src/css/titlescreen.css index 95ef9b0..2d8efbb 100644 --- a/public/src/css/titlescreen.css +++ b/public/src/css/titlescreen.css @@ -24,7 +24,7 @@ height: auto; } .click-to-continue{ - position:absolute; + position: absolute; bottom: 10%; color: #fff; font-size: 8vmin; @@ -34,6 +34,8 @@ } .click-to-continue::before{ -webkit-text-stroke: 0.25em #f00; - filter: blur(0.3vmin); left: auto; } +#screen:not(.disable-blur) .click-to-continue::before{ + filter: blur(0.3vmin); +} diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js index 41c0cc3..7786cb7 100644 --- a/public/src/js/canvasdraw.js +++ b/public/src/js/canvasdraw.js @@ -95,10 +95,13 @@ ctx.save() - ctx.shadowColor = "rgba(0, 0, 0, 0.5)" - ctx.shadowBlur = 10 - ctx.shadowOffsetX = 5 - ctx.shadowOffsetY = 5 + this.shadow({ + ctx: ctx, + fill: "rgba(0, 0, 0, 0.5)", + blur: 10, + x: 5, + y: 5 + }) ctx.fillStyle = "#000" ctx.fillRect(x, y, w, h) @@ -454,11 +457,14 @@ action = "fillText" } if(layer.shadow){ - ctx.save() - ctx.shadowOffsetX = layer.shadow[0] - ctx.shadowOffsetY = layer.shadow[1] - ctx.shadowBlur = layer.shadow[2] - ctx.shadowColor = "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")" + ctx.save() + this.shadow({ + ctx: ctx, + fill: "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")", + blur: layer.shadow[2], + x: layer.shadow[0], + y: layer.shadow[1] + }) } var offsetX = 0 for(let symbol of drawn){ @@ -625,8 +631,11 @@ ctx.save() ctx.fillStyle = config.songSel ? "#fff" : "#f72568" if(config.songSel){ - ctx.shadowColor = "#fff" - ctx.shadowBlur = 10 + this.shadow({ + ctx: ctx, + fill: "#fff", + blur: 10 + }) ctx.translate(config.x - 9, config.y - 9) }else{ ctx.translate(config.x - 10.5, config.y - 9.5) @@ -702,7 +711,9 @@ ctx.save() ctx.strokeStyle = "#fff" ctx.lineWidth = 35 - ctx.filter = "blur(1.5px)" + if(!disableBlur){ + ctx.filter = "blur(1.5px)" + } ctx.stroke(this.crownPath) ctx.restore() @@ -758,6 +769,24 @@ } } + shadow(config){ + if(!disableBlur){ + var ctx = config.ctx + if(config.fill){ + ctx.shadowColor = config.fill + } + if(config.blur){ + ctx.shadowBlur = config.blur + } + if(config.x){ + ctx.shadowOffsetX = config.x + } + if(config.y){ + ctx.shadowOffsetY = config.y + } + } + } + getMS(){ return +new Date } diff --git a/public/src/js/canvastest.js b/public/src/js/canvastest.js new file mode 100644 index 0000000..f9f3580 --- /dev/null +++ b/public/src/js/canvastest.js @@ -0,0 +1,144 @@ +class CanvasTest{ + constructor(){ + this.canvas = document.createElement("canvas") + var pixelRatio = window.devicePixelRatio || 1 + var width = innerWidth * pixelRatio + var height = innerHeight * pixelRatio + this.canvas.width = width + this.canvas.height = height + this.ctx = this.canvas.getContext("2d") + this.ctx.scale(pixelRatio, pixelRatio) + this.draw = new CanvasDraw() + this.font = "serif" + + this.songAsset = { + marginLeft: 18, + marginTop: 90, + width: 82, + height: 452, + border: 6, + innerBorder: 8 + } + } + blurPerformance(){ + return new Promise(resolve => { + requestAnimationFrame(() => { + var ctx = this.ctx + ctx.save() + var lastIteration = this.blurIteration() + var frameTime = [] + + for(var i = 0; i < 10; i++){ + lastIteration = lastIteration.then(ms => { + frameTime.push(ms) + return this.blurIteration() + }) + } + + lastIteration.then(() => { + ctx.restore() + resolve(frameTime.reduce((a, b) => a + b) / frameTime.length) + }) + }) + }) + } + blurIteration(){ + return new Promise(resolve => { + requestAnimationFrame(() => { + var startTime = +new Date + var ctx = this.ctx + ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) + + for(var x = 0; x < this.canvas.width; x += this.songAsset.width + this.songAsset.marginLeft){ + this.draw.songFrame({ + ctx: ctx, + x: x, + y: this.songAsset.marginTop, + width: this.songAsset.width, + height: this.songAsset.height, + border: this.songAsset.border, + innerBorder: this.songAsset.innerBorder, + background: "#efb058", + borderStyle: ["#ffe7bd", "#c68229"], + innerContent: () => {} + }) + } + + for(var i = 0; i < 2; i++){ + this.draw.layeredText({ + ctx: ctx, + text: "I am a text", + fontSize: 48, + fontFamily: this.font, + x: 23 + 300 * i, + y: 15 + }, [ + {x: -2, y: -2, outline: "#000", letterBorder: 22}, + {}, + {x: 2, y: 2, shadow: [2, 2, 7]}, + {x: 2, y: 2, outline: "#ad1516", letterBorder: 10}, + {x: -2, y: -2, outline: "#ff797b"}, + {outline: "#f70808"}, + {fill: "#fff", shadow: [-1, 1, 3, 1.5]} + ]) + } + resolve((+new Date) - startTime) + }) + }) + } + drawAllImages(){ + return new Promise(resolve => { + requestAnimationFrame(() => { + var ctx = this.ctx + ctx.save() + ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) + + for(var name in assets.image){ + ctx.drawImage(assets.image[name], 0, 0) + } + + var comboCount = 765 + var comboX = 100 + var comboY = 100 + var fontSize = 120 + this.ctx.font = "normal " + fontSize + "px TnT" + this.ctx.textAlign = "center" + this.ctx.strokeStyle = "#000" + this.ctx.lineWidth = fontSize / 10 + var glyph = this.ctx.measureText("0").width + var comboText = comboCount.toString().split("") + for(var i in comboText){ + var textX = comboX + glyph * (i - (comboText.length - 1) / 2) + if(comboCount >= 100){ + var grd = this.ctx.createLinearGradient( + textX - glyph * 0.2, + comboY - fontSize * 0.8, + textX + glyph * 0.2, + comboY - fontSize * 0.2 + ) + grd.addColorStop(0, "#f00") + grd.addColorStop(1, "#fe0") + this.ctx.fillStyle = grd + }else{ + this.ctx.fillStyle = "#fff" + } + this.strokeFillText(comboText[i], + textX, + comboY + ) + } + + ctx.restore() + resolve() + }) + }) + } + strokeFillText(text, x, y){ + this.ctx.strokeText(text, x, y) + this.ctx.fillText(text, x, y) + } + clean(){ + delete this.ctx + delete this.canvas + } +} diff --git a/public/src/js/keyboard.js b/public/src/js/keyboard.js index 057de33..2ff1188 100644 --- a/public/src/js/keyboard.js +++ b/public/src/js/keyboard.js @@ -34,8 +34,8 @@ class Keyboard{ "cancel": ["a"], } menuBtn[this.kbd["confirm"]] = ["b", "ls", "rs"] - menuBtn[this.kbd["previous"]] = ["u", "l", "lb", "lt"], - menuBtn[this.kbd["next"]] = ["d", "r", "rb", "rt"] + menuBtn[this.kbd["previous"]] = ["u", "l", "lb", "lt", "lsu", "lsl"], + menuBtn[this.kbd["next"]] = ["d", "r", "rb", "rt", "lsd", "lsr"] menuBtn[this.kbd["pause"]] = ["start"] this.gamepadMenu = new Gamepad(menuBtn) diff --git a/public/src/js/loader.js b/public/src/js/loader.js index 2270925..2b6307b 100644 --- a/public/src/js/loader.js +++ b/public/src/js/loader.js @@ -3,6 +3,8 @@ class Loader{ this.callback = callback this.loadedAssets = 0 this.assetsDiv = document.getElementById("assets") + this.canvasTest = new CanvasTest() + p2 = new P2Connection() this.ajax("src/views/loader.html").then(this.run.bind(this)) } run(page){ @@ -70,8 +72,6 @@ class Loader{ assets.audioSfxLoud.forEach(name => { this.promises.push(this.loadSound(name, snd.sfxLoudGain)) }) - - p2 = new P2Connection() this.promises.push(this.ajax("/api/songs").then(songs => { assets.songs = JSON.parse(songs) @@ -84,13 +84,24 @@ class Loader{ })) }) + this.promises.push(this.canvasTest.blurPerformance().then(result => { + if(result > 1000 / 50){ + // Less than 50 fps with blur enabled + disableBlur = true + this.screen.classList.add("disable-blur") + } + })) + this.promises.forEach(promise => { promise.then(this.assetLoaded.bind(this)) }) Promise.all(this.promises).then(() => { - this.clean() - this.callback() + this.canvasTest.drawAllImages().then(() => { + this.canvasTest.clean() + this.clean() + this.callback() + }) }, this.errorMsg.bind(this)) }) @@ -122,7 +133,7 @@ class Loader{ } } changePage(name){ - document.getElementById("screen").innerHTML = assets.pages[name] + this.screen.innerHTML = assets.pages[name] } ajax(url, customRequest){ return new Promise((resolve, reject) => { diff --git a/public/src/js/main.js b/public/src/js/main.js index 19254a9..b78130e 100644 --- a/public/src/js/main.js +++ b/public/src/js/main.js @@ -24,6 +24,7 @@ function toggleFullscreen(){ var pageEvents = new PageEvents() var snd = {} var p2 +var disableBlur = false var loader = new Loader(() => { new Titlescreen() }) diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index 61d1fa4..f2ad090 100644 --- a/public/src/js/titlescreen.js +++ b/public/src/js/titlescreen.js @@ -2,22 +2,35 @@ class Titlescreen{ constructor(){ loader.changePage("titlescreen") this.titleScreen = document.getElementById("title-screen") - pageEvents.keyOnce(this, 13, "down").then(this.onPressed.bind(this)) - pageEvents.once(this.titleScreen, "mousedown").then(this.onPressed.bind(this)) + pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this)) + pageEvents.add(this.titleScreen, "mousedown", this.onPressed.bind(this)) pageEvents.once(this.titleScreen, "touchstart").then(this.onPressed.bind(this)) assets.sounds["title"].play() this.gamepad = new Gamepad({ - "start": ["a", "b", "x", "y", "start", "ls", "rs"] + "13": ["a", "b", "x", "y", "start", "ls", "rs"] }, pressed => { if(pressed){ this.onPressed() } }) } + keyDown(event, code){ + if(!code){ + code = event.keyCode + } + if(code == 13 || code == 32 || code == 86 || code == 66){ + // Enter, Space, V, B + this.onPressed() + } + } onPressed(event){ - if(event && event.type === "touchstart"){ - event.preventDefault() - this.touched = true + if(event){ + if(event.type === "touchstart"){ + event.preventDefault() + this.touched = true + }else if(event.type === "mousedown" && event.which !== 1){ + return + } } this.titleScreen.style.cursor = "auto" this.clean() @@ -34,7 +47,7 @@ class Titlescreen{ clean(){ this.gamepad.clean() assets.sounds["title"].stop() - pageEvents.keyRemove(this, 13) + pageEvents.keyRemove(this, "all") pageEvents.remove(this.titleScreen, "mousedown") pageEvents.remove(this.titleScreen, "touchstart") delete this.titleScreen diff --git a/public/src/js/view.js b/public/src/js/view.js index e60a3f0..0151369 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -325,7 +325,7 @@ class View{ this.ctx.strokeStyle = "#000" this.ctx.lineWidth = fontSize / 10 var glyph = this.ctx.measureText("0").width - var comboText = this.controller.getCombo().toString().split("") + var comboText = comboCount.toString().split("") for(var i in comboText){ var textX = comboX + glyph * (i - (comboText.length - 1) / 2) if(comboCount >= 100){ @@ -673,7 +673,7 @@ class View{ this.diffX, this.diffY, this.diffW, this.diffH ) - if(this.controller.autoPlayEnabled){ + if(this.controller.autoPlayEnabled && !this.controller.multiplayer){ this.ctx.drawImage(assets.image["badge_auto"], this.diffX + this.diffW * 0.71, this.diffY + this.diffH * 0.01, this.diffH * 0.3, this.diffH * 0.3