Войти на сайт

Авторизация, ждите ...
×
  • Страница:
  • 1
  • ...
  • 5
  • 6
  • 7
  • 8
  • 9

ТЕМА: Дневник разработчика YuryOl

Дневник разработчика YuryOl 6 года 1 мес. назад #106480

  • Paranoid
  • Paranoid аватар
  • Вне сайта
  • Светлый дракон
  • Сообщений: 683
  • Спасибо получено: 350
Да можно извернуться, но я все равно считаю перспективу мейкера не очень удачной для кого-то высокого.

Давай делай уже скорее, хочу свою зельду на мв слепить.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: yuryol

Дневник разработчика YuryOl 6 года 1 мес. назад #106503

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
Как поклоннику "Эквилибриума" и боевых сцена в "матрице" (хотя сам фильм не люблю) всегда хотелось добавить динамичности и гибкости в перестрелки в своей АБС.

например [ Нажмите, чтобы развернуть ]


Поэтому многое пытаюсь сделать именно для маневренности героя и динамичности боев

Фиксация направления

Наверное самое легкое что можно придумать, так как такая возможность есть в самом мукере, а значит просто привяжем это к кнопке.
if (Input.isTriggered('capslock')) {
     $gamePlayer._directionFix = !$gamePlayer._directionFix;
}

Блокирование движения

Задача капельку сложнее. Тут нам надо самим добавить свойство, которое позволяет героя поворачиваться не двигаясь. Назовем его isBlockMove
if (Input.isTriggered('v')) {
     $gamePlayer.isBlockMove = !$gamePlayer.isBlockMove;
}

Ну а теперь в стандартной функции moveStraight делаем проверку включено ли это свойство.

1) если нет - позволяем ему (this) идти в заданном напарвлении (d)
Game_Character.prototype.moveStraight.call(this, d)

2) если же свойство есть - разрешаем ему только повернуться
this.setDirection(d)
var YuryolMoveStraight = Game_Player.prototype.moveStraight;
    Game_Player.prototype.moveStraight= function(d) {
        YuryolMoveStraight.call(this);
        ($gamePlayer.isBlockMove) ? this.setDirection(d) : Game_Character.prototype.moveStraight.call(this, d);
    };

Отход назад

Нам надо чтоб герой при нажатии на кнопку резко отсупил допустим на 2 клетки назад. Эта задачка еще сложнее.

1) в основном из-за вымученной функции moveEvent из этого поста: тык

2) Здесь нам понадобится немного иная блокировка - блокируем вообще все движения героя. Для этого создадим новое свойство block и функции для его включения/выключения:
 Game_Player.prototype.disableBlock = function() { 
        this.block = false;
    };
    Game_Player.prototype.enableBlock = function() { 
        this.block = true; 
    };

3) Лезем в функцию Game_Player.prototype.canMove и добавляем в условие проверку включен ли наш "блок")
if ($gameMap.isEventRunning() || $gameMessage.isBusy() || $gamePlayer.block) {
            return false;
        }

4) Конечно же ускорение должно делать героя быстрее. поэтому прибавляем герою скорость на две единицы
$gamePlayer._moveSpeed = $gamePlayer._moveSpeed+2;

5) Итого сама функция ускорения,где
n - количество шагов,на которые пробежит герой
13 - код для ROUTE_MOVE_BACKWARD, т.е. для движения героя назад
Scene_Map.prototype.boost = function(n) {
        $gamePlayer.enableBlock();
        $gamePlayer._moveSpeed = $gamePlayer._moveSpeed+2;
        $gameMap.moveEvent(0, 13, n);
    };

6) Не забываем отключить блокировку движения. Добавляем в moveEvent следующую строчку. Она добавляет в маршрут героя скрипт (код 45) для отключения блока - parameters: ["$gamePlayer.disableBlock();"]
route.list[amount] = {code: 45, parameters: ["$gamePlayer.disableBlock();"], indent: null};

Альтернативное оружие

Об этом завтра, спать хочу :(
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, DK, poca, Cabbit, Doctor_Bug, VarVarKa, NeKotZima

Дневник разработчика YuryOl 6 года 1 мес. назад #106504

  • Paranoid
  • Paranoid аватар
  • Вне сайта
  • Светлый дракон
  • Сообщений: 683
  • Спасибо получено: 350
Никогда не понимал этой темы с фиксацией направления стрельбы. Еще во времена нес уже были твинстик шутеры, хоть на них и нужно было с двух контроллеров играть. Но сейчас-то кнопок хватает. Так что почему бы недобавить твинстик управление? Назначить кнопками стрельбы wasd и все, это всяко удобнее чем лок/анлок направления для игрока.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: yuryol, Noxmils

Дневник разработчика YuryOl 6 года 1 мес. назад #106505

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
Paranoid пишет:
Никогда не понимал этой темы с фиксацией направления стрельбы. Еще во времена нес уже были твинстик шутеры, хоть на них и нужно было с двух контроллеров играть. Но сейчас-то кнопок хватает. Так что почему бы недобавить твинстик управление? Назначить кнопками стрельбы wasd и все, это всяко удобнее чем лок/анлок направления для игрока.

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

Дневник разработчика YuryOl 6 года 1 мес. назад #106506

  • Paranoid
  • Paranoid аватар
  • Вне сайта
  • Светлый дракон
  • Сообщений: 683
  • Спасибо получено: 350
Ну опция такой стрельбы была бы замечательна.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: yuryol

Дневник разработчика YuryOl 6 года 1 мес. назад #106512

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
Блок-схема

Сделал подобие блок-схемы для плагина АБС.

1) код уже довольно внушительный, по блок-схеме легче ориентироваться в функциях

