• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
135 wizyt
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ź

0 głosów
odpowiedź 30 grudnia 2022 przez VBService Ekspert (254,490 p.)

Ten zapis IMHO

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

odnosi się do

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

 

a Ty masz

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

 

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 (254,490 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 133 wizyt
pytanie zadane 5 stycznia 2023 w JavaScript przez xTMx3 Obywatel (1,560 p.)
0 głosów
0 odpowiedzi 110 wizyt
pytanie zadane 26 grudnia 2022 w JavaScript przez xTMx3 Obywatel (1,560 p.)
+32 głosów
17 odpowiedzi 2,642 wizyt

92,669 zapytań

141,567 odpowiedzi

320,033 komentarzy

62,034 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...