Mascali
/
shapez
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Vastly improve game loading time

This commit is contained in:
tobspr 2022-06-17 14:52:25 +02:00
parent 400cc5fe81
commit dfa392907d
18 changed files with 52 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
gulp/html.js
View File

@ -76,15 +76,23 @@ function gulptasksHTML($, gulp, buildFolder) {
// Do not need to preload in app or standalone
if (!hasLocalFiles) {
// Preload essentials
const preloads = ["fonts/GameFont.woff2"];
const preloads = [
"res/fonts/GameFont.woff2",
"async-resources.css",
"res/sounds/music/theme-short.mp3",
];
preloads.forEach(src => {
const preloadLink = document.createElement("link");
preloadLink.rel = "preload";
preloadLink.href = cachebust("res/" + src);
preloadLink.href = cachebust(src);
if (src.endsWith(".woff2")) {
preloadLink.setAttribute("crossorigin", "anonymous");
preloadLink.setAttribute("as", "font");
} else if (src.endsWith(".css")) {
preloadLink.setAttribute("as", "style");
} else if (src.endsWith(".mp3")) {
preloadLink.setAttribute("as", "audio");
} else {
preloadLink.setAttribute("as", "image");
}

1
src/css/adinplay.scss
View File

@ -60,7 +60,6 @@
}
& {
/* @load-async */
background: rgba($mainBgColor, 0.9) uiResource("loading.svg") center center / #{D(60px)} no-repeat;
}
}

2
src/css/common.scss
View File

@ -398,7 +398,6 @@ canvas {
vertical-align: middle;
& {
/* @load-async */
background: uiResource("loading.svg") center center / contain no-repeat;
}
}
@ -483,7 +482,6 @@ canvas {
}
& {
/* @load-async */
background: uiResource("loading.svg") center center / #{D(40px)} no-repeat;
}
}

3
src/css/ingame_hud/dialogs.scss
View File

@ -142,7 +142,6 @@
opacity: 0.4;
}
& {
/* @load-async */
background: uiResource("icons/close.png") center center / 80% no-repeat;
}
}
@ -292,7 +291,7 @@
content: " ";
display: inline-block;
background: rgba(#fff, 0.6);
@include InlineAnimation(3s linear) {
@include InlineAnimation(1s linear) {
0% {
width: 100%;
}

2
src/css/resources.scss
View File

@ -75,12 +75,10 @@ $languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW
@each $language in $languages {
[data-languageicon="#{$language}"] {
/* @load-async */
background-image: uiResource("languages/#{$language}.svg") !important;
}
}
.steam_dlbtn_0 {
/* @load-async */
background-image: uiResource("steam_link_btn/0.png") !important;
}

2
src/css/states/keybindings.scss
View File

@ -36,12 +36,10 @@
background: transparent center center / 40% no-repeat;
opacity: 0.9;
&.editKeybinding {
/* @load-async */
background-image: uiResource("icons/edit_key.png");
}
&.resetKeybinding {
/* @load-async */
background-image: uiResource("icons/reset_key.png");
}

17
src/css/states/main_menu.scss
View File

@ -23,7 +23,6 @@
pointer-events: all;
cursor: pointer;
& {
/* @load-async */
background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
}
transition: opacity 0.12s ease-in-out;
@ -35,7 +34,6 @@
}
.exitAppButton {
/* @load-async */
background-image: uiResource("icons/main_menu_exit.png");
background-size: 90%;
}
@ -350,7 +348,6 @@
opacity: 0.5;
background: transparent center center/ 80% no-repeat;
& {
/* @load-async */
background-image: uiResource("icons/edit_key.png") !important;
}
@include DarkThemeInvert;
@ -501,10 +498,6 @@
// @include S(width, 20px);
// & {
// /* @load-async */
// background-image: uiResource("res/ui/icons/mods_white.png") !important;
// }
background-position: center center;
background-size: D(15px);
background-color: $modsColor !important;
@ -574,7 +567,6 @@
button.resumeGame {
background-color: #44484a;
& {
/* @load-async */
background-image: uiResource("icons/play.png");
}
}
@ -585,7 +577,6 @@
background-color: transparent;
& {
/* @load-async */
background-image: uiResource("icons/download.png");
}
@include S(width, 15px);
@ -609,7 +600,6 @@
@include IncreasedClickArea(0px);
& {
/* @load-async */
background-image: uiResource("icons/delete.png");
}
@include S(width, 15px);
@ -630,7 +620,6 @@
@include IncreasedClickArea(2px);
& {
/* @load-async */
background-image: uiResource("icons/edit_key.png");
}
@include S(width, 10px);
@ -724,7 +713,6 @@
overflow: hidden;
& {
/* @load-async */
background: #fff uiResource("wegame_isbn_rating.jpg") center center / contain no-repeat;
}
}
@ -791,11 +779,9 @@
@include S(height, 50px);
background: center center / 80% no-repeat;
&.githubLogo {
/* @load-async */
background-image: uiResource("main_menu/github.png");
}
&.discordLogo {
/* @load-async */
background-image: uiResource("main_menu/discord.png");
background-size: 95%;
}
@ -837,15 +823,12 @@
transition: background-color 0.12s ease-in-out;
&.redditLink {
/* @load-async */
background-image: uiResource("main_menu/reddit.svg");
}
&.changelog {
/* @load-async */
background-image: uiResource("main_menu/changelog.svg");
}
&.helpTranslate {
/* @load-async */
background-image: uiResource("main_menu/translate.svg");
}
}

