[]十几秒以后动画渲染时间变长,帧率变慢,是怎么回事?
我在一个sprite中添加了一个进度条,一个序列帧动画,一个图片,让这个sprite左右来回移动.
我的做法是启动frameLoop, 每帧移动3个像素.
结果是开始帧率在60,渲染时间保持在16, 过了大概15秒以后,渲染时间就会增加,帧率变慢,请问是什么原因导致的?
/*************************************************************************************\
* 飞行物
*************************************************************************************/
class DollGunRole extends GunRole{
public _box: GunBox;
// toset:
/** 飞行的范围, 用于计算飞行路径 */
private _fly_site:Site = new SiteEntity( 10, 10, -1, 400 );
public static _ani_cached:boolean = false;
// toset:
/** 飞行物的中心点, 参照物为魔鬼, 用于确定瞄准点和整体的中心点 */
private _pivot_demon:Point = <Point>{ x: 50, y: 50 };
/** 特指血条+魔鬼的大小, 用于计算飞行物整体大小 */
private _top_area:Area = <Area>{ w: -1, h: -1 };
/** 血条 */
private _blood_chart: Laya.ProgressBar;
// toset:
private _blood_area: Area = new AreaEntity( 100, 20 );
public _blood_value: number;
/** 魔鬼 */
private _demon_ani: Laya.Animation;
// toset:
private _demon_area: Area = new AreaEntity( 100, 100);
/** 靶心,参照物是魔鬼 */
private _target_ani: Laya.Animation;
// toset:
private _target_area: Area = new AreaEntity( 40, 40 );
/** 娃娃 */
private _doll_img:Laya.Image;
public _doll_area:Area = <Area>{ w: -1, h: -1 };
// toset:
/** 速度 */
private _speed: number = 2;
/* 以下用于计算移动位置 */
/** 下一步位置 */
private _to_pos:Point = <Point>{ x: -1, y: -1 };
/** 步数 */
private _step: number;
/** 路径起点 */
private _head_pos: Point = <Point>{ x: -1, y: -1 };
/** 路径终点 */
private _tail_pos: Point = <Point>{ x: -1, y: -1 };
/** 路径X轴投影间距 */
private _path_space_x: number;
/** 路径Y轴投影间距 */
private _path_space_y: number;
/** 路径长度 */
private _path_length: number;
// toset:
/** 路径的长度范围 */
private _path_min: number = 100;
private _path_max: number = 200;
/** 路径角度 */
private _path_angle: number;
/** 路径弧度 */
private _path_radians: number;
/** 是否移除 */
public _to_remove: number;
constructor(){
super(GunRoleType.LIVE_DOLL);
}
init( box: GunBox, doll_item: DollItem, doll_area: Area ):void {
// if(!this._body_ani)
// {
// this._body_ani = new Laya.Animation();
// this.addChild(this._body_ani);
// }
// this._body_ani.play(0, true, doll_item.animation_name);
this._box = box;
this._fly_site.w = this._box._area.w - 20;
this._box.graphics.drawLine( 0, this._fly_site.h, this._box._area.w, this._fly_site.h, "#ff0000", 1 );
// 当更新房间时
if( this._doll_area.w != doll_area.w
|| this._doll_area.h != doll_area.h ) {
this._doll_area.w = doll_area.w;
this._doll_area.h = doll_area.h;
}
// 设置容器的宽高
this.width = Math.max( this._blood_area.w, this._demon_area.w, this._doll_area.w );
this.height = this._blood_area.h + this._demon_area.h + this._doll_area.h;
this.graphics.drawRect( 0, 0, this.width, this.height, null, "#ff0000", 1);
if( ! DollGunRole._ani_cached ) {
DollGunRole._ani_cached = true;
Laya.Animation.createFrames( ["ui/gun_box/plane.png"], "demon_fly" );
Laya.Animation.createFrames( ["ui/gun_box/img_target_blank.png", "ui/gun_box/img_target.png"], "doll_target" );
}
/** 用于设置对象的位置 */
let y_sp = 0;
// 设置血条
if( ! this._blood_chart ) {
this._blood_chart = new Laya.ProgressBar( "ui/start/progress.png" );
this._blood_chart.size( this._blood_area.w, this._blood_area.h );
this._blood_chart.pivot( this._blood_chart.width / 2, 0 );
this.addChild( this._blood_chart );
}
this._blood_chart.pos( this.width / 2, y_sp );
this._blood_value = 100;
this._blood_chart.value = this._blood_value / 100;
y_sp += this._blood_chart.height;
// 设置魔鬼
if( ! this._demon_ani ) {
this._demon_ani = new Laya.Animation();
this._demon_ani.size( this._demon_area.w, this._demon_area.h );
this._demon_ani.pivot( this._demon_ani.width / 2, 0 );
this.addChild( this._demon_ani );
this._demon_ani.zOrder = 0;
this._demon_ani.interval = 200;
this._demon_ani.play( 0, true, "demon_fly" );
}
this._demon_ani.pos( this.width / 2, y_sp );
// 设置靶心
if( ! this._target_ani ) {
this._target_ani = new Laya.Animation();
this._target_ani.size( this._target_area.w, this._target_area.h );
this._target_ani.pivot( this._target_ani.width / 2, this._target_ani.height / 2 );
this.addChild( this._target_ani );
this._target_ani.zOrder = 9;
this._target_ani.interval = 200;
this._target_ani.play( 0, true, "doll_target" );
}
this._target_ani.pos( this.width / 2 - this._demon_ani.width / 2 + this._pivot_demon.x, y_sp + this._pivot_demon.y );
// 将容器轴心点设置到准星位置
this.pivot( this._target_ani.x, this._target_ani.y ) ;
y_sp += this._demon_ani.height;
if( ! this._doll_img ) {
this._doll_img = new Laya.Image( );
this.addChild( this._doll_img );
this._doll_img.zOrder = 1;
}
// this._target_animation.pos( room_area.w/2 - 20, room_area.h/2 - 20 );
this._doll_img.size( this._doll_area.w, this._doll_area.h );
this._doll_img.pivot( this._doll_img.width / 2, 0 );
this._doll_img.pos( this.width / 2, y_sp );
this._doll_img.skin = doll_item.img;
/** 初始化变量 */
this._to_remove = 0;
// 设置终点
// tofix:
this.x = BaseUtils.rand_number( this._fly_site.x, this._fly_site.x + this._fly_site.w );
this.y = BaseUtils.rand_number( this._fly_site.y, this._fly_site.y + this._fly_site.h );
// totest:
this._path_angle = 0;
// 设置路径
this.set_path( );
}
set_path( ) : void {
// 设置起点
// 由于取整带来的计算偏差,会导致娃娃实际到达的终点一般不会与计算的终点一致
// 因此将娃娃此时的位置作为起点
// this._head_pos.x = this._tail_pos.x;
// this._head_pos.y = this._tail_pos.y;
this._head_pos.x = this.x;
this._head_pos.y = this.y;
this._step = 0;
// totest: 此处为测试使用
this._path_length = 150;
this._path_angle = 180 - this._path_angle;
this._path_radians = Math.PI / 180 * this._path_angle ;
this._tail_pos.x = Math.floor( this._head_pos.x + this._path_length * Math.cos( this._path_radians ) );
this._tail_pos.y = Math.floor( this._head_pos.y + this._path_length * Math.sin( this._path_radians ) );
// // 确保路径的终点不能超出范围
// while( true ) {
// // 路径的长度和角度
// this._path_length = BaseUtils.rand_number( this._path_min, this._path_max );
// this._path_angle = BaseUtils.rand_number( 0, 360 );
// // 计算弧度,用于sin和cos函数
// this._path_radians = Math.PI / 180 * this._path_angle ;
// // 设置终点
// this._tail_pos.x = Math.floor( this._head_pos.x + this._path_length * Math.cos( this._path_radians ) );
// this._tail_pos.y = Math.floor( this._head_pos.y + this._path_length * Math.sin( this._path_radians ) );
// // 路径选择条件
// if( this._tail_pos.x > this._fly_site.x
// && this._tail_pos.y > this._fly_site.y
// && this._tail_pos.x < this._fly_site.x + this._fly_site.w
// && this._tail_pos.y < this._fly_site.y + this._fly_site.h )
// break;
// }
this._path_space_x = Math.abs( this._tail_pos.x - this._head_pos.x );
this._path_space_y = Math.abs( this._tail_pos.y - this._head_pos.y );
// console.log("set path head_pos:" + this._head_pos.x + ":" + this._head_pos.y);
// console.log("set path tail_pos:" + this._tail_pos.x + ":" + this._tail_pos.y);
// console.log("set path space:" + this._path_space_x + ":" + this._path_space_y);
}
move( ) : void {
// 在上一帧累加会导致误差增大
// 因此采用步数来确定位置
this._step ++;
this._to_pos.x = Math.floor( this._head_pos.x + this._speed * this._step * Math.cos( this._path_radians ) );
this._to_pos.y = Math.floor( this._head_pos.y + this._speed * this._step * Math.sin( this._path_radians ) );
// 超出路径,重新设置路径
if ( Math.abs( this._to_pos.x - this._head_pos.x ) > this._path_space_x
|| Math.abs( this._to_pos.y - this._head_pos.y ) > this._path_space_y ) {
this.set_path( );
this._to_pos.x = Math.floor( this._head_pos.x + this._speed * this._step * Math.cos( this._path_radians ) );
this._to_pos.y = Math.floor( this._head_pos.y + this._speed * this._step * Math.sin( this._path_radians ) );
}
this.x = this._to_pos.x;
this.y = this._to_pos.y;
this._box.graphics.drawLine( this._head_pos.x, this._head_pos.y, this.x, this.y, "#00ff00", 1 );
}
dispose( ) : void {
if ( ! this._to_remove ) {
this.move();
}
// 移动后什么条件下消失?
// todo:
}
hurt( damage: number ) : void {
this._blood_value -= damage;
if( this._blood_value <= 0 )
this._blood_value = 0;
this._blood_chart.value = this._blood_value / 100;
if( this._blood_value == 0 ) {
this._to_remove = 1;
}
}
}
class GunBox{
public start(): void {
// 启动定时器
Laya.timer.frameLoop( 1, this, this.loop );
}
public loop():void {
// 遍历BOX中所有的子对象
this._doll_role.dispose( );
}
我的做法是启动frameLoop, 每帧移动3个像素.
结果是开始帧率在60,渲染时间保持在16, 过了大概15秒以后,渲染时间就会增加,帧率变慢,请问是什么原因导致的?
/*************************************************************************************\
* 飞行物
*************************************************************************************/
class DollGunRole extends GunRole{
public _box: GunBox;
// toset:
/** 飞行的范围, 用于计算飞行路径 */
private _fly_site:Site = new SiteEntity( 10, 10, -1, 400 );
public static _ani_cached:boolean = false;
// toset:
/** 飞行物的中心点, 参照物为魔鬼, 用于确定瞄准点和整体的中心点 */
private _pivot_demon:Point = <Point>{ x: 50, y: 50 };
/** 特指血条+魔鬼的大小, 用于计算飞行物整体大小 */
private _top_area:Area = <Area>{ w: -1, h: -1 };
/** 血条 */
private _blood_chart: Laya.ProgressBar;
// toset:
private _blood_area: Area = new AreaEntity( 100, 20 );
public _blood_value: number;
/** 魔鬼 */
private _demon_ani: Laya.Animation;
// toset:
private _demon_area: Area = new AreaEntity( 100, 100);
/** 靶心,参照物是魔鬼 */
private _target_ani: Laya.Animation;
// toset:
private _target_area: Area = new AreaEntity( 40, 40 );
/** 娃娃 */
private _doll_img:Laya.Image;
public _doll_area:Area = <Area>{ w: -1, h: -1 };
// toset:
/** 速度 */
private _speed: number = 2;
/* 以下用于计算移动位置 */
/** 下一步位置 */
private _to_pos:Point = <Point>{ x: -1, y: -1 };
/** 步数 */
private _step: number;
/** 路径起点 */
private _head_pos: Point = <Point>{ x: -1, y: -1 };
/** 路径终点 */
private _tail_pos: Point = <Point>{ x: -1, y: -1 };
/** 路径X轴投影间距 */
private _path_space_x: number;
/** 路径Y轴投影间距 */
private _path_space_y: number;
/** 路径长度 */
private _path_length: number;
// toset:
/** 路径的长度范围 */
private _path_min: number = 100;
private _path_max: number = 200;
/** 路径角度 */
private _path_angle: number;
/** 路径弧度 */
private _path_radians: number;
/** 是否移除 */
public _to_remove: number;
constructor(){
super(GunRoleType.LIVE_DOLL);
}
init( box: GunBox, doll_item: DollItem, doll_area: Area ):void {
// if(!this._body_ani)
// {
// this._body_ani = new Laya.Animation();
// this.addChild(this._body_ani);
// }
// this._body_ani.play(0, true, doll_item.animation_name);
this._box = box;
this._fly_site.w = this._box._area.w - 20;
this._box.graphics.drawLine( 0, this._fly_site.h, this._box._area.w, this._fly_site.h, "#ff0000", 1 );
// 当更新房间时
if( this._doll_area.w != doll_area.w
|| this._doll_area.h != doll_area.h ) {
this._doll_area.w = doll_area.w;
this._doll_area.h = doll_area.h;
}
// 设置容器的宽高
this.width = Math.max( this._blood_area.w, this._demon_area.w, this._doll_area.w );
this.height = this._blood_area.h + this._demon_area.h + this._doll_area.h;
this.graphics.drawRect( 0, 0, this.width, this.height, null, "#ff0000", 1);
if( ! DollGunRole._ani_cached ) {
DollGunRole._ani_cached = true;
Laya.Animation.createFrames( ["ui/gun_box/plane.png"], "demon_fly" );
Laya.Animation.createFrames( ["ui/gun_box/img_target_blank.png", "ui/gun_box/img_target.png"], "doll_target" );
}
/** 用于设置对象的位置 */
let y_sp = 0;
// 设置血条
if( ! this._blood_chart ) {
this._blood_chart = new Laya.ProgressBar( "ui/start/progress.png" );
this._blood_chart.size( this._blood_area.w, this._blood_area.h );
this._blood_chart.pivot( this._blood_chart.width / 2, 0 );
this.addChild( this._blood_chart );
}
this._blood_chart.pos( this.width / 2, y_sp );
this._blood_value = 100;
this._blood_chart.value = this._blood_value / 100;
y_sp += this._blood_chart.height;
// 设置魔鬼
if( ! this._demon_ani ) {
this._demon_ani = new Laya.Animation();
this._demon_ani.size( this._demon_area.w, this._demon_area.h );
this._demon_ani.pivot( this._demon_ani.width / 2, 0 );
this.addChild( this._demon_ani );
this._demon_ani.zOrder = 0;
this._demon_ani.interval = 200;
this._demon_ani.play( 0, true, "demon_fly" );
}
this._demon_ani.pos( this.width / 2, y_sp );
// 设置靶心
if( ! this._target_ani ) {
this._target_ani = new Laya.Animation();
this._target_ani.size( this._target_area.w, this._target_area.h );
this._target_ani.pivot( this._target_ani.width / 2, this._target_ani.height / 2 );
this.addChild( this._target_ani );
this._target_ani.zOrder = 9;
this._target_ani.interval = 200;
this._target_ani.play( 0, true, "doll_target" );
}
this._target_ani.pos( this.width / 2 - this._demon_ani.width / 2 + this._pivot_demon.x, y_sp + this._pivot_demon.y );
// 将容器轴心点设置到准星位置
this.pivot( this._target_ani.x, this._target_ani.y ) ;
y_sp += this._demon_ani.height;
if( ! this._doll_img ) {
this._doll_img = new Laya.Image( );
this.addChild( this._doll_img );
this._doll_img.zOrder = 1;
}
// this._target_animation.pos( room_area.w/2 - 20, room_area.h/2 - 20 );
this._doll_img.size( this._doll_area.w, this._doll_area.h );
this._doll_img.pivot( this._doll_img.width / 2, 0 );
this._doll_img.pos( this.width / 2, y_sp );
this._doll_img.skin = doll_item.img;
/** 初始化变量 */
this._to_remove = 0;
// 设置终点
// tofix:
this.x = BaseUtils.rand_number( this._fly_site.x, this._fly_site.x + this._fly_site.w );
this.y = BaseUtils.rand_number( this._fly_site.y, this._fly_site.y + this._fly_site.h );
// totest:
this._path_angle = 0;
// 设置路径
this.set_path( );
}
set_path( ) : void {
// 设置起点
// 由于取整带来的计算偏差,会导致娃娃实际到达的终点一般不会与计算的终点一致
// 因此将娃娃此时的位置作为起点
// this._head_pos.x = this._tail_pos.x;
// this._head_pos.y = this._tail_pos.y;
this._head_pos.x = this.x;
this._head_pos.y = this.y;
this._step = 0;
// totest: 此处为测试使用
this._path_length = 150;
this._path_angle = 180 - this._path_angle;
this._path_radians = Math.PI / 180 * this._path_angle ;
this._tail_pos.x = Math.floor( this._head_pos.x + this._path_length * Math.cos( this._path_radians ) );
this._tail_pos.y = Math.floor( this._head_pos.y + this._path_length * Math.sin( this._path_radians ) );
// // 确保路径的终点不能超出范围
// while( true ) {
// // 路径的长度和角度
// this._path_length = BaseUtils.rand_number( this._path_min, this._path_max );
// this._path_angle = BaseUtils.rand_number( 0, 360 );
// // 计算弧度,用于sin和cos函数
// this._path_radians = Math.PI / 180 * this._path_angle ;
// // 设置终点
// this._tail_pos.x = Math.floor( this._head_pos.x + this._path_length * Math.cos( this._path_radians ) );
// this._tail_pos.y = Math.floor( this._head_pos.y + this._path_length * Math.sin( this._path_radians ) );
// // 路径选择条件
// if( this._tail_pos.x > this._fly_site.x
// && this._tail_pos.y > this._fly_site.y
// && this._tail_pos.x < this._fly_site.x + this._fly_site.w
// && this._tail_pos.y < this._fly_site.y + this._fly_site.h )
// break;
// }
this._path_space_x = Math.abs( this._tail_pos.x - this._head_pos.x );
this._path_space_y = Math.abs( this._tail_pos.y - this._head_pos.y );
// console.log("set path head_pos:" + this._head_pos.x + ":" + this._head_pos.y);
// console.log("set path tail_pos:" + this._tail_pos.x + ":" + this._tail_pos.y);
// console.log("set path space:" + this._path_space_x + ":" + this._path_space_y);
}
move( ) : void {
// 在上一帧累加会导致误差增大
// 因此采用步数来确定位置
this._step ++;
this._to_pos.x = Math.floor( this._head_pos.x + this._speed * this._step * Math.cos( this._path_radians ) );
this._to_pos.y = Math.floor( this._head_pos.y + this._speed * this._step * Math.sin( this._path_radians ) );
// 超出路径,重新设置路径
if ( Math.abs( this._to_pos.x - this._head_pos.x ) > this._path_space_x
|| Math.abs( this._to_pos.y - this._head_pos.y ) > this._path_space_y ) {
this.set_path( );
this._to_pos.x = Math.floor( this._head_pos.x + this._speed * this._step * Math.cos( this._path_radians ) );
this._to_pos.y = Math.floor( this._head_pos.y + this._speed * this._step * Math.sin( this._path_radians ) );
}
this.x = this._to_pos.x;
this.y = this._to_pos.y;
this._box.graphics.drawLine( this._head_pos.x, this._head_pos.y, this.x, this.y, "#00ff00", 1 );
}
dispose( ) : void {
if ( ! this._to_remove ) {
this.move();
}
// 移动后什么条件下消失?
// todo:
}
hurt( damage: number ) : void {
this._blood_value -= damage;
if( this._blood_value <= 0 )
this._blood_value = 0;
this._blood_chart.value = this._blood_value / 100;
if( this._blood_value == 0 ) {
this._to_remove = 1;
}
}
}
class GunBox{
public start(): void {
// 启动定时器
Laya.timer.frameLoop( 1, this, this.loop );
}
public loop():void {
// 遍历BOX中所有的子对象
this._doll_role.dispose( );
}
没有找到相关结果
已邀请:
1 个回复
熊猫大侠
赞同来自:
要么每次画之前this._box.graphics.clear(); 要么就不画