• 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

VPS Starter Arubacloud
0 głosów
105 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 (251,210 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 (251,210 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 123 wizyt
pytanie zadane 5 stycznia 2023 w JavaScript przez xTMx3 Obywatel (1,560 p.)
0 głosów
0 odpowiedzi 93 wizyt
pytanie zadane 26 grudnia 2022 w JavaScript przez xTMx3 Obywatel (1,560 p.)
+32 głosów
17 odpowiedzi 2,509 wizyt

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...