Псевдокласс «Копия»

7 июня 2024 г.

Псевдокласс «Копия»

Автоматически переведённая страница

К сожалению, на полный ручной перевод у нас не хватает ресурсов.
Если вы увидели ошибку — отправьте пул-риквест с исправлениями (ссылка для редактирования в конце страницы).

«Копии» — это элементы, которые взаимодействуют друг с другом на экране и определяют логику игры. Они производны от различных классов Pixi.js в зависимости от выбранного базового класса.

Совет

Для создания и работы с копиями в работающем проекте см. справку по ссылке templates.

Базовые классы

Ct.js использует графическую библиотеку Pixi.js, и копии наследуют множество свойств и методов из классов Pixi.js. Обычно вы будете использовать поля, документированные Ct.js, но с API Pixi.js можно делать гораздо больше.

В зависимости от того, какой базовый класс вы выбираете в редакторе шаблонов, ваша копия будет основана на одном из классов Pixi.js. Класс определяет, какие свойства и методы имеют копии, и вы можете найти документацию по ним там:

Класс Ct.js	Типичные случаи использования	Родительский класс Pixi.js
Animated Sprite	Персонажи, предметы и другие сущности, у которых есть текстура и анимация кадр за кадром.	PIXI.AnimatedSprite
Button	Кнопки пользовательского интерфейса! О, это потрясающе!	PIXi.Container
Container	Индивидуальные элементы, которые можно перемещать и преобразовывать как одно целое со своими дочерними элементами.	PIXI.Container
Панель	Сохраняет углы текстуры — полезно для кнопок пользовательского интерфейса, панелей и растягивания игровых элементов.	PIXI.NineSlicePlane
Текст	Пользовательский интерфейс. Копии, созданные на основе шаблонов текста, могут быть настроены в редакторе комнат и через код.	PIXI.Text
TextBox	Поле, которое может принимать ввод с клавиатуры.	PIXI.Container
Повторяющаяся текстура	Текстура, которая может повторяться и скользить в обоих направлениях без искажений.	PIXI.TilingSprite
Счетчик спрайтов	Отображает несколько спрайтов в ряд в зависимости от его свойства `count`.	PIXI.TilingSprite

INSTANCEOF и копии сt.js

Базовые классы сt.js не образуют дочерние классы, а скорее класс с примененным к своим экземплярам миксином. Вы не можете делать copy instanceof CopyPanel, поскольку CopyPanel не является конструктором, а комбинацией класса и интерфейса Ct.js Copy.

Если вам нужно использовать что-то вроде instanceof в своем коде, вы должны проверять родительские классы Pixi.js, чтобы различать базовые классы Ct.js и использовать templates.isCopy() для определения того, работаете ли вы с копией Ct.js.

Вы также можете прочитать copy.name, чтобы получить имя используемого шаблона Ct.js.

Движение копий

У каждой копии есть следующие параметры для перемещения:

Свойство	Тип	Описание
`x`, `y`	`number`	Координата копия по осям X и Y (горизонтальная и вертикальная).
`xprev`, `yprev`	`number`	Координата копия в предыдущем кадре.
`xstart`, `ystart`	`number`	Координаты, с которых был создан копий.
`speed`	`number`	Скорость движения (или длина вектора `[hspeed; vspeed]`).
`hspeed`, `vspeed`	`number`	Горизонтальная и вертикальная скорость.
`direction`	`number`	Направление движения (от 0 до 360, с правой стороны по часовой стрелке).
`gravity`	`number`	Сила гравитации, выраженная в виде количества `speed`, добавляемого каждый кадр.
`gravityDir`	`number`	Направление силы гравитации (от 0 до 360, по умолчанию 90).

Все значения скорости и гравитации измеряются в пикселях в секунду.

Вы также можете вызвать this.addSpeed для добавления вектора скорости к копию в заданном направлении.

JavaScript

this.addSpeed(speed, dir);

