Первое знакомство с создателем кокосов, созданием игры H5

Предварительный просмотр общего содержимого

Опыт мини-игры.
создатель кокосов прошлого и настоящего.
Знание основных сред разработки.
Знание технологии производства мини-игр.
Базовый анализ грамматики.
Объяснение демонстрации Sunlands-Cow.
Создавайте, публикуйте. (h5, мини-игра WeChat)

Опыт мини-игры:

веб-звезды:https://hytstart.github.io/game/star/
h5 теленок:https://hytstart.github.io/game/cow/

1. Прошлая и настоящая жизнь создателя Кокоса

В: Что такое создатель кокосов и что он может делать?

О: Cocos Creator используется для создания игр, его можно упаковать и собрать для работы на различных платформах, таких как веб, h5, ios, android и мини-игры WeChat.

cocos Creator — это комплексное решение для разработки игр, включающее в себя JavaScript-реализацию движка cocos2d-x, который на основе Cocos2d-x реализует функции сценариев, компонентизации и управления данными.
Прошлая жизнь: краткое введение в игровой двигатель, Cocos2D-X. Помогает понять Cocos Creator.

Игровой движок: Относится к системе, запрограммированной для редактирования компьютерных игр, или к основному компоненту некоторых интерактивных графических приложений в реальном времени, предназначенных для того, чтобы разработчики игр могли легко и быстро создавать игры, не начиная с нуля. Проще говоря, как разработчики, мы можем напрямую использовать различные системы (движок рендеринга, физический движок, систему обнаружения столкновений и т. д.), которые были упакованы для облегчения разработки.
Cocos2d-x: игровой движок с открытым исходным кодом. Вы можете использовать C++, Javascript и Lua для разработки игр.

Эта жизнь: область применения создателя Cocos в основном включает игры, детское образование и т. д. Например, как всем известно, Happy Tank Wars, Happy Mahjong.

图一 - 欢乐坦克大战

Во-вторых, понимание базовой среды разработки [Демо]

Подготовка перед разработкой: компоненты и сущности

Рабочий процесс Cocos Creator сосредоточен на разработке на основе компонентов.Архитектура на основе компонентов также называется системой компонентов-сущностей (или системой сущностей-компонентов).Проще говоря, это создание объектов способом композиции, а не наследования. .
Ссылаться на:Понять модель программирования игровой программирования компонентов-сущности (ECS \ CES)

Затем создайте новый проект проекта создателя кокосов и просмотрите связанные с редактором сцены создателя файлы каталогов сгенерированных проектов и, наконец, упакованные и скомпилированные файлы.

1. Инструмент для разработки игр Cocos Creator.

Создайте новый проект hello world. Сосредоточьтесь на понимании ресурсов, сцен, узлов (то есть сущностей) в сцене, связанных атрибутов узлов и библиотек компонентов (компоненты можно монтировать на узлах).

hello world dashboard

Измените метку строки (управляемую данными) или просмотрите данные в скрипте. Вы можете выбрать эмулятор или предварительный просмотр в браузере. Наконец, все они монтируются на узле холста.

pre look

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

То есть изменения, сделанные в редакторе, сохраняются как данные json, сохраняются в системе контроля версий и используются во время выполнения.

2. Разберитесь с созданным файлом каталога проекта

Новый каталог проектов hello world
helloWrldFile