2) позволяет оценить архитектуру плагина. Как видно на схеме - структура иерархична, и при этом между собой подобия "модулей" не слишком связаны, что облегчает работу с плагином.Также внутри "модулей" связь тоже не слишком сильная, в отличии от предыдущих версий плагина, когда чтобы добавить например бумеранг приходилось лезть в функций 6, чтобы ничего не сломать

3) другими цветами помечены функции сторонних плагинов:
- желтым - плагин Пещерного TileSwap
- серым - плагин Амфилохия EventFactory

4) блок-схема отнюдь неполная, здесь только основные функции (около 70ти). На данный момент функций около ста

5) Основа боевой системы:
- проверка нажатия клавиш YuryolInput, после которых и запускается действие героя.
- проверка столкновений collision.
- худ YuryolHud.

6) Описание каждой из функций пока не сделано

Для увеличения нажать правой кнопкой, затем "открыть в другой вкладке"

Последнее редактирование: 6 года 1 мес. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: idavollr, DK, poca, Doctor_Bug, NeKotZima

Дневник разработчика YuryOl 6 года 1 мес. назад #106615

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
- с оружием в руке герой стреляет вперед, а потом мгновенно - назад. из того же пистолета, не глядя
- с пистолетами в двух руках герой убивает двух врагов впереди, а потом расставив руки в сторону, уничтожает всех по бокам от себя
- с калашом наперевес герой отстреливает противников. внезапно на него нападает чувак сзади, но наш герой фигачит его штык-ножом, не особо отвлекаясь на стрельбу и не меняя оружие
- против танка и пеших сражаться гораздо легче если у тебя оружие с подствольным гранатометом
- и т.д.

Для всего этого в плагин было добавлено альтернативное оружие. По задумке это:
- другой вариант выстрела из этого же оружия. Например,герой из двух пистолетов может стрелять как вперед, таки в стороны.
- дополнительная возможность самого оружия - подствольный гранатомет или альтернативные патроны

Когда-то раньше

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

Для использования этих дополнительных возможностей следовало зажать один из шифтов геймпада при выстреле, что просчитывалось следующим кодом несложным кодом:
if (Input.isTriggered(INPUT_SHOT)) {
     if (Input.isPressed('INPUT_SHIFT')) this.shotWeapon(0, true);
     else this.shotWeapon(0, false);
}

То есть при зажатии двух кнопок вызывалась функция с двумя аргументами: 0 и "true", где:
  • "0" - слот экипировки оружия (для справки: 0 - это оружие, 1 - щит, 2 - броня головы, 3 - броня тела, 4 - аксессуар),
  • "true" - использовано альтернативное оружие. И этот второй параметр так и передавался через все функции, а те, в свою очередь, проверяли какое оружие использовано. Мало того, что было куча проверок, так еще и с каждой новой возможностью оружия этих проверок становилось всё больше

Один параметр

Решение было простым - а давайте просто сделаем возможность вместо альтернативных тегов оружия указывать ДРУГОЕ оружие. То есть при зажатии двух кнопок у нас просто выстреливало оружие с ID, которое указывалось в заметках экипированного оружия. Теперь настройка стала легче

Однако, ни от второго аргумента функции,ни от кучи проверок мы не избавились. Надо оставить один параметр функции, и соответственно этот параметр должен быть слотом экипировки. А потому логично всего лишь взять и добавить еще один слот экипировки, в котором у нас будет храниться альтернативное оружие. Соответственно,код у нас становится таким
if (Input.isTriggered(INPUT_SHOT)) {
     if (Input.isPressed('INPUT_SHIFT')) this.shotWeapon(0);
     else this.shotWeapon(5);
}

Шестой слот

А вот как добавить этот шестой слот была та еще задачка. Минут сорок при инициализации текущей экипировки я пытался вставить дополнительный слот партии $gameParty.leader() . И только потом я наконец догадался, что слоты у партии берутся из слотов героя, у значит у Game_Actor. Еще через мучительных поисков в коде и попыток сделать красиво, я в итоге довольно костыльно изменил одну строчку в функции Game_Actor.prototype.initEquips
var maxSlots = slots.length+1;

До меня таки не дошло, откуда берется количество слотов у героя, и в итоге я тупо прибавил к нему единичку :silly:

А дальше всё просто. Если у оружия в слоте "0" есть тег altId, то мы добавляем шестой слот экипировки с id=5 (помним что нумерация слотов идет с нуля) - $gameParty.leader()._equips[5]:
if (altId) {
     $gameParty.leader()._equips[5]._itemId = altId;
     $gameParty.leader()._equips[5]._dataClass = "weapon";
     this.addParamsWeapon(altId);  
}

Патроны

Ну и последнее - если у нас второе оружие стреляет одинаковыми патронами и по сути является тем же оружием с измеенной характеристикой, то нам надо,чтоб магазин был один. Поэтому добавляем проверку "если у оружия одинаковые патроны, то в функцию "траты" патронов мы передаем магазин оружия с нулевого слота:
let equip = $gameParty.leader().equips();
let altEquip = (equip[0].meta.itemBullet == equip[5].meta.itemBullet) ? equip[0] : equip[5];

ИТОГО:
С помощью менее 10 строчек добавлено альтернативное оружие B)
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: I_LORD, poca, Doctor_Bug

Дневник разработчика YuryOl 6 года 1 мес. назад #106617

  • Doctor_Bug
  • Doctor_Bug аватар
  • Вне сайта
  • Светлый дракон
  • Из горизонта события! ▪_■
  • Сообщений: 573
  • Спасибо получено: 896
  • Программист RubyПроект месяца 1 место3 местоВетеранПроект месяца 3 место3 место в Кодировке
