Skip to content

Instantly share code, notes, and snippets.

@photonstorm

photonstorm/phaser3-example.html

Last active February 21, 2024 05:27
Show Gist options
  • Save photonstorm/46cb8fb4b19fc7717dcad514cdcec064 to your computer and use it in GitHub Desktop.
Save photonstorm/46cb8fb4b19fc7717dcad514cdcec064 to your computer and use it in GitHub Desktop.
Download ZIP
Phaser 3 Example
Raw
phaser3-example.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://labs.phaser.io');
this.load.image('sky', 'assets/skies/space3.png');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
this.load.image('red', 'assets/particles/red.png');
}
function create ()
{
this.add.image(400, 300, 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
var logo = this.physics.add.image(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
</script>
</body>
</html>
@tkwk9
Copy link

tkwk9 commented Aug 18, 2023

Hey, this is a nice example to start off with, but can you update line 29 from:

this.load.setBaseURL('http://labs.phaser.io');

to

this.load.setBaseURL('https://labs.phaser.io');

please?

The reason is that, at present, if you've served helloworld.html over an HTTPS connection (I do all dev work over HTTPS, even locally), you'll get resource blocking errors, and none of the images will load (tested in Google Chrome). OTOH if you load the images over HTTPS I believe this will not cause a problem if helloworld.html itself is only served over HTTP.

You can see I've done this at https://gist.github.com/bartread/95b06e2d295f7158b6c110e360d89fbc but, of course, gists don't support PRs or I would have created one. I haven't made any other modifications though, so you could simply copy and paste the entire file content from my gist.

Thanks!

thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment