diff --git a/public/index.html b/public/index.html
index e40cd8e..a9062d4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -50,6 +50,7 @@
+
diff --git a/public/src/css/titlescreen.css b/public/src/css/titlescreen.css
index 2d8efbb..eacadc0 100644
--- a/public/src/css/titlescreen.css
+++ b/public/src/css/titlescreen.css
@@ -34,8 +34,6 @@
}
.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/canvascache.js b/public/src/js/canvascache.js
new file mode 100644
index 0000000..4ebae13
--- /dev/null
+++ b/public/src/js/canvascache.js
@@ -0,0 +1,67 @@
+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
+ }
+}
diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js
index 7786cb7..d899003 100644
--- a/public/src/js/canvasdraw.js
+++ b/public/src/js/canvasdraw.js
@@ -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
+ }
}
diff --git a/public/src/js/canvastest.js b/public/src/js/canvastest.js
index f9f3580..5a5e92b 100644
--- a/public/src/js/canvastest.js
+++ b/public/src/js/canvastest.js
@@ -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
}
diff --git a/public/src/js/loader.js b/public/src/js/loader.js
index 2b6307b..62dce66 100644
--- a/public/src/js/loader.js
+++ b/public/src/js/loader.js
@@ -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")
}
}))
diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js
index 67b540f..3556cfe 100644
--- a/public/src/js/scoresheet.js
+++ b/public/src/js/scoresheet.js
@@ -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({
+ 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,
- 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
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index dfd5538..ddf6a0c 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -132,13 +132,19 @@ class SongSelect{
marginLeft: 18,
width: 82,
selectedWidth: 382,
+ fullWidth: 912,
height: 452,
+ fullHeight: 502,
border: 6,
innerBorder: 8,
letterBorder: 12
}
this.draw = new CanvasDraw()
+ this.songTitleCache = new CanvasCache()
+ this.selectTextCache = new CanvasCache()
+ this.categoryCache = new CanvasCache()
+ this.difficultyCache = new CanvasCache()
this.difficulty = ["かんたん", "ふつう", "むずかしい", "おに"]
this.difficultyId = ["easy", "normal", "hard", "oni"]
@@ -530,6 +536,24 @@ class SongSelect{
ctx.scale(ratio, ratio)
this.canvas.style.width = (winW / this.pixelRatio) + "px"
this.canvas.style.height = (winH / this.pixelRatio) + "px"
+
+ var borders = (this.songAsset.border + this.songAsset.innerBorder) * 2
+ this.songTitleCache.resize((this.songAsset.width - borders + 1) * this.songs.length, (this.songAsset.height - borders + 1) * 2, ratio + 0.5)
+
+ this.selectTextCache.resize((280 + 53 + 60 + 1) * 2, this.songAsset.marginTop + 15, ratio + 0.5)
+
+ var categories = 0
+ var lastCategory
+ this.songs.forEach(song => {
+ var cat = (song.category || "") + song.skin.outline
+ if(lastCategory !== cat){
+ lastCategory = cat
+ categories++
+ }
+ })
+ this.categoryCache.resize(280, (this.songAsset.marginTop + 1) * categories , ratio + 0.5)
+
+ this.difficultyCache.resize((44 + 56 + 2) * 4, 135 + 10, ratio + 0.5)
}else if(!document.hasFocus()){
this.pointer(false)
return
@@ -567,39 +591,60 @@ class SongSelect{
}
if(screen === "title" || screen === "titleFadeIn" || screen === "song"){
- this.draw.layeredText({
+ this.selectTextCache.get({
ctx: ctx,
- text: "曲をえらぶ",
- fontSize: 48,
- fontFamily: this.font,
- x: frameLeft + 53,
- y: frameTop + 30,
- letterSpacing: 2
- }, [
- {x: -2, y: -2, outline: "#000", letterBorder: 22},
- {},
- {x: 2, y: 2, shadow: [3, 3, 3]},
- {x: 2, y: 2, outline: "#ad1516", letterBorder: 10},
- {x: -2, y: -2, outline: "#ff797b"},
- {outline: "#f70808"},
- {fill: "#fff", shadow: [-1, 1, 3, 1.5]}
- ])
+ x: frameLeft,
+ y: frameTop,
+ w: 280 + 53 + 60,
+ h: this.songAsset.marginTop + 15,
+ id: "song"
+ }, ctx => {
+ this.draw.layeredText({
+ ctx: ctx,
+ text: "曲をえらぶ",
+ fontSize: 48,
+ fontFamily: this.font,
+ x: 53,
+ y: 30,
+ letterSpacing: 2,
+ forceShadow: true
+ }, [
+ {x: -2, y: -2, outline: "#000", letterBorder: 22},
+ {},
+ {x: 2, y: 2, shadow: [3, 3, 3]},
+ {x: 2, y: 2, outline: "#ad1516", letterBorder: 10},
+ {x: -2, y: -2, outline: "#ff797b"},
+ {outline: "#f70808"},
+ {fill: "#fff", shadow: [-1, 1, 3, 1.5]}
+ ])
+ })
var category = this.songs[this.selectedSong].category
if(category){
- this.draw.layeredText({
+ var selectedSong = this.songs[this.selectedSong]
+ this.categoryCache.get({
ctx: ctx,
- text: category,
- fontSize: 40,
- fontFamily: this.font,
- x: winW / 2,
- y: frameTop + 38,
- width: 255,
- align: "center"
- }, [
- {outline: this.songs[this.selectedSong].skin.outline, letterBorder: 12, shadow: [3, 3, 3]},
- {fill: "#fff"}
- ])
+ x: winW / 2 - 280 / 2,
+ y: frameTop,
+ w: 280,
+ h: this.songAsset.marginTop,
+ id: category + selectedSong.skin.outline
+ }, ctx => {
+ this.draw.layeredText({
+ ctx: ctx,
+ text: category,
+ fontSize: 40,
+ fontFamily: this.font,
+ x: 280 / 2,
+ y: 38,
+ width: 255,
+ align: "center",
+ forceShadow: true
+ }, [
+ {outline: selectedSong.skin.outline, letterBorder: 12, shadow: [3, 3, 3]},
+ {fill: "#fff"}
+ ])
+ })
}
}
@@ -668,6 +713,12 @@ class SongSelect{
}
}
+ this.songFrameCache = {
+ w: this.songAsset.width + this.songAsset.selectedWidth + this.songAsset.fullWidth + (15 + 1) * 3,
+ h: this.songAsset.fullHeight + 16,
+ ratio: ratio
+ }
+
if(screen === "title" || screen === "titleFadeIn" || screen === "song"){
for(var i = this.selectedSong - 1; ; i--){
var highlight = 0
@@ -726,8 +777,8 @@ class SongSelect{
}
var selectedHeight = this.songAsset.height
if(screen === "difficulty"){
- selectedWidth = 912
- selectedHeight = 502
+ selectedWidth = this.songAsset.fullWidth
+ selectedHeight = this.songAsset.fullHeight
highlight = 0
}
@@ -744,29 +795,41 @@ class SongSelect{
highlight: highlight,
noCrop: screen === "difficulty",
animateMS: this.state.moveMS,
+ cached: selectedWidth === this.songAsset.fullWidth ? 3 : (selectedWidth === this.songAsset.selectedWidth ? 2 : (selectedWidth === this.songAsset.width ? 1 : 0)),
+ frameCache: this.songFrameCache,
innerContent: (x, y, w, h) => {
ctx.strokeStyle = "#000"
if(screen === "title" || screen === "titleFadeIn" || screen === "song"){
var opened = ((selectedWidth - this.songAsset.width) / (this.songAsset.selectedWidth - this.songAsset.width))
var songSel = true
}else{
- this.draw.layeredText({
+ this.selectTextCache.get({
ctx: ctx,
- text: "むずかしさをえらぶ",
- fontSize: 46,
- fontFamily: this.font,
- x: x - 144,
- y: y - 24,
- width: 280
- }, [
- {x: -2, y: -2, outline: "#000", letterBorder: 23},
- {shadow: [3, 3, 3]},
- {x: 2, y: 2},
- {x: 2, y: 2, outline: "#ad1516", letterBorder: 10},
- {x: -2, y: -2, outline: "#ff797b"},
- {outline: "#f70808"},
- {fill: "#fff", shadow: [-1, 1, 3, 1.5]}
- ])
+ x: x - 144 - 53,
+ y: y - 24 - 30,
+ w: 280 + 53 + 60,
+ h: this.songAsset.marginTop + 15,
+ id: "difficulty"
+ }, ctx => {
+ this.draw.layeredText({
+ ctx: ctx,
+ text: "むずかしさをえらぶ",
+ fontSize: 46,
+ fontFamily: this.font,
+ x: 53,
+ y: 30,
+ width: 280,
+ forceShadow: true
+ }, [
+ {x: -2, y: -2, outline: "#000", letterBorder: 23},
+ {},
+ {x: 2, y: 2, shadow: [3, 3, 3]},
+ {x: 2, y: 2, outline: "#ad1516", letterBorder: 10},
+ {x: -2, y: -2, outline: "#ff797b"},
+ {outline: "#f70808"},
+ {fill: "#fff", shadow: [-1, 1, 3, 1.5]}
+ ])
+ })
var opened = 1
var songSel = false
var _x = x + 62
@@ -883,16 +946,26 @@ class SongSelect{
border: 4.5
})
}
- this.draw.verticalText({
+ var offset = (songSel ? 44 : 56) / 2
+ this.difficultyCache.get({
ctx: ctx,
- text: this.difficulty[i],
- x: _x,
+ x: _x - offset,
y: songSel ? _y + 10 : _y + 23,
- width: songSel ? 44 : 56,
- height: songSel ? (i === 1 ? 66 : 88) : (i === 0 ? 130 : i === 1 ? 110 : 135),
- fill: "#000",
- fontSize: songSel ? 25 : (i === 2 ? 45 : 40),
- fontFamily: this.font
+ w: songSel ? 44 : 56,
+ h: (songSel ? 88 : 135) + 10,
+ id: this.difficulty[i] + (songSel ? "1" : "0")
+ }, ctx => {
+ this.draw.verticalText({
+ ctx: ctx,
+ text: this.difficulty[i],
+ x: offset,
+ y: 0,
+ width: songSel ? 44 : 56,
+ height: songSel ? (i === 1 ? 66 : 88) : (i === 0 ? 130 : (i === 1 ? 110 : 135)),
+ fill: "#000",
+ fontSize: songSel ? 25 : (i === 2 ? 45 : 40),
+ fontFamily: this.font
+ })
})
for(var j = 0; j < 10; j++){
if(songSel){
@@ -910,7 +983,8 @@ class SongSelect{
ctx: ctx,
songSel: songSel,
x: _x,
- y: yPos
+ y: yPos,
+ ratio: ratio
})
}
}
@@ -959,23 +1033,37 @@ class SongSelect{
}
ctx.globalAlpha = 1 - Math.max(0, opened - 0.5) * 2
ctx.fillStyle = selectedSkin.background
- ctx.fillRect(x,y,w,h)
+ ctx.fillRect(x, y, w, h)
ctx.globalAlpha = 1
- var textX = Math.max(w - 37, w / 2)
+ var borders = (this.songAsset.border + this.songAsset.innerBorder) * 2
+ var textW = this.songAsset.width - borders
+ var textH = this.songAsset.height - borders
+ var textX = Math.max(w - 37 - textW / 2, w / 2 - textW / 2)
var textY = opened * 12 + (1 - opened) * 7
- this.draw.verticalText({
+ this.songTitleCache.get({
ctx: ctx,
- text: currentSong.title,
x: x + textX,
- y: y + textY,
- width: w,
- height: h - 35,
- fill: "#fff",
- outline: selectedSkin.outline,
- outlineSize: this.songAsset.letterBorder,
- fontSize: 40,
- fontFamily: this.font
+ y: y + textY - 7,
+ w: textW,
+ h: textH,
+ id: currentSong.title + selectedSkin.outline,
+ }, ctx => {
+ this.draw.verticalText({
+ ctx: ctx,
+ text: currentSong.title,
+ x: textW / 2,
+ y: 7,
+ width: textW,
+ height: textH - 35,
+ fill: "#fff",
+ outline: selectedSkin.outline,
+ outlineSize: this.songAsset.letterBorder,
+ fontSize: 40,
+ fontFamily: this.font
+ })
})
+ //ctx.fillStyle="#f00"
+ //ctx.fillRect(textX,textY,textW,textH)
}
})
@@ -1014,19 +1102,30 @@ class SongSelect{
config.outline = config.song.skin.outline
config.text = config.song.title
config.animateMS = this.state.moveMS
+ config.cached = 1
+ config.frameCache = this.songFrameCache
config.innerContent = (x, y, w, h) => {
- this.draw.verticalText({
+ this.songTitleCache.get({
ctx: ctx,
- text: config.text,
- x: x + w / 2,
- y: y + 7,
- width: w,
- height: h - 35,
- fill: "#fff",
- outline: config.outline,
- outlineSize: this.songAsset.letterBorder,
- fontSize: 40,
- fontFamily: this.font
+ x: x,
+ y: y,
+ w: w,
+ h: h,
+ id: config.text + config.outline,
+ }, ctx => {
+ this.draw.verticalText({
+ ctx: ctx,
+ text: config.text,
+ x: w / 2,
+ y: 7,
+ width: w,
+ height: h - 35,
+ fill: "#fff",
+ outline: config.outline,
+ outlineSize: this.songAsset.letterBorder,
+ fontSize: 40,
+ fontFamily: this.font
+ })
})
}
this.draw.songFrame(config)
@@ -1137,6 +1236,11 @@ class SongSelect{
}
clean(){
+ this.draw.clean()
+ this.songTitleCache.clean()
+ this.selectTextCache.clean()
+ this.categoryCache.clean()
+ this.difficultyCache.clean()
assets.sounds["bgm_songsel"].stop()
if(!this.bgmEnabled){
snd.musicGain.fadeIn()