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(0, 0),
scale(),
fixed(),
])
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() / 2 - (width() / 2) * e.scaling
const y = height() / 2 - (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)))
}
}
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