1
src/css/states/mobile_warning.scss
View File

@ -31,7 +31,6 @@
height: 80px;
min-height: 40px;
& {
/* @load-async */
background: uiResource("steam_link_btn/0.png") center center / contain no-repeat;
}
overflow: hidden;

1
src/css/states/mods.scss
View File

@ -77,7 +77,6 @@
opacity: 0.2;
}
&::before {
/* @load-async */
background-image: uiResource("res/ui/icons/mods.png") !important;
}
}

5
src/css/states/puzzle_menu.scss
View File

@ -247,7 +247,6 @@
@include DarkThemeInvert;
& {
/* @load-async */
background-image: uiResource("icons/delete.png") !important;
}
}
@ -275,7 +274,6 @@
@include DarkThemeInvert;
& {
/* @load-async */
background: uiResource("icons/puzzle_plays.png") #{D(2px)} #{D(2.5px)} / #{D(
8px
)} #{D(8px)} no-repeat;
@ -293,7 +291,6 @@
@include DarkThemeInvert;
& {
/* @load-async */
background: uiResource("icons/puzzle_upvotes.png") #{D(2px)} #{D(2.4px)} / #{D(
9px
)} #{D(9px)} no-repeat;
@ -349,14 +346,12 @@
opacity: 0.1;
& {
/* @load-async */
background: uiResource("icons/puzzle_complete_indicator.png") center center /
contain no-repeat;
}
}
@include DarkThemeOverride {
&::after {
/* @load-async */
background: uiResource("icons/puzzle_complete_indicator_inverse.png") center
center / contain no-repeat;
}

2
src/css/states/settings.scss
View File

@ -202,7 +202,6 @@
@include S(padding-right, 15px);
& {
/* @load-async */
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
}
@ -244,7 +243,6 @@
background-color: $darkModeControlsBackground;
& {
/* @load-async */
background-image: uiResource("icons/enum_selector_white.png");
}
color: #ddd;

1
src/css/textual_game_state.scss
View File

@ -27,7 +27,6 @@
@include S(margin-right, 10px);
@include S(margin-left, -5px);
& {
/* @load-async */
background: uiResource("icons/state_back_button.png") center center / 70% no-repeat;
}
}

33
src/js/core/background_resources_loader.js
View File

