Skip to content

T
Taiko Web
Commit 09ba8a20 authored by Bui's avatar Bui Committed by GitHub
Browse files
Options

Merge pull request #49 from LoveEevee/songselect-add-cache 

Songselect: Add cache for shadows
parents a5f2f2b8 190beb22
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 390 additions and 174 deletions
public/index.html
View file @ 09ba8a20
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
<script src="/src/js/canvasdraw.js"></script> <script src="/src/js/canvasdraw.js"></script>
<script src="/src/js/loader.js"></script> <script src="/src/js/loader.js"></script>
<script src="/src/js/canvastest.js"></script> <script src="/src/js/canvastest.js"></script>
<script src="/src/js/canvascache.js"></script>
</head> </head>
<body> <body>
......
public/src/css/titlescreen.css
View file @ 09ba8a20
...@@ -34,8 +34,6 @@ ...@@ -34,8 +34,6 @@
} }
.click-to-continue::before{ .click-to-continue::before{
-webkit-text-stroke: 0.25em #f00; -webkit-text-stroke: 0.25em #f00;
left: auto;
}
#screen:not(.disable-blur) .click-to-continue::before{
filter: blur(0.3vmin); filter: blur(0.3vmin);
left: auto;
} }
public/src/js/canvascache.js 0 → 100644
View file @ 09ba8a20
class CanvasCache{
constructor(w, h, scale){
this.canvas = document.createElement("canvas")
this.ctx = this.canvas.getContext("2d")
this.map = new Map()
if(w){
this.resize(w, h, scale)
}
}
resize(w, h, scale){
this.map.clear()
this.scale = scale
this.x = 0
this.y = 0
this.w = w
this.h = h
this.lastW = 0
this.lastH = 0
this.canvas.width = this.w * this.scale
this.canvas.height = this.h * this.scale
this.ctx.scale(this.scale, this.scale)
}
get(config, callback){
var img = this.map.get(config.id)
var saved = false
if(!img){
var w = config.w
var h = config.h
this.x += this.lastW + 1
if(this.x + w > this.w){
this.x = 0
this.y += this.lastH + 1
}
this.lastW = w
this.lastH = Math.max(this.lastH, h)
img = {
x: this.x,
y: this.y,
w: w,
h: h
}
this.map.set(config.id, img)
saved = true
this.ctx.save()
this.ctx.translate(img.x |0, img.y |0)
this.ctx.beginPath()
this.ctx.rect(0, 0, img.w |0, img.h |0)
this.ctx.clip()
callback(this.ctx)
}
var z = this.scale
config.ctx.drawImage(this.canvas,
img.x * z |0, img.y * z |0, img.w * z |0, img.h * z |0,
config.x |0, config.y |0, config.w |0, config.h |0
)
if(saved){
this.ctx.restore()
}
}
clean(){
delete this.map
delete this.ctx
delete this.canvas
}
}
public/src/js/canvasdraw.js
View file @ 09ba8a20
...@@ -60,6 +60,10 @@ ...@@ -60,6 +60,10 @@
uppercaseDigit: /[A-ZＡ-Ｚ0-9０-９]/ uppercaseDigit: /[A-ZＡ-Ｚ0-9０-９]/
} }
this.songFrameCache = new CanvasCache()
this.diffStarCache = new CanvasCache()
this.crownCache = new CanvasCache()
this.tmpCanvas = document.createElement("canvas") this.tmpCanvas = document.createElement("canvas")
this.tmpCtx = this.tmpCanvas.getContext("2d") this.tmpCtx = this.tmpCanvas.getContext("2d")
} }
...@@ -95,15 +99,34 @@ ...@@ -95,15 +99,34 @@
ctx.save() ctx.save()
this.shadow({ var shadowBg = (ctx, noForce) => {
ctx: ctx, this.shadow({
fill: "rgba(0, 0, 0, 0.5)", ctx: ctx,
blur: 10, fill: "rgba(0, 0, 0, 0.5)",
x: 5, blur: 10,
y: 5 x: 5,
}) y: 5,
ctx.fillStyle = "#000" force: !noForce
ctx.fillRect(x, y, w, h) })
ctx.fillStyle = "#000"
ctx.fillRect(0, 0, w, h)
}
if(config.cached){
if(this.songFrameCache.w !== config.frameCache.w){
this.songFrameCache.resize(config.frameCache.w, config.frameCache.h, config.frameCache.ratio)
}
this.songFrameCache.get({
ctx: ctx,
x: x,
y: y,
w: w + 15,
h: h + 15,
id: "shadow" + config.cached
}, shadowBg)
}else{
ctx.translate(x, y)
shadowBg(ctx, true)
}
ctx.restore() ctx.restore()
ctx.save() ctx.save()
...@@ -211,15 +234,7 @@ ...@@ -211,15 +234,7 @@
var ctx = config.ctx var ctx = config.ctx
var inputText = config.text var inputText = config.text
var mul = config.fontSize / 40 var mul = config.fontSize / 40
var ura = false
if(inputText.endsWith(" (裏)")){
inputText = inputText.slice(0, -4)
ura = true
}else if(inputText.endsWith("(裏)")){
inputText = inputText.slice(0, -3)
ura = true
}
var string = inputText.split("") var string = inputText.split("")
var drawn = [] var drawn = []
...@@ -246,7 +261,7 @@ ...@@ -246,7 +261,7 @@
}else if(r.tilde.test(symbol)){ }else if(r.tilde.test(symbol)){
// Rotated hyphen, tilde // Rotated hyphen, tilde
if(symbol === "~"){ if(symbol === "~"){
symbol = "~" symbol = "～"
} }
drawn.push({text: symbol, x: 0, y: 2, h: 35, rotate: true}) drawn.push({text: symbol, x: 0, y: 2, h: 35, rotate: true})
}else if(r.tall.test(symbol)){ }else if(r.tall.test(symbol)){
...@@ -281,18 +296,8 @@ ...@@ -281,18 +296,8 @@
ctx.save() ctx.save()
ctx.translate(config.x, config.y) ctx.translate(config.x, config.y)
var scale = 1 if(config.height && drawnHeight > config.height){
if(config.height){ ctx.scale(1, config.height / drawnHeight)
var height = config.height - (ura ? 52 * mul : 0)
if(drawnHeight > height){
scale = height / drawnHeight
ctx.scale(1, scale)
}
}
if(ura){
// Circled ura
drawn.push({text: "裏", x: 0, y: 18, h: 52, ura: true, scale: [1, 1 / scale]})
} }
var actions = [] var actions = []
...@@ -322,7 +327,7 @@ ...@@ -322,7 +327,7 @@
currentX += 20 * mul currentX += 20 * mul
} }
var currentY = offsetY + symbol.y * mul var currentY = offsetY + symbol.y * mul
if(symbol.rotate || symbol.scale || symbol.svg || symbol.ura){ if(symbol.rotate || symbol.scale || symbol.svg){
saved = true saved = true
ctx.save() ctx.save()
...@@ -347,23 +352,7 @@ ...@@ -347,23 +352,7 @@
}else{ }else{
ctx.textAlign = "center" ctx.textAlign = "center"
} }
if(symbol.ura){ ctx[action + "Text"](symbol.text, currentX, currentY)
ctx.font = (30 * mul) + "px Meiryo"
ctx.textBaseline = "center"
ctx.beginPath()
ctx.arc(currentX, currentY + (21.5 * mul), (18 * mul), 0, Math.PI * 2)
if(action === "stroke"){
ctx.fillStyle = config.outline
ctx.fill()
}else if(action === "fill"){
ctx.strokeStyle = config.fill
ctx.lineWidth = 2.5 * mul
ctx.fillText(symbol.text, currentX, currentY)
}
ctx.stroke()
}else{
ctx[action + "Text"](symbol.text, currentX, currentY)
}
} }
offsetY += symbol.h * mul offsetY += symbol.h * mul
if(saved){ if(saved){
...@@ -463,7 +452,8 @@ ...@@ -463,7 +452,8 @@
fill: "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")", fill: "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")",
blur: layer.shadow[2], blur: layer.shadow[2],
x: layer.shadow[0], x: layer.shadow[0],
y: layer.shadow[1] y: layer.shadow[1],
force: config.forceShadow
}) })
} }
var offsetX = 0 var offsetX = 0
...@@ -629,19 +619,35 @@ ...@@ -629,19 +619,35 @@
diffStar(config){ diffStar(config){
var ctx = config.ctx var ctx = config.ctx
ctx.save() ctx.save()
ctx.fillStyle = config.songSel ? "#fff" : "#f72568"
if(config.songSel){ if(config.songSel){
this.shadow({ if(this.diffStarCache.scale !== config.ratio){
this.diffStarCache.resize(30, 30, config.ratio)
}
var offset = 30 / 2 - 18 / 2
this.diffStarCache.get({
ctx: ctx, ctx: ctx,
fill: "#fff", x: config.x - 9 - offset,
blur: 10 y: config.y - 9 - offset,
w: 30,
h: 30,
id: "star"
}, ctx => {
ctx.fillStyle = "#fff"
this.shadow({
ctx: ctx,
fill: "#fff",
blur: 10,
force: true
})
ctx.translate(offset, offset)
ctx.fill(this.diffStarPath)
}) })
ctx.translate(config.x - 9, config.y - 9)
}else{ }else{
ctx.fillStyle = "#f72568"
ctx.translate(config.x - 10.5, config.y - 9.5) ctx.translate(config.x - 10.5, config.y - 9.5)
ctx.scale(1.1, 1.1) ctx.scale(1.1, 1.1)
ctx.fill(this.diffStarPath)
} }
ctx.fill(this.diffStarPath)
ctx.restore() ctx.restore()
} }
...@@ -708,14 +714,27 @@ ...@@ -708,14 +714,27 @@
ctx.translate(-47, -39) ctx.translate(-47, -39)
ctx.miterLimit = 1.7 ctx.miterLimit = 1.7
ctx.save() if(!this.crownCache.w){
ctx.strokeStyle = "#fff" this.crownCache.resize(140, 140, config.ratio)
ctx.lineWidth = 35
if(!disableBlur){
ctx.filter = "blur(1.5px)"
} }
ctx.stroke(this.crownPath) var offset = 140 / 2 - 94 / 2
ctx.restore() this.crownCache.get({
ctx: ctx,
x: -offset,
y: -offset,
w: 140,
h: 140,
id: "crown"
}, ctx => {
ctx.save()
ctx.translate(offset, offset)
ctx.strokeStyle = "#fff"
ctx.lineWidth = 35
ctx.miterLimit = 1.7
ctx.filter = "blur(1.5px)"
ctx.stroke(this.crownPath)
ctx.restore()
})
if(config.shine){ if(config.shine){
ctx.strokeStyle = "#fff" ctx.strokeStyle = "#fff"
...@@ -770,7 +789,7 @@ ...@@ -770,7 +789,7 @@
} }
shadow(config){ shadow(config){
if(!disableBlur){ if(!disableBlur || config.force){
var ctx = config.ctx var ctx = config.ctx
if(config.fill){ if(config.fill){
ctx.shadowColor = config.fill ctx.shadowColor = config.fill
...@@ -790,4 +809,12 @@ ...@@ -790,4 +809,12 @@
getMS(){ getMS(){
return +new Date return +new Date
} }
clean(){
this.songFrameCache.clean()
this.diffStarCache.clean()
this.crownCache.clean()
delete this.tmpCtx
delete this.tmpCanvas
}
} }
public/src/js/canvastest.js
View file @ 09ba8a20
...@@ -8,6 +8,7 @@ class CanvasTest{ ...@@ -8,6 +8,7 @@ class CanvasTest{
this.canvas.height = height this.canvas.height = height
this.ctx = this.canvas.getContext("2d") this.ctx = this.canvas.getContext("2d")
this.ctx.scale(pixelRatio, pixelRatio) this.ctx.scale(pixelRatio, pixelRatio)
this.ratio = pixelRatio
this.draw = new CanvasDraw() this.draw = new CanvasDraw()
this.font = "serif" this.font = "serif"
...@@ -60,6 +61,7 @@ class CanvasTest{ ...@@ -60,6 +61,7 @@ class CanvasTest{
innerBorder: this.songAsset.innerBorder, innerBorder: this.songAsset.innerBorder,
background: "#efb058", background: "#efb058",
borderStyle: ["#ffe7bd", "#c68229"], borderStyle: ["#ffe7bd", "#c68229"],
ratio: this.ratio,
innerContent: () => {} innerContent: () => {}
}) })
} }
...@@ -138,6 +140,7 @@ class CanvasTest{ ...@@ -138,6 +140,7 @@ class CanvasTest{
this.ctx.fillText(text, x, y) this.ctx.fillText(text, x, y)
} }
clean(){ clean(){
this.draw.clean()
delete this.ctx delete this.ctx
delete this.canvas delete this.canvas
} }
......
public/src/js/loader.js
View file @ 09ba8a20
...@@ -88,7 +88,6 @@ class Loader{ ...@@ -88,7 +88,6 @@ class Loader{
if(result > 1000 / 50){ if(result > 1000 / 50){
// Less than 50 fps with blur enabled // Less than 50 fps with blur enabled
disableBlur = true disableBlur = true
this.screen.classList.add("disable-blur")
} }
})) }))
......
public/src/js/scoresheet.js
View file @ 09ba8a20
...@@ -21,6 +21,7 @@ class Scoresheet{ ...@@ -21,6 +21,7 @@ class Scoresheet{
this.numbers = "001122334455667788900112233445".split("") this.numbers = "001122334455667788900112233445".split("")
this.draw = new CanvasDraw() this.draw = new CanvasDraw()
this.canvasCache = new CanvasCache()
this.gamepad = new Gamepad({ this.gamepad = new Gamepad({
"13": ["a", "b", "start", "ls", "rs"] "13": ["a", "b", "start", "ls", "rs"]
...@@ -130,6 +131,8 @@ class Scoresheet{ ...@@ -130,6 +131,8 @@ class Scoresheet{
ctx.scale(ratio, ratio) ctx.scale(ratio, ratio)
this.canvas.style.width = (winW / this.pixelRatio) + "px" this.canvas.style.width = (winW / this.pixelRatio) + "px"
this.canvas.style.height = (winH / this.pixelRatio) + "px" this.canvas.style.height = (winH / this.pixelRatio) + "px"
this.canvasCache.resize(winW / ratio, 80 + 1, ratio)
}else if(!document.hasFocus() && this.state.screen === "scoresShown"){ }else if(!document.hasFocus() && this.state.screen === "scoresShown"){
return return
}else{ }else{
...@@ -237,36 +240,47 @@ class Scoresheet{ ...@@ -237,36 +240,47 @@ class Scoresheet{
ctx.scale(ratio, ratio) ctx.scale(ratio, ratio)
ctx.translate(frameLeft, frameTop) ctx.translate(frameLeft, frameTop)
this.draw.layeredText({ this.canvasCache.get({
ctx: ctx,
text: "成績発表",
fontSize: 48,
fontFamily: this.font,
x: 23,
y: 15,
letterSpacing: 3
}, [
{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]}
])
this.draw.layeredText({
ctx: ctx, ctx: ctx,
text: this.results.title, x: 0,
fontSize: 40, y: 0,
fontFamily: this.font, w: winW,
x: 1257, h: 80,
y: 20, id: "results"
align: "right" }, ctx => {
}, [ this.draw.layeredText({
{outline: "#000", letterBorder: 10, shadow: [1, 1, 3]}, ctx: ctx,
{fill: "#fff"} text: "成績発表",
]) fontSize: 48,
fontFamily: this.font,
x: 23,
y: 15,
letterSpacing: 3,
forceShadow: true
}, [
{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]}
])
this.draw.layeredText({
ctx: ctx,
text: this.results.title,
fontSize: 40,
fontFamily: this.font,
x: 1257,
y: 20,
align: "right",
forceShadow: true
}, [
{outline: "#000", letterBorder: 10, shadow: [1, 1, 3]},
{fill: "#fff"}
])
})
ctx.save() ctx.save()
for(var p = 0; p < players; p++){ for(var p = 0; p < players; p++){
...@@ -470,7 +484,8 @@ class Scoresheet{ ...@@ -470,7 +484,8 @@ class Scoresheet{
x: 395, x: 395,
y: 218, y: 218,
scale: crownScale, scale: crownScale,
shine: shine shine: shine,
ratio: ratio
}) })
ctx.restore() ctx.restore()
...@@ -649,6 +664,8 @@ class Scoresheet{ ...@@ -649,6 +664,8 @@ class Scoresheet{
} }
clean(){ clean(){
this.draw.clean()
this.canvasCache.clean()
assets.sounds["bgm_result"].stop() assets.sounds["bgm_result"].stop()
snd.musicGain.fadeIn() snd.musicGain.fadeIn()
this.redrawRunning = false this.redrawRunning = false
......
public/src/js/songselect.js
View file @ 09ba8a20
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment