Computer Graphics & Visualization @ufrj.br
Published
Edited
Aug 25, 2022
1 star
Phaser = require("phaser")
canvas = htl.html`<canvas width=800 height=600>`
//
// This cell reproduces the contents of the <script> tag of
// https://phaser.io/tutorials/getting-started-phaser3/part5
// with the adaptations described above.
//
{
var config = {
type: Phaser.CANVAS, // MODIFIED
width: 800,
height: 600,
canvas, // INCLUDED!
physics: {
default: "arcade",
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.setBaseURL("https://labs.phaser.io"); // MODIFIED!
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, 100);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