активы (папка ресурсов)
1. Используется для хранения всех локальных ресурсов, скриптов и файлов сторонних библиотек в игре. В диспетчере ресурсов может отображаться только содержимое каталога ресурсов.
2. Каждый файл в ресурсах будет генерировать файл .meta с тем же именем после импорта проекта.Файл .meta эквивалентен идентификационной карте, которую движок распознает для изображения и соответствующей конфигурации, установленной в редакторе.
3. контроль версий. √
библиотека
1. Структура этого файла и формата активов будет обрабатываться в форму, необходимую для окончательной игры игры. То есть ресурсы, используемые в предварительном просмотре.
2. Не нужно заходить в систему управления версиями, она будет собираться каждый раз при открытии проекта. ×
настройки (настройки проекта)
1. Настройки, связанные с проектом, такие как имя пакета, сцена и выбор платформы в меню «Сборка и публикация».
2. Добавьте контроль версий. √
project.json
1. cocos Creator идентифицирует знак легитимности проекта, который используется для указания используемого в настоящее время типа движка и места хранения подключаемых модулей. С помощью project.json и ресурсов, чтобы открыть проект.
2. контроль версий. √
build (директория сборки)
1. Упакуйте скомпилированный каталог.
2. контроль версий. ×

3. Скомпилированные файлы

helloWrldFileBuild

index.html, main.js, связанные с инициализацией, включая создание корневого узла холста и т. д.
res, структура файла записи и ресурсы.
src, project.js (связанный с кодом), setting.js (связанные с проектом настройки)

3. Знания о создании небольших игровых сцен. [Подробное объяснение предыдущего раздела]

В Cocos Creator игровая сцена (Scene) является центром организации игрового контента при разработке, а также является носителем всего игрового контента, представляемого игрокам. Сцена игры обычно включает в себя следующее:

Изображение сцены и текст (спрайт, метка)
Роль
Скрипты игровой логики, прикрепленные к узлам сцены в качестве компонентов

Когда игрок запускает игру, происходит загрузка игровой сцены.После загрузки игровой сцены автоматически запускается игровой скрипт из включенных компонентов для реализации различных логических функций, заданных разработчиком. Таким образом, в дополнение к ресурсам игровая сцена является основой для создания всего контента.

scene

1. В виде компонента, прикрепленного к узлу сцены.

Как описано выше, компонентная структура и рабочий процесс Cocos Creator сосредоточены на разработке на основе компонентов.
Узлы — это объекты, которые несут компоненты.При установке компонентов с различными функциями на узлы узлы имеют различные характеристики и функции (Примечание: узел может монтировать несколько компонентов, однако к узлу можно добавить только один компонент рендеринга, а компоненты рендеринга включают Sprite, Label, Particle и т. д.).

nodetree

Например, на рисунке ниже представлены узлы (сущности) в нашем проекте hello world, свойства узла (часть, начинающаяся с заголовка узла, — это свойства узла), компоненты и свойства компонентов.

nodetree

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

Связь между узлами, атрибутами узлов и компонентами следующая: отображение узлов определяется настройкой атрибутов узлов (увеличение, уменьшение и т. д.) и визуализацией компонентов.

Далее мы подробно расскажем о свойствах и компонентах узла.

2. Свойства узла

Сосредоточьтесь на вращении, якоре, положении.

вращение, вращайте против часовой стрелки.
якорь, опорная точка. Определяет, какая точка в собственном поле ограничения узла используется как позиция всего узла. После выбора узла мы видим, что положение, в котором появляется инструмент преобразования, является положением точки привязки узла. Точка привязки по умолчанию для создателей — (0,5, 0,5).
position, положение узла относительно родительского узла. Давайте сначала посмотрим на систему координат в креаторе.

Система координат:

Мировая система координат (абсолютная система координат): единая система координат, представляющая пространство сцены в разработке игры Cocos Creator.
Локальная система координат (относительная система координат): система координат, связанная с узлом. Каждый узел имеет независимую систему координат.

То есть в настройках разработки проекта, иерархической структуре отношений родитель-потомок, измените атрибут позиции (Положение) узла, положение узла, установленное в это время, является локальной системой координат узла относительно родительский узел, а не мировая система координат. Наконец, при отрисовке всей сцены Cocos Creator сопоставит локальные координаты этих узлов с координатами мировой системы координат.

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

3. Общие компоненты

компонент спрайта, компонент метки, компонент кнопки, компонент кода

3.1 спрайт (компонент спрайта), наиболее распространенный способ отображения изображений в играх.

sprite组件

