Красный блог

43

Сделал tiny-ремейк своей игры на PuzzleScript

Случайно обнаружил замечательный движок PuzzleScript и за вечер сделал ремейк своей игры-головоломки, которую делал давным-давно.

Поиграйте:
https://www.puzzlescript.net/play.html?p=82a11696801f5375f3fb383867c20848

Если интересно разобраться — под плеером с игрой ссылка на редактор кода этой игры.

Оригинальная игра называется Vampire’s Gold Logic Puzzle, в ней 100 уровней, вот ссылка:
https://play.google.com/store/apps/details?id=ru.podhod.vampire.

Буду рад, если вы поиграете в мою игру!

Раскраска 3D модели методом Vertex Color

Современные 3D иллюстрации и казуальные модели для игр имеют общую черту — объекты имеют большие области сплошной плоской «флет» раскраски цветом или легким градиентом. Для реализации такого вида не требуется создавать текстуры, это можно сделать указывая цвета прямо на самих точках модели, и отображая эту инфомацию прямо на модели.

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

Урок раскраски модели с помощью цветовых атрибутов вертексов в Блендер https://youtu.be/hHcxzlHQnUw?si=ZXfLeFt7iQws220N

Vertex Color пайплайн в блендере. Стрим 12.12.2020

Плагин Vertex Color Master для Blender, чтобы менять HSV и закрашивать градиентом.
https://github.com/andyp123/blender_vertex_color_master

Пример создания модели с раскраской вертексами https://youtu.be/OcKyRlFpqUQ?si=B4kUCHCXkujm7AXY

ALEX: СОЗДАНИЕ КАЗУАЛЬНОЙ МОДЕЛИ С НУЛЯ ДО РЕЗУЛЬТАТА. Стрим 31.08.2021.

Совмещение способов текстурирования: вертексами, текстурами и декалями https://youtu.be/IyxczXyuuMg?si=T1zwhOChMEGOJOuC&t=2624

Текстурирование казуальной графики для игр │ Уроки от профессионалов

Дизайн системы UI в Figma

Сегодня нет никакого смысла с нуля создавать стили для типовых интерфейсов, кроме случая когда это является самим предметом вашей работы. В Figma в полном доступе есть сотни готовых решений. В каждую дизайн систему UI вложено сотни часов труда, и лучше сперва потратить свои несколько часов на изучение готовых решений, в поисках подходящего, чем окунаться с головой в создание своего.

Если вы про дизайн-системы ничего не знаете — начните изучение вопроса с этих библиотек дизайнов интерфейсов доступных в Фигме или просто используйте их:

Bootstrap 5 https://www.figma.com/community/file/1044316192441037087

United UI https://www.figma.com/community/file/1020079203222518115

Tailwind CSS UI https://www.figma.com/community/file/768809027799962739

Medusa UI https://www.figma.com/community/file/1278648465968635936

Align UI https://www.figma.com/file/PJ630SzPS3x2D807GYKHOk/

Box-shadow и rectangle-shadow

Для оформления веб-страниц часто нужна тень. В CSS есть тень, которую назвали почему-то «box-shadow», которая создаёт тень как от плоского прямоугольника, которая выглядит как его размытая исходная форма, а, не как ожидается из названия, как тень от коробки (box).

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

И, соответственно, стоило бы назвать такие тени по их объёмности: тень, которая создается от плоского прямоугольника назвать «rectangle-shadow», а тень которая имитирует выдавливание прямоугольного параллелепипеда — «box-shadow».