CoffeeScript

@addSpeed speed, dir

Чтобы действительно переместить копий, необходимо вызвать this.move() в коде OnStep копия (он включен во все типы по умолчанию). По умолчанию система движения уже учитывает ct.delta, поэтому копий будет двигаться с той же скоростью на каждой частоте кадра.

Изменение внешнего вида копий

Есть несколько параметров, которые можно изменить:

Свойство	Тип	Описание
`alpha`	`number`	Прозрачность копии. 0 делает копию невидимой, 1 — стандартный режим (полная непрозрачность). Все значения между ними сделают постепенное изменение прозрачности.
`blendMode`	`PIXI.BLEND_MODES` (`number`)	Как графически смешивать копию с остальной частью мира. По умолчанию используется `PIXI.BLEND_MODES.NORMAL`. Может быть одним из: `PIXI.BLEND_MODES.NORMAL` `PIXI.BLEND_MODES.ADD` `PIXI.BLEND_MODES.MULTIPLY` `PIXI.BLEND_MODES.SCREEN`
`zIndex`	`number`	Уровень рисования. Копии с более высоким значением будут нарисованы поверх других.
`angle`	`number`	Ориентация копии в градусах от 0 до 360, начиная с правого края и по часовой стрелке.
`scale`	`PIXI.ObservablePoint`	Умножающий фактор объекта. Вы можете либо назначить одно простое значение (`this.scale = 0.5;`) для равномерного масштабирования, либо получить доступ к его составным значениям `x` и `y` (`this.scale.x = 0.5;`).
`tex`	`string`	Имя текстуры ct.js, которую нужно использовать. Установка `this.tex = 'NewTexture';` изменит отображаемую текстуру и сбросит анимацию.
`tint`	`number`	Цветное тинтинг-изображение спрайта. Это шестнадцатеричный код. Значение `0xFFFFFF` удаляет эффект тинтинга. Цвета те же, что и в CSS, но с `0x` вместо `#`, например, `0xFF0000` — красный, `0x00FFFF` — синий, и т.д.
`visible`	`number`	Видимость объекта (`true` или `false`).

Примечание

Не все свойства поддерживаются для каждого базового класса:

Свойство blendMode не имеет эффекта при использовании на Container копии;
Свойство tex недоступно для контейнерных и текстовых шаблонов.

Удаление копий (свойство `this.kill`)

Чтобы удалить копию, просто установите параметр kill в true.

Пример: удалить копию, если ее здоровье истощено

JavaScript

if (this.health <= 0) {
    this.kill = true;
}

CoffeeScript

if @health <= 0
    @kill = yes

Заметка

Код события будет выполняться до конца. Копии логически удаляются между событиями Frame Start и Frame End.

Дополнительные методы и свойства базовых классов

Анимированный Спрайт

Следующие свойства и методы доступны только для шаблонов Animated Sprite:

Свойство	Тип	Описание
`animationSpeed`	`number`	Скорость анимации. Чем выше, тем быстрее, чем ниже - медленнее.
`currentFrame`	`number`	Только для чтения. Текущий индекс кадра рисования. Изменяйте его с помощью методов `gotoAndPlay`, `gotoAndStop`.
`totalFrames`	`number`	Только для чтения. Общее количество кадров в копии.

Методы:

`copy.gotoAndPlay(frameIndex)`

Перейти к определенному кадру и начать воспроизведение анимации.

`copy.gotoAndStop(frameIndex)`

Остановит анимирование и перейдет к конкретному кадру.

`copy.play()`

Воспроизведет анимацию.

`copy.stop()`

Останавливает анимацию.

Текст

Существует несколько дополнительных свойств для шаблонов текста:

Свойство	Тип	Описание
`text`	`string`	Текст для отображения. Вы можете изменить его, чтобы заменить метку текста.
`textStyle`	`PIXI.ITextStyle` или `PIXI.TextStyle`	Стиль текста, определяющий внешний вид текста. Вы можете получить объект text.js и назначить его метке текста программно с помощью `this.textStyle = styles.get('имя_стиля')`

