mirror of
https://github.com/konvajs/konva.git
synced 2025-10-27 12:29:08 +08:00
setup prettier and make all code better
This commit is contained in:
Anton Lavrenov
@@ -1,293 +1,424 @@
|
||||
suite('Sprite', function() {
|
||||
// ======================================================
|
||||
test('add sprite', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
// ======================================================
|
||||
test('add sprite', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
52,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
105,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
158,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
210,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
262,
|
||||
0,
|
||||
49,
|
||||
109
|
||||
],
|
||||
kicking: [
|
||||
0,
|
||||
109,
|
||||
45,
|
||||
98,
|
||||
45,
|
||||
109,
|
||||
45,
|
||||
98,
|
||||
95,
|
||||
109,
|
||||
63,
|
||||
98,
|
||||
156,
|
||||
109,
|
||||
70,
|
||||
98,
|
||||
229,
|
||||
109,
|
||||
60,
|
||||
98,
|
||||
287,
|
||||
109,
|
||||
41,
|
||||
98
|
||||
]
|
||||
},
|
||||
frameRate: 10,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 3,
|
||||
shadowOffset: { x: 3, y: 1 },
|
||||
shadowOpacity: 0.3
|
||||
});
|
||||
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0, 0, 49, 109,
|
||||
52, 0, 49, 109,
|
||||
105, 0, 49, 109,
|
||||
158, 0, 49, 109,
|
||||
210, 0, 49, 109,
|
||||
262, 0, 49, 109
|
||||
],
|
||||
kicking: [
|
||||
0, 109, 45, 98,
|
||||
45, 109, 45, 98,
|
||||
95, 109, 63, 98,
|
||||
156, 109, 70, 98,
|
||||
229, 109, 60, 98,
|
||||
287, 109, 41, 98
|
||||
]
|
||||
},
|
||||
frameRate: 10,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 3,
|
||||
shadowOffset: {x: 3, y:1},
|
||||
shadowOpacity: 0.3
|
||||
});
|
||||
layer.add(sprite);
|
||||
stage.add(layer);
|
||||
|
||||
layer.add(sprite);
|
||||
stage.add(layer);
|
||||
assert.equal(sprite.getClassName(), 'Sprite');
|
||||
assert.equal(sprite.frameIndex(), 0);
|
||||
|
||||
assert.equal(sprite.getClassName(), 'Sprite');
|
||||
assert.equal(sprite.frameIndex(), 0);
|
||||
showHit(layer);
|
||||
|
||||
showHit(layer);
|
||||
var trace = layer.hitCanvas.getContext().getTrace();
|
||||
|
||||
var trace = layer.hitCanvas.getContext().getTrace();
|
||||
assert.equal(trace.indexOf(sprite.colorKey) >= 0, true);
|
||||
|
||||
assert.equal(trace.indexOf(sprite.colorKey) >= 0, true);
|
||||
sprite.start();
|
||||
|
||||
sprite.start();
|
||||
// kick once
|
||||
setTimeout(
|
||||
function() {
|
||||
sprite.setAnimation('kicking');
|
||||
sprite.on('indexChange', function(evt) {
|
||||
if (evt.newVal === 0 && this.getAnimation() === 'kicking') {
|
||||
sprite.setAnimation('standing');
|
||||
}
|
||||
});
|
||||
},
|
||||
2000
|
||||
);
|
||||
setTimeout(
|
||||
function() {
|
||||
sprite.stop();
|
||||
},
|
||||
3000
|
||||
);
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
|
||||
// kick once
|
||||
setTimeout(function() {
|
||||
sprite.setAnimation('kicking');
|
||||
sprite.on('indexChange', function(evt) {
|
||||
if (evt.newVal === 0 && this.getAnimation() === 'kicking') {
|
||||
sprite.setAnimation('standing');
|
||||
}
|
||||
});
|
||||
}, 2000);
|
||||
setTimeout(function() {
|
||||
sprite.stop();
|
||||
}, 3000);
|
||||
// ======================================================
|
||||
test('don`t update layer too many times', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
52,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
105,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
158,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
210,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
262,
|
||||
0,
|
||||
49,
|
||||
109
|
||||
]
|
||||
},
|
||||
frameRate: 5,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 3,
|
||||
shadowOffset: { x: 3, y: 1 },
|
||||
shadowOpacity: 0.3
|
||||
});
|
||||
|
||||
layer.add(sprite);
|
||||
stage.add(layer);
|
||||
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
var oldDraw = layer.draw;
|
||||
var updateCount = 0;
|
||||
layer.draw = function() {
|
||||
updateCount++;
|
||||
oldDraw.call(layer);
|
||||
};
|
||||
|
||||
// ======================================================
|
||||
test('don`t update layer too many times', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
sprite.start();
|
||||
setTimeout(
|
||||
function() {
|
||||
sprite.stop();
|
||||
assert.equal(updateCount < 7, true);
|
||||
done();
|
||||
},
|
||||
1000
|
||||
);
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('don`t update layer too many times 2', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0, 0, 49, 109,
|
||||
52, 0, 49, 109,
|
||||
105, 0, 49, 109,
|
||||
158, 0, 49, 109,
|
||||
210, 0, 49, 109,
|
||||
262, 0, 49, 109
|
||||
]
|
||||
},
|
||||
frameRate: 5,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 3,
|
||||
shadowOffset: {x: 3, y:1},
|
||||
shadowOpacity: 0.3
|
||||
});
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
52,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
105,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
158,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
210,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
262,
|
||||
0,
|
||||
49,
|
||||
109
|
||||
]
|
||||
},
|
||||
frameRate: 5
|
||||
});
|
||||
|
||||
layer.add(sprite);
|
||||
stage.add(layer);
|
||||
var sprite2 = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
52,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
105,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
158,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
210,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
262,
|
||||
0,
|
||||
49,
|
||||
109
|
||||
]
|
||||
},
|
||||
frameRate: 20
|
||||
});
|
||||
|
||||
var oldDraw = layer.draw;
|
||||
var updateCount = 0;
|
||||
layer.draw = function() {
|
||||
updateCount++;
|
||||
oldDraw.call(layer);
|
||||
};
|
||||
layer.add(sprite).add(sprite2);
|
||||
stage.add(layer);
|
||||
|
||||
sprite.start();
|
||||
setTimeout(function() {
|
||||
sprite.stop();
|
||||
assert.equal(updateCount < 7, true);
|
||||
done();
|
||||
}, 1000);
|
||||
var oldDraw = layer.draw;
|
||||
var updateCount = 0;
|
||||
layer.draw = function() {
|
||||
updateCount++;
|
||||
oldDraw.call(layer);
|
||||
};
|
||||
|
||||
sprite.start();
|
||||
sprite2.start();
|
||||
setTimeout(
|
||||
function() {
|
||||
sprite.stop();
|
||||
sprite2.stop();
|
||||
assert.equal(updateCount > 15, true);
|
||||
assert.equal(updateCount < 27, true);
|
||||
done();
|
||||
},
|
||||
1000
|
||||
);
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
test('check is sprite running', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
// ======================================================
|
||||
test('don`t update layer too many times 2', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
52,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
105,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
158,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
210,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
262,
|
||||
0,
|
||||
49,
|
||||
109
|
||||
]
|
||||
},
|
||||
frameRate: 50,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 3,
|
||||
shadowOffset: { x: 3, y: 1 },
|
||||
shadowOpacity: 0.3
|
||||
});
|
||||
|
||||
layer.add(sprite);
|
||||
stage.add(layer);
|
||||
assert.equal(sprite.isRunning(), false);
|
||||
sprite.start();
|
||||
assert.equal(sprite.isRunning(), true);
|
||||
sprite.stop();
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0, 0, 49, 109,
|
||||
52, 0, 49, 109,
|
||||
105, 0, 49, 109,
|
||||
158, 0, 49, 109,
|
||||
210, 0, 49, 109,
|
||||
262, 0, 49, 109
|
||||
]
|
||||
},
|
||||
frameRate: 5
|
||||
});
|
||||
test.skip('can change frame rate on fly', function(done) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
var sprite2 = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0, 0, 49, 109,
|
||||
52, 0, 49, 109,
|
||||
105, 0, 49, 109,
|
||||
158, 0, 49, 109,
|
||||
210, 0, 49, 109,
|
||||
262, 0, 49, 109
|
||||
]
|
||||
},
|
||||
frameRate: 20
|
||||
});
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
52,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
105,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
158,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
210,
|
||||
0,
|
||||
49,
|
||||
109,
|
||||
262,
|
||||
0,
|
||||
49,
|
||||
109
|
||||
]
|
||||
},
|
||||
frameRate: 50,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 3,
|
||||
shadowOffset: { x: 3, y: 1 },
|
||||
shadowOpacity: 0.3
|
||||
});
|
||||
|
||||
layer.add(sprite).add(sprite2);
|
||||
stage.add(layer);
|
||||
layer.add(sprite);
|
||||
stage.add(layer);
|
||||
assert.equal(sprite.frameRate(), 50);
|
||||
setTimeout(
|
||||
function() {
|
||||
sprite.frameRate(100);
|
||||
assert.equal(sprite.frameRate(), 100);
|
||||
// don't run animation after change frame rate
|
||||
assert.equal(sprite.anim.isRunning(), false);
|
||||
|
||||
var oldDraw = layer.draw;
|
||||
var updateCount = 0;
|
||||
layer.draw = function() {
|
||||
updateCount++;
|
||||
oldDraw.call(layer);
|
||||
};
|
||||
sprite.start();
|
||||
},
|
||||
23
|
||||
);
|
||||
|
||||
sprite.start();
|
||||
sprite2.start();
|
||||
setTimeout(function() {
|
||||
sprite.stop();
|
||||
sprite2.stop();
|
||||
assert.equal(updateCount > 15, true);
|
||||
assert.equal(updateCount < 27, true);
|
||||
done();
|
||||
}, 1000);
|
||||
|
||||
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
|
||||
test('check is sprite running', function(done){
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0, 0, 49, 109,
|
||||
52, 0, 49, 109,
|
||||
105, 0, 49, 109,
|
||||
158, 0, 49, 109,
|
||||
210, 0, 49, 109,
|
||||
262, 0, 49, 109
|
||||
]
|
||||
},
|
||||
frameRate: 50,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 3,
|
||||
shadowOffset: {x: 3, y:1},
|
||||
shadowOpacity: 0.3
|
||||
});
|
||||
|
||||
layer.add(sprite);
|
||||
stage.add(layer);
|
||||
assert.equal(sprite.isRunning(), false);
|
||||
sprite.start();
|
||||
assert.equal(sprite.isRunning(), true);
|
||||
sprite.stop();
|
||||
done();
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
|
||||
test.skip('can change frame rate on fly', function(done){
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
|
||||
|
||||
var sprite = new Konva.Sprite({
|
||||
x: 200,
|
||||
y: 50,
|
||||
image: imageObj,
|
||||
animation: 'standing',
|
||||
animations: {
|
||||
standing: [
|
||||
0, 0, 49, 109,
|
||||
52, 0, 49, 109,
|
||||
105, 0, 49, 109,
|
||||
158, 0, 49, 109,
|
||||
210, 0, 49, 109,
|
||||
262, 0, 49, 109
|
||||
]
|
||||
},
|
||||
frameRate: 50,
|
||||
draggable: true,
|
||||
shadowColor: 'black',
|
||||
shadowBlur: 3,
|
||||
shadowOffset: {x: 3, y:1},
|
||||
shadowOpacity: 0.3
|
||||
});
|
||||
|
||||
layer.add(sprite);
|
||||
stage.add(layer);
|
||||
assert.equal(sprite.frameRate(), 50);
|
||||
setTimeout(function(){
|
||||
sprite.frameRate(100);
|
||||
assert.equal(sprite.frameRate(), 100);
|
||||
// don't run animation after change frame rate
|
||||
assert.equal(sprite.anim.isRunning(), false);
|
||||
|
||||
sprite.start();
|
||||
}, 23);
|
||||
|
||||
setTimeout(function(){
|
||||
sprite.frameRate(52);
|
||||
assert.equal(sprite.anim.isRunning(), true);
|
||||
// for this moment should tick more than 2 times
|
||||
// make sure that sprite is not restating after set frame rate
|
||||
assert.equal(sprite.frameIndex() > 2, true);
|
||||
done();
|
||||
}, 68);
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
|
||||
});
|
||||
setTimeout(
|
||||
function() {
|
||||
sprite.frameRate(52);
|
||||
assert.equal(sprite.anim.isRunning(), true);
|
||||
// for this moment should tick more than 2 times
|
||||
// make sure that sprite is not restating after set frame rate
|
||||
assert.equal(sprite.frameIndex() > 2, true);
|
||||
done();
|
||||
},
|
||||
68
|
||||
);
|
||||
};
|
||||
imageObj.src = 'assets/scorpion-sprite.png';
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user