CHANNELS:

All
A
character problem
General
ArthurSt posted 2 years ago

I'm about halfway through video 1 of chapter "Conversations with other characters", everything was going well but my other character won't appear, i.e. it's only the first one sprite of the "characters" table which is displayed but not the others, can you tell me what the problem is, here is my code concerned :


const charactersMap = []
for (let i = 0; i < charactersMapData.length; i += 70) {
    charactersMap.push(charactersMapData.slice(i, 70 + i)) } 
const offset = {
    x: -500,
    y: -570 
}



const boyImg = new Image()
boyImg.src = "../images/pnj/boy.png"

const characters = []
charactersMap.forEach((row, i) => {
    row.forEach((symbol, j) => {
        if (symbol === 1062)     
           characters.push(
                new Sprite ({
                    position: {
                        x: j * Boundary.width + offset.x,
                        y: i * Boundary.height + offset.y
                    },
                    image: boyImg,
                    frames: {
                        max: 4,
                        hold: 10
                    }
                })
            )
    })
})



const boundaries = [];    

 const image = new Image();
image.src = '../images/map/OrthogameStyleMap.png';

const foregroundImage = new Image(); foregroundImage.src = '../images/map/foregroundObjects.png';

const playerDownImage = new Image();
playerDownImage.src = '../images/player/garcon/playerDown.png';

const playerUpImage = new Image();
playerUpImage.src = '../images/player/garcon/playerUp.png';

const playerLeftImage = new Image();
playerLeftImage.src = '../images/player/garcon/playerLeft.png';

const playerRightImage = new Image();
playerRightImage.src = '../images/player/garcon/playerRight.png';

const logoImage = new Image();
logoImage.src = "../images/map/logoOrthogamePre-alphaV1.png";

const interiorBackgroundImage = new Image()
interiorBackgroundImage.src = "../images/map/interior.png"

const logo = new Sprite({
    position: {
        x: 0,
        y: 0
    },
    image: logoImage
})

const player = new Sprite({
    position : {
        x: canvas.width / 2 - 192 /4 / 2,
        y: canvas.height / 2 - 68 / 2
    },
    image: playerDownImage,
    frames: {
        max : 4
    },
    sprites: {
        up: playerUpImage,
        left: playerLeftImage,
        down: playerDownImage,
        right: playerRightImage
    }
})

const interiorBackground = new Sprite({position: {
        x: -450,
        y: -835
    },
    image: interiorBackgroundImage,
    opacity: 0
})

const background = new Sprite({
    position: { 
        x: offset.x,
        y: offset.y
    },
    image: image
});

const foreground = new Sprite({
    position: { 
        x: offset.x,
        y: offset.y
    },
    image: foregroundImage });  const keys = {
    ArrowDow:{
        pressed: false
    },
    ArrowUp:{
        pressed: false
    },
    ArrowRight:{
        pressed: false
    },
    ArrowLeft:{
        pressed: false
    }, 
}

const moveables = [background, ...boundaries, foreground, ...doors, ...iDoors, ...characters] 
const renderables = [background, player, ...characters, foreground]  


function animate() {

    const animationId = window.requestAnimationFrame(animate)

    renderables.forEach(renderable => {
        renderable.draw()
    })
A
ArthurSt posted 2 years ago
Best Reply

I'm sorry but it's ok I solved the bug :)

1

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

Providing the lift to launch your development career

© 2025 Chris Courses. All rights reserved.