闲聊js: 实现一个关键的，最小化的，非场景图类型的精灵系统(上)一文中完成了精灵系统，但是还缺乏空间变换和动画runLoop的支持，本篇完成上述需求！
本篇目的:
- 为BLFSprite添加空间变换相关的成员变量
- 为BLFSprite添加beginRender/endRender方法，有利于变换状态的操作
- 增加两个精灵类:BLFGridSprite和BLFDemoSprite
- 在引擎中封装requestAnimationFrame操作，让引擎动起来(遇到了一点问题，花了点时间，还是this指针导致的问题！)
- 动起来，转起来
精灵系统最大的作用是封装动画和渲染操作，让我们添加空间变换方面的内容吧！
- BLFSprite中暂时先添加平移，旋转操作:
class BLFSprite {
constructor(name = '') {
this.typeName = "BASE";
this.name = name;
this.color = "rgba(255,0,0,1)";
//当前精灵的位置坐标
this.x = 0;
this.y = 0;
//当前精灵的旋转角度
this.rotation = 0;
//用于移动原点偏移量
//例如rectSprite的原点在左上角，而我们想旋转的时候以rect中心点进行，此时需要通过使用centerX,centerY进行操作
this.centerX = 0;
this.centerY = 0;
}
}
- BLFSprite中添加beginRender/endRender用于控制空间变换操作和状态:
beginRender(render) {
//将渲染器的变换矩阵归一化
render.resetTransform();
//设置精灵的原点
if (this.x != 0 || this.y != 0)
render.translate(this.x, this.y);
//旋转中心点的设置
if (this.rotation != 0)
if (this.centerX != 0 || this.centerY != 0) {
render.rotateAt(this.centerX, this.centerY, this.rotation);
} else
render.rotate(this.rotation);
}
endRender(render) {
//将渲染器的变换矩阵恢复原始状态
render.resetTransform();
}
- 原来代码BLFSprite default情况下渲染网格背景，现在使用BLFGridSprite精灵做背景，因此基类render成纯虚方法，子类如要显示，必须override!
//虚函数，如有需要，子类需override
//default实现:原本绘制背景，现改成纯虚方法
render(render) {
}
实现BLFGridSprite和BLFDemoSprite:
- BLFGridSprite:
class BLFGridSprite extends BLFSprite {
constructor(name = '') {
//super([基类构造函数参数列表])
super(name);
//this调用父类的成员属性必须在super()调用后才ok！！！！
this.typeName = "GridBackgroud";
}
render(render) {
render.drawGrid('black', 'white', 20, 20);
}
}
- BLFDemoSprite:
class BLFDemoSprite extends BLFSprite {
constructor(center = false, name = '') {
//super([基类构造函数参数列表])
super(name);
//this调用父类的成员属性必须在super()调用后才ok！！！！
this.typeName = "DemoSprite";
this.x = 250;
this.y = 250;
this.rotateSpeed = 1;
this.rect = new Rect(0, 0, 100, 50);
this.lines = [new Point(100, 25), new Point(150, 25)];
//如果center = true
//旋转中心为rect的中心点，否则为rect的左上角
if (center) {
this.centerX = this.rect.width * 0.5;
this.centerY = this.rect.height * 0.5;
}
}
//渲染rect
//粗线渲染朝向标记线
//细线渲染坐标轴
render(render) {
render.drawRect(this.rect, 'blue');
render.pushStates();
render.setLineState(3.0);
render.drawLine(this.lines[0].x, this.lines[0].y, this.lines[1].x, this.lines[1].y, 'green');
render.popStates();
render.drawCoords(this.rect);
}
//运动都在update中进行数值更新
update(msec) {
this.rotation += this.rotateSpeed;
}
}
在引擎中封装requestAnimationFrame，动起来了！
//修改上一节中BLFRender中定义的run函数，让它真正的runLoop起来：
class BLFEngine2D {
run(msec) {
this.updateAll(msec);
this.renderAll();
//调用requestAnimationFrame
requestAnimationFrame((msec) => { this.run(msec) });
/*非箭头函数解决方案
let self = this;
requestAnimationFrame(function(msec) {
self.run(msec);
});
*/
}
}
这个函数花了我一点时间，归根结底还是经典的this指向问题！
- DOM中，使用requestAnimationFrame进行动画操作
- requestAnimationFrame的参数是类型为:
function animate(time)为原型的回调函数 - 但是我这里为了封装到BLFRender2D中，刚开始死活不行，原因是this指向出了问题。
- 解决this指向：箭头函数/let self = this;这两种方式！
测试代码:
<script>
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext('2d');
let engine = new BLFEngine2D(context);
let spr = new BLFRectSprite(new Rect(0, 0, 50, 25), "spRect");
let spr2 = new BLFDemoSprite();
spr2.x = 400; //调整位置
spr2.rotateSpeed = -1; //逆时针
engine.sprMgr.addSprite(new BLFGridSprite("background"));
engine.sprMgr.addSprite(spr);
engine.sprMgr.addSprite(spr2); //逆时针左上角旋转
engine.sprMgr.addSprite(new BLFDemoSprite(true)); //顺时针中心旋转
//引擎进入loop
engine.run();
</script>
demoSprite.png
htmlpreview.github.io/?https://github.com/jackyblf/BLF_JS_Demos/blob/master/spritesystemtest.html
到目前为止，一个可演示用的渲染系统和简单的非场景图类型的动画精灵系统已经完成，下一篇进入:动画、数学与碰检篇章
