×
=0) { let js = text.slice(pos1, pos2); + '<\/' + "script" + '>'; arrText.push(js); // next pos1 = pos2; continue; } } } break; } return arrText; } function OpenDialog(parentDiv, urlContent) { parentDiv = document.getElementById('modal-background'); // new !!!!!!! parentDiv.appendChild(document.getElementById('modal-template')); document.getElementById('modal-background').style.display = "block"; document.getElementById('modal-template').style.display = "flex"; // !!!!! document.getElementById('modal-body').innerHTML = ""; post_url(urlContent, "", function(text_from_server) { var element = document.getElementById('modal-body'); element.innerHTML = text_from_server; // add scripts var arrJSText = get_scripts(text_from_server); for (var i=0; i
dir.by
Поиск
Программирование, разработка, тестирование
→
Разработка игр | для телефонов на Unity, MonoGame | для браузера Google Chrome на JavaScript, HTML | рисуем графику
→
Создание графики, анимации для 2D игры
→
Какую рисовать картинку для 2D игры: растровую картинку png по точкам или векторную картинку svg по линиям?
Посмотрели
8331
раз(а)
Какую рисовать картинку для 2D игры: растровую картинку png по точкам или векторную картинку svg по линиям?
последнее обновление: 25 апреля 2022
Введение
Почему
2D графика
, а не
3D графика
?
Потому, что 2D графика это относительно просто.
Создание
3D графики
это сложно рисование 3D модели, анимация и встраивание модели в игровой движок достаточно долгое и трудоемкое занятие. И не всегда усилия
3D графики
могут окупиться.
Анимация в игре начинается с рисования 2D персонажа
Чтобы сделать
анимацию
(движение) персонажа нужно сначала нарисовать
персонаж
(героя).
Чтобы нарисовать
персонаж
(героя) нужна фантазия то есть нужно придумать примерно как будет выглядеть.
Можно сначала нарисовать
персонаж
карандашом на бумаге.
Потом нужно нарисовать
персонажа
на компьютере.
Способ 1. Мы рисуем персонаж по точкам (растровая графика на компьютере)
То есть рисуем персонаж по пиксельно (точками).
Другими словами рисование по точкам это как будто мы собираем картинку из мозайки.
Давайте я увеличу картинку. Вот голова совы.
В растровой графике я использую графическую программу:
Adobe Photoshop (рисуем точками) ...
Способ 2. Мы рисуем персонаж линиями, графическими примитивами (векторная графика на компьютере)
Мы можем нарисовать, собрать сову из графических примитивов.
Бровь совы - это линия, а часть крыла - это окружность.
А каждый примитив в редакторе описан математической формулой.
Посмотрите на четкость векторной линии (красная дуга на клюве).
Она рисуется не попиксельно, она описана математикой, командами.
Это также означает, что мы можем увеличивать векторную графику до любых размеров, без потери качества.
В векторной графике я использую графическую программу:
Adobe Illustrator (векторная графика) ...
Какая графика лучше: растровая или векторная ?
Для компьютерных игр лучше рисовать персонажа
векторной графикой
(файл с расширением
svg
) и такой персонаж будет хорошо смотреться на любых разрешениях монитора (ведь вектор = формула).
В векторной графике
есть недостаток: обработка векторной графики ("формулы", масштабирования) ляжет на драйвера видеокарты. А это уже большая нагрузка чем рисование пикселей в растровой графике.
Если вы рисуете персонажа для мультфильма, который собираетесь выложить на youtube, то векторная графика вам не даст сильных преимуществ. Дело в том, что на выходе вы всё равно получите видеофайл, а этот файл фактически набор растровых картинок.
← Предыдущая тема
Как компилировать и запускать игру "Animal Go" для системы iOS | C#, MonoGame
Следующая тема →
2D анимация для игры
Ваши Отзывы ... комментарии ...
Вашe имя
Ваш комментарий
(www ссылки может добавлять только залогиненный пользователь)
+ картинку
Объявления
Объявления
Моя разработка игр на HTML, Javascript, Typescript
•
Пишем игру используя HTML, JavaScript, TypeScript в Visual Studio Code. Я создал несколько ts файлов. Поэтому использую Webpack (собирает все файлы в один js)
•
Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
•
Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes"
•
Моя игра "Wizard World" | HTML, JavaScript
•
Habr рассказ "Сетевая игра на HTML, CSS и JavaScript" (nodejs, socket.io для сети, HTML canvas для графики, игровые карты в js задаются)
•
Habr рассказ "Сетевая игра Танки на HTML, JavaScript" (nodejs, socket.io для сети, библиотека PixiJs для графики)
Моя игра "Animal Go". Технологии: C#, MonoGame, Windows, Android, iOS
•
Моя игра "Animal Go". Как играть. Описание | Игра написана на C# используя MonoGame (запускается на платформах: Windows, Android, iOS)
•
Как я пишу игру "Animal Go" на компьютере Windows. Компилирую получаю exe файл и запускаю | C#, MonoGame
•
Как компилировать и запускать игру "Animal Go" на телефоне или в режиме эмулятора Android на компьютере (Windows) | C#, MonoGame
•
Как компилировать и запускать игру "Animal Go" для системы iOS | C#, MonoGame
Создание графики, анимации для 2D игры
•
Какую рисовать картинку для 2D игры: растровую картинку png по точкам или векторную картинку svg по линиям?
•
2D анимация для игры
Ваши вопросы присылайте по почте:
info@dir.by