1. Создание фигур. Загрузка изображений

October 21, 2021

В этом уроке мы научимся рисовать простые фигуры и рисовать текст.

Создаем проект

Для начала откройте Solar 2D (возможно, он все еще имеет имя Corona Simulator) и создайте новый проект. Можете ничего не менять никакие настройки на следующем экране и ввести только название проекта.

New project

Мы успешно создали проект. Открылось окно симулятора и консоль с логами приложения.

Empty simulator

Теперь откройте папку, которую вы указывали на этапе создания проекта в Visual Studio Code. Как видим, Solar 2D создал нам несколько файлов. Нас пока интересует только main.lua, про остальные я обазятельно расскажу в следующих уроках.

Рисуем фигуры

Квадрата

Для отрисовки прямоугольника достаточно одной строчки.

local rect = display.newRect(100,100,100,50)

И вуаля, прямоугольник уже нарисовался в нашем симуляторе. Помните, я говорил что Solar 2D - очень простой движок? :)

Empty simulator

Пора разобраться, что же тут происходит, если вы еще не поняли.

Для отрисовки прямоугольника нам нужно вызвать функцию display.newRect которая принимает 4 аргумента (вообще 5, но об этом позже) [x,y,width,height]:

x - координата по оси X
y - координата по оси Y
width - ширина прямоугольника
height - высота прямоугольника

При этом важно знать систему координат в Solar 2D. Нулевой точкой считается верхний левый угол устройства. А точкой опоры, каждой фигуры является ее центр. То есть, когда вы указываете параметры x и y в функции display.newRect вы указываете координаты центра этой фигуры.

Rect

Круг

Для отрисовки круга воспользуемся следующей функцией:

local circle = display.newCircle(20, 100, 20);

Которая принимает следующие параметры: [x,y,radius]:

x - координата X
y - координата Y
radius - радиус круга

Как вставить изображение?

А вот так:

local image = display.newImageRect("Icon.png", 50, 50);

Для примера я взял изображение, которое уже есть у нас. Последние 2 параметра - это координаты по осям X,Y соотвественно.

Аттрибуты и методы

Вы могли заметить, что с нашим вставленным изображением что-то не так.

Rect

Как же задать ему правильные координаты?

image.x = 100;
image.y = 100;

Ого, наше изображение сдвинулось. И такое пройдет со всеми фигурами, которые мы нарисовали, сами попробуйте:

rect.x = 150;
rect.y = 200;

Есть и другие замечательные аттрибуты. Например, мы можем задать обводку:

image.strokeWidth = 5;

Можем также изменить цвет обводки. Для этого вызовем метод:

image:setStrokeColor(1.0, 0.0, 0.0)

Здесь мы задаем цвет в системе RGB, каждый из трех аргументов указывает на интенсивность красного,зеленого и синего цветов. В примере выше мы выкрутили красный на максимум. Попробуйте задать, числа от в диапазоне 0.0 - 1.0 и посмотрите на результат

Таким же образом мы можем задавать цвет заполнения фигур:

circle:setFillColor(0.0, 1.0, 0.0)

Нарисуем текст?

Давайте нарисуем текст, для этого вызовем функцию:

local text = display.newText("Hello, Solar 2D", 30, 250, native.systemFont, 16);

Аргументов в этой функции уже побольше [text, x, y, font, fontSize]:

text - текст, который вы хотите отобразить
x,y - координаты по осям X,Y
font - шрифт, который нужно использовать для отображения текста. Мы пока указали native.systemFont для использования системного шрифта.
fontSize - размер шрифта

Для текстового объекта также можно задавать аттрибуты. Например, можно задать цвет текста

text:setFillColor(0.0, 1.0, 1.0)

На этом все

Поздравляю, мы теперь можем отрисовывать простые фигуры. Для просмотра всех возможностей вы можете заглянуть в API Solar 2D: https://docs.coronalabs.com/api/library/display/index.html

Следующий урок