Нужен совет/оценка по созданию обучающего видео

Question

[TatriX]

Доброе утро.

Не так давно я записал тестовое видео:

На видео нет голоса, есть только некое подобие субтитров.
Хотелось бы узнать продолжать ли, общую оценку, и конечно же, советы о том, как сделать лучше.

Собираюсь переписать видео с голосом, уделяя больше внимания не собственно реализации, а тому, почему реализация сделана так, а не иначе.
Тестовая запись с голосом
Полная версия рисовалки
Разрабатываемая версия игрушки для обучающих видео

Answer 1

[pomeo]

Набор кода достаточно тяжело воспринимается в длинных видео, а это длинное видео. Посмотрите egghead.io/lessons/angularjs-animating-the-angular-way, нет смысла печатать с нуля, можно набрать какой-то минимум и показать как он работает и на ходу показать что будет если здесь что-то изменить, а здесь что-то дописать.
У вас справа пропадает куча места, можно было там открыть браузер и построить видео таким образом, что там было видно что происходит.
Паузы надо вырезать, по своему опыту видео укорачивается на 30%.
Звук нормальный, только либо достаньте pop фильтр, либо сами его сделайте.
А так идеал для меня всегда были railscasts.com, отличная подача, хороший звук, и длина ~10 минут.

Answer 2

[Aleksandr Shpak]

Рисовалка очень простая, хотя для обучающего это возможно и плюс, но на Хабре уже где-то было про рисовалку на Canvas в более продвинутом варианте.
Игра загружает мой слабенький комп чуть менее чем на 100%, видимо проблемы с отрисовкой. Вообще могу на вскидку предположить, а понять с одного набега в силу ограниченности времени не вышло, что у вас каждый кадр всё на экране перерисовывается, а это как известно грех смертельный в мире JS/canvas и советую вам с этим побороться в первую очередь.
И как-то странно смотреть на текст страницы без тегов html/body/head и пр. Я конечно понимаю что и без них всё работает, но вы же позиционируете код для людей которые хотят из него чему-то научиться, а это немного обязывает )

Comments

[Aleksandr Shpak]

Я так понимаю, судя по этому у вас даже все hex'ы каждый раз перерисовываются судя по этому:

Вот этому

    this.draw = function() {
        if (!list) {
            list = [];
            ctx.clearRect(-this.offset.x, -this.offset.y, canvas.width, canvas.height);
            for(var x in data) {
                for(var y in data[x]) {
                    var hex = data[x][y];
                    list.push(hex);
                }
            }
            list.sort(function(a, b) {
                return b.q - a.q;
            });
        }
        list.map(function(hex) {
            var fill = null;
            if (game.selected.unit && game.selected.unit == hex.unit) {
                fill = "rgba(200, 255, 255, 0.5)";
            } else if (hex == game.hovered) {
                fill = "rgba(255, 255, 200, 0.5)";
            }
            var options = {};
            options.texture = true;
            hex.draw(fill, options);
            // alert("P");
        });
    }

В данному случае наверное проще у каждого объекта-хекса заводить какое-либо поле (например redraw) которое будет принимать истинное значение в зависимости от того сдвинулся ли экран и появился ли над ним кто-то. Т.е. перерисовывать на канвасе картинку только если это действительно нужно (redraw === true). И отладку наверное всё же проще через console.log делать, а не алертами но это уже совсем про другое)

[TatriX]

html/body опускаю потому, что, как вы правильно заметили, и без них все работает. Кода меньше, читать/писать проще, а дописать всегда можно потом.
Код еще очень сырой. Кеширование всей карты и прочего сделаю позже.
Сейчас все на этапе «оно работает», чтобы можно было продемонстрировать как игра будет выглядеть вообще.
Алерт нужен для того, чтобы заблокировать main loop. console.log в данном случае не подходит.

[Aleksandr Shpak]

Ну и отлично что всё будет ещё дописываться и переписываться, буду ждать туториала) А то на моём рабочем одноядерном совсем не играбельно)

[TatriX]

Игра изначально задумывалась именно как иллюстрация для видео. Но на данный момент мне кажется, что она вышла слишком сложной.
Все таки гексагональная сетка и а-стар не самые тривиальные вещи.