mirror of
https://github.com/yuukiwww/taiko-web.git
synced 2024-08-07 03:05:45 +02:00
Merge pull request #49 from LoveEevee/songselect-add-cache
Songselect: Add cache for shadows
This commit is contained in:
Bui
GitHub
commit
09ba8a2064
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
67
public/src/js/canvascache.js
Normal file
67
public/src/js/canvascache.js
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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")
|
||||
}
|
||||
}))
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user