Cocos2d-x — Сцены и особые типы узлов

в 13:25, , рубрики: c++, cocos2d-x, разработка игр

От переводчика

Приветствую! Мы продолжаем переводить документацию к движку cocos2d-x. Эта статья содержит сразу две главы, небольшие по объему. Как вы уже догадались, в первой мы разберем способы работы со сценами, а в конце рассмотрим еще несколько типов узлов.

Надеюсь, вы найдете для себя много полезного!

Что такое сцена?

Объект Scene является контейнером, содержащим спрайты, лейблы, узлы и прочие объекты, необходимые вашей игре. Scene отвечает за запуск игровой логики и рендеринг контента в каждом кадре. Вам понадобится как минимум одна сцена, чтобы начать игру. Думайте о вашей игре как фильме. Когда Scene запущена, пользователи видят, что происходит в режиме реального времени. В вашей игре может быть любое количество сцен и вы можете легко переключаться между ними. Cocos2d-x способен осуществлять переходы между сценами и вы даже можете делать это с классными эффектами.

Создание сцены

Сцену создать очень просто:

auto myScene = Scene::create();

Помните граф сцены?

В первой части руководства мы узнали о Scene Graph и о том, как он влияет на рисунок нашей игры. Важно помнить, что он определяет порядок рисования элементов GUI(графического пользовательского интерфейса). Также помните про z-порядок!

Простая сцена

Давайте построим простую сцену. Помните что Cocos2d-x использует правую декартову систему координат. Это означает, что координата 0,0 находится в левом нижнем углу экрана/дисплея. Чтобы грамотно позиционировать элементы вашей игры, необходимо заранее всё просчитать. Давайте создадим простую сцену и добавим к ней несколько элементов:

auto dirs = Director::getInstance();
Size visibleSize = dirs->getVisibleSize();

auto myScene = Scene::create();

auto label1 = Label::createWithTTF("My Game", "Marker Felt.ttf", 36);
label1->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));

myScene->addChild(label1);

auto sprite1 = Sprite::create("mysprite.png");
sprite1->setPosition(Vec2(100, 100));

myScene->addChild(sprite1);

Если мы запустим этот код, мы должны увидеть простую сцену, содержащую Label и Sprite. Это немного, но только пока что.

Переход между сценами

Вам может потребоваться возможность перемещения между сценами в вашей игре. Вероятно при начале новой игры, смене уровня или при ее завершении. Cocos2d-x предоставляет некоторое количество способов перехода между сценами.

Способы замены сцены

Есть много способов смены ваших сцен. Каждый обладает определенной функциональностью. Давайте пройдёмся по ним.
Дано:

auto myScene = Scene::create();

runWithScene() — используется только для первой сцены. Этим методом мы задает сцену для начала игры.

Director::getInstance()->runWithScene(myScene);

replaceScene() — непосредственная замена сцены.

Director::getInstance()->replaceScene(myScene);

pushScene() — приостанавливает выполнение текущей сцены, добавляя её к стеку приостановленных сцен. Вызывайте только при наличии активной сцены.

Director::getInstance()->pushScene(myScene);

popScene() — эта сцена встанет на место активной. Текущая сцена будет удалена. Вызывайте только при наличии активной сцены.

Director::getInstance()->popScene(myScene);

Смена сцен с эффектами

Вы можете добавить визуальные эффекты для смены ваших сцен.

auto myScene = Scene::create();

// Смена выцветанием
Director::getInstance()->replaceScene(TransitionFade::create(0.5, myScene, Color3B(0,255,255)));

// Кувырок по X
Director::getInstance()->replaceScene(TransitionFlipX::create(2, myScene));

// Смена вставкой
Director::getInstance()->replaceScene(TransitionSlideInT::create(1, myScene) );

Другие типы узлов

Вы уже используете Sprite, Label и Action — объекты в своей игре и это прогресс. Кроме основных типов узлов, описанных в предыдущих главах, Cocos2d-x предоставляет более продвинутые типы узлов, обладающие особой функциональностью. Возможно вы хотите сделать игру, основанную на тайлах? Или, может быть, 2D-платформер? Или может вы хотите добавить партикловые эффекты в свою игру? Cocos2d-x предоставляет Node-объекты, которые помогут вам в этом!

TileMap

TileMaps — это карты, состоящие из тайлов (плиток). Каждый тайл может иметь независимое от других поведение. TileMaps хранятся в основанном на XML формате карт, который называется TMХ. TMX был изначально разработан для тайловых карт, но он так же подходит для создания общих игровых уровней благодаря поддержке различных типов объектов. TMX-объекты легко создать:

// чтение карты тайлов
auto map = TMXTiledMap::create("TileMap.tmx");
addChild(map, 0, 99); // с меткой "99" 

Тайл-карты могут иметь несколько слоёв, определённых z-порядком. Вы можете получить доступ к определённому слою по его имени:

// как получить определённый слой
auto map = TMXTiledMap::create("TileMap.tmx");
auto layer = map->getLayer("Layer0");
auto tile = layer->getTileAt(Vec2(1, 63));

Каждый тайл имеет уникальную позицию и ID. Это позволяет очень легко выбирать необходимый тайл. Вы можете получить получить любой по его идентификатору (id):

// получение идентификатора конкретного тайла
unsigned int gid = layer->getTileGIDAt(Vec2(0, 63));

Пример слоёв в тайл-карте:

image

image

Как сделать карту из тайлов? Есть много инструментов, которые делают это. Tiled — популярная утилита. Он активно развивается и имеет отличное комьюнити. Скриншоты сверху — реальные проекты в Tiled.

