Почему вы не загружаете изображения в Phaser? - PullRequest
Новая
       9

Почему вы не загружаете изображения в Phaser?

0 голосов
/ 20 декабря 2018

Я пытаюсь загрузить изображения в Phaser для создания приложения.

Я создал сервер с помощью node.js, но они не загружают изображения, он загружает черный фон с квадратом вцентр.

Я редактирую вопрос:

Я добавил HTML-код, где он называется Phaser.Phaser установите его с помощью npm и работайте идеально, как вы пробовали консоль.Я показываю изображение консоли в сети, как они предложили.Я надеюсь, что это поможет компаньонам быть в состоянии помочь мне, если я должен добавить больше, они должны просто сказать мне. изображение консоли

Инспектор Chrome не выдает никаких ошибок, он показывает, что Phaser обычно заряжается.Я несколько раз безуспешно менял конфигурацию своего сервера, и наконец использовал тот, который видел на другом сайте.

Это мой файл server.js и код, который должен быть загружен. 

const http = require('http')
const fs = require('fs')
const path = require('path')

http.createServer(function (request, response) {
    console.log('request ', request.url)

    var filePath = '.' + request.url
    if (filePath == './') {
        filePath = './index.html'
    }

    var extname = String(path.extname(filePath)).toLowerCase()
    var mimeTypes = {
        '.html': 'text/html',
        '.js': 'text/javascript',
        '.css': 'text/css',
        '.json': 'application/json',
        '.png': 'image/png',
        '.jpg': 'image/jpg',
        '.gif': 'image/gif',
        '.wav': 'audio/wav',
        '.mp4': 'video/mp4',
        '.woff': 'application/font-woff',
        '.ttf': 'application/font-ttf',
        '.eot': 'application/vnd.ms-fontobject',
        '.otf': 'application/font-otf',
        '.svg': 'application/image/svg+xml'
    }

    var contentType = mimeTypes[extname] || 'application/octet-stream'

    fs.readFile(filePath, function(error, content) {
        if (error) {
            if(error.code == 'ENOENT') {
                fs.readFile('./404.html', function(error, content) {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8')
                })
            }
            else {
                response.writeHead(500);
                response.end('Lo sentimos, consulte con el administrador del sitio para el error: '+error.code+' ..\n')
                response.end()
            }
        }
        else {
            response.writeHead(200, { 'Content-Type': contentType })
            response.end(content, 'utf-8')
        }
    })

}).listen(3000);
console.log('server corriendo en el puerto 3000')

Все файлы находятся в одной папке, потому что у меня были изображения и HTML-файлы в разных папках, но это тоже не работало.На сайте я нашел несколько вопросов, похожих на мои, но ни один из них не совпадает, и я не нашел в них решения.

Можете ли вы дать мне какое-либо представление, почему изображение не загружается?

Спасибо, я надеюсь показать достаточно и четко объяснить мои цели.

Редактировать: Я показываю вам структуру папок моего проекта:

ВОсновная папка проекта - это файлы package.json, server.js и папка с изображениями и файлом index.html 

Phaser-tuto1 {

  package.json
  server.js
  public(folder) [

      -index.html
      -sky.png
      -platform-png
      -start.png
      -bomb.png
      -dude.png
   ]
}

. Я надеюсь уточнить, как распределяется мой проект. 

<!doctype html>
<html lang="es">

<head>
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 1</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

    <script type="text/javascript">

        var config = {
            type: Phaser.AUTO,
            width: 800,
            height: 600,
            scene: {
                preload: preload,
                create: create,
                update: update
            }
        };

        var game = new Phaser.Game(config);

        function preload() {
            this.load.image('sky', 'sky.png')

        }

        function create() {
            this.add.image(400, 300, 'sky')
        }

        function update() {
        }

    </script>
</body>
</html>

1 Ответ

0 голосов
/ 08 марта 2019

Я использую экспресс для чего-то подобного, поэтому я на 100% уверен, что это ответ, но без вреда пытаюсь.

this.load.image('sky', 'sky.png') пытается перейти к __dirname / sky.png, который у вас нет 'еще не установлено.В server.js добавьте строку

if (filePath == './sky') { filePath = './sky.png' }

В Phaser вы должны написать:

this.load.image('sky', 'sky')

Iнадеюсь, это поможет.

...