Sprite Frame: ресурс изображения.
Режим размера: определяет размер спрайта. (обрезанный означает, что исходный ресурс изображения будет использоваться для обрезки размера прозрачных пикселей; необработанный означает, что будет использоваться необрезанный размер исходного изображения; пользовательский означает, что будет использоваться пользовательский размер).
Тип: Режим рендеринга, включая пять режимов: Простой, Нарезной, Мозаичный, Заполненный и Сетчатый.

Ключевое понимание: Режим ввода в нашем процессе использования широко используется. Это облегчает нам обработку изображений.

Девять сеток (нарезанных). Изображение будет разделено на девять сеток и масштабировано по определенным правилам, чтобы соответствовать размеру, который можно установить по желанию. Обычно используется для элементов пользовательского интерфейса или создания изображений, которые можно бесконечно увеличивать, не влияя на качество изображения, в сетку из девяти квадратов для экономии места игровых ресурсов.

Например: для формы со скругленными углами можно растянуть только среднюю часть. (пузырь чата)

Режим заполнения (filled). Согласно происхождению и типу заполнения. Все изображение может быть нарисовано в пропорции и направлении.

Типы заполнения: ГОРИЗОНТАЛЬНОЕ (горизонтальное заполнение), ВЕРТИКАЛЬНОЕ (вертикальное заполнение) и РАДИАЛЬНОЕ (веерообразное заполнение).
Горизонтальное заполнение: отображение индикатора выполнения. Заполнение сектора: Маленькая иконка для перезарядки умений.

fill填充模式

3.2 компонент этикетки.

Отображаемый текст, текст может быть системным шрифтом, шрифтом TrueType или шрифтом BMFont и художественными номерами. Просто измените свойство шрифта.

font

3.3 компонент кнопки

font

Переход: SpriteFrame кнопки в каждом состоянии (обычное, нажатое, наведение, отключенное). например нажатия кнопок.
нажмите «События»: нажмите «События».

Цель: узел с компонентом скрипта.
Компонент: имя компонента скрипта.
Обработчик: укажите функцию обратного вызова, которая будет запускаться, когда пользователь нажимает кнопку и отпускает ее.
CustomEventData: пользователь указывает произвольную строку для передачи в качестве последнего параметра обратного вызова события.

4. Компоненты скрипта.

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

В-четвертых, базовый анализ грамматики

Откройте файл js только что созданного компонента сценария hello world.

cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, World!'
    },

    // use this for initialization
    onLoad: function () {
        this.label.string = this.text;
    },

    // called every frame
    update: function (dt) {

    },
});

1. cc.Class

class() — это метод модуля cc, который используется для объявления класса в Cocos Creator. Вернуть конструктор. В редакторе создателя добавьте компонент пользовательского скрипта, который эквивалентенnewЭтот конструктор, то есть добавленный экземпляр.

2. свойства: {}, пользовательские свойства узла.

Вы можете определить атрибуты, такие как положение, цвет, размер и т. д. узла (системы), или вы можете определить тип компонента, который вы пишете сами.

// 1. 例如：套牛小游戏。更换牛的种类，以及切换背景图。
// 2. 抛出去的脚本组件中，cowSkinType属性，是一个数组，用来表示牛的种类。
// 3. 他的类型就是一个自定义的cowSkin的组件。cowSkin组件的属性是一个数组，类型是cc.SpriteFrame，可以实现背景图更换，引起牛的视觉上跑动。

const cowSkinComponent = cc.Class({
    name: 'cowSkin',
    properties: {
        cowAnimate: {
            type: cc.SpriteFrame,
            default: [],
        },
    },
})
cc.Class({
    extends: cc.Component,

    properties: {
        cowSkinType: {
            type: cowSkinComponent,
            default: [],
        }
    },
})

3. Жизненный цикл

