Wczytane tło się nie wyświetla - Phaser JS

pytanie zadane 30 grudnia 2022 w JavaScript przez xTMx3 Obywatel (1,560 p.)

Witam,

w dalszym ciągu mierzę się ze stworzeniem swojego pierwszego projektu w Phaserze, ale znowu pojawiło się coś, z czym nie mogę sobie poradzić. Mam utworzony plik/scenę "GameScene" i chciałem spróbować dodać w nim jakieś tło i sprawdzić, czy wyświetli się po zapisaniu. Efekt jest taki, że zamiast tła, na środku ekranu pojawia się zielony kwadrat z jedną przekątną. Nie wiem do końca co to oznacza, bo to moje pierwsze potyczki z Phaserem, a konsola po wciśnięciu F12 również nic nie pokazuje (jedynie mogę się domyślać, że może moje tło z jakiegoś powodu jest niewidoczne dla programu).

Pliki w folderze z grą mam ułożone w ten sposób:

Kody w plikach index.html, main.js oraz GameScene.js wyglądają tak:

<!DOCTYPE html>
<html>
    <head>
        <title>Phaser Game</title>
        <script type="text/javascript" src="phaser.min.js"></script>
        <script type="text/javascript" src="scenes/GameScene.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
    </body>
</html>

import Phaser from 'phaser'
import GameScene from './scenes/GameScene'

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: [GameScene]
}

export default new Phaser.Game(config);

import Phaser from 'phaser'

export default class GameScene extends Phaser.Scene
{
    constructor()
    {
        super("game");
    }
    preload()
    {
        this.load.image('bground', 'assets/bground.png');
    }
    create()
    {
        this.add.image(400, 300, 'bground');
    }
}

Mógłby ktoś powiedzieć mi dlaczego tło, które próbuję wstawić nie wyświetla się i co zrobić, aby to naprawić?

Będę wdzięczny za wszlkie odpowiedzi.

1	komentarz 30 grudnia 2022 przez ScriptyChris Mędrzec (190,190 p.) Czy sprawdzałeś w zakładce Network devtoolsów przeglądarki, czy ten obrazek jest w ogóle pobierany, a jeśli tak, to z ostatecznie jakiej ścieżki?

komentarz 30 grudnia 2022 przez xTMx3 Obywatel (1,560 p.)

Nie jestem pewien w 100% czy jest w porządku i czy w ogóle patrzę w odpowiednim miejscu, ale wygląda to tak:

1	komentarz 30 grudnia 2022 przez ScriptyChris Mędrzec (190,190 p.) Tak i sprawdź co jest w zakładkach "Podgląd" oraz "Odpowiedź" - powinien pokazać się docelowy obrazek.

komentarz 30 grudnia 2022 przez xTMx3 Obywatel (1,560 p.)

W "Podgląd" widzę jedynie biały, pusty kwadrat, a w "Odpowiedź" pokazuje mi się kod pliku "index.html"

1	komentarz 30 grudnia 2022 przez ScriptyChris Mędrzec (190,190 p.) Hmm, masz do tego jakiś backend - co serwuje Ci pliki?

komentarz 30 grudnia 2022 przez xTMx3 Obywatel (1,560 p.)

Nie do końca wiem co masz na myśli, więc po prostu opiszę co robiłem od początku i co się skąd wzięło.

Znalazłem jakiś poradnik na YouTube i żeby zacząć od samego początku, robiłem prawie wszystko tak jak pokazywał autor. Tutaj link do tego poradnika:

https://www.youtube.com/watch?v=f7c9mM7w2fc&t=234s

Pominąłem krok z instalacją VS Code i Node JS, bo już miałem je zainstalowane, więc najpierw stworzyłem sobie folder z grą, potem w nim zrobiłem plik index.html, następnie w VS Code uruchomiłem terminal i wpisałem npm init -y i plik, który utworzyła mi ta komenda zmodyfikowałem w ten sposób:

