Skip to content

T
Taiko Web
Commit 190beb22 authored by LoveEevee's avatar LoveEevee
Browse files
Options

Songselect: Add cache for shadows

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