onload, срабатывает, когда узел активируется в первый раз, например, когда загружается сцена, в которой он расположен, или когда активируется узел, в котором он расположен. Обратите внимание, что к этому моменту узлы и данные сцены готовы.
start, обычно используемый для инициализации некоторых данных промежуточного состояния, которые могут измениться во время обновления. Выполняется после загрузки.
update, каждый кадр (1с/кадр) для обновления поведения, состояния и ориентации объекта перед рендерингом.
onEnable, onDisable, lateUpdate, onDestroyиспользуется нечасто.

4. this.node, экземпляр узла, которому принадлежит компонент скрипта.

this,направлениеnewИз экземпляра компонента.
this.node, узел, которому принадлежит компонент. Вы можете изменить свойства узла в этом узле или найти каждый компонент и изменить свойства компонентов.

5. Доступ к узлам и компонентам.

использоватьgetComponentметод поиска компонента на узле.

start: function () {
    cc.log( this.node.getComponent(cc.Label) === this.getComponent(cc.Label) );  // true
}

Вы также можете установить свойство в скрипте, тип — другие компоненты, а затем перетащить компонент B, который будет использоваться, в инспектор свойств A. Затем вы можете получить этот компонент прямо в файле this.
Найдите дочерние узлы.

// 所有子节点
const children = this.node.children
// 根据name查找单个子节点
let child = this.node.getChildByName('cow')
// 根据路径查找子节点，适合子节点层级比较深的情况。
child = cc.find('Canvas/score/val'， this.node)

Поиск узлов глобально.

this.time = cc.find('Canvas/time/tiemLabel')

6. Общие свойства интерфейса узла и компонента

Доступ, изменение свойств узла

start () {
    // 激活，关闭节点
    this.node.active = false
    // // 更改节点位置
    this.node.x = 120
    this.node.y = 320
    this.node.position = cc.v2(100, 50)
    // // 节点旋转
    this.node.rotation = 90
    this.node.setScale(2, 2)
    // // 更改节点尺寸
    this.node.width = 100
    this.node.height = 100
    // // 更改颜色
    this.node.color = cc.Color.RED
},

Создавать, копировать, уничтожать узлы

const node1 = cc.instantiate(cc.Node); // 克隆节点。
const node2 = cc.instantiate(cc.Prefab) // 复制预制节点。（比如，重复生成的牛）
cc.Node.destroy() // 销毁节点

Здесь я хочу рассказать о сборных ресурсах (префаб-нодах). Сборный ресурс cc.Prefab, подходит для Когда универсальный, многоразовый и с небольшими различиями между людьми.
Создать префаб очень просто: любой узел, созданный в представлении диспетчера иерархии -> перетащите его -> представление диспетчера ресурсов, чтобы завершить создание.

События узла (встроенные в систему, настраиваемые)

Системные события узла: мышь, касание,

Глобальные системные события: клавиатура, определение гравитации

(1) События мыши:

// 使用枚举类型来注册
this.node.on(cc.Node.EventType.MOUSE_DOWN, function (event) {
  console.log('Mouse down');
}, this);

// 使用事件名来注册
this.node.on('mousedown', function (event) {
  console.log('Mouse down');
}, this);

То же, что и выше для сенсорных событий,touchstart, touchmove,touchend,touchcancel.
eventПредоставляет нам множество API-интерфейсов, которые помогают нам получать информацию о местоположении. Например,touchmove, согласно сgetDelta, получить расстояние до объекта, с которого точка касания переместилась в последний раз. Применяется к авиационным войнам.

 this.node.on('touchmove', (e) => {
    const delta = e.getDelta()
    const {x, y}= delta
    this.node.x += x
    this.node.y += y
})

(2) События клавиатуры

onLoad () {
    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this)
},
onKeyDown(event) {
    const { KEY } = cc.macro
    switch (event.keyCode) {
        case KEY.a:
            console.log(event.keyCode)
            console.log(KEY.a)
            console.log('aaaaaaaaa')
            break;
        case 'b':
            console.log('bbbbbb')
            break;
        default:
            break;
    }
},

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

(3) Пользовательские события

