【canvas】精灵类（游戏前置）

游戏内容

1.背景类型（不可动，或整体移动）
2.独立个体类型（独立的动作）
3.可控的动作个体

使用相关方法

1.es6定义类 解决封装问题
2.canvas相关方法（translate，rotate，drawImage）

精灵的需求

1.精灵可复用且互不相关（除了图片的引用，这是必须的）
2.可控（前后左右移动，旋转）

解析

1.canvas中渲染图片，是无法将图片进行旋转，只能将画布进行旋转操作，因此要在canvas渲染出旋转的图片其实是先把画布进行旋转，再加入图片然后在复原画布旋转角度。
2.对图片进行旋转和移动时，这里设定图片中心为原点进行操作。
3.当移动和旋转同时操作时，则要考虑洋葱方案，因为对图片的渲染无论是旋转还是移动，其实都是对画布的操作，因此在正确渲染出图像后，要对画布逆向操作来恢复画布的位置，防止其他图片渲染位置出错
4.精灵的移动有两个坐标轴，世界（画布）坐标轴和精灵本身坐标轴，对精灵的x,y值直接操作是相对于世界坐标轴，精灵本身坐标轴则需要通过旋转角度和每一步的长度进行计算得出

export default class Spirit {
    constructor(p) {
        p = p || {};
        this.x = p['x']||0; // 坐标x
        this.y = p['y']||0; // 坐标y
        this.rotate = p['rotate']||0; // 旋转
        this.width = p['width']||100; // 宽度
        this.height = p['height']||100; // 高度
        this.img = p['img']; // <img>
        
    }

    render(ctx){// ctx是canvas2d画布对象
        ctx.translate(this.x + this.width / 2, this.y + this.height / 2)
        ctx.rotate(this.rotate *  Math.PI / 180 );
        ctx.drawImage(this.img, - this.width / 2, - this.height / 2, this.width, this.height);
        ctx.rotate(- this.rotate *  Math.PI / 180);
        ctx.translate(- this.x - this.width / 2, - this.y - this.height / 2);
    }


    
    move(direct,step){//相对精灵的移动
      /* 
      	direct：String = ‘x’ 左右移动  ,‘y 上下移动
        step：Number  每一步长度
      */
        let rotate = this.rotate *  Math.PI / 180

        if(direct=='y'){
            this.x += step * Math.sin( rotate )
            this.y -= step * Math.cos( rotate )
        }
        if(direct=='x'){
            this.x += step * Math.cos( rotate )
            this.y += step *  Math.sin( rotate )
        }
    }
}

注意点

1.使用render进行渲染
2.世界坐标轴移动操作对象操作x,y值，精灵坐标轴移动使用move方法

最后

以上就是爱听歌飞机为你收集整理的【canvas】精灵类（游戏前置）【canvas】精灵类（游戏前置）的全部内容，希望文章能够帮你解决【canvas】精灵类（游戏前置）【canvas】精灵类（游戏前置）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。