{
  "name": "gameproject",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "parcel index.html -p 8000"
  },
  "keywords": [],
  "author": "...", // tutaj wpisalem swoje imie i nazwisko
  "license": "ISC",
  "dependencies": {
    "main.js": "^0.0.1",
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-clean-easy": "^1.0.2",
    "parcel-plugin-static-files-copy": "^2.6.0",
    "phaser": "^3.55.2",
    "src": "^1.1.2"
  },
  "parcelCleanPaths": [
    "dist"
  ],
  "staticFiles": {
    "staticPath": "public"
  }
}

To jest chyba jedyny krok, który zrobiłem trochę inaczej niż autor poradnika. Z jakiegoś powodu, kiedy robiłem tak samo jak na filmie nie chciało mi to działać, więc zamiast tego przekopiowałem znaczną część zawartości tak samo nazywającego się pliku z materiałów, które miałem udostępnione na zajęciach na swojej uczelni. Usunąłem jedynie te linijki, które wydały mi się zbędne.

Kiedy już miałem ten plik zmodyfikowany wpisałem npm install i poczekałem aż skończy się instalacja. Jak już dobiegła końca to utworzyłem sobie resztę folderów i plików. Na końcu, bazując na wcześniej wspomnianym tutorialu, napisałem te 3 pliki, których kod wkleiłem w pytaniu, wpisałem w terminalu npm run start i w przeglądarce wpisałem http://localhost:8000

To jest cały proces jaki wykonałem.

1	komentarz 30 grudnia 2022 przez ScriptyChris Mędrzec (190,190 p.) Dobrze widzę, że w pliku package.json ustawiłeś, że statyczne pliki są serwowane z folderu "public"? Jeśli tak, to czy masz taki folder w strukturze projektu i czy w nim masz umieszczony obrazek, który chcesz wyświetlić?

komentarz 31 grudnia 2022 przez xTMx3 Obywatel (1,560 p.)

Nie do końca rozumiem jak działa ten plik i co oznczają poszczególne linijki w nim przez co nie wiedziałem, że to o to chodziło. Stworzyłem własnie ten folder "public" i przeniosłem do niego assets i teraz już działa.

Ogromnie dziękuję za pomoc, sam pewnie nigdy bym tego nie naprawił.

1 odpowiedź

odpowiedź 30 grudnia 2022 przez VBService Ekspert (256,600 p.)

Ten zapis IMHO

this.load.image('bground', 'assets/bground.png');

odnosi się do

a Ty masz

więc, chyba

this.load.image('bground', '../../assets/bground.png');

komentarz 30 grudnia 2022 przez xTMx3 Obywatel (1,560 p.)

Spróbowałem zrobić to tak jak napisałeś, ale dalej jest to samo. Próbowałem też:

this.load.image('bground', '../assets/bground.png');

oraz

this.load.image('bground', './assets/bground.png');

Ale to też nie działa.

komentarz 30 grudnia 2022 przez VBService Ekspert (256,600 p.)
edycja 30 grudnia 2022 przez VBService

Dla testu spróbuj

|-- src
|-- scenes
|-- GameScene.js
|-- bground.png

this.load.image('bground', 'bground.png');

lub

|-- src
|-- bground.png
|-- scenes
|-- GameScene.js

this.load.image('bground', 'bground.png');

komentarz 30 grudnia 2022 przez xTMx3 Obywatel (1,560 p.)

Również nie zadziałało.

Podobne pytania

0 głosów

0 odpowiedzi 164 wizyt

Zmiana scen w Phaser 3 (JS)

pytanie zadane 5 stycznia 2023 w JavaScript przez xTMx3 Obywatel (1,560 p.)

0 głosów

0 odpowiedzi 176 wizyt

Assety Phaser JS

pytanie zadane 26 grudnia 2022 w JavaScript przez xTMx3 Obywatel (1,560 p.)

+32 głosów

17 odpowiedzi 3,281 wizyt

Projekt: Phaser.js od zera do gry w 72h [JavaScript - Game Dev - Tutorial]

pytanie zadane 27 czerwca 2015 w JavaScript przez Mizukage Pasjonat (21,750 p.)

Wczytane tło się nie wyświetla - Phaser JS

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci