видеоинтерактивная игра Cocos Creator

внешний интерфейс JavaScript игра Canvas

Я только что посетил салон разработчиков кокосовых орехов на станции Ханчжоу некоторое время назад.После того, как я выслушал введение обновления платформы Creator 2.0, оптимизации производительности и 3D-рендеринга версии 2.1 техническим директором cocos panda, я чувствую, что будущее создателя все еще очень хорошее. . Сегодня я поделюсь с вами недавно созданной образовательной игрой, сочетающей в себе видео и игры. Если вы мало что знаете о создателе кокосов, вы можете получить доступ к движкуОфициальный сайт,api,Форум

Изображение первого эффекта

Если игра реализована на видео?

Все элементы управления создателя отображаются на холсте. Если элементы управления пользовательского интерфейса создателя размещены непосредственно там, где отображается видео, элементы управления будут покрыты видео. Конечно, если вы напишете свой стиль кнопки и поместите его под cc.game.container, он может отображаться, но будет много неизвестных проблем. Итак, этот метод был убит, и текущий метод:
Во-первых, параметр ENABLE_TRANSPARENT_CANVAS под кодом CCMacro.js необходимо изменить, чтобы установить значение true. Ниже приводится описание параметра:

Кстати: движок Creator 2.0 будет перекомпилировать движок каждый раз при открытии редактора, так что после модификации кода для достижения эффекта достаточно перезапустить!
На самом деле.После модификации движка нам также нужно установить прозрачность канвы на прозрачную, код:

    cc.Camera.main.backgroundColor = cc.color(0, 0, 0, 0);

Наконец, установите уровень отображения видео и холста.

        let video0 = document.getElementsByClassName('cocosVideo')[0];
        video0.style.zIndex = 5;

        let gCanvas = document.getElementsByClassName('gameCanvas')[0];
        gCanvas.style.position = 'relative';
        gCanvas.style.zIndex = 10;

Теперь вы можете размещать любой пользовательский интерфейс на видео и работать с ним. Изображение эффекта:

возникшие проблемы

В настоящее время этот метод поддерживает только Интернет.Разные ядра браузеров будут иметь разные эффекты при воспроизведении видео.Например, x5 будет иметь черный экран на некоторое время перед воспроизведением видео.Поэтому, если вам нужно переключить видео во время видео воспроизведение, эффект будет плохим Текущая практика заключается в объединении видео в одно видео и плавном воспроизведении видео путем настройки хода воспроизведения. Пока хорошего решения не найдено.

наконец

Наконец, я хотел бы поблагодарить официальных сотрудников cocos panda.pp_pro за их помощь, я надеюсь, что создатель станет сильнее и проще в использовании.

Категории