1

На спрайтах отрисован персонаж, смотрящий вправо. Нужно чтобы при движении влево, он начинал смотреть в левую сторону, как этого добиться без изменения спрайтов? Какие махинации сделать с канвасом, чтобы он не повернул спрайт, а именно отзеркалил его? Код:

const players = {
    first:{
        x:SIZE*2,
        y:(HEIGHT/SIZE-2)*SIZE,
        width: SIZE-9,
        height: SIZE-9,
        color:'maroon',
        weight: 0.05,
        ableToJump: false,
        direction:'right',
        states:{
            jump:{
                image: {
                    left:firstImages.jump,
                    right:firstImages.jump
                },
                frame: 0,
                countFrames: 1,
            },
            idle:{
                image: firstImages.idle,
                frame: 0,
                countFrames: 11
            },
            current:{
                image: firstImages.jump,
                frame: 0,
                countFrames: 1,
            },
        },
        collision:{
            top: false,
            bottom:false,
            left:false,
            right:false
        },
        gravity:{
            y:GRAVITY
        },
        speed: {
            x:0,
            y:0
        },
        draw()
        {
            ctx.save();
            ctx.beginPath();
            // ctx.fillStyle = this.ableToJump?this.color:'green';
            // ctx.fillRect(this.x,this.y,this.width,this.height);
            if(this.ableToJump)
            {

                ctx.save()

    var rad = 180 * Math.PI / 180;

    ctx.translate(this.x + this.width / 2, this.y + this.height / 2);

    ctx.rotate(rad);


                // ctx.drawImage(this.states.idle.image,this.x,this.y,this.width,this.height);
                ctx.drawImage(this.states.idle.image,this.states.idle.frame*32,0,32,32,this.x-10,this.y-10,this.width+10,this.height+10);
                if(FRAME%3==0)
                {
                this.states.idle.frame = this.states.idle.frame+1>=this.states.idle.countFrames?0:this.states.idle.frame+=1;
                }
            }
            else{
                ctx.drawImage(this.states.jump.image.left,0,0,32,32,this.x-10,this.y-10,this.width+10,this.height+10);
            }
           
            ctx.closePath();
    ctx.restore();

        },
        update(){
            let ghostPlayer = copyObject(this);
            if(BUTTONS.w && ghostPlayer.ableToJump)
            {
                if(ghostPlayer.abletoDoubleJump)
                {
                    ghostPlayer.abletoDoubleJump = false;
                    ghostPlayer.speed.y = -25;
                }
                ghostPlayer.ableToJump = false;
                ghostPlayer.speed.y = -25;
            }
            if(BUTTONS.s)
            {
            }
            if(BUTTONS.a)
            {

                ghostPlayer.direction='left';
                ghostPlayer.speed.x = -6;
            }
            if(BUTTONS.d)
            {
                ghostPlayer.direction='right';
                ghostPlayer.speed.x = 6;
            }
            ghostPlayer.x = ghostPlayer.x + ghostPlayer.speed.x;
            ghostPlayer.y = ghostPlayer.y + ghostPlayer.speed.y + ghostPlayer.gravity.y;
            ghostPlayer.collision.top = ghostPlayer.collision.bottom = ghostPlayer.collision.left = ghostPlayer.collision.right = false;
            ghostPlayer = collisionWithCanvas(ghostPlayer);
            ghostPlayer = collisionWithBlocks(this,ghostPlayer);
            ghostPlayer = calculateCollisions(ghostPlayer);
            this.x = ghostPlayer.x; this.y = ghostPlayer.y;
            this.speed.x = ghostPlayer.speed.x; this.speed.y = ghostPlayer.speed.y;
            this.collision = ghostPlayer.collision; this.ableToJump = ghostPlayer.ableToJump;
            this.direction = ghostPlayer.direction;
            this.gravity.y = ghostPlayer.gravity.y;
            this.speed.y = this.speed.y*0.85;
            this.speed.x = this.speed.x*0.85;
            console.log(this.direction);
        }
    }
};

Не знаю, нужен ли тут код...

Заранее спасибо!

4
  • 2
    Я делал ctx.scale(-1, 1) если по горизонтали отзеркалить надо. Конкретно по вашему коду разбираться надо))
    – Leonid
    19 июн 2021 в 14:39
  • 2
    Проблема в том, что опорная точка также при этом может уйти если элемент спрайта не на условной оси находится.
    – Leonid
    19 июн 2021 в 14:45
  • 2
    @Leonid, вторая координата за вертикаль как раз отвечает. Кроме того можно выбрать точку относительно которой будет применяться
    – Grundy
    19 июн 2021 в 15:08
  • 2
    @Grundy все верно, поэтому я строки путей (по типу SVG) формировал от условного центра этого пути. И если надо было отзеркалить или масштабировать, то получаю ожидаемый результат. А так у него просто исчезнет картинка и он не поймет что произошло)))
    – Leonid
    19 июн 2021 в 15:13

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Посмотрите другие вопросы с метками или задайте свой вопрос.