diff --git a/gulp/sounds.js b/gulp/sounds.js index 3233162b..24e45b27 100644 --- a/gulp/sounds.js +++ b/gulp/sounds.js @@ -19,6 +19,7 @@ function gulptasksSounds($, gulp, buildFolder) { gulp.task("sounds.encodeMusic", () => { return gulp .src([path.join(soundsDir, "music", "**", "*.wav"), path.join(soundsDir, "music", "**", "*.mp3")]) + .pipe($.plumber()) .pipe( $.cache( $.fluentFfmpeg("mp3", function (cmd) { @@ -42,6 +43,7 @@ function gulptasksSounds($, gulp, buildFolder) { gulp.task("sounds.encodeUi", () => { return gulp .src([path.join(soundsDir, "ui", "**", "*.wav"), path.join(soundsDir, "ui", "**", "*.mp3")]) + .pipe($.plumber()) .pipe( $.cache( $.fluentFfmpeg("mp3", function (cmd) { @@ -64,7 +66,9 @@ function gulptasksSounds($, gulp, buildFolder) { // Encodes the game sounds gulp.task("sounds.encodeGame", () => { return gulp + .src([path.join(soundsDir, "game", "**", "*.wav"), path.join(soundsDir, "game", "**", "*.mp3")]) + .pipe($.plumber()) .pipe( $.cache( $.fluentFfmpeg("mp3", function (cmd) { @@ -87,6 +91,7 @@ function gulptasksSounds($, gulp, buildFolder) { gulp.task("sounds.copy", () => { return gulp .src(path.join(builtSoundsDir, "**", "*.mp3")) + .pipe($.plumber()) .pipe($.cached("sounds.copy")) .pipe(gulp.dest(path.join(buildFolder, "res", "sounds"))); }); diff --git a/res_raw/sounds/game/place_belt.wav b/res_raw/sounds/game/place_belt.wav new file mode 100644 index 00000000..087104bc --- /dev/null +++ b/res_raw/sounds/game/place_belt.wav @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d802fdcef7ae2d9486b362bca260e64383c690e14d7246e632324e49bed76abe +size 24580 diff --git a/res_raw/sounds/game/place_building.wav b/res_raw/sounds/game/place_building.wav new file mode 100644 index 00000000..3bb89df5 --- /dev/null +++ b/res_raw/sounds/game/place_building.wav @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ecd3d0d02bcc16363cd977b70cd94dddc774e809e2670d903b6dc62a0e2ff291 +size 238210 diff --git a/res_raw/sounds/music/main_menu.wav b/res_raw/sounds/music/main_menu.wav deleted file mode 100644 index 488479a8..00000000 --- a/res_raw/sounds/music/main_menu.wav +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:811a57acb5a16af8079744e048c3809799211f1d7c6e79eaa5247ed852b5d4eb -size 23990546 diff --git a/res_raw/sounds/music/theme.mp3 b/res_raw/sounds/music/theme.mp3 new file mode 100644 index 00000000..4b61dd27 Binary files /dev/null and b/res_raw/sounds/music/theme.mp3 differ diff --git a/res_raw/sounds/music/theme_full.wav b/res_raw/sounds/music/theme_full.wav deleted file mode 100644 index 68a7a043..00000000 --- a/res_raw/sounds/music/theme_full.wav +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6b4cbf863591aba38d1729fb1cbaa792323f045722279f0deca2492acaaf19b5 -size 123844300 diff --git a/res_raw/sounds/ui/level_complete.wav b/res_raw/sounds/ui/level_complete.wav new file mode 100644 index 00000000..71444cd8 --- /dev/null +++ b/res_raw/sounds/ui/level_complete.wav @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a4f810fcfbfcea08cfb48a8d58f9b65d1fd14cd20ff3cabf94a03c39b5250547 +size 1765124 diff --git a/res_raw/sounds/ui/ui_click.wav b/res_raw/sounds/ui/ui_click.wav index 3118481d..673b8904 100644 --- a/res_raw/sounds/ui/ui_click.wav +++ b/res_raw/sounds/ui/ui_click.wav @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7f4c56728534d030fca2d75f297027a2774d6f765f5be84a27a3705569f878f2 -size 20158 +oid sha256:75b848d50cd6c02ee7ba53424ce0e1d8432b35bc044aa195b0b3e35b5021c92d +size 43630 diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index aa926eba..c377fbad 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -102,7 +102,7 @@ .badge { position: absolute; - @include S(bottom, -12px); + @include S(bottom, -8px); left: 50%; transform: translateX(-50%); diff --git a/src/css/ingame_hud/unlock_notification.scss b/src/css/ingame_hud/unlock_notification.scss index f81232d0..15ffe0e0 100644 --- a/src/css/ingame_hud/unlock_notification.scss +++ b/src/css/ingame_hud/unlock_notification.scss @@ -4,10 +4,10 @@ left: 0; right: 0; bottom: 0; - background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat; + background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat; display: flex; justify-content: center; - align-items: flex-start; + align-items: center; pointer-events: all; @include InlineAnimation(0.1s ease-in-out) { 0% { @@ -16,7 +16,8 @@ } .dialog { - background: rgba(#333539, 0.5); + background: rgba(#222428, 0.5); + @include S(border-radius, 4px); @include S(padding, 30px); @include InlineAnimation(0.5s ease-in-out) { @@ -117,15 +118,12 @@ button.close { border: 0; - @include InlineAnimation(0.5s ease-in-out) { + @include InlineAnimation(2s ease-in-out) { 0% { - transform: translateY(50vh); + opacity: 0; } - 50% { - transform: translateY(-5vh); - } - 75% { - transform: translateY(2vh); + 95% { + opacity: 0; } } @include S(margin-top, 30px); diff --git a/src/js/core/background_resources_loader.js b/src/js/core/background_resources_loader.js index 44bb598e..d48f5ef4 100644 --- a/src/js/core/background_resources_loader.js +++ b/src/js/core/background_resources_loader.js @@ -22,7 +22,7 @@ const essentialMainMenuSounds = [ const essentialBareGameAtlases = atlasFiles; const essentialBareGameSprites = G_ALL_UI_IMAGES; -const essentialBareGameSounds = [MUSIC.gameBg]; +const essentialBareGameSounds = [MUSIC.theme]; const additionalGameSprites = []; const additionalGameSounds = []; diff --git a/src/js/core/click_detector.js b/src/js/core/click_detector.js index abe666da..fe0b5690 100644 --- a/src/js/core/click_detector.js +++ b/src/js/core/click_detector.js @@ -4,6 +4,8 @@ import { Signal } from "../core/signal"; import { fastArrayDelete, fastArrayDeleteValueIfContained } from "./utils"; import { Vector } from "./vector"; import { IS_MOBILE } from "./config"; +import { SOUNDS } from "../platform/sound"; +import { GLOBAL_APP } from "./globals"; const logger = createLogger("click_detector"); @@ -63,7 +65,7 @@ export class ClickDetector { captureTouchmove = false, targetOnly = false, maxDistance = MAX_MOVE_DISTANCE_PX, - clickSound = null, + clickSound = SOUNDS.uiClick, } ) { assert(element, "No element given!"); @@ -321,8 +323,7 @@ export class ClickDetector { // If we should play any sound, do this if (this.clickSound) { - throw new Error("TODO: Play sounds on click"); - // GLOBAL_APP.sound.playUiSound(this.clickSound); + GLOBAL_APP.sound.playUiSound(this.clickSound); } return false; diff --git a/src/js/core/config.js b/src/js/core/config.js index 634a96c9..c94c8413 100644 --- a/src/js/core/config.js +++ b/src/js/core/config.js @@ -77,14 +77,14 @@ export const globalConfig = { showEntityBounds: false, showAcceptorEjectors: false, usePlainShapeIds: true, - disableMusic: true, + // disableMusic: true, doNotRenderStatics: false, disableZoomLimits: false, showChunkBorders: false, rewardsInstant: false, allBuildingsUnlocked: true, upgradesNoCost: true, - disableUnlockDialog: true, + disableUnlockDialog: false, /* dev:end */ }, diff --git a/src/js/core/game_state.js b/src/js/core/game_state.js index 81744089..7454dcc8 100644 --- a/src/js/core/game_state.js +++ b/src/js/core/game_state.js @@ -252,7 +252,7 @@ export class GameState { * @returns {string|null} */ getThemeMusic() { - return MUSIC.mainMenu; + return null; } //////////////////// diff --git a/src/js/game/buildings/belt_base.js b/src/js/game/buildings/belt_base.js index 31846cc1..46e1109d 100644 --- a/src/js/game/buildings/belt_base.js +++ b/src/js/game/buildings/belt_base.js @@ -7,6 +7,7 @@ import { ReplaceableMapEntityComponent } from "../components/replaceable_map_ent import { Entity } from "../entity"; import { MetaBuilding } from "../meta_building"; import { GameRoot } from "../root"; +import { SOUNDS } from "../../platform/sound"; export const arrayBeltVariantToRotation = [enumDirection.top, enumDirection.left, enumDirection.right]; @@ -69,6 +70,10 @@ export class MetaBeltBaseBuilding extends MetaBuilding { return true; } + getPlacementSound() { + return SOUNDS.placeBelt; + } + /** * Creates the entity at the given location * @param {Entity} entity diff --git a/src/js/game/hud/parts/pinned_shapes.js b/src/js/game/hud/parts/pinned_shapes.js index 608b3312..9475a757 100644 --- a/src/js/game/hud/parts/pinned_shapes.js +++ b/src/js/game/hud/parts/pinned_shapes.js @@ -1,8 +1,8 @@ -import { BaseHUDPart } from "../base_hud_part"; -import { makeDiv, removeAllChildren, formatBigNumber } from "../../../core/utils"; -import { ClickDetector } from "../../../core/click_detector"; -import { ShapeDefinition } from "../../shape_definition"; import { Math_max } from "../../../core/builtins"; +import { ClickDetector } from "../../../core/click_detector"; +import { formatBigNumber, makeDiv } from "../../../core/utils"; +import { ShapeDefinition } from "../../shape_definition"; +import { BaseHUDPart } from "../base_hud_part"; export class HUDPinnedShapes extends BaseHUDPart { createElements(parent) { diff --git a/src/js/game/hud/parts/unlock_notification.js b/src/js/game/hud/parts/unlock_notification.js index 62e103b7..b13e7d46 100644 --- a/src/js/game/hud/parts/unlock_notification.js +++ b/src/js/game/hud/parts/unlock_notification.js @@ -14,6 +14,7 @@ import { MetaRotaterBuilding } from "../../buildings/rotater"; import { MetaStackerBuilding } from "../../buildings/stacker"; import { MetaUndergroundBeltBuilding } from "../../buildings/underground_belt"; import { globalConfig } from "../../../core/config"; +import { SOUNDS } from "../../../platform/sound"; export class HUDUnlockNotification extends BaseHUDPart { initialize() { @@ -110,6 +111,8 @@ export class HUDUnlockNotification extends BaseHUDPart { this.elemContents.innerHTML = html; this.visible = true; + + this.root.soundProxy.playUi(SOUNDS.levelComplete); } close() { diff --git a/src/js/game/logic.js b/src/js/game/logic.js index 12bbf229..e02b1938 100644 --- a/src/js/game/logic.js +++ b/src/js/game/logic.js @@ -4,9 +4,9 @@ import { Vector, enumDirectionToVector, enumDirection } from "../core/vector"; import { MetaBuilding } from "./meta_building"; import { StaticMapEntityComponent } from "./components/static_map_entity"; import { Math_abs } from "../core/builtins"; -import { Rectangle } from "../core/rectangle"; import { createLogger } from "../core/logging"; import { MetaBeltBaseBuilding, arrayBeltVariantToRotation } from "./buildings/belt_base"; +import { SOUNDS } from "../platform/sound"; const logger = createLogger("ingame/logic"); @@ -175,6 +175,9 @@ export class GameLogic { rotationVariant, originalRotation, }); + + this.root.soundProxy.playUi(building.getPlacementSound()); + return true; } return false; diff --git a/src/js/game/meta_building.js b/src/js/game/meta_building.js index 892c93ce..2bc8dffd 100644 --- a/src/js/game/meta_building.js +++ b/src/js/game/meta_building.js @@ -4,6 +4,7 @@ import { GameRoot } from "./root"; import { AtlasSprite } from "../core/sprites"; import { Entity } from "./entity"; import { StaticMapEntityComponent } from "./components/static_map_entity"; +import { SOUNDS } from "../platform/sound"; export class MetaBuilding { /** @@ -64,6 +65,14 @@ export class MetaBuilding { return false; } + /** + * Returns the placement sound + * @returns {string} + */ + getPlacementSound() { + return SOUNDS.placeBuilding; + } + /** * Returns a preview sprite * @returns {AtlasSprite} diff --git a/src/js/game/sound_proxy.js b/src/js/game/sound_proxy.js index 120136d4..1c19c9fb 100644 --- a/src/js/game/sound_proxy.js +++ b/src/js/game/sound_proxy.js @@ -55,11 +55,6 @@ export class SoundProxy { if (this.playingSounds.length > maxOngoingSounds) { // Too many ongoing sounds - // console.warn( - // "Not playing", - // id, - // "because there are too many sounds playing" - // ); return false; } diff --git a/src/js/game/systems/hub.js b/src/js/game/systems/hub.js index 9a768c81..88fb8712 100644 --- a/src/js/game/systems/hub.js +++ b/src/js/game/systems/hub.js @@ -49,17 +49,23 @@ export class HubSystem extends GameSystemWithFilter { const textOffsetY = -6; // Deliver count - context.font = "bold 25px GameFont"; + const delivered = this.root.hubGoals.getCurrentGoalDelivered(); + + if (delivered > 9999) { + context.font = "bold 16px GameFont"; + } else if (delivered > 999) { + context.font = "bold 20px GameFont"; + } else { + context.font = "bold 25px GameFont"; + } context.fillStyle = "#64666e"; context.textAlign = "left"; - context.fillText( - "" + formatBigNumber(this.root.hubGoals.getCurrentGoalDelivered()), - pos.x + textOffsetX, - pos.y + textOffsetY - ); + context.fillText("" + formatBigNumber(delivered), pos.x + textOffsetX, pos.y + textOffsetY); // Required + context.font = "13px GameFont"; + context.fillStyle = "#a4a6b0"; context.fillText( "/ " + formatBigNumber(goals.required), diff --git a/src/js/platform/browser/sound.js b/src/js/platform/browser/sound.js index 6776a6d1..985e5db7 100644 --- a/src/js/platform/browser/sound.js +++ b/src/js/platform/browser/sound.js @@ -10,7 +10,6 @@ class SoundInstance extends SoundInstanceInterface { constructor(key, url) { super(key, url); this.howl = null; - this.instance = null; } load() { @@ -25,6 +24,7 @@ class SoundInstance extends SoundInstanceInterface { loop: false, volume: 0, preload: true, + pool: 20, onload: () => { resolve(); }, @@ -43,13 +43,8 @@ class SoundInstance extends SoundInstanceInterface { play(volume) { if (this.howl) { - if (!this.instance) { - this.instance = this.howl.play(); - } else { - this.howl.play(this.instance); - this.howl.seek(0, this.instance); - } - this.howl.volume(volume, this.instance); + const instance = this.howl.play(); + this.howl.volume(volume, instance); } } @@ -57,7 +52,6 @@ class SoundInstance extends SoundInstanceInterface { if (this.howl) { this.howl.unload(); this.howl = null; - this.instance = null; } } } @@ -80,7 +74,7 @@ class MusicInstance extends MusicInstanceInterface { autoplay: false, loop: true, html5: true, - volume: 1, + volume: 0.3, preload: true, pool: 2, @@ -133,6 +127,12 @@ class MusicInstance extends MusicInstanceInterface { export class SoundImplBrowser extends SoundInterface { constructor(app) { + Howler.mobileAutoEnable = true; + Howler.autoUnlock = true; + Howler.autoSuspend = false; + Howler.html5PoolSize = 20; + Howler.pos(0, 0, 0); + super(app, SoundInstance, MusicInstance); } diff --git a/src/js/platform/sound.js b/src/js/platform/sound.js index c62db515..792507e3 100644 --- a/src/js/platform/sound.js +++ b/src/js/platform/sound.js @@ -18,11 +18,15 @@ export const SOUNDS = { dialogOk: "ui/dialog_ok.mp3", swishHide: "ui/ui_swish_hide.mp3", swishShow: "ui/ui_swish_show.mp3", + + levelComplete: "ui/level_complete.mp3", + + placeBuilding: "game/place_building.mp3", + placeBelt: "game/place_belt.mp3", }; export const MUSIC = { - mainMenu: "main_menu.mp3", - gameBg: "theme_full.mp3", + theme: "theme.mp3", }; export class SoundInstanceInterface { diff --git a/src/js/states/ingame.js b/src/js/states/ingame.js index d63af2ec..d8b3ee00 100644 --- a/src/js/states/ingame.js +++ b/src/js/states/ingame.js @@ -91,8 +91,7 @@ export class InGameState extends GameState { } getThemeMusic() { - // set later - return MUSIC.mainMenu; + return MUSIC.theme; } onBeforeExit() {