Показано с 1 по 1 из 1

Тема: [Урок] DX: 2D-графическая анимация

  1. #1
    Проверенный Аватар для Arios Jentu
    Регистрация
    15.02.2012
    Адрес
    Таанаб - Пандат
    Сообщений
    2,433
    Репутация: 319

    Звание: как роза среди колючек

    [Урок] DX: 2D-графическая анимация

    Приветствую всех, дорогие пользователи сия портала.
    Сегодня давайте поговорим об анимации 2D-DX элементов. Мне кажется, что это будет гораздо проще, чем gui-анимация
    Такими элементами будут являться dxImage и dxText.
    Что нам понадобится:
    1) Руки из плеч, а ещё лучше, когда они подключены к мозгу
    2) Базовые знания MTA Lua (строение функции, события, ресурса, работа с переменными, таблицами, ООП)

    Начнём:

    Для текста или изображения (я выберу именно изображение, но ещё рассмотрим пример и с текстом) нам понадобятся собственно координаты. Для этого можно создать несколько переменных, ну а я лучше воспользуюсь таблицей:
    PHP код:
    local Coords = {
        
    50,
        
    50,
        
    100,
        
    100

    Собственно мы создали обычную таблицу со списком переменных. Вызывать каждый элемент можно таким образом - Coords.x, Coords.y, Coords.w, Coords.h. Эти переменные и будут предметом манипуляций. Теперь давайте создадим dx-изображение на экране.
    PHP код:
    addEventHandler("onClientRender"root, function()
        
    dxDrawImage(Coords.xCoords.yCoords.wCoords.h"pane.png")
    end
    Можно было бы дальше расписывать углы поворота изображения, которые можно так-же использовать для анимации, но этим я займусь в следующий раз.
    Итак. Мы создали изображение по табличным координатам. Теперь давайте приступим к анимированию. Для этого создадим переменную, отвечающую за анимирование. Я её создам в уже существующей таблице, и воспользуюсь типом integer, так как буду делать 2 анимации.
    PHP код:
    Coords.Animation 
    Значения для анимации:
    0 - Выключена анимация
    1 - Первая анимация
    2 - Вторая анимация

    И давайте её заанимируем так-же, как и в прошлом уроке. Для проделывания сия операции нам понадобится тоже событие, что и при создании изображения - onClientRender
    PHP код:
    addEventHandler("onClientRender"root, function()
        if 
    Coords.Animation == 1 then //Принцип работы точно такой-же, как и с GUI, тут проверка на использование первой анимации
            //Так как позиции и размеры у нас находятся в таблице, а изображение на них базируется, то сразу можем переходить к редактированию координат
            
    Coords.xCoords.Coords.x+1Coords.y-1
            Coords
    .wCoords.Coords.w-2Coords.h-2
            
    //И остаётся только проверить на координаты для завершения цикла
            
    if Coords.<= 0 then
                
    //Для остановки анимации воспользуемся значением 0, ну а я сразу начну вторую анимацию
                
    Coords.Animation 2
            end

        
    elseif Coords.Animation == 2 then //Если используется вторая анимация
        
            //Точно таким-же образом возвращаем изображение на место
            
    Coords.xCoords.Coords.x-1Coords.y+1
            Coords
    .wCoords.Coords.w+2Coords.h+2
        
            
    //И теперь, чтобы координаты не были больше оригинального изображения, сделаем проверки
            
    if Coords.<= 50 then Coords.50 end
            
    if Coords.>= 50 then Coords.50 end
            
    if Coords.>= 100 then Coords.100 end
            
    if Coords.>= 100 then Coords.100 end

            
    //Так как это dx-элемент, он отображается в рендере, следовательно ему не нужно присваивать размеры через дополнительные функции, он обновится сразу

            //Теперь закроем цикл
            
    if Coords.== 100 then
                Coords
    .Animation 0
            end
        end
    end

    Давайте теперь сделаем функцию для вызова анимации:
    PHP код:
    function startAnim(num)
        
    //Принцип работы точно такой-же, как и в прошлом уроке
        
    if num or num 2 then return false end
        Coords
    .Animation num
    end 
    Вызов анимации мы сделаем по нажатию на клавишу m.
    PHP код:
    bindKey("m""up", function() startAnim(math.random(02)) end
    Я пожалуй на сегодня на этом остановлюсь, а завтра уже распишу, как можно будет сделать плавное ротирование (вылет изображения например), а так-же работа с цветами (RGBA), поддерживаемое DX.

    Конечный результат:
    PHP код:
    local Coords = {
        
    50,
        
    50,
        
    100,
        
    100
    }
    addEventHandler("onClientRender"root, function()
        
    dxDrawImage(Coords.xCoords.yCoords.wCoords.h"pane.png")

        if 
    Coords.Animation == 1 then

            Coords
    .xCoords.Coords.x+1Coords.y-1
            Coords
    .wCoords.Coords.w-2Coords.h-2

            
    if Coords.<= 0 then
                Coords
    .Animation 2
            end

        
    elseif Coords.Animation == 2 then
        
            Coords
    .xCoords.Coords.x-1Coords.y+1
            Coords
    .wCoords.Coords.w+2Coords.h+2

            
    if Coords.<= 50 then Coords.50 end
            
    if Coords.>= 50 then Coords.50 end
            
    if Coords.>= 100 then Coords.100 end
            
    if Coords.>= 100 then Coords.100 end

            
    if Coords.== 100 then
                Coords
    .Animation 0
            end
        end
    end
    )

    function 
    startAnim(num)
        if 
    num or num 2 then return false end
        Coords
    .Animation num
    end

    bindKey
    ("m""up", function() startAnim(math.random(02)) end
    Спасибо за прочтение, и, если будут вопросы, прошу задавать, можете даже в эту тему

  2. 2 пользователей сказали cпасибо Arios Jentu за это полезное сообщение:

    Axel (14.07.2015), Dr.Deft (02.07.2015)

Похожие темы

  1. [Урок] GUI: Примитивная анимация
    от Arios Jentu в разделе Уроки (вики)
    Ответов: 0
    Последнее сообщение: 30.06.2015, 06:12
  2. Анимация
    от BenStiven в разделе Ищу скрипт/мод/функцию/программу/плагин...
    Ответов: 3
    Последнее сообщение: 15.05.2014, 19:04
  3. [Урок] HTML - Урок 2. Структура html
    от All в разделе HTML, JavaScript
    Ответов: 0
    Последнее сообщение: 07.08.2013, 17:49
  4. Анимация
    от Byxou в разделе Вопросы по скриптингу
    Ответов: 2
    Последнее сообщение: 25.07.2013, 12:41
  5. Анимация
    от Endo в разделе Вопросы по скриптингу
    Ответов: 0
    Последнее сообщение: 03.06.2013, 21:36

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •