Skip to content

Instantly share code, notes, and snippets.

@FylmTM
Created April 13, 2020 13:07
Show Gist options
  • Save FylmTM/3b36d2d8572211ec55254e8b4652e71e to your computer and use it in GitHub Desktop.
Save FylmTM/3b36d2d8572211ec55254e8b4652e71e to your computer and use it in GitHub Desktop.
Phaser/ Resize
import Phaser from "phaser";
export class HelloWorldScene extends Phaser.Scene {
private logo: null | Phaser.Physics.Arcade.Image = null;
constructor() {
super("hello-world");
}
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");
}
create() {
this.scale.on("resize", this.resize, this);
this.add.image(400, 300, "sky");
const particles = this.add.particles("red");
const emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: "ADD",
});
this.logo = this.physics.add.image(400, 100, "logo");
this.logo.setVelocity(100, 200);
this.logo.setBounce(1, 1);
this.logo.setCollideWorldBounds(true);
emitter.startFollow(this.logo);
}
resize(gameSize, baseSize, displaySize, resolution) {
// const width = gameSize.width;
// const height = gameSize.height;
// this.cameras.resize(width, height);
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Game</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#game {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="game"></div>
<script src="main.ts"></script>
</body>
</html>
import Phaser from "phaser";
import { HelloWorldScene } from "./scenes/HelloWorldScene";
import ScaleModes = Phaser.Scale.ScaleModes;
const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
backgroundColor: '#2dab2d',
physics: {
default: "arcade",
arcade: {
gravity: { y: 200 },
},
},
scale: {
mode: ScaleModes.RESIZE,
parent: 'game',
width: '100%',
height: '100%',
},
scene: [HelloWorldScene],
};
export default new Phaser.Game(config);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment