CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化spriteRenderer渲染方法

Browse Source
This commit is contained in:
yhh
2020-07-08 18:12:17 +08:00
parent 299c1b8e7d
commit aea50926a9
25 changed files with 607 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
source/src/ECS/Components/Camera.ts
View File

@@ -6,6 +6,7 @@ class Camera extends Component {
private _minimumZoom = 0.3;
private _maximumZoom = 3;
private _position: Vector2 = Vector2.zero;
/**
* 如果相机模式为cameraWindow 则会进行缓动移动
* 该值为移动速度
@@ -67,11 +68,24 @@ class Camera extends Component {
}
public get position(){
return this.entity.position;
return this._position;
}
public set position(value: Vector2){
this.entity.position = value;
this._position = value;
}
public get x(){
return this._position.x;
}
public set x(value: number){
this._position.x = value;
}
public get y(){
return this._position.y;
}
public set y(value: number){
this._position.y = value;
}
constructor() {

17
source/src/ECS/Components/Physics/Colliders/BoxCollider.ts
View File

@@ -8,12 +8,16 @@ class BoxCollider extends Collider {
this.setWidth(value);
}
/**
* 设置BoxCollider的宽度
* @param width
*/
public setWidth(width: number): BoxCollider{
this._colliderRequiresAutoSizing = false;
let box = this.shape as Box;
if (width != box.width){
// 更新框，改变边界，如果我们需要更新物理系统中的边界
box.updateBox(width, box.height);
this._isPositionDirty = true;
if (this.entity && this._isParentEntityAddedToScene)
Physics.updateCollider(this);
}
@@ -29,17 +33,24 @@ class BoxCollider extends Collider {
this.setHeight(value);
}
/**
* 设置BoxCollider的高度
* @param height
*/
public setHeight(height: number){
this._colliderRequiresAutoSizing = false;
let box = this.shape as Box;
if (height != box.height){
// 更新框，改变边界，如果我们需要更新物理系统中的边界
box.updateBox(box.width, height);
this._isPositionDirty = true;
if (this.entity && this._isParentEntityAddedToScene)
Physics.updateCollider(this);
}
}
/**
* 零参数构造函数要求RenderableComponent在实体上，这样碰撞器可以在实体被添加到场景时调整自身的大小。
*/
constructor(){
super();
@@ -52,8 +63,8 @@ class BoxCollider extends Collider {
this._colliderRequiresAutoSizing = false;
let box = this.shape as Box;
if (width != box.width || height != box.height){
// 更新框，改变边界，如果我们需要更新物理系统中的边界
box.updateBox(width, height);
this._isPositionDirty = true;
if (this.entity && this._isParentEntityAddedToScene)
Physics.updateCollider(this);
}

81
source/src/ECS/Components/Physics/Colliders/Collider.ts
View File

@@ -1,32 +1,41 @@
abstract class Collider extends Component{
/** 对撞机的基本形状 */
public shape: Shape;
/** 在处理冲突时，physicsLayer可以用作过滤器。Flags类有帮助位掩码的方法。 */
public physicsLayer = 1 << 0;
/** 如果这个碰撞器是一个触发器，它将不会引起碰撞，但它仍然会触发事件 */
public isTrigger: boolean;
public registeredPhysicsBounds: Rectangle;
public shouldColliderScaleAndRotationWithTransform = true;
/**
* 这个对撞机在物理系统注册时的边界。
* 存储这个允许我们始终能够安全地从物理系统中移除对撞机，即使它在试图移除它之前已经被移动了。
*/
public registeredPhysicsBounds: Rectangle = new Rectangle();
/** 如果为true，碰撞器将根据附加的变换缩放和旋转 */
public shouldColliderScaleAndRotateWithTransform = true;
/** 默认为所有层。 */
public collidesWithLayers = Physics.allLayers;
public _localOffsetLength: number;
public _isPositionDirty = true;
public _isRotationDirty = true;
/** 标记来跟踪我们的实体是否被添加到场景中 */
protected _isParentEntityAddedToScene;
protected _colliderRequiresAutoSizing;
protected _localOffset: Vector2 = new Vector2(0, 0);
/** 标记来记录我们是否注册了物理系统 */
protected _isColliderRegistered;
public get bounds(): Rectangle {
if (this._isPositionDirty || this._isRotationDirty){
this.shape.recalculateBounds(this);
this._isPositionDirty = this._isRotationDirty = false;
}
return this.shape.bounds;
// this.shape.recalculateBounds(this);
let bds = this.entity.getBounds();
return new Rectangle(bds.x, bds.y, bds.width, bds.height);
}
public get localOffset(){
return this._localOffset;
return new Vector2(this.x, this.y);
}
/**
* 将localOffset添加到实体。获取碰撞器的最终位置。这允许您向一个实体添加多个碰撞器并分别定位它们。
*/
public set localOffset(value: Vector2){
this.setLocalOffset(value);
}
@@ -34,20 +43,27 @@ abstract class Collider extends Component{
public setLocalOffset(offset: Vector2){
if (this._localOffset != offset){
this.unregisterColliderWithPhysicsSystem();
this._localOffset = offset;
this.$setX(offset.x);
this.$setY(offset.y);
this._localOffsetLength = this._localOffset.length();
this._isPositionDirty = true;
this.registerColliderWithPhysicsSystem();
}
}
/**
* 父实体会在不同的时间调用它(当添加到场景，启用，等等)
*/
public registerColliderWithPhysicsSystem(){
// 如果在将我们添加到实体之前更改了origin等属性，则实体可以为null
if (this._isParentEntityAddedToScene && !this._isColliderRegistered){
Physics.addCollider(this);
this._isColliderRegistered = true;
}
}
/**
* 父实体会在不同的时候调用它(从场景中移除，禁用，等等)
*/
public unregisterColliderWithPhysicsSystem(){
if (this._isParentEntityAddedToScene && this._isColliderRegistered){
Physics.removeCollider(this);
@@ -55,6 +71,10 @@ abstract class Collider extends Component{
this._isColliderRegistered = false;
}
/**
* 检查这个形状是否与物理系统中的其他对撞机重叠
* @param other
*/
public overlaps(other: Collider){
return this.shape.overlaps(other.shape);
}
@@ -85,22 +105,20 @@ abstract class Collider extends Component{
console.error("Only box and circle colliders can be created automatically");
}
let renderable = this.entity.getComponent<RenderableComponent>(RenderableComponent);
if (renderable){
let renderbaleBounds = renderable.bounds;
let bounds = this.entity.getBounds();
let renderbaleBounds = new Rectangle(bounds.x, bounds.y, bounds.width, bounds.height);
// 这里我们需要大小*反尺度，因为当我们自动调整碰撞器的大小时，它需要没有缩放的渲染
let width = renderbaleBounds.width / this.entity.scale.x;
let height = renderbaleBounds.height / this.entity.scale.y;
// 这里我们需要大小*反尺度，因为当我们自动调整碰撞器的大小时，它需要没有缩放的渲染
let width = renderbaleBounds.width / this.entity.scale.x;
let height = renderbaleBounds.height / this.entity.scale.y;
if (this instanceof BoxCollider){
let boxCollider = this as BoxCollider;
boxCollider.width = width;
boxCollider.height = height;
if (this instanceof BoxCollider){
let boxCollider = this as BoxCollider;
boxCollider.width = width;
boxCollider.height = height;
// 获取渲染的中心，将其转移到本地坐标，并使用它作为碰撞器的localOffset
this.localOffset = Vector2.subtract(renderbaleBounds.center, this.entity.position);
}
// 获取渲染的中心，将其转移到本地坐标，并使用它作为碰撞器的localOffset
this.localOffset = Vector2.subtract(renderbaleBounds.center, this.entity.position);
}
}
@@ -115,19 +133,14 @@ abstract class Collider extends Component{
public onEnabled(){
this.registerColliderWithPhysicsSystem();
this._isPositionDirty = this._isRotationDirty = true;
}
public onDisabled(){
this.unregisterColliderWithPhysicsSystem();
}
public update(){
let spriteRenderer = this.entity.getComponent(SpriteRenderer);
// 将显示目标设置为碰撞盒
if (spriteRenderer){
this.bounds.x = spriteRenderer.x;
this.bounds.y = spriteRenderer.y;
}
public onEntityTransformChanged(comp: TransformComponent){
if (this._isColliderRegistered)
Physics.updateCollider(this);
}
}

16
source/src/ECS/Components/Physics/Mover.ts
View File

@@ -1,3 +1,10 @@
/**
* 辅助类说明了一种处理移动的方法，它考虑了包括触发器在内的所有冲突。
* ITriggerListener接口用于管理对移动过程中违反的任何触发器的回调。
* 一个物体只能通过移动器移动。要正确报告触发器的move方法。
*
* 请注意，多个移动者相互交互将多次调用ITriggerListener。
*/
class Mover extends Component {
private _triggerHelper: ColliderTriggerHelper;
@@ -5,6 +12,10 @@ class Mover extends Component {
this._triggerHelper = new ColliderTriggerHelper(this.entity);
}
/**
* 计算修改运动矢量的运动，以考虑移动时可能发生的碰撞
* @param motion
*/
public calculateMovement(motion: Vector2){
let collisionResult = new CollisionResult();
@@ -16,9 +27,11 @@ class Mover extends Component {
for (let i = 0; i < colliders.length; i ++){
let collider = colliders[i];
// 不检测触发器
if (collider.isTrigger)
continue;
// 获取我们在新位置可能发生碰撞的任何东西
let bounds = collider.bounds;
bounds.x += motion.x;
bounds.y += motion.y;
@@ -28,13 +41,16 @@ class Mover extends Component {
for (let j = 0; j < neighbors.length; j ++){
let neighbor = neighbors[j];
// 不检测触发器
if (neighbor.isTrigger)
continue;
let _internalcollisionResult = collider.collidesWith(neighbor, motion);
if (_internalcollisionResult){
// 如果碰撞 则退回之前的移动量
motion = Vector2.subtract(motion, _internalcollisionResult.minimumTranslationVector);
// 如果我们碰到多个对象，为了简单起见，只取第一个。
if (_internalcollisionResult.collider){
collisionResult = _internalcollisionResult;
}

26
source/src/ECS/Components/SpriteRenderer.ts
View File

@@ -1,25 +1,12 @@
class SpriteRenderer extends RenderableComponent {
private _origin: Vector2;
private _sprite: Sprite;
protected bitmap: egret.Bitmap;
public get origin(){
return this._origin;
}
public set origin(value: Vector2){
this.setOrigin(value);
}
public setOrigin(origin: Vector2){
if (this._origin != origin){
this._origin = origin;
}
return this;
}
/** 应该由这个精灵显示的精灵。当设置时，精灵的原点也被设置为匹配精灵.origin。 */
/** 应该由这个精灵显示的精灵 */
public get sprite(): Sprite{
return this._sprite;
}
/** 应该由这个精灵显示的精灵。当设置时，精灵的原点也被设置为匹配精灵.origin。 */
/** 应该由这个精灵显示的精灵 */
public set sprite(value: Sprite){
this.setSprite(value);
}
@@ -27,7 +14,10 @@ class SpriteRenderer extends RenderableComponent {
public setSprite(sprite: Sprite): SpriteRenderer{
this.removeChildren();
this._sprite = sprite;
if (this._sprite) this._origin = this._sprite.origin;
if (this._sprite) {
this.anchorOffsetX = this._sprite.origin.x / this._sprite.sourceRect.width;
this.anchorOffsetY = this._sprite.origin.y / this._sprite.sourceRect.height;
}
this.bitmap = new egret.Bitmap(sprite.texture2D);
this.addChild(this.bitmap);
@@ -58,8 +48,8 @@ class SpriteRenderer extends RenderableComponent {
/** 渲染处理 在每个模块中处理各自的渲染逻辑 */
public render(camera: Camera){
this.x = this.entity.position.x - this.origin.x - camera.position.x + camera.origin.x;
this.y = this.entity.position.y - this.origin.y - camera.position.y + camera.origin.y;
this.x = -camera.position.x + camera.origin.x;
this.y = -camera.position.y + camera.origin.y;
}
public onRemovedFromEntity(){