а я думал это на нем сделано, это просто 2д контекст?
|
Дзен-трансгуманист, 3-и страницы треда в очередной раз говорят о том, что инициатива наказуема :D
Вроде ничего никому не обещаешь, а они все требуют и требуют ) |
Цитата:
Цитата:
me.on( 'request', function ( request, response ) {
response.write( 'ПНХ' );
response.close();
});
Таков им будет мой ответ.))) |
Цитата:
ну если говорить о производительности то часть нагрузки должно давать масштабирование на particle.spawnZ sprite.draw( ctx, particle.spawnX, y, 0, 1/ particle.spawnZ, 1/ particle.spawnZ ); (маштабирование горизонталь + вертикаль )*каждую снежинку * каждый кадр = замедление. без масштабирования у меня прирост производительности вдвое, нагрузка упала c 25% до 12-10% Попробуйте замерить производительность (без масштабирования) у себя сами.
<head>
<style>
img, canvas { position: absolute; left: 0px; top: 0px; margin: 0px; padding: 0px; border: none; }
</style>
<script>
function byId ( id ) {
return document.getElementById( id );
}
function rand ( min, max ) {
return Math.random() * ( max - min ) + min;
}
function now () {
return ( +new Date() ) / 1000;
}
function Sprite ( image, sx, sy, sw, sh, originX, originY ) {
this.image = image;
this.sx = sx;
this.sy = sy;
this.sw = sw;
this.sh = sh;
this.originX = originX ? originX : 0;
this.originY = originY ? originY : 0;
}
Sprite.prototype.draw = function ( context, x, y, angle, scaleX, scaleY ) {
//context.save();
//context.translate( x, y );
//context.rotate( angle );
//context.scale( scaleX, scaleY );
/*context.drawImage(
this.image,
this.sx, this.sy,
this.sw, this.sh,
-this.originX,
-this.originY,
this.sw, this.sh
);*/
context.drawImage(this.image, x,y);
//context.restore();
}
function Flakes ( canvas, flake, zmin, zmax, count, speed, loopTime ) {
var viewW = canvas.width;
var viewH = canvas.height;
zmax = Math.min( zmax, ( loopTime * speed - flake.height ) / viewH );
zmin = Math.min( zmin, zmax );
var particles = [];
var flakeHalfW = flake.width * 0.5;
var flakeHalfH = flake.height * 0.5;
for ( var i = 0; i < count; i++ ) {
var spawnZ = rand( zmin, zmax );
particles.push({
spawnX : rand( -flakeHalfW / spawnZ, viewW + flakeHalfW / spawnZ ),
spawnZ : spawnZ,
spawnTime : rand( 0, loopTime ),
speed : speed / spawnZ,
halfH : flakeHalfH / spawnZ
});
}
particles.sort( function ( a, b ) {
return b.spawnZ - a.spawnZ;
});
this.particles = particles;
this.viewW = viewW;
this.viewH = viewH;
this.loopTime = loopTime;
this.ctx = canvas.getContext( '2d' );
this.sprite = new Sprite(
flake,
0, 0,
flake.width, flake.height,
flake.width * 0.5, flake.height * 0.5
);
}
Flakes.prototype.draw = function ( time ) {
var ctx = this.ctx;
var sprite = this.sprite;
var particles = this.particles;
var viewH = this.viewH;
var loopTime = this.loopTime;
//временный контекст
//var pCanvas = document.createElement('canvas');
//var pCtx = pCanvas.getContext('2d');
//pCanvas.width = 480;
//pCanvas.height = 384;
for ( var i = 0; i < particles.length; i++ ) {
var particle = particles[ i ];
var y = -particle.halfH + ( ( time + particle.spawnTime ) % loopTime ) * particle.speed;
if ( y < viewH + particle.halfH ) {
//sprite.draw( pCtx, particle.spawnX, y, 0, 1, 1 );
sprite.draw( ctx, particle.spawnX, y, 0, 1, 1 );
}
}
//ctx.drawImage(pCanvas, 0,0);
}
window.onload = function () {
var imgBg = byId( 'image-bg' );
var imgFlake = byId( 'image-flake' );
var canvas = byId( 'canvas' );
document.body.removeChild( imgFlake );
canvas.width = imgBg.width;
canvas.height = imgBg.height;
var ctx = canvas.getContext( '2d' );
var flakes = new Flakes( canvas, imgFlake, 2, 25, 1500, 400, 30 );
function render () {
ctx.clearRect( 0, 0, canvas.width, canvas.height );
flakes.draw( now() - timeOffset );
}
var animate = true;
var timeStop;
var timeOffset = 0;
var intervalId = window.setInterval( render, 40 );
canvas.onclick = function () {
if ( animate = !animate ) {
timeOffset += now() - timeStop;
intervalId = window.setInterval( render, 40 );
}
else {
timeStop = now();
window.clearInterval( intervalId );
}
}
}
</script>
</head>
<body>
<img id="image-flake" src="http://dl.dropbox.com/u/19390559/share/snowflake.png">
<img id="image-bg" src="http://dl.dropbox.com/u/19390559/share/christmas-tree.png">
<canvas id="canvas"></canvas>
</body>
В качестве решения можно спрайты готовить заранее а не ресайзить в процессе рендеринга. это конечно всё теории а пробывать лень. Мне кажется что большие снежинки отьедают выигрыш обратно, так как маленькие снежинки прорисовать быстрее, предварительно подготовленные спрайты могут дать представление истинном приросте) UPD - из решения выпилено ещё часть манипуляций с канвасом |
Сейчас перечитал название темы и вспомнил "Брат 2". Там был один сутенер, "ганста-нига" (3:15 сек) на его сленге русские были "снежок". В свете этого, падающий снежок воспринимается по другому. :)
|
DjDiablo,
particle.spawnX и y тоже с плавающей запятой, попробуй Math.round их - будет еще быстрее. А подресайзить заранее конечно можно, но это на каждый спрайт отдельный слой придется готовить, потому что масштаб тут у всех разный. То есть, в данном случае это будет 1500 картинок размером вплоть до 20x20. Еще я, наверно, неправильно поступил, что подготовил все частицы заранее и зациклил их по модулю от времени. Логичнее было бы генерировать их на лету, но это мой первый опыт создания систем частиц, так что бить ногами не надо.) Цитата:
|
Да мне тоже неудаётся воспроизвести результат хз, почему в первый разы так много выдало.
прирост есть но слишком мальнький (в хроме), интересно как в других браузерах. в качестве альтернативы пробую предварителный рендеринг, но здесь он прироста отчего то тоже недаёт толи контекст слишком большой, толи частиц слишком мало чтобы профит ощутить. upd. Выпилил ещё лишние манипуляции с контекстом, кому нелень потестите пример сверху, я его обновил. сейчас у меня 9-10% стабильно VS 13-15% у оригинала |
Дзен-трансгуманист,
Крутая штука. Тоже была идея такое сделать, но до НГ не успел. Потом так и забыл. Спасибо, порадовал. Я даже гозару плюсик поставил чтобы тебя плюсануть. :D Кст, о ограничениях. Я немо опять наверно могу минус поставить. Ща проверим :) |
Цитата:
Опера 12.12 XP двух ядерка 3Гига частота проца |
DjDiablo,
У [html height=600 ] задай. |
| Часовой пояс GMT +3, время: 07:03. |