containers

content/posts/pixijs/01-getting-start-with-pixi.md

@@ -1,10 +1,12 @@
 ---
 title: "Начало работы с Pixi.js"
 date: 2022-08-10T23:08:03+03:00
-draft: true
+draft: false
 tags: [javascript, tutorial, gamedev]
 ---
 
+**DANGER: Это черновик, скорее всего будет сложно для новичка**
+
 # Введение в Pixi.js
 
 ## О Pixi.js
@@ -182,3 +184,34 @@ PixiJS – это модульный движок рендеринга.
 | Application `@pixi/app` | Представляет собой простой помощник, который объединяет загрузчик, тикер и средство визуализации в единый удобный простой в использовании объект. Отлично подходит для быстрого начала работы, создания прототипов и создания простых проектов. |
 | Interaction `@pixi/interaction` | PixiJS поддерживает как сенсорное взаимодействие, так и взаимодействие с помощью мыши - делает объекты кликабельными, запускает события наведения курсора и т.д. |
 | Accessibility `@pixi/accessibility` | Богатый набор инструментов для обеспечения доступа к клавиатуре и программе чтения с экрана. |
+
+# Containers
+
+Класс [Container](https://pixijs.download/release/docs/PIXI.Container.html)
+предоставляет простой отображаемый объект, который выполняет то,
+что подразумевает его название - собирает дочерние объекты вместе.
+
+Но помимо группировки объектов, у контейнеров есть несколько применений,
+о которых вы должны знать.
+
+## Контейнеры как группы
+
+Почти все типы отображаемых объектов являются производными от контейнера - даже спрайты!  
+Это означает, что во многих случаях можно создать иерархию «родитель-потомок» с объектами,
+которые вы хотите отобразить.
+
+## Маскировка
+
+Другое распространенное применение объектов-контейнеров - это замаскировка содержимого. Маскировка - это метод, при котором части вашей сцены видны только в пределах заданной области.
+
+Например всплывающее окне. Оно имеет рамку, состоящую из одного или нескольких спрайтов
+и имеет прокручиваемую область.
+
+Контейнер плюс маска упрощают реализацию этой прокручиваемой области.
+
+PixiJS поддерживает два типа масок:
+
+- Можно использовать графический объект для создания маски произвольной формы.
+Тип мощный, но не поддерживает сглаживание.
+
+- Спрайт: используется альфа-канал из спрайта в качестве маски, обеспечивая сглаженную окантовку, но не поддерживается в Canvas.