nanahira/taiko-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Loader: Add blur and image testing

Browse Source
This commit is contained in:
LoveEevee 2018-10-09 09:59:36 +03:00
parent 08391c0b53
commit 7358d5c6bb
9 changed files with 231 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -49,6 +49,7 @@
<script src="/src/js/gamerules.js"></script> <script src="/src/js/gamerules.js"></script>
<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>
</head> </head>
<body> <body>

4
public/src/css/titlescreen.css
View File

@ -34,6 +34,8 @@
} }
.click-to-continue::before{ .click-to-continue::before{
-webkit-text-stroke: 0.25em #f00; -webkit-text-stroke: 0.25em #f00;
filter: blur(0.3vmin);
left: auto; left: auto;
} }
#screen:not(.disable-blur) .click-to-continue::before{
filter: blur(0.3vmin);
}

49
public/src/js/canvasdraw.js
View File

@ -95,10 +95,13 @@
ctx.save() ctx.save()
ctx.shadowColor = "rgba(0, 0, 0, 0.5)" this.shadow({
ctx.shadowBlur = 10 ctx: ctx,
ctx.shadowOffsetX = 5 fill: "rgba(0, 0, 0, 0.5)",
ctx.shadowOffsetY = 5 blur: 10,
x: 5,
y: 5
})
ctx.fillStyle = "#000" ctx.fillStyle = "#000"
ctx.fillRect(x, y, w, h) ctx.fillRect(x, y, w, h)
@ -455,10 +458,13 @@
} }
if(layer.shadow){ if(layer.shadow){
ctx.save() ctx.save()
ctx.shadowOffsetX = layer.shadow[0] this.shadow({
ctx.shadowOffsetY = layer.shadow[1] ctx: ctx,
ctx.shadowBlur = layer.shadow[2] fill: "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")",
ctx.shadowColor = "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")" blur: layer.shadow[2],
x: layer.shadow[0],
y: layer.shadow[1]
})
} }
var offsetX = 0 var offsetX = 0
for(let symbol of drawn){ for(let symbol of drawn){
@ -625,8 +631,11 @@
ctx.save() ctx.save()
ctx.fillStyle = config.songSel ? "#fff" : "#f72568" ctx.fillStyle = config.songSel ? "#fff" : "#f72568"
if(config.songSel){ if(config.songSel){
ctx.shadowColor = "#fff" this.shadow({
ctx.shadowBlur = 10 ctx: ctx,
fill: "#fff",
blur: 10
})
ctx.translate(config.x - 9, config.y - 9) ctx.translate(config.x - 9, config.y - 9)
}else{ }else{
ctx.translate(config.x - 10.5, config.y - 9.5) ctx.translate(config.x - 10.5, config.y - 9.5)
@ -702,7 +711,9 @@
ctx.save() ctx.save()
ctx.strokeStyle = "#fff" ctx.strokeStyle = "#fff"
ctx.lineWidth = 35 ctx.lineWidth = 35
if(!disableBlur){
ctx.filter = "blur(1.5px)" ctx.filter = "blur(1.5px)"
}
ctx.stroke(this.crownPath) ctx.stroke(this.crownPath)
ctx.restore() 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(){ getMS(){
return +new Date return +new Date
} }

144
public/src/js/canvastest.js Normal file
View File

@ -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
}
}

4
public/src/js/keyboard.js
View File

@ -34,8 +34,8 @@ class Keyboard{
"cancel": ["a"], "cancel": ["a"],
} }
menuBtn[this.kbd["confirm"]] = ["b", "ls", "rs"] menuBtn[this.kbd["confirm"]] = ["b", "ls", "rs"]
menuBtn[this.kbd["previous"]] = ["u", "l", "lb", "lt"], menuBtn[this.kbd["previous"]] = ["u", "l", "lb", "lt", "lsu", "lsl"],
menuBtn[this.kbd["next"]] = ["d", "r", "rb", "rt"] menuBtn[this.kbd["next"]] = ["d", "r", "rb", "rt", "lsd", "lsr"]
menuBtn[this.kbd["pause"]] = ["start"] menuBtn[this.kbd["pause"]] = ["start"]
this.gamepadMenu = new Gamepad(menuBtn) this.gamepadMenu = new Gamepad(menuBtn)

17
public/src/js/loader.js
View File

@ -3,6 +3,8 @@ class Loader{
this.callback = callback this.callback = callback
this.loadedAssets = 0 this.loadedAssets = 0
this.assetsDiv = document.getElementById("assets") this.assetsDiv = document.getElementById("assets")
this.canvasTest = new CanvasTest()
p2 = new P2Connection()
this.ajax("src/views/loader.html").then(this.run.bind(this)) this.ajax("src/views/loader.html").then(this.run.bind(this))
} }
run(page){ run(page){
@ -71,8 +73,6 @@ class Loader{
this.promises.push(this.loadSound(name, snd.sfxLoudGain)) this.promises.push(this.loadSound(name, snd.sfxLoudGain))
}) })
p2 = new P2Connection()
this.promises.push(this.ajax("/api/songs").then(songs => { this.promises.push(this.ajax("/api/songs").then(songs => {
assets.songs = JSON.parse(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 => { this.promises.forEach(promise => {
promise.then(this.assetLoaded.bind(this)) promise.then(this.assetLoaded.bind(this))
}) })
Promise.all(this.promises).then(() => { Promise.all(this.promises).then(() => {
this.canvasTest.drawAllImages().then(() => {
this.canvasTest.clean()
this.clean() this.clean()
this.callback() this.callback()
})
}, this.errorMsg.bind(this)) }, this.errorMsg.bind(this))
}) })
@ -122,7 +133,7 @@ class Loader{
} }
} }
changePage(name){ changePage(name){
document.getElementById("screen").innerHTML = assets.pages[name] this.screen.innerHTML = assets.pages[name]
} }
ajax(url, customRequest){ ajax(url, customRequest){
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

1
public/src/js/main.js
View File

@ -24,6 +24,7 @@ function toggleFullscreen(){
var pageEvents = new PageEvents() var pageEvents = new PageEvents()
var snd = {} var snd = {}
var p2 var p2
var disableBlur = false
var loader = new Loader(() => { var loader = new Loader(() => {
new Titlescreen() new Titlescreen()
}) })

23
public/src/js/titlescreen.js
View File

@ -2,22 +2,35 @@ class Titlescreen{
constructor(){ constructor(){
loader.changePage("titlescreen") loader.changePage("titlescreen")
this.titleScreen = document.getElementById("title-screen") this.titleScreen = document.getElementById("title-screen")
pageEvents.keyOnce(this, 13, "down").then(this.onPressed.bind(this)) pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
pageEvents.once(this.titleScreen, "mousedown").then(this.onPressed.bind(this)) pageEvents.add(this.titleScreen, "mousedown", this.onPressed.bind(this))
pageEvents.once(this.titleScreen, "touchstart").then(this.onPressed.bind(this)) pageEvents.once(this.titleScreen, "touchstart").then(this.onPressed.bind(this))
assets.sounds["title"].play() assets.sounds["title"].play()
this.gamepad = new Gamepad({ this.gamepad = new Gamepad({
"start": ["a", "b", "x", "y", "start", "ls", "rs"] "13": ["a", "b", "x", "y", "start", "ls", "rs"]
}, pressed => { }, pressed => {
if(pressed){ if(pressed){
this.onPressed() 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){ onPressed(event){
if(event && event.type === "touchstart"){ if(event){
if(event.type === "touchstart"){
event.preventDefault() event.preventDefault()
this.touched = true this.touched = true
}else if(event.type === "mousedown" && event.which !== 1){
return
}
} }
this.titleScreen.style.cursor = "auto" this.titleScreen.style.cursor = "auto"
this.clean() this.clean()
@ -34,7 +47,7 @@ class Titlescreen{
clean(){ clean(){
this.gamepad.clean() this.gamepad.clean()
assets.sounds["title"].stop() assets.sounds["title"].stop()
pageEvents.keyRemove(this, 13) pageEvents.keyRemove(this, "all")
pageEvents.remove(this.titleScreen, "mousedown") pageEvents.remove(this.titleScreen, "mousedown")
pageEvents.remove(this.titleScreen, "touchstart") pageEvents.remove(this.titleScreen, "touchstart")
delete this.titleScreen delete this.titleScreen

4
public/src/js/view.js
View File

@ -325,7 +325,7 @@ class View{
this.ctx.strokeStyle = "#000" this.ctx.strokeStyle = "#000"
this.ctx.lineWidth = fontSize / 10 this.ctx.lineWidth = fontSize / 10
var glyph = this.ctx.measureText("0").width var glyph = this.ctx.measureText("0").width
var comboText = this.controller.getCombo().toString().split("") var comboText = comboCount.toString().split("")
for(var i in comboText){ for(var i in comboText){
var textX = comboX + glyph * (i - (comboText.length - 1) / 2) var textX = comboX + glyph * (i - (comboText.length - 1) / 2)
if(comboCount >= 100){ if(comboCount >= 100){
@ -673,7 +673,7 @@ class View{
this.diffX, this.diffY, this.diffX, this.diffY,
this.diffW, this.diffH this.diffW, this.diffH
) )
if(this.controller.autoPlayEnabled){ if(this.controller.autoPlayEnabled && !this.controller.multiplayer){
this.ctx.drawImage(assets.image["badge_auto"], this.ctx.drawImage(assets.image["badge_auto"],
this.diffX + this.diffW * 0.71, this.diffY + this.diffH * 0.01, this.diffX + this.diffW * 0.71, this.diffY + this.diffH * 0.01,
this.diffH * 0.3, this.diffH * 0.3 this.diffH * 0.3, this.diffH * 0.3