Вот смотрю на блок-схему и думаю. Может тоже состряпать такой же блок. Юр, а на какой проге ты рисовал схему то, фотошоп? Просто так в акурат все нарисованно. Да здесь указаны практически одни update'ы, чувствую разных там переменных и прочих данных много. А вот не сильная связь между модулей это тема. Класс, молодец %)
Баг изучает Godot Engine. А слушает эту музыку ~~> Мое сердце
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: yuryol

Дневник разработчика YuryOl 6 года 1 мес. назад #106631

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
Doctor_Bug пишет:
Вот смотрю на блок-схему и думаю. Может тоже состряпать такой же блок. Юр, а на какой проге ты рисовал схему то, фотошоп? Просто так в акурат все нарисованно. Да здесь указаны практически одни update'ы, чувствую разных там переменных и прочих данных много. А вот не сильная связь между модулей это тема. Класс, молодец %)

спасибо! апдейты - это я описание пока не писал,лень:)

делал в https://go.gliffy.com , но не советую - хоть и удобно, но там только пробный период и сохранить нельзя. я в итоге по-быстрому набросал для пробы и заскринил, а потом склеил в ФШ. Наверняка есть бесплатные инструменты для этого.
Администратор запретил публиковать записи гостям.

Дневник разработчика YuryOl 6 года 1 мес. назад #106633

  • NettySvit
  • NettySvit аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 422
  • Спасибо получено: 1271
  • 3 местоПроект месяца 1 местоУчительРазработчик1 место в Обучающем конкурсеОрганизатор конкурсовДаритель СтимкеяЗа 3 место на конкурсе маппингаТестер2 место
yuryol пишет:
делал в https://go.gliffy.com , но не советую - хоть и удобно, но там только пробный период и сохранить нельзя. я в итоге по-быстрому набросал для пробы и заскринил, а потом склеил в ФШ. Наверняка есть бесплатные инструменты для этого.

Есть хороший сайт для создания блок-схем — draw.io. Всё сохраняет и денег не просит. Надеюсь, подойдет под нужды.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: poca, yuryol, Doctor_Bug, WhitePaper

Дневник разработчика YuryOl 5 года 10 мес. назад #108213

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
NettySvit пишет:
Есть хороший сайт для создания блок-схем — draw.io. Всё сохраняет и денег не просит. Надеюсь, подойдет под нужды.

спасибо, жаль что редко знаем у кого действительно надо спрашивать :(

понемногу прихожу в себя, а потому после двухмесячного "почти-перерыва" возвращаюсь

старый больной человек [ Нажмите, чтобы развернуть ]


Смена оружия

Решил добавить второе оружие и понял, что мои функции никуда не годятся, хотя три месяца назад казалось обратное. Вновь переписал "модуль" смены оружия, теперь он позволяет менять не только оружие, но и броню, вещи и скиллы
  1. Добавил элемент equip в объект $gameParty

  2. Сейчас все "экипированные" элементы сохраняю в нем. На данный момент это
    • Оружия, хранящиеся в $gameParty.equip.weapons
    • Броня, хранящиеся в $gameParty.equip.armors
    • Вещи, хранящиеся в $gameParty.equip.items
    • Скиллы, хранящиеся в $gameParty.equip.skills

  3. Для универсальности функций вместо проверок в духе if ('armors') $gameParty.equip.armors гораздо удобнее возвращать массив через $gameParty.equip . Вроде мелочь, но позволяет избавить от кучи if или от ненавистных мне switch-ей

  4. Подобное очень удобно и для $dataItems, $dataWeapons. Однако записи по типу возвращают массив с элементом строку в нем. Спасибо dmy, благодаря нему допер, что глобальный объект надо вызывать через window.
    Теперь вместо
    if (element = 'items') data = $dataItems;
    if (element = 'weapons') data = $dataWeapons;
    if (element = 'armors') data = $dataArmors;
    if (element = 'skills') data = $dataSkills;
    Или свитча
    switch = (element) {
    case 'items':
      data = $dataItems;
      break;
    case 'weapons':
      data = $dataWeapons;
      break;
    case 'armors':
      data = $dataArmors;
      break;
    case 'skills':
      data = $dataSkills;
      break;
    }
    достаточно написать:
    data = '$data'+element [0].toUpperCase() + element .substring(1);
    data = window[data]

  5. Еще одна проблема: не нашел стандартной функции, возвращающей список ВСЕХ оружий. Есть отдельная функция для возврата оружия в инвентаре:
    $gameParty.weapons()
    Есть стандартная функция для возврата экипированного оружия:
    $gameParty.leader().equips()[0]

    Эти функции не пересекаюся. То есть если у вас два оружия и первое экипировано, то первая функция возвратит неэкипированное оружие, а вторая - экипированное.

    Решается всё довольно простым методом concat:
    $gameParty.weapons().concat($gameParty.leader().equips()[0])
    то есть к оружию в инвентаре добавляется оружие из экипировки

  6. Предыдущий метод возвращает нам массив, в котором экипированное оружие ставится в конце, поэтому нам требуется отсортировать полученный в предыдущем шаге массив через метод sort по ID оружия (arr - массив из предыдущего шага)
    arr.sort((a, b) => {
      return a.id - b.id;
    });

Итого

Таким образом достиг 7-ого левела в программировании, ибо уже 7-ой раз переписываю свою АБС *facepalm*
- переписываю полностью на ES6 (в прошлой версии было на процентов 60);
- стараюсь не сильно дробить функции. В прошлой версии из-за функций из двух строчек модуль расползался значительно, что затрудняло отладку. Теперь дроблю только при проверках, а к примеру различные циклы не выношу отдельно благодаря стрелочным функциям.

Что добавлено:
  1. Использование предметов и скиллов. Теперь Прыжок, бег или телепорт не надо выносить на отдельную кнопку. Надо добавить его в скилл, "экипировать" его и затем уже использовать через кнопку скилла

  2. При этом можно назначить тот же самый телепорт и на отдельную кнопку

  3. Теперь управление на геймпаде примерно такое
    ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]
    • Смена оружия достигается через левый нижний шифт + кнопка выстрела/использования предмета или скилла
    • Альтернативное оружие стреляет через верхний нижний шифт + кнопка выстрела
    • Также смену оружия и второго оружия можно настроить на стики
    • Альтернативное оружие стреляет через верхний нижний шифт + кнопка выстрела
    • На клавиатуре смена оружия-предметов-скиллов на Q,W,E,R, а использование,выстрел оружия-предметов-скиллов на A,S,D,F
    • Для бега на геймпаде не выделено кнопки, так как бегать можно через двойное нажатие стрелки
