forum.boolean.name - Кто какую игру делает? Скрины


		
			
var _step = function() {
        setTimeout(function() {
                if(_run) {
                    requestAnimFrame(_step);
                    _this.step();
                }
            }, 1000/_fps);
    }

_fps - это фпс, в данном случае 60
requestAnimFrame - это requestAnimationFrame, только с префиксами:

_this.step - функция где всё и происходит (в том числе и рендер)

Сам рендеринг использую крайне просто:
есть несколько тайлсетов (карта, декорации, человек), и рендерю отдельный спрайт из тайлсета с помощью функции ctx.drawImage с 9 параметрами, где ctx - контекст канвы. 1 параметр - тайсет, 2-5 - положение спрайта и размер спрайта на тайлсете, 6-9 - положение и размер спрайта на канвасе. Больше никакие методы из ctx не вызываю (ну кроме отчистки). Мне показалось это наиболее производительным решением. Это так и есть?

Буквально всё разбито по классам, есть несколько слоев абстракций, я написал только саму суть.

Цитата:

есть ли элементы пверх канвы (их ререндер, может вызывать рефлой, и ререндер всей канвы).

не очень понял, но на страничке кроме канваса ничего нет.

Цитата:

Если по ноду и socket.io что нада - говори, я тоже юзаю их и юзал в нескольких проектах.

ок) но пока идет всё гладко, и то и то весьма очень простое, но при этом очень мощное

moka	26.07.2013 02:16

Ответ: Кто какую игру делает? Скрины

У тебя таймер в таймере, ты в курсе? :)

Всё что тебе нужно это только requestAnimationFrame:

PHP код:


		
			
function render() {
  requestAnimFrame(function() {
    render();
  });

  // твой рендер тут

}

Ну и естественно почти такой-же костыль как твой, только с использованием таймера как фаллбэк:

PHP код:


		
			
window.requestAnimFrame = (function() {
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
})();

Цитата:

ок) но пока идет всё гладко, и то и то весьма очень простое, но при этом очень мощное

Угу, как только познаёшь простоту и мощ, другое брать ничего не хочешь. Но там есть много тонкостей, т.к. например socket.io очень абстрагирован от внутрянки, и не все знают как он на самом деле использует xhr-longPoll в большинстве случаев (на андройде например), что не тоже самое что и WebSockets.
Далее сессия и утентификация - тоже нужно чуток middleware понять.
Ну там потом будут тонкости.

ABTOMAT

26.07.2013 12:37

Ответ: Кто какую игру делает? Скрины

Сделал подобие скиннинга.
Всю ночь парился :-D Были моменты, когда не понимал, что 10 раз всё проверил, а всё равно не работает. Эмоции были как у этого шофёра:

Видео на YouTube

Наконец с ResetXForm'овой помощью заставил работать (естессно дальше мне придётся отказаться от такого чита, как ResetXForm в Максе и учесть все трансформации самостоятельно). А ещё мне надо хранить изначальное положение костей в позе Т, делать экспортёр из Макса, чтобы веса вершин экспортил... Весов ещё и в движке нетуть: привязка определяется прямо в шейдере по z-координате вершины. Мда, топорно. Но хотя бы уже есть отчего отталкиваться. Очень хочу в ближайшем времени загрузить не сосиску на палочке, а нормального солдатика.
Там же.

den	26.07.2013 14:52

Ответ: Кто какую игру делает? Скрины

Цитата:

Сообщение от moka (Сообщение 264193)

У тебя таймер в таймере, ты в курсе? :)

Всё что тебе нужно это только requestAnimationFrame:

PHP код:


		
			
function render() {
  requestAnimFrame(function() {
    render();
  });

  // твой рендер тут

}

Но в этом случае фпс не будет ограничен. Скорость передвижения героев ограничить то не сложно (сделать её обратно зависимой от времени прорисовки кадра), но хороши ли, что браузер жрет всё время и игра почти не спит?

UPD: я походу ошибался, requestAnimationFrame ограничивает фпс до 60, и вариант моки работает одинокого хорошо и на хроме и на лисе (хотя на хроме всё таки игра основное время спит, а на лисе рисует)

moka	26.07.2013 15:56

Ответ: Кто какую игру делает? Скрины

requestAnimFrame будет всегда стараться придерживаться 60 кадрам. Если старый комп, упадёт до 30ти, и будет придерживаться 30ти. Т.к. придерживаться определённого FPS на много лучше чем прагать вверх-вниз.

Тебе нужна дельта, вычислить её просто, как в блице. И её используй для ускорения или замедления. Также используй время больше чем просто инкрементацию.

Например:
nx += elapsed * speed;
где elapsed - будет мс после последнего рендера до текущего. Например при 60 фпс, elapsed будет 16мс. При скорости 1.0, это 16 единиц. Если фпс упал до 35, то elapsed будет 28.6, и скорость следственно увеличивается.
Можно нормализовать это число от 0.5 до 1.0 (30 - 60 фпс). И это и будет дельта, затем делить на неё все время зависимые изменения.