// 发送事件
this.node.emit()
this.node.dispatchEvent() // 事件派送，冒泡，可以跨节点
// 监听
this.node.on()
// 取消监听
this.node.off()

keyconsole

действие, действие узла

(1) Объявите тип действия и запустите действие.

const action = cc.moveTo(2, 20, 300)
this.node.runAction(action)
// 停止一个动作
this.node.stopAction(action);
// 停止所有动作
this.node.stopAllActions();

(2) Некоторые общие действия.

const a1 = cc.scaleTo(1, 30)
const a2 = cc.fadeIn(2)

Список действий:click me

(3) Контейнерное действие, пусть каждое действие объединяется для перемещения.cc.sequence(заказ),cc.spawn(Синхронизировать),cc.repeat(повторить),cc,repeatForever(постоянный повтор).

// sequence, spawn
const ac1 = cc.moveTo(2, 50, -130)
const ac2 = cc.scaleTo(1, 4, 4)
const ac3 = cc.rotateTo(2, 90)
const sq = cc.sequence(ac1, ac2, ac3)
this.node.runAction(sq)

// repeat, repeatForever
const ac1 = cc.moveBy(2, 50, -130)
const ac2 = cc.scaleBy(1, 4, 4)
const ac3 = cc.rotateBy(2, 90)
const sq = cc.sequence(ac1, ac2, ac3)
const rep = cc.repeat(sq, 4)
this.node.runAction(rep)

(4) Обратный вызов действия, здесь вы можете справиться с некоторой логикой. Например, узел в движении определяет, касается ли он объекта.

const action = cc.moveTo(5, 20, 300)
const finished1 = cc.callFunc(() => {
    // 比如套牛游戏中，判断牛的位置，是否符合绳子套牛的范围
    console.log(1111111111111111)
})
const ac2 = cc.moveTo(8, 333, 4444)
const end = cc.callFunc(() => {
    console.log(222222222222222)
})
const myAction = cc.sequence(action, finished1, ac2, end);
this.node.runAction(myAction)

(5)cc.delayTime(4)Задержка, используемая с действиями. Например, пропадает взрывное оборудование.

(6) медленное движение.

Easing operation can not be present alone, it is always the basis for modification of operation exists, it can be used to modify the operation of the time base curve, so that the operation with a quick, slow into, faster, or other more complex эффекты.需要注意的是，只有时间间隔动作才支持缓动。

Подобно кривой скорости анимации-времени-функции css3

// 节点旋转，慢慢变慢
const action = cc.rotateBy(3, 360)
const doAction = action.easing(cc.easeCubicActionOut())
const repAction = doAction.repeatForever(doAction)
this.node.runAction(repAction)

прыжок сцены

// 场景切换
cc.director.loadScene("test")

7. Таймер

scheduleOnceоднажды
schedule(функция обратного вызова, интервал, повторы, задержка)
unscheduleотменить таймер
unscheduleAllCallbacksОтменить все таймеры для этого компонента

this.scheduleOnce(() => {
    console.log('scheduleOnce')
}, 2)

const interval = 4
const repeat = 3
const delay = 4
this.callBack = () => {
    console.log('schedule')
    this.unschedule(this.callBack)
    this.unscheduleAllCallbacks()
}
this.scheduleOnce(this.callBack, interval, repeat, delay)

При использованииschedule, постоянно повторяется, может использоватьсяcc.macro.REPEAT_FOREVER, или не записывается по умолчанию.

8. ajax-запрос

// xhr
// 可以直接使用 new XMLHttpRequest() 来创建一个连接对象，也可以通过 cc.loader.getXMLHttpRequest() 来创建，两者效果一致
const url = 'https://easy-mock.com/mock/5cf0b076d205e36f67612985/test/testXhr'
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
        var response = xhr.responseText;
        console.log('response', response);
    }
};
xhr.open("GET", url, true);
xhr.send();

5. Объяснение демонстрации sunlands-cow

Адрес опыта:Мобильный доступ рекомендуется