Партикловые эффекты

Возможно ваша игра нуждается в эффектах, таких как огонь, заклинания или взрывы? Как вы сделаете столь сложные эффекты? Возможно ли это? Конечно! Используйте партикловые эффекты. Particle system — это технология компьютерной графики, использующая большое количество очень маленьких спрайтов или других графических элементов для симуляции нечётких объектов, которые иначе очень трудно воспроизвести с помощью обычных методов рендеринга. Некоторые реальные примеры могут включать очень хаотичные системы: природные явления или процессы, вызванные химическими реакциями. Вот пара примеров партикловых эффектов:

image image

Инструменты для создания партикловых эффектов

Хотя вы можете создавать эффекты вручную, указывая каждое свойство на свой вкус, для этого существует несколько сторонних утилит. Некоторые из инструментов:

  1. Particle Designer: очень мощный редактор партиклов на Mac.
  2. V-play particle editor: кросс-платформенный редактор партиклов для Cocos2d-x.
  3. Particle2dx: онлайн-дизайнер партиклов.

Эти инструменты на выходе дают .plist файл, который вы можете прочитать с помощью Cocos2d-x, чтобы использовать ваше творение внутри вашей игры. Как и во всех других классах, с которыми мы работали, мы используем метод create():

// создание из .plist файла
auto particleSystem = ParticleSystem::create("SpinningPeas.plist");

Встроенные партикловые эффекты

Вы готовы добавить эффектов в свою игру? Мы надеемся на это! Вам пока трудно создавать свои партикловые эффекты? Для простоты есть ряд встроенных партиклов, из которых вы можете выбрать. Взгляните на этот список:

  • ParticleFire: точечный партикль. Использует режим гравитации.
  • ParticleFireworks: точечный партикль. Использует режим гравитации.
  • ParticleSun: точечный партикль: Использует режим гравитации.
  • ParticleGalaxy: точечный партикль. Использует режим гравитации
  • ParticleFlower: точечный партикль. Использует режим гравитации
  • ParticleMeteor: точечный партикль. Использует режим гравитации
  • ParticleSpiral: точечный партикль. Использует режим гравитации
  • ParticleExplosion: точечный партикль. Использует режим гравитации
  • ParticleSmoke: точечный партикль. Использует режим гравитации
  • ParticleShow: точечный партикль. Использует режим гравитации
  • ParticleRain: точечный партикль. Использует режим гравитации

Используя, например ParticleFireworks, вы можете легко создавать встроенные эффекты:

auto emitter = ParticleFireworks::create();
addChild(emitter, 10);

Результатом является партикловый эффект, выглядящий примерно так:

image

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

auto emitter = ParticleFireworks::create();

// зададим длительность
emitter->setDuration(ParticleSystem::DURATION_INFINITY);

// модификация радиуса
emitter->setEmitterMode(ParticleSystem::Mode::RADIUS);

//модификация радиуса: 100 пикселей от центра
emitter->setStartRadius(100);
emitter->setStartRadiusVar(0);
emitter->setEndRadius(ParticleSystem::START_RADIUS_EQUAL_TO_END_RADIUS);
emitter->setEndRadiusVar(0);    // не используется, когда start = end

addChild(emitter, 10);

Параллакс

Parallax — представляет собой уникальный тип узлов, который имитирует параллакс скроллинг. Пара.. что? Да, параллакс. Проще говоря, вы можете рассматривать параллаксовый узел, как специальный эффект, который создает различную видимость позиции и направления объекта, в зависимости от точки обзора. С параллаксом мы встречаемся постоянно, когда смотрим телевизор или снимаем что-то на камеру. Вы можете вспомнить много игр, которые работают таким образом. Super Mario Bros — классический пример. Параллаксовые узлы могут перемещаться путем выполнения последовательности, а также вручную мышкой, касанием или с помощью клавиатуры.

Параллаксовые узлы немного сложнее, нежели обычные узлы. Почему? Потому что они требуют несколько узлов для своей работы. Параллаксовые узлы не могут работать сами по себе. Нужно как минимум 2 узла для работы. Как обычно, в Cocos2d-x параллаксовые узлы легко создавать:

// создадим параллаксовый узел
auto paraNode = ParallaxNode::create();

Нам потребуется несколько Node-объектов, они тоже легко добавляются:

// создание параллаксового узла
auto paraNode = ParallaxNode::create();

// фон передвигается в соотношении 0.4х, 0.5у
paraNode->addChild(background, -1, Vec2(0.4f,0.5f), Vec2::ZERO);

// средний слой передвигается в соотношении 2.2х, 1.0у
paraNode->addChild(middle_layer, 1, Vec2(2.2f,1.0f), Vec2(0,-200) );

// верхнее изображение передвигается в соотношении 3.0х, 2.5у
paraNode->addChild(top_layer, 2, Vec2(3.0f,2.5f), Vec2(200,800) );

Окей, выглядит знакомым, правда? Обратите внимание на несколько вещей! Каждому добавленному узлу присваивается уникальный z-порядок, чтобы они накладывались друг на друга. Также обратите внимание на дополнительные два параметра типа Vec2 в вызове addChild(). Это соотношение и смещение. Эти параметры можно рассматривать как отношение скорости внутренних узлов к скорости родительского узла.

Трудно показать параллаксовый узел в тексте, но вы можете сами попробовать написать этот код, или же запустить тестовый проект — Programmer Guide Sample, чтобы увидеть его в действии!

Автор: MrMysterious

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js