From f4dbb30f11616557f6c1bed47b0bf68426bc7ac5 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Thu, 27 Sep 2018 04:04:01 +0300 Subject: [PATCH] Add default backgrounds --- public/src/css/game.css | 3 +++ public/src/css/main.css | 9 +++++---- public/src/js/assets.js | 10 +++++++++- public/src/js/loadsong.js | 15 ++++++++++----- public/src/js/songselect.js | 30 +++++++++++++++++++++++++----- public/src/js/view.js | 21 ++++++++++++++++++++- 6 files changed, 72 insertions(+), 16 deletions(-) diff --git a/public/src/css/game.css b/public/src/css/game.css index e952385..5708555 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -4,6 +4,9 @@ overflow: hidden; background-size: cover; } +#game.default-bg{ + background-size: contain; +} #canvas{ position: relative; z-index: 1; diff --git a/public/src/css/main.css b/public/src/css/main.css index 27a11bf..032f7c4 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -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; diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 6ef130c..2539c5a 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -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", diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js index c198e0e..0d58857 100644 --- a/public/src/js/loadsong.js +++ b/public/src/js/loadsong.js @@ -11,11 +11,16 @@ class loadSong{ var promises = [] assets.sounds["start"].play() - var img = document.createElement("img") - promises.push(pageEvents.load(img)) - img.id = "music-bg" - img.src = "/songs/" + id + "/bg.png" - document.getElementById("assets").appendChild(img) + promises.push(new Promise((resolve, reject) => { + var img = document.createElement("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 diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index be6ce4c..d2891b3 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -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){ diff --git a/public/src/js/view.js b/public/src/js/view.js index b84af10..c0f91e2 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -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