Контейнер

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

Хотя контейнеры и не могут отображать что-либо самостоятельно, они могут скрывать свой контент и применять к нему шейдеры (фильтры). См. примеры в официальной документации pixi.js.

`copy.addChild(childElement)`

Добавляет новый дочерний элемент в контейнер. Это может быть любое отображаемое объект pixi.js или копия ct.js.

Пример: добавление копии в качестве дочернего элемента к контейнеру (`this`)

JavaScript

var healthBar = templates.copy('HealthBar');
healthBar.x = 0;
healthBar.y = -50; // Поместите healthBar выше центра контейнера.

var sprite = new PIXI.Sprite(res.getTexture('Enemy', 0));

// То же, что и this.addChild(healthBar); this.addChild(sprite);
this.addChild(healthBar, sprite);

CoffeeScript

healthBar = templates.copy 'HealthBar'
healthBar.x = 0
healthBar.y = -50 # Поместите healthBar выше центра контейнера.

texture = res.getTexture 'Enemy', 0
sprite = new PIXI.Sprite texture

# То же, что и:
#   @addChild healthBar
#   @addChild sprite
@addChild healthBar, sprite

`copy.removeChild(childElement)`

Удаляет указанный дочерний элемент из контейнера.

`copy.removeChildAt(индекс)`

Удаляет указанный дочерний элемент по указанному индексу, начиная с 0.

`copy.children`

Массив всех дочерних элементов контейнера.

`copy.setChildIndex(childElement, newIndex)`

Найдет заданный дочерний элемент и переместит его в новое положение, при этом 0 будет первым элементом.

`copy.sortChildren()`

Сортирует дочерние элементы по значению zIndex.

`copy.getBounds(updateTransforms)`

Возвращает объект с свойствами x, y, width, height и также top, bottom, left и right, описывающими границы контейнера, включая всех его дочерних элементов.

Если updateTransforms установлен в true, выполняется дополнительная проверка для обновления позиций копий в игровом мире. Обычно вам не нужно устанавливать это значение в true.

Кнопка

Кнопки — это контейнеры, которые автоматически создают и управляют текстом и девятисекционный план внутри них. У них такие же методы и свойства, как и у копий контейнера, плюс следующие свойства:

text — метка текста, отображаемая на кнопке.
panel — девятисекционный план внутри кнопки.
disabled — логическое значение, которое включает или выключает кнопку. Это влияет на то, может ли пользователь активировать нажатие на кнопку и также меняет ее текстуру на отключенную (если вы установили текстуру для нее в панели появления шаблона).

Пример: изменение текста кнопки

JavaScript

this.text.text = 'Новый текст!';

CoffeeScript

@text.text = 'Новый текст!'

If you have any questions or need assistance with something else, feel free to ask!

Пример: отключение кнопки, когда у игрока недостаточно денег

Это можно разместить в событии "Frame End".

JavaScript

if (rooms.current.money >= 50) {
    этот.отключен = false;
} else {
    этот.отключен = true;
}

// Более короткий способ сделать то же самое:
this.disabled = rooms.current.money < 50;

CoffeeScript

if rooms.current.money >= 50
    @disabled = false
else
    @disabled = true

# Более короткий способ сделать то же самое:
@disabled = rooms.current.money < 50

Текстовые поля

Этот базовый класс позволяет создавать текстовые поля, которые могут использовать вы и ваши игроки для ввода настраиваемого текста. Поле имеет параметры для поддержки числовых вводов, обычных строк и замаскированных паролей.

Копии, использующие этот базовый класс, имеют два дополнительных события, на которое можно подписаться, чтобы отслеживать изменения текста. В этих событиях вы можете использовать переменную value, чтобы получить текст. Кроме того, доступны следующие свойства:

