вот так выглядит основной цикл (в начале программы вызывается функция _step):
var _step = function() {
setTimeout(function() {
if(_run) {
requestAnimFrame(_step);
_this.step();
}
}, 1000/_fps);
}
_fps - это фпс, в данном случае 60
requestAnimFrame - это requestAnimationFrame, только с префиксами:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;
})();
_this.step - функция где всё и происходит (в том числе и рендер)
Сам рендеринг использую крайне просто:
есть несколько тайлсетов (карта, декорации, человек), и рендерю отдельный спрайт из тайлсета с помощью функции
ctx.drawImage с 9 параметрами, где
ctx - контекст канвы. 1 параметр - тайсет, 2-5 - положение спрайта и размер спрайта на тайлсете, 6-9 - положение и размер спрайта на канвасе. Больше никакие методы из
ctx не вызываю (ну кроме отчистки). Мне показалось это наиболее производительным решением. Это так и есть?
Буквально всё разбито по классам, есть несколько слоев абстракций, я написал только саму суть.
|
есть ли элементы пверх канвы (их ререндер, может вызывать рефлой, и ререндер всей канвы).
|
не очень понял, но на страничке кроме канваса ничего нет.
|
Если по ноду и socket.io что нада - говори, я тоже юзаю их и юзал в нескольких проектах.
|
ок) но пока идет всё гладко, и то и то весьма очень простое, но при этом очень мощное