Учти что requestAnimFrame будет всегда стараться иметь 60 кадров, и не более, следственно и setTimeout должен быть 1000 / 60, и никак не иначе.

ABTOMAT

28.07.2013 06:01

Ответ: Кто какую игру делает? Скрины

Опять ковырял свой двиг... Где до сих пор одна глобальная shaderProgram. А для скелетки мне нужны раздельные вершинные шейдеры для скиненных мешей и не скиненных. В-общем оказалось что мне придётся прибрать кучу всего в порядок.

А ещё веса не увидеть никак: моделек-то пока заскиненных нет.

Не очень-то слепишь вручную буфер меша с вершинами с весами... Придётся импортить из Макса. Набросал скелеточку: чайник крутит носиком как слон.

А в Максе опять структура в стиле индийских брахманов... Нельзя просто взять и получить соответствие id : вес для каждой вершины. Ну охренеть, когда начинал, думал за 2 дня со всей скелеткой справлюсь. Ага, щаз...

Mr_F_

28.07.2013 11:37

Ответ: Кто какую игру делает? Скрины

Цитата:

Нельзя просто взять и получить соответствие id : вес для каждой вершины.

Можно! (не удержался). С этим как раз всё наименее через жопу там (подробности запостил в асю).

ABTOMAT

30.07.2013 09:35

Ответ: Кто какую игру делает? Скрины

Цитата:

Сообщение от Mr_F_ (Сообщение 264349)

Можно! (не удержался). С этим как раз всё наименее через жопу там (подробности запостил в асю).

А вот куй там! Можно-то можно, но совпадает нумерация не во всех случаях! Тем не менее спасибо за советы, они ускорили мой прогресс.

При экспорте модельки метрокопа порядок совпал, а вот у чайника — нет. Я не знаю, может, там иерархия влияет, хотя судя по всему нет... В асю написал подробности.

Итак, джентльмены! Впервые за несколько дней мало-мальски интересный скриншот:

Ссылка

Можно крутить камеру вокруг сцены при помощи A и D.

Сделал скелетку.

Ну, "Сделал" — громко сказано. Вопросов появилось больше, чем ответов.

Во-первых, с чайником почему-то перепутались id костей, с метрокопом при экспорте всё ОК. Даже не знаю, буду ли сейчас исправлять, посмотрим, как оно себя ведёт на других модельках.

Во-вторых, столкнулся с проблемой, что заскиненная модель требует 8 дополнительных атрибутов для каждой вершины, а точнее с тем, что структура буфера стала другая, и, чтобы не перепуталась нумерация в буферах статичных моделей пришлось им тоже добавить веса и id (нулевые). Вот такой костыль. По-хорошему надо переключать шейдер, а шейдер у меня всего один.

В него пишется куча атрибутов во время рендера, всё размазано по говнокоду... Чтоб сделать переключение шейдеров, придётся собрать всё это говно, размазанное по стенам. С другой стороны, всё равно когда-то придётся этим заняться.

В-третьих, почему-то обосрались группы сглаживания при экспорте метрокопа из Макса (виноваты ли в этом веса вершин? буду ещё ковырять). Это можно заметить по несглаженности модельки. И вроде UV тоже обосралися (на ногах-то).

Ещё нужно сделать детект класса костей, чтобы они своими полигонами не портили вид.

Ну, в-общем, работы ещё дохренища. В области скиннинга и не только. На скрине — два брата-акробата из Халвы.

Mr_F_

30.07.2013 13:38

Ответ: Кто какую игру делает? Скрины

Вложений: 4

Отчасти кусок планируемой игры, а заодно и моя дипломная работа (успешно сданная).
Освещение на всём/от всего что размером от тачки и менее - динамическое, на остальном препросчитанное.

ABTOMAT

30.07.2013 13:54

Ответ: Кто какую игру делает? Скрины

Цитата:

Сообщение от Mr_F_ (Сообщение 264442)

Ну всё, теперь на мой большой пост никто внимания не обратит :-D

Taugeshtu

30.07.2013 14:12

Ответ: Кто какую игру делает? Скрины

Цитата:

Сообщение от Mr_F_ (Сообщение 264442)

Сюда бы ещё тень от ножек стульев и стола на второй скрин, чтоб рядом с точкой касания была... Мечты)

Mr_F_

30.07.2013 15:17

Ответ: Кто какую игру делает? Скрины

Вложений: 5

Если приглядишсься, они там есть, но слишком размытые).
Для теней от солнца мне удалось сделать плавное увеличение пенумбры (PCSS+VSM), но для кучи фонариков это было неподъёмно, так что для них я сделал просто dual paraboloid + VSM с конст блюром.

----
Вот кстати скрины с оригинальной proof-of-concept демки отдельно теней
----