text — текстовое значение этого поля.
fieldType — может быть одним из 'text', 'password', 'email' или 'number'.
maxLength — максимальная длина текста, который можно ввести.

Пример: отправить запрос входа на сервер, прочитав имя пользователя и пароль из двух текстовых полей

JavaScript

var login = templates.list['LoginField'][0].text,
    password = templates.list['PasswordField'][0].text;
// Обычно аутентификация гораздо сложнее, чем этот упрощенный пример
fetch('https://yourServer.com', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        login,
        password
    })
}).then(response => {
    if (response.ok) {
        return response.json();
    }
    throw new Error('Не удалось войти');
}).then(json => {
    if (json.ok) {
        rooms.switch('InGame');
    }
}).catch(error => {
    console.error(error);
    rooms.switch('Login_NetworkError');
});

CoffeeScript

login = templates.list['LoginField'][0].text
password = templates.list['PasswordField'][0].text

payload =
    login: login
    password: password

# Обычно аутентификация гораздо сложнее, чем этот упрощенный пример
fetch 'https://yourServer.com',
    method: 'POST'
    headers:
      'Accept': 'application/json'
      'Content-Type': 'application/json'
    body: JSON.stringify payload
.then (response) =>
    if response.ok
        return response.json()
    throw new Error 'Не удалось войти'
.then (json) =>
    if json.ok
        rooms.switch 'InGame'
.catch (error) =>
    console.error error
    rooms.switch 'Login_NetworkError'

Повторяющаяся текстура

Этот базовый класс позволяет создавать анимационные (или статические) прямоугольники произвольного размера с текстурой, повторяющейся по схеме плитки. Копии этого базового класса имеют следующие дополнительные свойства:

scrollX и scrollY — скорость движения по Оси X и Y, измеряемая в пикселях в секунду;
tileScale.x и tileScale.y могут использоваться для растяжения текстуры внутри прямоугольника. scale.x и scale.y расширяют прямоугольник без изменения масштаба текстуры.
tilePosition.x и tilePosition.y могут использоваться для ручной позиции текстуры внутри прямоугольника.

Пример: Создайте волнообразную анимацию повторяющегося текстура

JavaScript

// В событии создания
this.wavePhase = 0;

// В событии конца кадра
// 0.5 замедляет частоту движения в два раза.
this.wavePhase += u.time * 0.5;
// 32 — это амплитуда движения.
this.tilePosition.x = Math.sin(this.wavePhase) * 32;

CoffeeScript

# В событии создания
@wavePhase = 0

# В событии конца кадра
# 0.5 замедляет частоту движения в два раза.
@wavePhase += u.time * 0.5
# 32 — это амплитуда движения.
@tilePosition.x = Math.sin(@wavePhase) * 32

Счётчик спрайтов

Этот базовый класс шаблона можно использовать для создания здоровых штрихов и других элементов пользовательского интерфейса, которые отображают несколько спрайтов в ряд. Этот базовый класс не вводит много особых свойств, кроме "количества":

Пример: Измените количество отображаемых спрайтов в зависимости от оставшихся жизней

JavaScript

this.count = rooms.current.lives;

CoffeeScript

@count = rooms.current.lives

Разное

`copy.getRoom()`

Возвращает комнату, которая владеет текущей копией. Это полезно при работе с разными комнатами на сцене. Возвращает экземпляр класса Room.

`copy.template`

Имя шаблона, из которого была создана Копия (строка).

`copy.addChild(anotherCopy)`

При использовании Containers вы можете добавлять в контейнер другие копии (или объекты pixi.js), и они будут перемещаться и преобразовываться вместе с контейнером. Вы позиционируете копии внутри контейнера относительно его координат x, y, а не относительно точки 0;0 в комнате.

Обратите внимание, что модули катмодов для коллизий обычно работают только в том случае, если копии помещены непосредственно в комнату, поэтому вам следует использовать контейнеры в основном для элементов интерфейса или декоративных предметов.