Устаревший перевод урока от Andy Reitberger
1.ВВЕДЕНИЕ
1.1 COCOON.IO - Что это?
CocoonIO - это новейший сервис от компании Ludei для компиляции HTML5 игры в Android или IOS приложения. Известно что Ludei предлагают лучшую производительность с их уникальным движком Canvas+. С CocoonIO теперь можно даже добавлять плагины от Cordova и Phonegap в ваш проект. Эта услуга работает в тестовом режиме в данный момент. Если вы хотите узнать больше о Ludei CocoonIO Перейдите по следующим ссылкам: COCOON.IO, Ludei's Blog
Какие преимущества новой технологии? В итоге самые важные преимущества у CocoonIO это:
- Высокая производительность на мобильных устройствах.
- Возможность добавления плагинов от Cordova и Phonegap.
- Небольшой размер файла.
- Встроенные инструменты выравнивания и подписи приложений.
В следующем руководстве я объясню, как компилировать приложение с CocoonIO с нуля. Я буду использовать Construct2 для создания HTML5 игры, но вы можете сделать это с любой Framework HTML5.
1.2 Установка плагинов
CocoonIO использует новые и улучшенные плагины для Construct2. Если вы будете компилировать ваши игры в CocoonIO, то вам рекомендуется удалить старые плагины "CocoonJS" из проекта и заменить все события и действия на новые.
Загрузите архив, нажав на кнопку "Download ZIP" на правой боковой панели. После скачивания распакуйте архив в удобное для вас место. Сами плагины будут находиться в папке "src" распакованного архива. В ней содержатся папки "ads", "cocoon canvas+", "inapps", "share" и "social".
Закройте Construct2 перед установкой плагинов!
В каждой из этих папок есть еще одна папка. Установите плагины, переместив содержимое этих папок в каталог "…/Construct2/exporters/html5/plugins/…". Затем откройте Construct2 и проверьте что все плагины успешно установлены.
2.ЭКСПОРТ
Подготовка игры
В общем, вам не обязательно вносить коррективы в ваш проект, если вы уже используете плагины Cordova (например, от cranberrygame). Вы можете напрямую экспортировать его, как он есть.
Если вы хотите скомпилировать на Canvas+ (то, что я рекомендую), вы должны заменить все функции объекта "Browser" (например Browser.Close) на аналогичные, предусмотренные новым плагином "CocoonCanvasplus". Кроме того, если вы все еще используете старые плагины "CocoonJS", замените их на новые как описано выше.
Откройте свой проект в Construct 2 и выберите платформу для экспорта "Cordova". Старый экспорт CocoonJS работать не будет.
Так же я рекомендую снять выбор с "Minify Script"
Вы можете оставить настройки по умолчанию. Просто экспортируйте его.
Важно! Существует ошибка в файле c2runtime.js.
Пожалуйста прочтите это руководство, чтобы узнать как его исправить.
Правка полноэкранного масштабирования.
Если у вас есть какие-либо проблемы с неправильным масштабированием, выполните следующее:
1.Экспорт с помощью "Cordova"
2.Откройте файл 'c2runtime.js " любым редактором по вашему выбору. (Желательно Notepad++)
3.Ищем в файле такую вот строку:
- Код: Выделить всё
this.isRetina = ((!this.isDomFree || this.isEjecta) && this.useHighDpi && !this.isAndroidStockBrowser);
и меняем её на
- Код: Выделить всё
this.isRetina = ((!this.isDomFree || this.isEjecta || this.isCocoonJs) && this.useHighDpi && !this.isAndroidStockBrowser);
Обратите внимание что вам нужно делать это после каждого экспорта, до тех пор, пока scirra не исправит это.
Затем откройте папку экспорта и откройте файл "config.xml" любым редактором по вашему выбору. (Желательно Notepad++) Найдите там строки:
- Код: Выделить всё
<gap:plugin
В качестве примера:
Скопируйте все плагины в отдельный текстовый файл. Они нам понадобятся позже. Это нужно сделать только один раз, или если вы добавили новые плагины.
Теперь удалите следующие файлы:
- config.xml (убедитесь, что вы скопировали плагины)
- intelxdk.config.additional.xml
Все оставшиеся файлы поместите в ".zip" архив. Он нам понадобится для последующей загрузки.
3.СОЗДАНИЕ ПРОЕКТА
Войдите и создайте новый проект, загрузив архив из предыдущего шага. Просто воспользуйтесь функцией Drag'n'drop или загрузите его вручную.
Ваш проект будет создан. После этого, откройте проект и перейдите на вкладку "Settings" и введите свои данные.Не забудьте сохранить настройки, нажав на значок в правом нижнем углу.
Теперь перейдите на вкладку "config.xml" и найдите закрытие тэга "platform" .
После закрытия этого тега нужно вставить скопированные теги плагинов из старого файла config.xml, помните? Кроме того, вы можете добавить плагины на вкладке "Plugin", но этот способ работает быстрее. Старые тэги плагинов выглядят примерно так:
- Код: Выделить всё
<gap:plugin name="https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#1364a0cc0a782793070396fde481ee5bb6ec5ab7" />
<gap:plugin name="https://github.com/cranberrygame/com.cranberrygame.cordova.plugin.reviewapp#9ec167e557a1c57e1ceb6bbbd2a64c536c4b64d3" />
<gap:plugin name="https://github.com/cranberrygame/cordova-plugin-game --variable APP_ID='YOUR_GOOGLE_PLAY_GAME_APP_ID'" />
<gap:plugin name="https://github.com/cranberrygame/cordova-plugin-payment-iap" />
<gap:plugin name="https://github.com/danwilson/google-analytics-plugin#c13ad4bb9d165b0036f2a6f7f10aeeda48f9f72b" />
<gap:plugin name="https://github.com/simplec-dev/powermanagement#c827126f30514a17644c3a3d15230b3396d07022" />
<gap:plugin name="org.apache.cordova.dialogs" version="0.2.10" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.vibration" version="0.3.11" />
Но при желании и для удобства их можно рассортировать вот так:
- Код: Выделить всё
<!-- default cordova plugins
Just replace the 'gap' with 'cocoon'
-->
<cocoon:plugin name="org.apache.cordova.dialogs" version="0.2.10" />
<cocoon:plugin name="org.apache.cordova.inappbrowser" />
<cocoon:plugin name="org.apache.cordova.vibration" version="0.3.11" />
<!-- GitHub plugins
- replace the 'gap' with 'cocoon'
- remove the #34123234...
- add .git behind the link
-->
<cocoon:plugin name="https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git" />
<cocoon:plugin name="https://github.com/cranberrygame/com.cranberrygame.cordova.plugin.reviewapp.git" />
<cocoon:plugin name="https://github.com/cranberrygame/cordova-plugin-payment-iap.git" />
<cocoon:plugin name="https://github.com/danwilson/google-analytics-plugin.git" />
<cocoon:plugin name="https://github.com/simplec-dev/powermanagement.git" />
<!-- The Google Play Games Plugin
- replace the old code with this one
- enter your ID at APP_ID
-->
<cocoon:plugin name="https://github.com/cranberrygame/cordova-plugin-game.git">
<param xmlns="http://www.w3.org/1999/xhtml" name="APP_ID" value="YOUR_APP_ID" />
Сохраните изменения и если вы сейчас откроете вкладку "Plugins", то увидите там все ваши добавленные плагины.
4.КОМПИЛЯЦИЯ
CocoonIO в настоящее время в бета-версии. Просто введите свой почтовый адрес, чтобы запросить доступ. Следует отметить, что бета ограничена только двумя проектами.
Доступные движки: Canvas+ (recommended), Webview+, Webview.
Я рекомендую Canvas+ так как он обеспечивает высокую производительность и небольшой размер файла, но всё равно выбирать вам. Поменять движок можно на вкладке "Settings".
Загрузка файла с ключами подписи.
CocoonIO позволяет загрузить файл ключей, непосредственно подписать и выровнять игру. Если у вас уже есть ключ, перейдите на вкладку config.xml и прокрутите вниз до "SIGNING" и выберите "Add new key"...
Введите ваши данные и нажмите кнопку 'Добавить'. Затем выберите ключ для подписания. Всё будет сохранено автоматически.
После этого вернитесь назад и нажмите на маленькую кнопку 'Compile' и ваша игра будет скомпилирована.
Вам придёт уведомление когда игра будет готова. В письме будет ссылка на скачивание. И если вы всем удовлетворены, то можете публиковать игру.
Всем спасибо!
Если заметили ошибки, то пишите сюда или в личку 
)
Поддержи проект!