cowDemo

Прежде чем мы начнем, давайте разберем процесс:

Создайте базовую сцену
бегущая корова
Коровья веревка (упражнение)
Установите суждение об успехе крупного рогатого скота.
Расчет (добавление очков, обратный отсчет), управление ходом игры (перезапуск, завершение)
Добавить фоновую музыку, установить корову в звуковой подсказке, анимацию частиц

1. Создайте базовую сцену

Уведомление:
(1) Измените высоту холста корневого узла, чтобы он подходил для мобильных телефонов.
(2) Вставьте соответствующий узел, обратите внимание на атрибуты кнопки здесь. Кнопка является компонентом кнопки.В дополнение к компоненту спрайта следует добавить компонент кнопки для управления кликом. Среди них изменение сенсорной кнопки, атрибут перехода кнопки — это фокус, о котором мы упоминали выше.

cowBtn

2. Изготовление бегущих коров (три вида коров, по три каждого вида)

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

(1) Создайте три случайных и движущихся коров. Поддерживать двумерный массив для контроля. Отображение наших компонентов, где пользовательские компоненты используются пользовательские типы.

// cowSkinType属性，是一个数组，用来表示牛的种类。
// 他的类型就是一个自定义的cowSkin的组件。cowSkin组件的属性是一个数组，类型是cc.SpriteFrame，可以实现背景图更换，引起牛的视觉上跑动。

const cowSkinComponent = cc.Class({
    name: 'cowSkin',
    properties: {
        cowAnimate: {
            type: cc.SpriteFrame,
            default: [],
        },
    },
})
cc.Class({
    extends: cc.Component,

    properties: {
        cowSkinType: {
            type: cowSkinComponent,
            default: [],
        }
    },
})

В редакторе каждый атрибут компонента COW соответствует разным действиям крупного рогатого скота.

cowAct

(2) Позвольте самой корове двигаться, переключив фоновое изображение

onLoad () {
    //随机生成牛
    this.cowType = Math.floor(Math.random() * 3)
    // 以及 牛的背景更换
    this.cowShow = this.node.getComponent(cc.Sprite)
},

cowPlay(dt) {
    // 牛的背景更换
    this.playTime += dt

    let index = Math.floor(this.playTime / this.duration) // 向下取整数

    if (index >= this.cowAniArray.length) {
        index = 0
        this.playTime -= (this.duration * this.cowAniArray.length) // 接着上面的时间结算
    }
    
    //  在合法的范围之内
    this.cowShow.spriteFrame = this.cowAniArray[index]
},

(3) Перемещение крупного рогатого скота, вupdateВ функции каждый кадр * скорость - смещение.

// 初始化速度
this.cowSpeed = -(Math.random() * 300 + 200)

update (dt) {
    const s = this.cowSpeed * dt
    this.node.x += s
}

(4) Корова в основном закончена. Мы хотим повторно использовать компонент коровы и преобразовать его в префаб. Каждый раз, когда создается новая корова, клонируйте префаб, чтобы создать корову.

Сделать префаб. Добавьте свойства узлу Canvas, сборке коровы, cowPrefab. Перетащите префаб в свойство cowPfab.
В начале игры клонируйте префаб и создайте корову.
После создания коровы каждое второе событие вызывает функцию создания коровы для создания новой коровы.

generatCow() {
    const newCow = cc.instantiate(this.cowPrefab)
    this.node.addChild(newCow)
    newCow.active = true
    newCow.setPosition(this.cowPosition.x, this.cowPosition.y)

    // 调用自己生成牛
    this.scheduleOnce(this.generatCow.bind(this), Math.random() * 3 + 2)
},

startGame() {
    if (!this.isStart) {
        this.isStart = true

        // 生成牛之前，先把所有的计时器取消
        this.unscheduleAllCallbacks()
        this.generatCow()
    }
},

onLoad () {
    // 预制体牛的位置
    this.cowPosition = {
        x: 520,
        y: -120,
    }
    // 游戏是否开始
    this.isStart = false

    this.startGame()
},

