Starting first local project needs html?

After being roughly 70% into the .Phaser and JS game lessons, We got instruction on how to make our games on our local PC, great! I installed the Visual Studio Code and followed the instructions to install the live server plugin so I can test my product directly. All worked when importing the tet-game bug invaders, also the live server. But when I tried my first project and made just a simple background, it didnt work. When I looked closer in the test game, I saw that there was not only a javascript file but also a HTML file. I copied the HTML file in my own project and it started to work. But in our lessons I didnt read a single word about HTML, is there any insturction as to why I need this? what is the connection between Javascript, Phaser, HTML. It let me a little bit confused.

Also I tried to import my own background. And it did not work when it was in a map on my pc, but if i took a random background from internet as the path, it worked. Can we not use local files to preload in our games?

Thanks for your help and time :star_struck:

Hey @joeppiej!

HTML is what is used to generate the web page, at least for the language you’re working on. The HTML file will usually have a tag or an ID in the code which allows JavaScript to edit that element and replace it with the game you made. So yes, you definitely need HTML to work with Phaser and JavaScript. I recommend taking the Learn HTML course on Codecademy to get your started.

You were unable to use a local file because Phaser does not allow you to use insecure links which includes file:// I have tried this before and it is quite annoying. I would recommend uploading your background to Imgur or something that would allow you to access the image from an https:// secured link.

1 Like

Okay thx, will upload the pictures first before using them, was surprised it was not working from a local source, but in the end it needs to be uploaded anyway so it will be good to get pracice with it.

Will definitely check out the HTML course after finishing the phaser/javascript game course. But for now I think its enough to create a simple link between my JS file with the HTML site? Or will there be more knowledge necessary when I improve my game?

thx for your answer, made a lot of things clear!

2 Likes

Trying to upload it to imgur and many other picture hosting websites, but dont get it to work. When I try random pics from other sites sometimes it works and sometimes it doesnt. Both .jpg en .png.

Keep getting the black.green square in my game where the img should be.

Are the links you’re using https?

1 Like

Yeay they are, this is my code:

function preload() {

  this.load.image("bg", "https://i.imgur.com/RYh5y5m.jpg")

  this.load.image("btt1", "https://images.unsplash.com/photo-1489875347897-49f64b51c1f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")

}

The first “bg” is not working, the 2nd “btt1” is

I tried using the image path, and the link imgur gave me without the files extension:

" https://imgur.com/RYh5y5m "
https://i.imgur.com/RYh5y5m.jpg

but both dont work.

Thx! Joep

I uploaded the image to google drive… does this link work?

https://lh4.googleusercontent.com/O8QLr87mnh8PIsdzZLUV3ZRKsJOT0CPxaifWxLEB4zmkpgnsgUym7dcKaVi01TLjpW0ySh7XB26yFUV9ADQj=w1299-h673-rw

doesnt work unfortunately :frowning:

i cant open your link in a browser:

403. That’s an error.

Your client does not have permission to get URL /O8QLr87mnh8PIsdzZLUV3ZRKsJOT0CPxaifWxLEB4zmkpgnsgUym7dcKaVi01TLjpW0ySh7XB26yFUV9ADQj=w1299-h673-rw from this server. (Client IP address: 46.11.xx2.xx9)

Forbidden That’s all we know.

and also when I tried to copy it in my text editor it didnt work.

Interesting. You’re right though, it wouldn’t work… hmm, have you tried any other ways to upload pictures?

Go ahead and try this link as well:

(https://serving.photos.photobox.com/55915924c52931244c9bc2e0aec22d69426b5fb865dcafb1944f87e50010ff1afbb782bc.jpg) Remove the parentheses

If that doesn’t work, send me your code.

I tried a lot of hosting websites, and none of them worked until I found postimage.org just a minutes ago and it seemed to work. Also your link is working! :ok_hand:

weird that so many other sites dont work, but all is good now, thanks!

1 Like