Последнее редактирование: 5 года 10 мес. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Seibur, DK

Дневник разработчика YuryOl 5 года 10 мес. назад #108329

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
наш Di.H не хвастается, поэтому просто поделюсь в дневничке пиксельным клипом, который создал он с пиксельными товарищами

Feel Good Inc. (Pixel Art Collaboration)


Цитата от админа паблика "16 бит назад" (https://vk.com/16bit_nazad):

"Привет, друзья! Мы, 16 бит назад, совместно с пабликом .pixel этим летом собирали людей для совместного проекта. И наконец наш коллаб на клип Gorillaz - Feel Good Inc. нарисован, смонтирован и склеен! Для нас это действительно много значит - в ходе работы многие художники (а некоторые из них рисовали впервые) получили драгоценный опыт. И сейчас вы можете увидеть результат долгих трудов. Администрация 16 бит назад благодарит всех участников за проделанную работу и желает им новых творческих успехов!

Надеемся, что эта работа будет не последней в жизни нашего паблика. А также надеемся на дальнейшие совместные проекты с ребятами из .pixel. Наша команда, в свою очередь, даст каждому возможность проявить свои творческие способности в последующих задумках. Приятного просмотра!"

Подробнее об участниках и о коллабе:

Оригинальное видео:
Gorillaz - Feel Good Inc.
https://www.youtube.com/watch?v=HyHNuVaZJ-k

Коллаб состоялся благодаря:
- .pixel (https://vk.com/pixel.arts)
- 16 бит назад (https://vk.com/16bit_nazad)

Фейкбит ремикс:
https://soundcloud.com/user-249888718/feel-good-inc-f..
Сделали:
- Theodote - the remix itself (https://vk.com/theodote)
- kubikami - mix & master (https://vk.com/unseeniverse)

Пиксель артисты:
- Akaleaf (https://vk.com/akaleaf)
- Albatross https://vk.com/albatross1997
- Alexander "PASdor" Pushkin (https://vk.com/pasdoor)
- Александа Чирвина (https://vk.com/id46378027)
- aturbidflow/kubikami (https://vk.com/aturbidflow, эй, он заставил ремикс звучать круче!)
- Benedique (https://vk.com/huenduk)
- Crackpot Apricot (https://vk.com/id471257432)
- dethrood (https://vk.com/bonenote)
- Di.H (https://vk.com/dimon_in_hell)
- doctorTARDIS (https://vk.com/doc_tar)
- DuckPsycho (https://vk.com/id281886673)
- Fresh Salad (https://vk.com/id376281682)
- Fullmetal Heretic (https://vk.com/flamorax)
- itsmadxme (https://vk.com/ismab2000)
- ivelsoul (https://vk.com/iv_sashka)
- ivocroza (https://vk.com/ivocroza)
- Krutskoy (https://vk.com/ivan_krutskoy)
- Medini Santjago (https://vk.com/medinisantjago)
- meLogo (https://vk.com/utlyakov0)
- Михаил Сидельников (https://vk.com/muxaulo)
- Mormorion Fox (https://vk.com/id119520212)
- Мухтар Абасов (https://vk.com/mukhtar_abasov)
- muLticake (https://vk.com/mother_king)
- Мурка Мирзоев (https://vk.com/id486362242)
- Настя (https://vk.com/id324724438)
- P.Vale (https://vk.com/debil1945)
- Павел Иванов (https://vk.com/id161982910)
- Pretty Shark (https://vk.com/id440185946)
- Rieraf (https://vk.com/iddimanusus)
- Shilov (https://vk.com/shilov.for.life)
- Sonnenstein (https://vk.com/sonnenstein)
- Taisa Max (https://vk.com/id__sova)
- tap to start (https://vk.com/arvixs8)
- TATAPNHOB (https://vk.com/dantatarinov)
- Theodote (https://vk.com/bogdanr5000, эй, он сделал ремикс!)
- vemigvan (https://vk.com/serfruktoz)
- Владислав Дурочив (https://vk.com/fanklers)
- zedoff (https://vk.com/zedoffrus, эй, он санимировал больше всего кусков!)
- Сорочьи Ножки/Magpie Legs (https://vk.com/mmmmmmmyeahhhhhhhniceeeeeeeeeeee)

Организаторы:
- https://vk.com/vasya_medved
- https://vk.com/paulinedesu
- https://vk.com/bogdanr5000
- https://vk.com/pasdoor
- https://vk.com/tanya_veks
- https://vk.com/aturbidflow
- https://vk.com/schwarzytron

Видео собрал:
kubikami (https://vk.com/unseeniverse)

Палитра, в которой рисовался весь коллаб:
AAP-64 (https://lospec.com/palette-list/aap-64)



IMPORTANT:
All rights are reserved to Gorillaz.
There is no copyright infringement intended for the music used for the remix OR for the video used for the remake itself. If you believe that we have infringed on your rights to any of the music or video material on this channel, please contact us at Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. and we'll take it down immediately (please provide verification that you are the owner of this content). Thank you!
Последнее редактирование: 5 года 10 мес. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: idavollr, Cabbit, Aiaz Marx, PringOva, Noxmils, Iri

Дневник разработчика YuryOl 5 года 10 мес. назад #108330

  • Aiaz Marx
  • Aiaz Marx аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 334
  • Спасибо получено: 492
  • Проект месяца 2 местоПроект месяца 1 место
Круто получилось!) Еще бы знать, что такой Di.H
Наверное, хотелось бы побольше оригинальных кадров, ибо мне показалось 1 в 1 с клипом, ну да ладно.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Dmy, yuryol, Iri

Дневник разработчика YuryOl 5 года 10 мес. назад #108332

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
Aiaz Marx пишет:
Круто получилось!) Еще бы знать, что такой Di.H
Наверное, хотелось бы побольше оригинальных кадров, ибо мне показалось 1 в 1 с клипом, ну да ладно.

вот http://rpgmaker.ru/social/mypage/9190dimoninhell, создатель phantasy-star-20ty-years-past, художник swag and sorcery, иногда постит художества в теме на нейтралке
на светлой не помню постил ли рисунки
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Aiaz Marx, Iri

Дневник разработчика YuryOl 5 года 10 мес. назад #108335

  • Aiaz Marx
  • Aiaz Marx аватар
  • Вне сайта
  • Просветлённый
  • Сообщений: 334
  • Спасибо получено: 492
  • Проект месяца 2 местоПроект месяца 1 место
Ну круто. Вижу, годнота.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Seibur, yuryol

Дневник разработчика YuryOl 5 года 10 мес. назад #108346

  • Iri
  • Iri аватар
  • Вне сайта
  • Познающий
  • Сообщений: 14
  • Спасибо получено: 11
получилось впечатляюще!
но они обвели весь клип покадрово, а потом превратили в пиксели? это скорее кропотливо нежели сложно? пиксель-арт в игре www.swagandsorcery.com выглядит сложнее, чем клип. и как относятся к тем,кто обводит а потом пикселизует?
я не высказываю претензии, просто просветляюсь :cheer:
Последнее редактирование: 5 года 10 мес. назад от Iri.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: yuryol, Noxmils

Дневник разработчика YuryOl 5 года 9 мес. назад #108647

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
Iri пишет:
получилось впечатляюще!
но они обвели весь клип покадрово, а потом превратили в пиксели? это скорее кропотливо нежели сложно? пиксель-арт в игре www.swagandsorcery.com выглядит сложнее, чем клип.

не могу сказать всех, наверное по-разному) а то что и кропотливо и сложно -это 100%
и как относятся к тем,кто обводит а потом пикселизует?
я не высказываю претензии, просто просветляюсь :cheer:

я отношусь нормально, почему бы и нет, если результат в итоге хороший, а автору важен именно результат. другое дело что научиться таким способом можно только рисунку контуров да работе с цветом. а нарисовать персонажа сходу вряд ли сможешь
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Noxmils

Дневник разработчика YuryOl 5 года 4 мес. назад #112481

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
ПОКОДИЛ

понемногу возвращаюсь в мукер, например в субботу кодил около пяти часов! это рекорд - из-за личных обстоятельств более 5 месяцев не мукерил больше часов двух в неделю. дополнительный стимул - теперь программирую на большом 34-дюймовой мониторе :blush:



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

ГАЛАГА с нуля

начать решил с галаги - не особо сложная и при этом от нее легко оттолкнуться к другим играм. в ней у меня три класса - два вспомогательных и основа - Script
class Helper {}
class Images{}
class Script{}

1. Вспомогательный класс Helper

Здесь вспомогательные функции,которые по сути никак не относятся, к логике игры. Пока она одна:

Рандом в интервале двух чисел.
random(min, max) {
  return Math.floor(Math.random()*(max-min+1))+min;
}

Подробнее:
Math.random()- функция, которая возвращается рандомное число от 0 до 1.
Умножаем ее на интервал минимального и максимального числа: Math.random()*(max-min)
Оно обычно с кучей знаков после запятой, поэтому округляем через Math.floor(): Math.floor(Math.random()*(max-min))
Так как Math.floor() округляет "вниз", то к интервалу прибавляем единичку: Math.floor(Math.random()*(max-min+1))
Прибавляем минимальное число, так как мы нашли рандом в интервале между минимумо и максимумом: Math.floor(Math.random()*(max-min+1))+min
class Helper {
  random(min, max) {
    return Math.floor(Math.random()*(max-min+1))+min;
  }
}
class Images{}
class Script{}

2. Вспомогательный класс Images

Картинки, используемые в игре. Чтоб не было зависимостей и не приходилось качать картинки и вставлять их в папку своей игры чтоб пощупать плагин, они сделаны через "base 64 To Img", т.е. каждая картинка записана кодом. Плюс это помогает оптимизировать память.

Например берем картинку звездолета в формате ПНГ, вставляем в этот сайт и получаем здоровенный код.
Cоздаем объект Image: let img= new Image()
А тот здоровенный код указываем в свойство src: img.src = "data:image/png;base64,здоровенный код в кавычках";

Итого:
spaceship() {
    var img = new Image();
    img.src = "data:image/png;base64,здоровенный код в кавычках";  
    return img;
}

То же самое для спрайтов врагов:
enemy() {
    var img = new Image();
    img.src = "data:image/png;base64,здоровенный код в кавычках";  
    return img;
}

куча одинакового кода поэтому создаем фукцию:
base64ToImg(value) {
    var img = new Image();
    img.src = value;    
    return img;
  }

а наши функции звездолета и врагов просто вызывают его:
spaceship() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }

Затем добавляем картинки для повер-апов, титульного экрана, экрана гейм-овера, спрайт врагов

Итого:
class Helper {
  random(min, max) {
    return Math.floor(Math.random()*(max-min+1))+min;
  }
}
class Images{
  base64ToImg(value) {
    var img = new Image();
    img.src = value;    
    return img;
  }
 
  spaceship() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
  powerup() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
  title() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
  gameover() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
  enemy() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
}
class Script{}

3. Основной класс Script

Здесь происходит вся логика игры, плюс хранятся данные.

В первую очередь заполняем конструктор класса, в котором находится запоминаемая игрой информация:
class Script {
  constructor() {}
}

1) создание объекта "канвас" - HTML элемента, использующийся для рисования графики.

this.canvas = document.querySelector("#canvas");
this.context = canvas.getContext("2d");

2) Вызов класса "Хэлпер"

this.helper = new Helper();

3) Вызов класса "Имаджес"

this.images = new Images();

4) Массив с клавишами клаиватуры. Пока это стрелки для управления звездолетом и пробел для выстрелов:
this.keyArray = [
      32, // 'Space bar'
      37, // 'Left' key
      39,  // 'Right' key
      38,  // 'Up' key
      40  // 'Down' key
    ];

5) Объект с нажатыми кнопками:

this.keyState = {};

6) Объект с объектами игры:

this.data

7) В нем у нас находятся переменные-переключатели, говорящие программе стартовала игра или же гейм овер:

start: false,
end: false,

8) Размеры экрана игры:

canvas: { width: 360, height: 680 },

9) размеры титульника, его координаты (x,y), картинка, которую мы берем из класса "имаджес"
title: {
        width: 175,
        height: 55,
        x: 92,
        y: 100,
        image: this.images.title()
      },

10) То же самое для гейм овера
gameover: {
        width: 273,
        height: 33,
        x: 43,
        y: 100,
        image: this.images.gameover()
      },

11) Звездолет: спрайт, ширина, высота, коорднаты х и у, направление выстрелов, текущая и максимальная скорость, жизни, очки и наконец объект "снарядов " fire.
В объекте снарядов также есть шрина, длина, цвет, напарвление, текущая и амксимальная скорость, максимальное чисто выпущенных снарядов и наконец массив со список всех выпущенных снарядов
spaceship: {
        image: this.images.spaceship(),
        width: 45,
        height: 65,
        x: 0,
        y: 0,
        direct: 'front',
        moveSpeed: 4,
        maxSpeed: 10,
        life: 3,
        score: 0б,
        fire: {
          width: 5,
          height: 15,
          color: 'white',
          direct: 'front',
          moveSpeed: 4,
          maxSpeed: 10,
          maxSpawn: 2,
          spawn: [],
        },
      },

12) Враги, у которых есть имя спрайта, ширина, высота, цвет, скорость, жизни, тип, массив со списком всех врагов на экране
enemy: {
        image: this.images.enemy(),
        width: 31,
        height: 31,
        color: 'white',
        moveSpeed: 3,
        life: 1,
        type: 'default',
        spawn: [],
      }

ИТОГО:

Пока наш код такой. По сути это просто база данных с кратинками, база данных с объектами игры и функция рандома. Все конечно не предусмотришь, поэтому скорее всего эта база будет дополняться или наоборот какие-то ее элементы будут убраны.
class Helper {
  random(min, max) {
    return Math.floor(Math.random()*(max-min+1))+min;
  }
}
class Images{
  base64ToImg(value) {
    var img = new Image();
    img.src = value;    
    return img;
  }
 
  spaceship() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
  powerup() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
  title() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
  gameover() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
  enemy() {
    return this.base64ToImg("data:image/png;base64,здоровенный код в кавычках")
  }
}
class Script{
    constructor() {
      this.canvas = document.querySelector("#canvas");
      this.context = canvas.getContext("2d");
      this.helper = new Helper();
      this.images = new Images();
      this.keyArray = [
        32, // 'Space bar'
        37, // 'Left' key
        39,  // 'Right' key
        38,  // 'Up' key
        40  // 'Down' key
      ];
      this.keyState = {};
      this.data = {
        start: false,
        end: false,
        canvas: { width: 360, height: 680 },
        title: {
          width: 175,
          height: 55,
          x: 92,
          y: 100,
          image: this.images.title()
        },        
        gameover: {
          width: 273,
          height: 33,
          x: 43,
          y: 100,
          image: this.images.gameover()
        },
        spaceship: {
          image: this.images.spaceship(),
          width: 45,
          height: 65,
          x: 0,
          y: 0,
          direct: 'front',
          fire: {
            width: 5,
            height: 15,
            color: 'white',
            direct: 'front',
            spawn: [],
            moveSpeed: 4,
            maxSpeed: 10,
            maxSpawn: 2
          },
          moveSpeed: 4,
          maxSpeed: 10,
          life: 3,
          score: 0
        },
        enemy: {
          image: this.images.enemy(),
          width: 31,
          height: 31,
          color: 'white',
          spawn: [],
          moveSpeed: 3,
          summonTime: 50,
          timer: 0,
          life: 1,
          type: 'default'
        }
      }
    }
}
Пока все.

ДАЛЕЕ

В следующем уроке мы:
- нарисуем наш экран игры и корабль, создав для этого функцию "рендер"
- научимся обновлять экран игры
- научимся упарвлять этим нашим звездолет
Последнее редактирование: 5 года 4 мес. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: DK, Cabbit, Noxmils

Дневник разработчика YuryOl 5 года 4 мес. назад #112489

  • Noxmils
  • Noxmils аватар
  • Вне сайта
  • Мастер
  • Сообщений: 186
  • Спасибо получено: 350
  • Организатор конкурсовПрограммист JavaScript Тестер
Уау! :ohmy:
По-моему, этому место в Академии, а не в дневнике, или не только в дневнике. Рад, что в этом уроке затронуты такие вещи, как Канвас и изображения. Спасибо! Очень жду остальных уроков в данном направлении, и готового кода, чтобы посмотреть, как оно будет работать в мукере!
Юриол - молодец! Продолжай в том же духе!
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: yuryol

Дневник разработчика YuryOl 5 года 4 мес. назад #112492

  • yuryol
  • yuryol аватар
  • Вне сайта
  • Архитектор Миров
  • Сообщений: 1704
  • Спасибо получено: 2731
  • 2 место Учитель3 место ГотвОраторПобедитель конкурсаОрганизатор конкурсов1 место в ГотвКомпозитор
Noxmils пишет:
По-моему, этому место в Академии, а не в дневнике, или не только в дневнике.

спасибо,приятно! тут скорее дневник о том, как я пишу урок) не знаю с чего начинать поэтому выходит путанно.

Итак, мы написали базу, но у результата не видно на экране - база да база. Для того, чтобы певратить базу в игру сделаем несколько шагов.

Добавления Canvas

В классе "скрипт" у нас есть строчки
this.canvas = document.querySelector("#canvas");
this.context = canvas.getContext("2d");

Первая строка записывает в переменную HTML-объект с id равному Canvas, поэтому мы должны создать этот самый объект в HTML-файле.
<canvas width="360" height="680" id="canvas" style="background: #000"></canvas>

где:
canvas - элемент, который по своей сути будет служить экраном игры,
width="360" - ширина,
height="680" - высота,
id="canvas" - индивидуальное название элемента,
style="background: #000" - фон элемента.

Есть такой очень хороший сервис - jsfiddle.net, в котором можно писать код на HTML, JS и видеть все это в реальном времени. В нем мы пока и запишем эту строчку https://jsfiddle.net/ev2b5fo1/

В окне просмотра мы видим черный прямоугольник. Это и есть наш Canvas - холст/экран игры, на котором всё и будет происходить.

Перевод картинки в base64

Рисуем наш корабль (тут не урок пиксель-арта, поэтому наш корабль отстой) -



Закидываем картинку на этот сайт для перевода картинки в формат кода

И в поле base64 копируем код, который нам сгенерировали:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAABBCAYAAABFLC27AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABXUlEQVRoge3XSQ7CMAwFUKfi/ndol1wyLFAoVNB4+E7tiL9FdR6pM5TIMbXW6lF38ShK9ATft9UF7oI+QtFwOPoXEAmHonswFByG5oIQcAhaCrHCzWgtwAI3oa0zpn1ejUYtKk0dFRq970rridFeR7OkrgjtBZbWZ6O9wZJxWOhRYO54XfRoMGdct6upZ07RV81yb/z5Zjpq5kJf3c8t3xxzzXTkzIOO0s8tR888Mx09c6Cj9XPLu6uc/RgtpZRCNEt7IHPfVpe6H+jIrUG0+/7tMSovdPTWaKm11twznSl50Vn6uSXvTGdLTnS2fibKOtNXAzRZ2sU6U25E+xfBWUb2fs/Dbo9Rb4QzjqinveHc+uKF6AWX1FXtHmi4tJ56y0PBNXVM+7QVrn3efLhoB7b8YciJKAVY3xDsGOdCEGsBevfogVCLF35h+gVDbpMut7wjMNWlLOMHxj/p8wBz+MQEcXil+gAAAABJRU5ErkJggg==

Теперь вместо строк "data:image/png;base64,здоровенный код в кавычках" в нашем класса Images вставлеяем этот код. Пока у нас и враги, и звездолет будут выглядеть одинаково
class Images{
  base64ToImg(value) {
    var img = new Image();
    img.src = value;    
    return img;
  }
 
  spaceship() {
    return this.base64ToImg("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAABBCAYAAABFLC27AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABXUlEQVRoge3XSQ7CMAwFUKfi/ndol1wyLFAoVNB4+E7tiL9FdR6pM5TIMbXW6lF38ShK9ATft9UF7oI+QtFwOPoXEAmHonswFByG5oIQcAhaCrHCzWgtwAI3oa0zpn1ejUYtKk0dFRq970rridFeR7OkrgjtBZbWZ6O9wZJxWOhRYO54XfRoMGdct6upZ07RV81yb/z5Zjpq5kJf3c8t3xxzzXTkzIOO0s8tR888Mx09c6Cj9XPLu6uc/RgtpZRCNEt7IHPfVpe6H+jIrUG0+/7tMSovdPTWaKm11twznSl50Vn6uSXvTGdLTnS2fibKOtNXAzRZ2sU6U25E+xfBWUb2fs/Dbo9Rb4QzjqinveHc+uKF6AWX1FXtHmi4tJ56y0PBNXVM+7QVrn3efLhoB7b8YciJKAVY3xDsGOdCEGsBevfogVCLF35h+gVDbpMut7wjMNWlLOMHxj/p8wBz+MQEcXil+gAAAABJRU5ErkJggg==")
  }
  powerup() {
    return this.base64ToImg("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAABBCAYAAABFLC27AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABXUlEQVRoge3XSQ7CMAwFUKfi/ndol1wyLFAoVNB4+E7tiL9FdR6pM5TIMbXW6lF38ShK9ATft9UF7oI+QtFwOPoXEAmHonswFByG5oIQcAhaCrHCzWgtwAI3oa0zpn1ejUYtKk0dFRq970rridFeR7OkrgjtBZbWZ6O9wZJxWOhRYO54XfRoMGdct6upZ07RV81yb/z5Zjpq5kJf3c8t3xxzzXTkzIOO0s8tR888Mx09c6Cj9XPLu6uc/RgtpZRCNEt7IHPfVpe6H+jIrUG0+/7tMSovdPTWaKm11twznSl50Vn6uSXvTGdLTnS2fibKOtNXAzRZ2sU6U25E+xfBWUb2fs/Dbo9Rb4QzjqinveHc+uKF6AWX1FXtHmi4tJ56y0PBNXVM+7QVrn3efLhoB7b8YciJKAVY3xDsGOdCEGsBevfogVCLF35h+gVDbpMut7wjMNWlLOMHxj/p8wBz+MQEcXil+gAAAABJRU5ErkJggg==")
  }
  title() {
    return this.base64ToImg("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAABBCAYAAABFLC27AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABXUlEQVRoge3XSQ7CMAwFUKfi/ndol1wyLFAoVNB4+E7tiL9FdR6pM5TIMbXW6lF38ShK9ATft9UF7oI+QtFwOPoXEAmHonswFByG5oIQcAhaCrHCzWgtwAI3oa0zpn1ejUYtKk0dFRq970rridFeR7OkrgjtBZbWZ6O9wZJxWOhRYO54XfRoMGdct6upZ07RV81yb/z5Zjpq5kJf3c8t3xxzzXTkzIOO0s8tR888Mx09c6Cj9XPLu6uc/RgtpZRCNEt7IHPfVpe6H+jIrUG0+/7tMSovdPTWaKm11twznSl50Vn6uSXvTGdLTnS2fibKOtNXAzRZ2sU6U25E+xfBWUb2fs/Dbo9Rb4QzjqinveHc+uKF6AWX1FXtHmi4tJ56y0PBNXVM+7QVrn3efLhoB7b8YciJKAVY3xDsGOdCEGsBevfogVCLF35h+gVDbpMut7wjMNWlLOMHxj/p8wBz+MQEcXil+gAAAABJRU5ErkJggg==")
  }
  gameover() {
    return this.base64ToImg("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAABBCAYAAABFLC27AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABXUlEQVRoge3XSQ7CMAwFUKfi/ndol1wyLFAoVNB4+E7tiL9FdR6pM5TIMbXW6lF38ShK9ATft9UF7oI+QtFwOPoXEAmHonswFByG5oIQcAhaCrHCzWgtwAI3oa0zpn1ejUYtKk0dFRq970rridFeR7OkrgjtBZbWZ6O9wZJxWOhRYO54XfRoMGdct6upZ07RV81yb/z5Zjpq5kJf3c8t3xxzzXTkzIOO0s8tR888Mx09c6Cj9XPLu6uc/RgtpZRCNEt7IHPfVpe6H+jIrUG0+/7tMSovdPTWaKm11twznSl50Vn6uSXvTGdLTnS2fibKOtNXAzRZ2sU6U25E+xfBWUb2fs/Dbo9Rb4QzjqinveHc+uKF6AWX1FXtHmi4tJ56y0PBNXVM+7QVrn3efLhoB7b8YciJKAVY3xDsGOdCEGsBevfogVCLF35h+gVDbpMut7wjMNWlLOMHxj/p8wBz+MQEcXil+gAAAABJRU5ErkJggg==")
  }
}

Итого наш код пока вот такой

Создание базы

Если посмотреть наш код повнимательней, то наша база еще не создана - класс есть, а создания объекта класса нет. Поэтому создаем его в переменную script

var script = new Script();

Для того, чтобы убедиться в том, что код работает, пишем console.log(script);
А затем если вызываете консоль разработчика клавишей f12 для Хрома и CTRL+SHIFT+C для оперы. Во вкладке console видим объект script, знаичт у нас всё хорошо

Если что-то не работает можете свериться с моим кодом

Вы можете понажимать по появившимся объектам в консоли и поизучать их. Особенно полезно будет кликнуть на canvas, затем на context, затем спуститься ниже и нажать на __proto__ и мы увидим кучу методов для рбобты с канвасом. Как-раз их-то мы и будем использовать

3-2.png



Рендер

Ну и остается только произвести рендер нашего звездолета. Для этого создаем метод render в нашем класса script в самый конец класса, после "конструктора"
render(){}

И добавляем туда две строчки: очистку нашего канваса - первые два нуля - начало координат, вторые два числа - ширина и высота очищаемого канваса. Они у нас записаны в объекте canvas в классе "скрипт", поэтому добираемся до этих записей
    this.context.clearRect(0, 0, this.data.canvas.width, this.data.canvas.height);

где:
и затем рисование звездолета
this.context.drawImage(
      this.data.spaceship.image,
      this.data.spaceship.x,
      this.data.spaceship.y,
      this.data.spaceship.width,
      this.data.spaceship.height
    );

где первый аргумент - картинка, которую мы берем из класса "имейдж", а остальные числа как у вышенаписанной функции очистки холста - начала координат , ширина и высота

Теперь нам остается только вызвать этот рендер после создания объекта скрипт. Для этого пшием в конце кода вызов метода "рендер"
script.render();

И сверяемся с живым примером


На этом пока всё. Звездолет нарисован, далее научим его "летать". Подсказка - для этого будем использовать отлов событий с помощью "addEventListener" и эксперементальную функцию для анимации requestAnimationFrame, которую создали авторы Мозиллы фаирфокса, и которая надеюсь останется во всех браузерах.
Последнее редактирование: 5 года 4 мес. назад от yuryol.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: Джекил, Cabbit, Noxmils
  • Страница:
  • 1
  • ...
  • 5
  • 6
  • 7
  • 8
  • 9
Время создания страницы: 1.161 секунд