Делаем это красиво

Введение

Это третья часть моего небольшого руководства по Cocos Creator. В части 1 мы поставили нашу пушку. Во части 2 мы начали нерестить метеоры и стрелять по ним, чтобы уничтожить их. В части 3 мы доработаем наш проект:

  • Добавление крутого фонового изображения
  • Добавление следа частиц к нашим метеорам
  • Добавление анимации взрыва при выстреле метеоров
  • Добавление звукового эффекта при выстреле метеоров

Давайте начнем!

Добавление крутого фонового изображения

Добавление классного фонового изображения очень важно, но очень просто. Просто получите классное изображение (я получил свое из Opengameart здесь. Все ресурсы, которые здесь используются, на самом деле, взяты из Opengameart). Затем переместите его в свое изображение и перетащите в дерево узлов. Это все, что вам нужно сделать:

Добавление следа частиц к нашим метеорам

Обновление префаба Meteor

Во-первых, мы собираемся изменить наш префаб метеора - ну, мы собираемся создать новый - так, чтобы мы могли добавить к нему следы частиц позже. Наш новый префаб не будет просто изображением метеора; вместо этого это будет узел с изображением метеора и следом частицы в качестве его дочерних узлов. Давайте сделаем это:

  1. Открыв префаб игры, создайте пустой узел. Вы можете сделать это, перейдя к «Предустановки узла› Создать пустой узел »в верхней строке меню. Этот узел станет нашим новым префабом.
  2. Затем перетащите изображение Meteor (что раньше было всей нашей сборкой) на новый узел, чтобы он стал его дочерним элементом.
  3. Перетащите наш новый узел - с изображением метеора в качестве дочернего элемента - вниз в файловый навигатор, чтобы создать новый префаб. Это будет наш новый метеор
  4. Наконец, дайте нашему новому узлу все те же компоненты, что и наш старый узел метеора (скрипт, RigidBody и коллайдер), а затем удалите старый префаб.

Так и должно быть! Установите свойство «meteor» в игре на наш новый метеор, и если вы вернетесь в игру, все должно выглядеть и действовать так же.

Добавить след частиц

В Cocos Creator есть встроенная функция создания следов частиц. Если вы хотите развлечься, Apparticle тоже подойдет, но для этого урока я просто воспользуюсь встроенной версией.

Чтобы создать узел «ParticleSystem», выберите «Node Presets› Create Renderer Nodes ›Particle System Nodes» в верхней строке меню. Убедитесь, что это дочерний элемент нашего корневого узла и что он имеет позицию (0, 0), так что он находится прямо посередине нашего узла. Также убедитесь, что он появляется над изображением метеора в нашем дереве узлов, чтобы частицы не закрывали наш метеор.

Это все, что вам нужно сделать, чтобы создать частицы! Вы должны иметь возможность открыть свой проект и увидеть их в действии:

Довольно круто, да? Теперь вы можете свободно подправлять частицы по своему желанию. Если вы установите флажок custom, вам будет предложен набор параметров для ваших частиц. Это то, что я придумал, чтобы дать моим метеорам розовый / фиолетовый след (чтобы соответствовать анимации взрыва - что я и буду делать прямо сейчас)

Добавить анимацию взрыва

Создание префаба анимации

Теперь давайте добавим анимацию взрыва, когда наши пули сталкиваются с нашими метеорами. Опять же, просто зайдите в Opengameart и возьмите один.

Я сделал это путем создания анимации Cocos с использованием отдельных изображений, которые я получил от Opengameart. Это был долгий и ручной процесс, но он помог мне научиться создавать анимацию Cocos, поэтому я проведу вас через весь этот процесс.

Итак, у вас есть изображения:

Чтобы создать анимацию, перейдите на панель «Временная шкала» в редакторе Cocos. Вы можете найти это прямо рядом с «Консолью» в окне под редактором сцены. Когда вы нажмете «Добавить новый AnimClip», вам будет предложено создать файл .anim. Это станет нашей анимацией.

Теперь создайте свой префаб. Создайте пустой узел и перетащите его в навигатор файлов, чтобы создать префаб. Затем добавьте компонент «Анимация» в новый префаб и установите флажок Воспроизведение при загрузке.

На временной шкале анимации теперь у вас должна быть возможность редактировать анимацию взрыва. Выберите «Добавить свойство» на панели временной шкалы и выберите «cc.Sprite.spriteFrame» в качестве типа свойства. Если вы не видите эту опцию, убедитесь, что (1) вы добавили компонент Sprite в свою анимацию и (2) редактируете правильную анимацию.

Когда вы нажмете «+» рядом со свойством «cc.Sprite.spriteFrame» на временной шкале, вы увидите, что ромб выглядит следующим образом:

Теперь переместите этот ромб вправо, чтобы красная полоса не находилась в том же положении, что и он, и снова нажмите «+». Должен появиться еще один алмаз.

Вы можете думать об этих ромбах как о «состояниях» нашей анимации. Мы собираемся добавить по одному для каждого изображения в нашей анимации взрыва, каждое с отдельным спрайтом, чтобы при их последовательном воспроизведении анимация появлялась.

Добавить спрайты к ромбам очень просто. Просто выберите ромб на шкале времени, чтобы он стал белым, а затем перетащите изображение в свойство «Кадр спрайта» на панели свойств. Изображение должно появиться под выбранным изображением.

И сделайте это для каждого изображения, которое у вас есть. Это немного утомительно, и я могу помочь, если я отмечу, что вам не нужно создавать алмазы. Просто установите красную линию в положение (это можно сделать, перетащив белый треугольник над ней), а затем перетащите изображение в свойство «SpriteFrame». Убедитесь, что вы знаете, как долго будет длиться ваша анимация! Примерно 1/3 секунды - хорошая длина.

вот как выглядит моя законченная временная шкала:

Нажав кнопку «play» в левом верхнем углу, я могу наблюдать за анимацией в действии в моем редакторе сцены.

И это все! Теперь у нас есть анимация.

Покажи взрыв, когда наш метеор разрушен

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

  1. Создайте свойство explosion в Game.ts и установите для него наш новый префаб анимации.
  2. Создайте функцию createExplosion() в Game.ts, которая отображает наш взрыв в определенном месте
  3. При обнаружении столкновения в Meteor.ts вызовите createExplosion(), чтобы создать взрыв там, где раньше был метеор.

Теперь посмотрим на код. Вот что я добавил в Game.ts:

И это полностью мой новый Meteor.ts:

И это все! Мы сейчас делаем взрывы.

Добавление звуковых эффектов

Последнее, что мы сделаем, это воспроизведем звуковой сигнал, когда метеорит разрушится. Возьмите звуковой файл и приступим.

Это делается просто путем создания свойства для нашего звукового файла и вызова метода для его воспроизведения. Очень простой. Просто добавьте свойство в свой файл Game.ts:

@property(cc.AudioClip) explosionSound: cc.AudioClip = null

А затем добавьте эту строку кода в createExplosion():

cc.audioEngine.playEffect(this.explosionSound, false)

И вуаля! Сейчас мы слышим звук.

Заключение

Это часть 3, где мы улучшили наш проект, добавив фон, звуки, взрывы и частицы. В части 4 я рассмотрю более продвинутые вещи Cocos Creator, о которых вам нужно беспокоиться, например, об управлении памятью.

Как всегда, полный код каждой части находится на Github.