@ -78,6 +78,8 @@ export class BackgroundResourcesLoader {
// Avoid loading stuff twice
this.spritesLoaded = [];
this.soundsLoaded = [];
this.atlasesLoaded = [];
this.cssLoaded = [];
}
getNumAssetsLoaded() {
@ -122,7 +124,6 @@ export class BackgroundResourcesLoader {
logger.log("⏰ Finish load: main menu");
this.mainMenuReady = true;
this.signalMainMenuLoaded.dispatch();
this.internalStartLoadingEssentialsForBareGame();
});
}
@ -161,6 +162,10 @@ export class BackgroundResourcesLoader {
}
internalPreloadCss(name) {
if (this.cssLoaded.includes(name)) {
return;
}
this.cssLoaded.push(name);
return new Promise((resolve, reject) => {
const link = document.createElement("link");
@ -225,10 +230,16 @@ export class BackgroundResourcesLoader {
for (let i = 0; i < atlases.length; ++i) {
const atlas = atlases[i];
if (this.atlasesLoaded.includes(atlas)) {
// Already loaded
continue;
}
this.atlasesLoaded.push(atlas);
promises.push(
Loader.preloadAtlas(atlas)
.catch(err => {
logger.warn("Failed to load atlas:", atlas.sourceFileName);
logger.warn("Failed to load atlas:", atlas.sourceFileName, err);
})
.then(() => {
this.numAssetsLoaded++;
@ -236,19 +247,9 @@ export class BackgroundResourcesLoader {
);
}
return (
Promise.all(promises)
// // Remove some pressure by waiting a bit
// .then(() => {
// return new Promise(resolve => {
// setTimeout(resolve, 200);
// });
// })
.then(() => {
this.numAssetsToLoadTotal = 0;
this.numAssetsLoaded = 0;
})
);
return Promise.all(promises).then(() => {
this.numAssetsToLoadTotal = 0;
this.numAssetsLoaded = 0;
});
}
}

2
src/js/core/modal_dialog_elements.js
View File

@ -178,7 +178,7 @@ export class Dialog {
const timeout = setTimeout(() => {
button.classList.remove("timedButton");
arrayDeleteValue(this.timeouts, timeout);
}, 3000);
}, 1000);
this.timeouts.push(timeout);
}
if (isEnter || isEscape) {

9
src/js/platform/sound.js
View File

@ -32,10 +32,13 @@ export const MUSIC = {
// The theme always depends on the standalone only, even if running the full
// version in the browser
theme: G_IS_STANDALONE ? "theme-full" : "theme-short",
menu: "menu",
};
if (G_IS_STANDALONE || G_IS_DEV) {
if (G_IS_STANDALONE) {
MUSIC.menu = "menu";
}
if (G_IS_STANDALONE) {
MUSIC.puzzle = "puzzle-full";
}
@ -152,7 +155,7 @@ export class SoundInterface {
} else if (this.music[key]) {
return this.music[key].load();
} else {
logger.error("Sound/Music by key not found:", key);
logger.warn("Sound/Music by key not found:", key);
return Promise.resolve();
}
}

22
src/js/states/ingame.js
View File

@ -237,17 +237,21 @@ export class InGameState extends GameState {
*/
stage3CreateCore() {
if (this.switchStage(GAME_LOADING_STATES.s3_createCore)) {
logger.log("Creating new game core");
this.core = new GameCore(this.app);
logger.log("Waiting for resources to load");
this.core.initializeRoot(this, this.savegame, this.gameModeId);
this.app.backgroundResourceLoader.getPromiseForBareGame().then(() => {
logger.log("Creating new game core");
this.core = new GameCore(this.app);
if (this.savegame.hasGameDump()) {
this.stage4bResumeGame();
} else {
this.app.gameAnalytics.handleGameStarted();
this.stage4aInitEmptyGame();
}
this.core.initializeRoot(this, this.savegame, this.gameModeId);
if (this.savegame.hasGameDump()) {
this.stage4bResumeGame();
} else {
this.app.gameAnalytics.handleGameStarted();
this.stage4aInitEmptyGame();
}
});
}
}

3
src/js/states/main_menu.js
View File

@ -315,6 +315,9 @@ export class MainMenuState extends GameState {
}
onEnter(payload) {
const app = this.app;
setTimeout(() => app.backgroundResourceLoader.internalStartLoadingEssentialsForBareGame(), 10);
this.dialogs = new HUDModalDialogs(null, this.app);
const dialogsElement = document.body.querySelector(".modalDialogParent");
this.dialogs.initializeToElement(dialogsElement);

2
src/js/states/preload.js
View File

@ -163,7 +163,7 @@ export class PreloadState extends GameState {
.then(() => this.setStatus("Downloading resources"))
.then(() => {
return this.app.backgroundResourceLoader.getPromiseForBareGame();
return this.app.backgroundResourceLoader.getPromiseForMainMenu();
})
.then(() => this.setStatus("Checking changelog"))