How to config Phaser 3 template with Webpack to use Glitch Assets folder

I’m using the Phaser 3 Webpack 4 template and webpack is not using the Glitch Assets folder. How do I configure the template to use the Glitch Assets folder? The Problem is that:
import logoImg from “./assets/logo.png”;
WORKS but this is not the GLITCH assets folder but just an assets folder in an src folder.
but,

//import marsMapImg from “https://cdn.glitch.com/5946c0e4-5977-405c-ad1d-c71bc52f56f4%2F1024px-Mars_Map.jpeg?v=1578419309540”;
does NOT WORK.
// do i need to change a path in webdev re assets?

Hey, so the problem with the second solution is you’re trying to import from a CDN link which, like you said, won’t work. The assets folder is, from what I understand, a unique thing in Glitch where any images you drop in convert to CDN links. I don’t think there is a way to create a path to images with this setup.

I know the point of webpack is generally to import everything, install a ton of dependences, and not use CDN’s, but you might be best off just linking your images within your project to the CDN links provided.

Can you a post a link to your project?

EDIT: this might be helpful - Public Path | webpack

photonstorm-phaser3-project-template

Thank you for your timely and helpful reply.
It looks like the answer to my question might be in the link you provided (Public Path | webpack) and that I may have to learn how to use the Glitch environment variable folder.

The template uses an assets folder under the src folder rather than the Glitch Assets folder.

photonstorm-phaser3-project-template
Project Site: https://photonstorm-phaser3-project-template.glitch.me

Code: Glitch :・゚✧

mitchy-maize
Project Site: https://mitchy-maize.glitch.me
All of the assets in this project are in the Glitch Assets folder. However, the project is not set up to use ES6 as used in many recent Phaser 3 tutorials. That’s why the photonstorm-phaser3-project-template project was created.

The following code works fine:
this.load.image(‘splashScreen’, ‘https://cdn.glitch.com/dad6f70b-d7f8-4b6b-812a-427943582a20%2Flossy-page1-800px-NRCSOH07012_-Ohio(717402)(NRCS_Photo_Gallery).tif.jpg?v=1574372053041’);

Hey, so I looked at both projects. It looks like you are still converting your project so you’ll be adding those webpack configuration files that come with the Phaser project. In that case the webpack docs will be helpful.

The logo under src/assets is just a logo provided with the Phaser template and you’ll see on line 6 in index.js, the path to the logo image is there. You could move it and just change the path. With webpack, there are common/best practices (for better performance) but sometimes it’s up to you how to organize. As long as you change the paths in the config files accordingly, and files are routed correctly, everything should work.

Webpack might be overkill for what you are trying to build and require more configuration than using something like Vite/React (of course then you’d have to learn React too) or a standard static website (easiest option). But I’m not sure what direction you’re going in with the site. Let us know if you run into issues setting the paths!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.