Add default backgrounds
This commit is contained in:
LoveEevee
parent
3fcec50b53
commit
f4dbb30f11
@ -4,6 +4,9 @@
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
}
|
||||
#game.default-bg{
|
||||
background-size: contain;
|
||||
}
|
||||
#canvas{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@ -193,16 +193,17 @@ kbd{
|
||||
background-position: 0 0;
|
||||
}
|
||||
to{
|
||||
background-position: -30vmin 0;
|
||||
background-position: calc(-100vh / 720 * 512) 0;
|
||||
}
|
||||
}
|
||||
#song-select{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("/assets/img/bg-pattern-1.png");
|
||||
background-size: 30vmin;
|
||||
animation: bgscroll 8s infinite linear;
|
||||
background-image: url("/assets/img/bg_genre_0.png");
|
||||
background-size: contain;
|
||||
animation: bgscroll 16s infinite linear;
|
||||
white-space: nowrap;
|
||||
transition: background-image 0.5s;
|
||||
}
|
||||
#song-sel-canvas{
|
||||
position: absolute;
|
||||
|
||||
@ -33,7 +33,15 @@ var assets = {
|
||||
"don_anim_gogostart.png",
|
||||
"don_anim_clear.png",
|
||||
"fire_anim.png",
|
||||
"fireworks_anim.png"
|
||||
"fireworks_anim.png",
|
||||
"bg_genre_0.png",
|
||||
"bg_genre_1.png",
|
||||
"bg_genre_2.png",
|
||||
"bg_genre_3.png",
|
||||
"bg_genre_4.png",
|
||||
"bg_genre_5.png",
|
||||
"bg_genre_6.png",
|
||||
"bg_genre_7.png"
|
||||
],
|
||||
"audioSfx": [
|
||||
"start.wav",
|
||||
|
||||
@ -11,11 +11,16 @@ class loadSong{
|
||||
var promises = []
|
||||
assets.sounds["start"].play()
|
||||
|
||||
promises.push(new Promise((resolve, reject) => {
|
||||
var img = document.createElement("img")
|
||||
promises.push(pageEvents.load(img))
|
||||
pageEvents.load(img).then(resolve, () => {
|
||||
this.selectedSong.defaultBg = true
|
||||
resolve()
|
||||
})
|
||||
img.id = "music-bg"
|
||||
img.src = "/songs/" + id + "/bg.png"
|
||||
document.getElementById("assets").appendChild(img)
|
||||
}))
|
||||
|
||||
promises.push(new Promise((resolve, reject) => {
|
||||
var songObj
|
||||
|
||||
@ -16,11 +16,13 @@ class SongSelect{
|
||||
outline: "#ad7723"
|
||||
},
|
||||
"random": {
|
||||
sort: 7,
|
||||
background: "#fa91ff",
|
||||
border: ["#ffdfff", "#b068b2"],
|
||||
outline: "#b221bb"
|
||||
},
|
||||
"tutorial": {
|
||||
sort: 7,
|
||||
background: "#9afbe1",
|
||||
border: ["#d6ffff", "#6bae9c"],
|
||||
outline: "#31ae94"
|
||||
@ -37,7 +39,7 @@ class SongSelect{
|
||||
border: ["#ffdb8c", "#e75500"],
|
||||
outline: "#9c4100"
|
||||
},
|
||||
"ボーカロイド": {
|
||||
"ボーカロイド™曲": {
|
||||
sort: 2,
|
||||
background: "#def2ef",
|
||||
border: ["#f7fbff", "#79919f"],
|
||||
@ -104,12 +106,14 @@ class SongSelect{
|
||||
this.songs.push({
|
||||
title: "ランダムに曲をえらぶ",
|
||||
skin: this.songSkin.random,
|
||||
action: "random"
|
||||
action: "random",
|
||||
category: "ランダム"
|
||||
})
|
||||
this.songs.push({
|
||||
title: "あそびかた説明",
|
||||
skin: this.songSkin.tutorial,
|
||||
action: "tutorial"
|
||||
action: "tutorial",
|
||||
category: "ランダム"
|
||||
})
|
||||
this.songs.push({
|
||||
title: "もどる",
|
||||
@ -179,7 +183,7 @@ class SongSelect{
|
||||
this.selectedDiff = 0
|
||||
assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506)
|
||||
|
||||
if(fromTutorial || !"selectedSong" in localStorage){
|
||||
if(fromTutorial || !("selectedSong" in localStorage)){
|
||||
this.selectedSong = this.songs.findIndex(song => song.action === "tutorial")
|
||||
this.playBgm(true)
|
||||
}else{
|
||||
@ -194,6 +198,11 @@ class SongSelect{
|
||||
this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), 4)
|
||||
}
|
||||
|
||||
this.songSelect = document.getElementById("song-select")
|
||||
var cat = this.songs[this.selectedSong].category
|
||||
var sort = cat in this.songSkin ? this.songSkin[cat].sort : 7
|
||||
this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
|
||||
|
||||
this.previewId = 0
|
||||
this.state = {
|
||||
screen: fromTutorial ? "song" : "title",
|
||||
@ -222,6 +231,7 @@ class SongSelect{
|
||||
})
|
||||
|
||||
this.startP2()
|
||||
|
||||
this.redrawRunning = true
|
||||
this.redrawBind = this.redraw.bind(this)
|
||||
this.redraw()
|
||||
@ -455,7 +465,8 @@ class SongSelect{
|
||||
new loadSong({
|
||||
"title": selectedSong.title,
|
||||
"folder": selectedSong.id,
|
||||
"difficulty": this.difficultyId[difficulty]
|
||||
"difficulty": this.difficultyId[difficulty],
|
||||
"category": selectedSong.category
|
||||
}, shift, ctrl)
|
||||
}
|
||||
toTitleScreen(){
|
||||
@ -606,6 +617,12 @@ class SongSelect{
|
||||
this.selectedSong = this.mod(this.songs.length, this.selectedSong + this.state.move)
|
||||
this.state.move = 0
|
||||
this.state.locked = 2
|
||||
|
||||
if(this.songs[this.selectedSong].action !== "back"){
|
||||
var cat = this.songs[this.selectedSong].category
|
||||
var sort = cat in this.songSkin ? this.songSkin[cat].sort : 7
|
||||
this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
|
||||
}
|
||||
}
|
||||
if(this.state.moveMS && ms < this.state.moveMS + changeSpeed){
|
||||
xOffset = Math.min(scroll, Math.max(0, elapsed - resize - scrollDelay)) / scroll * (this.songAsset.width + this.songAsset.marginLeft)
|
||||
@ -1285,6 +1302,8 @@ class SongSelect{
|
||||
for(let symbol of string){
|
||||
if(symbol === "-"){
|
||||
drawn.push({text: symbol, x: -4, y: 0, w: 28, scale: [0.8, 1]})
|
||||
}else if(symbol === "™"){
|
||||
drawn.push({text: symbol, x: -2, y: 0, w: 20, scale: [0.6, 0.5]})
|
||||
}else if(r.latin.test(symbol)){
|
||||
// Latin script
|
||||
drawn.push({text: symbol, x: 0, y: 0, w: 32})
|
||||
@ -1353,6 +1372,7 @@ class SongSelect{
|
||||
ctx.scale(symbol.scale[0], symbol.scale[1])
|
||||
currentX = 0
|
||||
currentY = 0
|
||||
ctx.lineWidth /= symbol.scale[0]
|
||||
}
|
||||
ctx[action](symbol.text, currentX, currentY)
|
||||
if(saved){
|
||||
|
||||
@ -65,7 +65,26 @@ class View{
|
||||
this.refresh()
|
||||
}
|
||||
setBackground(){
|
||||
document.getElementById("game").style.backgroundImage = "url('" + this.bg + "')"
|
||||
var gameDiv = document.getElementById("game")
|
||||
var selectedSong = this.controller.selectedSong
|
||||
if(selectedSong.defaultBg){
|
||||
var categories = {
|
||||
"J-POP": 0,
|
||||
"アニメ": 1,
|
||||
"ボーカロイド™曲": 2,
|
||||
"バラエティ": 3,
|
||||
"クラシック": 4,
|
||||
"ゲームミュージック": 5,
|
||||
"ナムコオリジナル": 6
|
||||
}
|
||||
var catId = 7
|
||||
if(selectedSong.category in categories){
|
||||
catId = categories[selectedSong.category]
|
||||
}
|
||||
this.bg = assets.image["bg_genre_" + catId].src
|
||||
gameDiv.classList.add("default-bg")
|
||||
}
|
||||
gameDiv.style.backgroundImage = "url('" + this.bg + "')"
|
||||
}
|
||||
positionning(){
|
||||
var docW = document.body.offsetWidth
|
||||
|
||||
Loading…
Reference in New Issue
Block a user