Die Text- und Bildqualität ist sehr niedrig ⇐ JavaScript

[Guest]

Ich lerne, Phaser zu verwenden. Ich habe ein Projekt im Vanilla Framework mit Vite.js erstellt. Bei diesem Projekt ist die Bild- und Schriftqualität sehr schlecht. Wenn ich versuche, hineinzuzoomen, sehen Bilder und Schriftarten unscharf aus. Ich möchte bei den Texten und Bildern dieses Projekts eine hohe Qualität erreichen. Wie mache ich das?
Das ist mein Code: ----
Das ist mainScene. js-Skript :–

Code: Select all

import { Scene } from "phaser";

class MainScene extends Scene {
constructor() {
super("MainScene");
}
preload() {
console.log("preload");

this.load.image("gameBG", "/Sprites/gameBG.png");
this.load.image("mineDefaultLight", "/Sprites/mineDefaultLight.png");
this.load.image("gameNameBG", "/Sprites/gameNameBG.png");
this.load.image("arrow", "/Sprites/arrow.png");
this.load.image("howToPlayBtn", "/Sprites/howToPlayBtn.png");
this.load.image("menuBtn", "/Sprites/menuBtn.png");
this.load.image("minesSelectionBG", "/Sprites/minesSelectionBG.png");
this.load.image("nextBG", "/Sprites/nextBG.png");
this.load.image("randomBG", "/Sprites/randomBG.png");
this.load.image("autoGameBG", "/Sprites/autoGameBG.png");
this.load.image("refreshImg", "/Sprites/refresh.png");
this.load.image("autoToggleOffImg", "/Sprites/autoToggleOff.png");
this.load.image("betPanelBGImg", "/Sprites/betPanelBG.png");
this.load.image("customBetFieldImg", "/Sprites/customBetFieldImg.png");
this.load.image("minusBtnImg", "/Sprites/minus.png");
this.load.image("betAmountsBtn", "/Sprites/betAmountsBtn.png");
this.load.image("plusBtnImg", "/Sprites/plus.png");
this.load.image("autoPlayBtn", "/Sprites/autoPlayBtn.png");
this.load.image("betBtn", "/Sprites/betBtn.png");
this.load.image("betBtnArrow", "/Sprites/betBtnArrow.png");
this.load.image("minesSVG", "/Sprites/MinusSVG.svg");  // Preload the MinesSVG.svg image
this.load.image("refreshSVG", "/Sprites/refreshSVG.svg");

this.load.spritesheet("demo", "/Sprites/refresh.png", {frameWidth: 22, frameHeight: 18});
}
create() {
console.log("create");

let gameBG = this.add.image(0, 0, "gameBG").setOrigin(0, 0);
gameBG.setDisplaySize(950, 520);
gameBG.setPosition(5, 5);

function preserveAspect(image, targetWidth, targetHeight) {
const scale = Math.min(targetWidth / image.width, targetHeight / image.height);
image.setScale(scale);
}

//Header
let gameHeaderContainer = this.add.container(7, 7);
let gameHeader = this.add.graphics();
gameHeader.fillStyle(0x000000, .3);
gameHeader.fillRoundedRect(0, 0, 946, 30, 12);
gameHeaderContainer.add(gameHeader);

let gameNameBG = this.add.image(3, 3, "gameNameBG").setOrigin(0, 0);
gameNameBG.setDisplaySize(130, 24);
gameHeaderContainer.add(gameNameBG);

let arrow = this.add.image(110, 12, "arrow").setOrigin(0, 0);
preserveAspect(arrow, 10, 10);
gameHeaderContainer.add(arrow);

let gameNameTxt = this.add.text(47.428, 7, "MINES", {
fontSize: "12px",
fontFamily: "Roboto",
color: "#ffffff",
});
gameHeaderContainer.add(gameNameTxt);

let howToPlayBtn = this.add.image(148, 4, "howToPlayBtn").setOrigin(0, 0);
preserveAspect(howToPlayBtn, 150, 22);
gameHeaderContainer.add(howToPlayBtn);

let menuBtn = this.add.image(919, 4, "menuBtn").setOrigin(0, 0);
preserveAspect(menuBtn, 24, 24);
gameHeaderContainer.add(menuBtn);

let totalBalanceTxt = this.add.text(890, 8, "3,000.00  ", {
fontSize: "12px",
fontFamily: "Roboto",
color: "#ffffff",
}).setOrigin(1, 0);
let inrText = this.add.text(totalBalanceTxt.x, totalBalanceTxt.y, "INR", {
fontSize: "12px",
fontFamily: "Roboto",
color: "#6C9FC7",
}).setOrigin(0, 0);
totalBalanceTxt.setText(totalBalanceTxt.text);
gameHeaderContainer.add(inrText);
gameHeaderContainer.add(totalBalanceTxt);
totalBalanceTxt.setOrigin(1, 0);

//Middle
let subHeaderLine = this.add.graphics();
subHeaderLine.fillStyle(0x000000, .3);
subHeaderLine.fillRoundedRect(268.955, 71, 422.09, 4, 2);

const group = this.add.group();
const rows = 5, columns = 5;
const cellWidth = 78.9, cellHeight = 59.46;
const spacingX = 5, spacingY = 6;
const offsetX = 272.75, offsetY = 84;

for (let i = 0; i < rows * columns;  i++) {
const col = i % columns;
const row = Math.floor(i / columns);
const x = offsetX + col * (cellWidth + spacingX) + cellWidth / 2;
const y = offsetY + row * (cellHeight + spacingY) + cellHeight / 2;

const box = this.add.image(x, y, 'mineDefaultLight');
preserveAspect(box, cellWidth, cellHeight);
group.add(box);
}

//SubFooter
let subFooterContainer = this.add.container(273, 415);
let randomBG = this.add.image(0, 0, "randomBG").setOrigin(0, 0);
randomBG.setDisplaySize(205.27, 30.05);
subFooterContainer.add(randomBG);

let randomTxt = this.add.text(70, 7, "RANDOM", {
fontSize: "14px",
fontFamily: "Roboto",
color: "#ffffff",
});
subFooterContainer.add(randomTxt);

let autoGameBG = this.add.image(210, 2, "autoGameBG").setOrigin(0, 0);
autoGameBG.setDisplaySize(205.23, 26);
subFooterContainer.add(autoGameBG);

// let refreshImg = this.add.image(214, 6, "refreshImg").setOrigin(0, 0);
// preserveAspect(refreshImg, 22, 18);
// subFooterContainer.add(refreshImg);

// let refreshSVG = this.add.image(214, 6, "refreshSVG").setOrigin(0, 0);
// preserveAspect(refreshSVG, 22, 18);
// subFooterContainer.add(refreshSVG);

let demoSprite = this.add.sprite(214, 6, "refreshImg");
demoSprite.setOrigin(0, 0);
demoSprite.setDisplaySize(22, 18);
subFooterContainer.add(demoSprite);

let autoToggleOffImg = this.add.image(264, 7, "autoToggleOffImg").setOrigin(0, 0);
autoToggleOffImg.setDisplaySize(28, 16);
subFooterContainer.add(autoToggleOffImg);

let autoGameTxt = this.add.text(300, 7, "Auto Game", {
fontSize: "12px",
fontFamily: "Roboto",
color: "#ffffff",
});
subFooterContainer.add(autoGameTxt);

//Footer
let footerContainer = this.add.container(7, 455);

let gameFooter = this.add.graphics();
gameFooter.fillStyle(0x000000, .3);
gameFooter.fillRoundedRect(0, 0, 946, 68, 12);
footerContainer.add(gameFooter);

let betPanelBGImg = this.add.image(170, 9, "betPanelBGImg").setOrigin(0, 0);
betPanelBGImg.setDisplaySize(298, 50);
footerContainer.add(betPanelBGImg);

let betINRTxt = this.add.text(232, 16, "Bet INR", {
fontSize: "12px",
fontFamily: "Roboto",
color: "#ffffff",
});
footerContainer.add(betINRTxt);

let customBetFieldImg = this.add.image(184, 30, "customBetFieldImg").setOrigin(0, 0);
customBetFieldImg.setDisplaySize(142, 22);
footerContainer.add(customBetFieldImg);

let betAmountInputField = this.add.text(240, 32, "0.00", {
fontSize: "14px",
fontFamily: "Roboto",
fontStyle: "bold",
color: "#ffffff",
}).setOrigin(0, 0);
footerContainer.add(betAmountInputField);

let minusBtnImg = this.add.image(340, 20, "minusBtnImg").setOrigin(0, 0);
preserveAspect(minusBtnImg, 33, 33);
footerContainer.add(minusBtnImg);

/* // Add the MinesSVG.svg image at the first position
let minesSVG = this.add.image(340, 20, "minesSVG").setOrigin(0, 0).setToTop();
// minesSVG.setDisplaySize(950, 520);
preserveAspect(minesSVG, 33, 33);
footerContainer.add(minesSVG);  */

let betAmountsBtn = this.add.image(380, 18, "betAmountsBtn").setOrigin(0, 0);
preserveAspect(betAmountsBtn, 33, 33);
footerContainer.add(betAmountsBtn);

let plusBtnImg = this.add.image(420, 21, "plusBtnImg").setOrigin(0, 0);
preserveAspect(plusBtnImg, 33, 33);
footerContainer.add(plusBtnImg);

let autoPlayBtn = this.add.image(480, 9, "autoPlayBtn").setOrigin(0, 0);
preserveAspect(autoPlayBtn, 240, 50);
footerContainer.add(autoPlayBtn);

let betBtn = this.add.image(535, 10, "betBtn").setOrigin(0, 0);
betBtn.setDisplaySize(242, 52);
footerContainer.add(betBtn);

let betBtnArrow = this.add.image(554, 22.5, "betBtnArrow").setOrigin(0, 0);
preserveAspect(betBtnArrow, 19, 21);
footerContainer.add(betBtnArrow);

let betBtnTxt = this.add.text(645, 26, "BET", {
fontSize: "14px",
fontFamily: "Roboto",
color: "#ffffff",
});
footerContainer.add(betBtnTxt);

//SubHeader
let subHeaderContainer = this.add.container(268.955, 44);
let subHeader = this.add.graphics();
subHeader.fillStyle(0x000000, .3);
subHeader.fillRoundedRect(0, 0, 422.09, 22, 10);
subHeaderContainer.add(subHeader);

let minesSelectionBG = this.add.image(1, 1.5, "minesSelectionBG").setOrigin(0, 0);
preserveAspect(minesSelectionBG, 138, 20);
subHeaderContainer.add(minesSelectionBG);

let minesSelectionTxt = this.add.text(47, 3, "Mines: ", {
fontSize: "12px",
fontFamily: "Roboto",
color: "#ffffff",
});
let minesSelectionCount = this.add.text(minesSelectionTxt.x + 35, 3, "3", {
fontSize: "12px",
fontFamily: "Roboto",
color: "#ffffff",
});
subHeaderContainer.add(minesSelectionTxt);
subHeaderContainer.add(minesSelectionCount);

let arrowRight = this.add.image(122, 8, "arrow").setOrigin(0, 0);
preserveAspect(arrowRight, 8, 8);
subHeaderContainer.add(arrowRight);

let nextBG = this.add.image(318, 1.5, "nextBG").setOrigin(0, 0);
nextBG.setDisplaySize(102.53, 19);
subHeaderContainer.add(nextBG);

let nextTxt = this.add.text(334, 2, "Next: ", {
fontSize: "14px",
fontFamily: "Roboto",
color: "#343A40",
});
let nextCount = this.add.text(nextTxt.x + 36, 2, "1.10x", {
fontSize: "14px",
fontFamily: "Roboto",
color: "#343A40",
});
subHeaderContainer.add(nextTxt);
subHeaderContainer.add(nextCount);
}
}

export default MainScene;

Dies ist das config.js-Skript :----

Code: Select all

import Phaser from "phaser";
import MainScene from "./mainScene";

const config = {
type: Phaser.WEBGL,
width: 960,
height: 530,
backgroundColor: "#131419",
scene: [MainScene],
scale: {
mode: Phaser.Scale.MAX_ZOOM,
autoCenter: Phaser.Scale.Center.CENTER_BOTH,
},
};

const game = new Phaser.Game(config);
export default game;

Das ist mein Projekt-Build :---
Build