From 3f406dea19964a3df045e69feaa1a4818ed84c75 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Sun, 14 Aug 2022 23:28:55 +0300 Subject: [PATCH] containers --- .../pixijs/01-getting-start-with-pixi.md | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/content/posts/pixijs/01-getting-start-with-pixi.md b/content/posts/pixijs/01-getting-start-with-pixi.md index 77a72f5..f6c81b5 100644 --- a/content/posts/pixijs/01-getting-start-with-pixi.md +++ b/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.