3. Вы можете установить веревку коровы.

Веревка может двигаться,
Добавьте событие движения к кнопке button.
После того, как корова установлена, тип коровы должен быть заменен фоновым изображением другой коровы. После последнего набора восстановите веревку по умолчанию.

// 初步的绳子套牛动作衔接
shootRopeOut() {
    if (this.isShooting) return
    this.isShooting = true
    const aniOut = cc.moveTo(0.5, 0, -60)
    const aniIn = cc.moveTo(0.5, 0, -550)
    const endFn = cc.callFunc(() => {
        this.setRopeEmpty()
        this.isShooting = false
    }, this.node)
    const seq = cc.sequence([aniOut,  aniIn, endFn])
    this.node.runAction(seq)
},

4. Определение успешности набора скота.

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

// 拿到现在牛的类型
hitCow() {
    let cowType = -1
    for(let i = 0; i < this.cowGet.length; i++) {
        if (this.cowGet[i].x >= 70 && this.cowGet[i].x <= 190) {
            // cow节点对应的代码组件中的cowType属性
            cowType = this.cowGet[i].getComponent('cow').cowType
            this.cowGet[i].removeFromParent()
            this.cowGet.splice(i, 1)
            return cowType
        }
    }
    return -1
},

// 上面（3.套牛动作衔接）中，再加入绳子套到牛，背景图的改变
const getCow = cc.callFunc(() => {
    const cowType = this.gameScene.hitCow()
    if (cowType >= 0 && cowType <= 2) {
        this.node.y = 42
        this.setRopeCow(cowType)
    }
}, this.node)
const seq = cc.sequence([aniOut, getCow, aniIn, endFn])

5. Расчет (начисление очков, обратный отсчет), управление ходом игры (перезапуск, завершение)

Просто установите фиксированное время обратного отсчета, когда время закончится, новые коровы генерироваться не будут. И всплывает соответствующая панель расчетов.
кнопку rePlay, просто поместите первый скрипт вstartGameСобытие привязано к событию нажатия кнопки.

Примечание. На панель маски маски необходимо добавить кнопку. Блокирует эффект кликов пользователя по кнопке с петлей. Просто не могу нажать кнопку шнурка.

cowAct

6. Добавить музыку, спецэффекты

Веревка обмотана вокруг коровы с намеками на музыку и эффекты частиц.

cc.loader.loadRes('mou', cc.AudioClip, function (err, clip) {
    cc.audioEngine.play(clip);
});

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

cowAct

7. Оптимизация

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

const rope = this.node.getChildByName('rope')
rope.zIndex = 1000
const startBtn = this.node.getChildByName('startBtn')
startBtn.zIndex = 2000
this.check = cc.find('Canvas/check')
this.check.zIndex = 3000

Исходный код можно поставить штамп ->cocos-creator-sunlandsCow
......

6. Создайте и опубликуйте. (h5, мини-игра WeChat)

1. Построить как h5. Просто поместите сгенерированный файл на наш сервер статических ресурсов, чтобы просмотреть его.

cowAct

2. Создайте его как мини-игру WeChat, для которой требуется AppID. А в номере апплета она указана как категория игры.

cowAct

Просмотрите картинку в инструменте разработки WeChat.

cowAct

7. Резюме

Интегрированное решение для обработки и разработки Cocos Creator, независимо от того, работает ли он напрямую с экраном или в сочетании с js-скриптом, обеспечивает удобство.
Наконец, основная цель этого обмена — познакомиться с Cocos Creator вместе с вами, понять его рабочий процесс и его текущее использование. Заинтересованные студенты могут продолжить работу с системой редактирования анимации, системой обнаружения столкновений, загрузкой подпакетов мини-игр WeChat и т. д. на следующем продвинутом этапе.

8. Ссылка

Руководство пользователя Cocos Creator v2.0
Понимание модели программирования игр Component-Entity-System (ECS\CES).