Charger une image
load.js
const PNG = [
"layer1" ,
"layer2" ,
"layer3" ,
"layer4" ,
"grass",
]
Créer un nouveau composant
component.js
// Ajoutes ici tes propres composants
function background(config) {
const param = {
...config,
background: {
gradient: {
speed: 1,
},
image: {
scaling: 1.4,
movement: 0.1,
angle: 0,
speed: 0,
},
},
};
if (config.background && config.background.gradient)
param.background.gradient = {
...param.background.gradient,
...config.background.gradient,
};
return {
levelWidth: 0,
levelHeight: 0,
layers: [],
add() {
if (config.background) {
for (const e of config.background.images) {
const obj = add([
sprite(e.image, { width: width(), height: height() }),
pos(center()),
scale(),
fixed(),
rotate(),
anchor("center"),
]);
const op = { ...param.background.image, ...e };
this.levelHeight = LEVELS[CURRENT_LEVEL].map.split("\n").length;
this.levelWidth = 0;
for (const e of LEVELS[CURRENT_LEVEL].map.split("\n"))
if (e.length > this.levelWidth) this.levelWidth = e.length;
obj.scaleTo(op.scaling);
obj.width = width();
obj.height = height();
onResize(() => {
obj.width = width();
obj.height = height();
});
this.layers.push({ ...op, ...{ obj: obj } });
}
}
},
update() {
for (const e of this.layers) {
const camera = get("camera", { recursive: true })[0];
if (camera && camera.pos) {
const t = ((time() * e.speed + 0.5) % 1) - 0.5;
const x = width() - (width() / 2) * e.scaling;
const y = height() - (height() / 2) * e.scaling;
const ax = (width() * e.movement) / 2;
const ay = (height() * e.movement) / 2;
const vx =
camera.pos.x / (this.levelWidth * config.tileWidth) - 0.5 * 2;
const vy =
camera.pos.y / (this.levelHeight * config.tileHeight) - 0.5 * 2;
e.obj.pos = vec2(x, y)
.sub(vec2(vx, vy).scale(ax, ay))
.add(
Vec2.fromAngle(e.angle).scale(vec2(width(), height()).scale(t))
);
e.obj.angle = getCamRot();
}
}
if (
config.background &&
config.background.gradient &&
config.background.gradient.colors
) {
const c = config.background.gradient.colors;
const timeNormalized = (time() * param.background.gradient.speed) % 1;
const i = Math.floor(timeNormalized * c.length);
const t = (timeNormalized * c.length) % 1;
const c1 = Color.fromHex(c[i]);
const c2 = Color.fromHex(c[(i + 1) % c.length]);
const r = c1.r + (c2.r - c1.r) * t;
const g = c1.g + (c2.g - c1.g) * t;
const b = c1.b + (c2.b - c1.b) * t;
setBackground(Color.fromArray([r, g, b]));
}
},
};
}
Modifier un objet dans la scène
game.js
scene("game", () => {
// scène dans laquelle se déroulent les niveaux
const config = {
...LEVEL_CONFIG,
...LEVELS[CURRENT_LEVEL].config
}
const utilities = add([
background(config),
multiplayerCamera(),
])
setGravity(3200)
setBackground(config.backgroundColor)
addLevel(LEVELS[CURRENT_LEVEL].map, config)
})
Configurer les niveaux
levelConf.js
const LEVEL_CONFIG = {
// paramètres du niveau
background: {
gradient: {
colors: [
"94d8ff",
"b887c4",
"4a4d8c",
"b887c4",
],
speed: 0.1,
},
images: [
{
image: "layer1",
scaling: 1,
movement: 0.1,
speed: 0.1,
angle: 90,
},
{
image: "layer2",
scaling: 1.6,
movement: 0.1,
},
{
image: "layer3",
scaling: 1.2,
movement: 0.3,
speed: 0.005,
angle: 0,
},
{
image: "layer4",
scaling: 1.6,
movement: 0.4,
},
]
},
tileWidth: 64,
tileHeight: 64,
backgroundColor: "afe1ff",
gravity: 3200,
tiles: {
// listes des objet à placer dans les niveaux
"#": () => [ // player
sprite("bean"),
platformerController(),
alive(),
opacity(),
scale(),
health(1, 4),
area(),
anchor("bot"),
body(),
respawn(),
falling(),
coloring(),
animator(),
],
"=": () => [ // block
sprite("grass"),
area(),
body({ isStatic: true }),
anchor("bot"),
offscreen({ hide: true }),
],
},
}
Arrière plan