Экспорт в APK (Android) при помощи CocoonJS

техническая поддержка по Construct 2

Сообщение Экспорт в APK (Android) при помощи CocoonJS
» 07 мар 2013, 05:39

Не так давно я задался вопросом экспорта на мобильные платформы, в частности на Android. Сначала я попробовал "Intel XDK" (бывший AppMobi)... это было жутко. Не вдаваясь в подробности, объясню почему я не возлюбил этот сервис:
- Перед компиляцией проекта, нужно пройти несколько шагов, следуя определенным правилам сервиса, в которых нужно копать и разбираться... даже если ты просто, тупо, хочешь для себя посмотреть как твоя игра будет выглядеть на экране мобилки, даже без желания её продавать и загружать в маркеты.
- Очень не дружелюбный интерфейс... элементы управления мне показались вовсе не очевидными. Дизайн красивый, но слишком нагроможденный.
- И самое главное - все игры у меня тормозят при любом варианте и даже на расхваленном directCanvas. Причины этому до сих пор для меня мрачная тайна.

Быть может для использования этого сервиса нужно быть продвинутым программистом, знать все его API и тому подобное? Не знаю, но с "Construct 2" он работает просто ужасно!

PhoneGap не пробовал, т.к. слышал, что эта штука не для игр! И вот добрался до CocoonJS... буквально за 5 минут во всем разобрался и сделал свой первый билд, который к моему охренительному удивлению, работал охренительно быстро! Игры работают в 2-3 раза быстрее, чем в браузерах! К тому же отлично работает WebStorage-объект и работает вообще прозрачно, что очень немаловажно для игр с сохранениями.
Но и здесь есть свои нюансы:
- При бесплатном использовании сервиса в играх вставляется его логотип (большая картинка, показывающаяся 3 секунды перед запуском игры)
- Всё таки игры идут не на всех устройствах и не на всех устройствах они идут быстро. Но это нормальное явление, просто нужно тестить и составлять список поддерживаемых устройств.
- Чтобы отлаживать игру - приходится постоянно загружать её на сервис и ждать хрен знает сколько, пока тебе на мыло придет ссылка на скачивание билда!

!ВНИМАНИЕ! Теперь уже есть очень удобный инструмент для тестирования игр: https://play.google.com/store/apps/deta ... jslauncher - качайте это на свой андроид и далее будет достаточно подтвердить свой аккаунт и просто запускать экспортированный ZIP-файл с игрой.
Но всё равно, вам очень пригодятся знания по компиляции и декомпиляции apk, так что читаем дальше и вникаем;)


Последнее меня бесило больше всего! Я хотел бы иметь возможность компилировать свои проекты в пару кликов так же, как это можно сделать при экспорте в обычный HTML5 и при экспорте в Node-Webkit. Я потратил выходные на разгугливание темы и наконец добился этой возможности! Однако, прежде чем всё будет просто, нужно подготовиться... и для новичков это будет не так уж и "однокликово" на первый раз. Просто читайте внимательно и делайте, что говорит добрый дядя wink::

Для начала я расскажу как в принципе экспортировать в CocoonJS без продвинутых манипуляций.
Делаем экспорт своей игры в CocoonJS:
Изображение

Жмем Launch the CocoonJS.... или переходим по ссылке: https://cocoonjsservice.ludei.com/cloud/login/
Изображение
Естественно, в CocoonJS нужно быть зарегистрированным! Регистрация в принципе простая... Предположим, что вы это уже сделали и входе в систему должны увидеть список своих проектов (если они есть):
Изображение
Если их нет - то жмем зеленую кнопку New Project, что отправит вас на страницу настройки проекта:
Изображение

Здесь всё предельно просто, как видно из моего примера... Даже английский знать не обязательно.
Application Name - это то, как будет называться ваша игра на телефоне.
Bundle Id - уникальный идентификатор вашего билда. А вот здесь интересно! Сначала я подумал, что этот идентификатор можно менять как версию, но нет - если вы его поменяете, то это уже будет считаться совершенно другой программой и устанавливаться она будет параллельно, а не заменяя (обновляя) вашу уже установленную версию игры! К тому же на Play Markete вы не сможете сделать обновление, если поменяете этот идентификатор. Обычно этот ИД создается по следующей схеме: com.mycompany.mygame. Т.е. что это? Компонент, значит com. Далее идет название вашей компании или просто ваше имя, а далее название игры. У меня это тупо siriusx666.bearputana00210 - просто так, чтобы уж точно ни с чем не повторилось.
Application Version - ну, здесь и ежу понятно, что это такое. В отличии от ИДа, версию можно менять каждый раз или не менять вовсе, всем пофиг.
Orientation - на какую ориентацию экрана рассчитана ваша игра? Думаю здесь тоже обойдемся без комментов.
А далее идет настройка "растягивания" игры на весь экран - Application Scale Method. Благо здесь тоже есть наглядные примеры и объяснения они не требуют, просто нажмите кнопочку Example и всё станет ясно. Если у вас возникают проблемы со скрытием объектов ЗА пределами экрана из-за несоответствия пропорций - вот пример того, как я решил эту проблему у себя.
Всё настроили? Жмем внизу кнопочку Save Project.

Теперь идем в раздел Android:
Изображение
Здесь вам просто нужно загрузить иконки для вашей игры. Всё просто, формат должен быть PNG и требуемые размеры тоже написаны, например PNG 48x48px. Создать эти иконки можно даже в паинте, а можно тупо загрузить черные квадраты (если вы просто хотите протестить игру, а не выкладывать в сети)

Переходим в раздел Services -> Splashes (Ранее раздел назывался "Common Assets"):
Ставим галку на "Show Custom Splashes"
И жмем кнопку Update.

Изображение
Здесь загружаем картинки, которые будут показаны перед запуском игры. Размеры не важны.

Ну, а теперь идем в Compile Project:
Изображение

Здесь жмем кнопочку "Выбрать файл" и выбираем получившийся ZIP-архив нашей игры при экспорте (!ВНИМАНИЕ! В вашем проекте все объекты, переменные и слои необходимо именовать английскими символами! Иначе могут возникнуть проблемы с компиляцией!). Ставим все галочки и жмем кнопку Compile project! Всё! Ждем, когда ссылка на скачивание придет к вам на мыло!!! А на мыло придет архив с двумя APK:
1) Debug signed - подписанный для тестирования на мобильном устройстве, но без возможности загрузки в стор.
2) Release unsigned - для загрузки в Store, но не подписанный (Подробнее об этом здесь: viewtopic.php?f=4&t=625).

Скачали? Ок... Пока будем работать с файлом, который "Debug signed", переименуем его во что-то своё, например в Bear.apk. Попробуйте его установить на ваш телефон и проверить работоспособность. Допустим всё работает, но вы желаете что-то изменить в коде игры... По идее опять нужно загружать на сервис, ждать компиляции, качать в 2 раза больше чем надо... бееее, отстой. Но, я вас уже к этому подготовил и теперь даже не понадобится наличие интернета!

Изменение кода игры и компиляция без необходимости загрузки на CocoonJS!
И так, первое, что для этого нужно сделать - это скачать Java и Apk Manager.
Java качаем здесь: http://www.oracle.com/technetwork/java/ ... 80260.html (Возможно, что для скачивания потребуется регистрация).
В принципе подойдет и более старая версия (а точнее она подойдет абсолютно точно, просто новое - всегда приятнее=) ): http://www.oracle.com/technetwork/java/ ... 36632.html

Пройдя по ссылке найдите вот такой список:
Изображение
Возможно перед тем как вы попадете на страницу с этим списком нужно будет нажать кнопку Download:
Изображение
Но у меня это потребовалось только для шестой версии.

Далее ставим переключатель на Accept License Agreement и качаем версию для своей операционной системы (Я качал для Windows x64).
После скачивания ничего замутного делать не придется - просто запустите файл и тупо тыкайте Далее-Далее-Далее (Next-Next-Next), отвечая положительно на все запросы. Никаких дополнительных манипуляций настроек java не требует! И это хорошо!© :yahoo:

Поставили? Ок. Приступаем к скачиванию Apk Manager: http://4pda.ru/forum/index.php?showtopi ... ry16363962 файл APKmanager_5.1.zip. (здесь для скачивания абсолютно точно потребуется регистрация). Кстати, для продвинутых, на этой страничке вы сразу сможете понять, что делать с этим Апк Манагером, а для не очень продвинутых советую читать меня дальше=)
Скачали? Распаковываем папку находящуюся в архиве в любое место на компе, но путь к этой папке не должен содержать русских символов! Короче, не парьтесь, просто распакуйте её в корень какого-нибудь диска... я просто распаковал её в диск C:\ и путь к папке выглядит так: C:\ApkManager (переименовал, убрав в имени 5.1, но вам этого делать не обязательно).

Далее в папке ApkManager должны быть такие папки:
Изображение

Всё верно? Ну, тогда вы готовы к великим подвигам!

Находим там папку "place-apk-here-for-modding" - в нее качаем APK-файл вашей игры (которая ранее была создана в CocoonJS).
Запускаем файл Script.bat и видим такое окошечко:
Изображение

 ВНИМАНИЕ! Если у вас вместо русского текста "крякозябры" - сделайте следующее:
Кликаем на черненькую иконку левом верхнем углу и выбираем "Умолчания"
Изображение

В появившемся окне, в закладке "Шрифт" выбираем шрифт Lucida Console
Изображение
Далее жмем ОК, закрываем консоль и снова запускаем Script.bat.


У меня мой файл Bear.apk нашелся сразу, о чем свидетельствует его имя в правом верхнем углу. Ежели такового нет, то пишем "22", жмем Enter, затем пишем номер под которым имя вашего файла.
Изображение
У меня это 1.

Затем делаем Декомпиляцию файла (9).
Если все прошло нормально - то в папке APKmanager\projects\ должна появиться папка с именем идентичным вашему файлу игры... у меня это всё тот же Bear.apk.
Заходим по пути APKmanager\projects\Bear.apk\assets\game\ - в этой папке лежат файлы вашей игры. Это те самые файлы, которые С2 экспортирует для CocoonJS в ZIP-файле. Т.е. если вы что-то изменили в вашей игре, экспортировали это для CocoonJS - то теперь просто удаялем все файлы в папке APKmanager\projects\Bear.apk\assets\game\ и копируем туда всё, что находится в архиве с экспортируемой игрой!
Всё сделали? Теперь возвращаемся к нашему черненькому окошечку с голубым текстом:) и водим команду номер 14 (Компилировать / Подписать / Установить).
Приложение компилируется, подписывается... а вот с установкой возникнут ошибки (об этом, возможно, напишу позже.. а пока просто не обращайте внимание).
Идем в папку APKmanager\place-apk-here-for-modding\ - видим свой Bear.apk и рядом лежит signedBear.apk - вот она! ВОТ ОНА СБОРКА ВАШЕЙ МЕЧТЫ!!! Копируем её на телефон и устанавливаем, тестим!)))

 Если возникают ошибки при компиляции.
У многих возникают ошибки, типа "adb не является внешней или внутренней командой" или
"Не удается найти C:\APKManager\place-apk-here-for-modding\../place-apk-here-for-modding/signedGive.apk
Не удается найти C:\APKManager\place-apk-here-for-modding\../place-apk-here-for-modding/unsignedGive.apk"

Первое, что вы должны помнить - это то, что я не спроста советую всем копировать "APKManager" в корень системного диска и удалять в имени папки все лишние символы. Путь к данной папке не должен содержать пробелов, странных символов "#", точек, запятых и русских символов, так же путь до папки должен иметь минимальную длину! Всё это с технической точки зрения не обязательно, но, черт возьми, хватит умничать и делайте так, как я говорю во избежании проблем и глупых вопросов... Когда вы будете задавать мне вопросы - я буду автоматически считать в первую очередь то, что вы выполнили на все 100% вышеописанные условия и буду думать о другом решении вашей проблемы.


Теперь, что касается второй популярной ошибки "Не удается найти..." - она у меня возникала частенько, но при этом всё работало, а раз всё работало - то я и не заморачивался на счет её устранения. Но, пользователь Pasifia после решения первой проблемы, решил пойти дальше и таки нашел решение второй, за что ему большое спасибо. Вот, что он пишет:

"Кстати проблема решена, почистил ccleaner-ом временные файлы и установил другой апк менеджер.
Параллельно нашёл инфу как избавиться от ошибки "Не найден путь...."
Может кому будет полезно.

Reported by project member Brut.alll, Dec 5, 2011

If you use --rename-manifest-package option to aapt when building resources something weird happens. Resources are built for old package name, but manifest uses new one. This makes resources broken a little when using current apktool, because they're built for new package name, so resulting apk is a little different than original one.

In most cases it doesn't matter because resource package name isn't that important. However in some cases it is, e.g.:
- I think framework apks with changed resource package shouldn't work anymore
- if apk declares its own attrs and uses them in XMLs, they're referenced by package name, so references are broken after decoding - you won't be able to build apk back.

Problem can be reproduced very easily: just create new Android project, define some attr, use it in XML and then build resources with --rename-manifest-package. You will be able to apktool-decode resulting apk, but you will get "error: No resource identifier found for attribute" errors when building back.

Proper solution to this problem is to revert manifest package back to original one. So:
- check if resources package is different than the one in AndroidManifest.xml
- if so then rename android:package to that found in resources.arsc and store original android:package in apktool.yml
- when building use --rename-manifest-package if it is found in apktool.yml

Also in the case of apk-with-attrs files it should be possible to fix the problem quite easily without apktool support: just replace "http://schemas.android.com/apk/res/${originalPackage}" with "http://schemas.android.com/apk/res/${renamedPackage}" in all XML files. You can do this in unix by e.g.:

find res -type f | xargs perl -pi -e 's/http:\/\/schemas.android.com\/apk\/res\/com.touchtype/http:\/\/schemas.android.com\/apk\/res\/com.touchtype.swiftkey/g'


Вывод некоего Лерика:
"В итоге, как я понял, проблема в том, что в файлах с разметкой написан пакет "http://schemas.android.com/apk/res/com.touchtype", а в манифесте package="com.touchtype.swiftkey.phone.beta".
Для пробы изменил манифест на "com.touchtype" - все собралось.
Значит при получении такой ошибки есть два пути - найти во всех файлах разметки неправильное название и заменить на то, что в манифесте или же взять то, что написано в файлах с разметкой и заменить в манифесте. Думаю предпочтительней первый вариант.

З.Ы. Для тех, кто будет встречать эту ошибку в дальнейшем и найдет сей пост: для автоматической замены во всех файлах этой строки можно использовать Notepad++ (Ctrl+F -> Найти в файлах, дальше указываем папку и понеслась...)"


Далее таким же образом можно создать и следующий билд, просто заменяя файлы в папке APKmanager\projects\Bear.apk\assets\game\ и не нужно никакого интернета и нудных ожиданий!


Спасибо за внимание! Подписывайтесь, ставьте лайк плюс. Пока!


 Дополнения к статье и новые плюшки;)
Скрытие логотипа CocoonJS.
Вооружившись НЕХ-редактором, сделал хак (libCocoonJSLib.zip во вложении), который убирает логотипы CocoonJS! Вместо логотипа будет показан черный экран, но при желании его можно заменить на любую PNG-картинку! (Статья о том, как я это сделал.) Скачиваем архив и распаковываем файл в папку APKmanager\projects\bear.apk\lib\armeabi\, заменяя оригинал!
Только для личного использования и общеобразовательных интересов!
*использовалась версия CocoonJS от 10.03.2013

Далее обещал заняться вопросом удобной возможности экспорта для Free-пользователей... но я передумал это делать, т.к. считаю это несправедливым к тем, кто всё таки купил лицензию, а так же это будет несправедливым по отношению к Scirra. Чем больше у них купят С2 - тем скорее и круче они допилят его новые версии.
Так что данная статья скорее для владельцев лицензии выше Free.
Вот моя игра (без взлома) под андроид: https://dl.dropbox.com/s/84tq25vpi48fo1g/bear.apk - тот самый медведь))) Устанавливайте, тестируйте. Надеюсь это сподвигнет купить лицензию и экспериментировать самим.


У кого вылетают игры или не загружаются дальше логотипа CocoonJS - попробуйте проверить маску коллизии: viewtopic.php?f=4&t=444&p=20084#p20084


При каких-либо изменениях и дополнениях - буду редактировать данный пост!


 Обращение к читателям
Если вы разобрались в какой-то фишке, не видя при этом доступных по ней уроков - не пройдите мимо, создайте свой урок! Это не так трудно и нудно как кажется, если начать... Сначала я думал, что это очень тягомотно и на это требуется куча времени и вообще уроки создают только девственники, у которых ни забот, ни хлопот. ^^ прошу прощения за свой сарказм :mocking:. Но попробовав, я понял, что это не так уж и трудно... а когда в итоге все получается хорошо и народ благодарит "плюсами" - понимаешь, что потратил время не зря! Без энтузиазма не было бы интернета и этого форума, поэтому не проходите мимо - делитесь своими знаниями.
Надеюсь мотивировал;) Всем спасибо, все свободны=)

Для создания скриншотов я использую QIP Shot - очень удобно.
libCocoonJSLib.zip
(2.55 МБ) Скачиваний: 856
Для замены оригинального файла в папке APKmanager\projects\bear.apk\lib\armeabi\
Последний раз редактировалось virusfun 18 июл 2013, 09:37, всего редактировалось 30 раз(а).
Большое спасибо всем, кто пишет мне респекты в ЛС! Очень рад, что до сих пор мои советы, примеры и уроки пользуются спросом... Но, к сожалению, я уже давно не занимаюсь разработкой игр и программированием вообще, поэтому я уже не лучший советчик в этом деле, да и времени совсем нет. Здесь на форуме я уже практически не бываю, но всегда открыт для общения в ВК: vk.com/virusfun
Но хоть меня здесь почти нет, мне все равно будут приятны ваши отзывы и плюсы [+]
Аватара пользователя

Игродел
Сообщений: 893
Я тут с 23 сен 2012
Откуда: Хабаровск
Репутация 124 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 06:38

virusfun, как я долго этого ждал! Спасибо :good2:!
Аватара пользователя

Участник
Сообщений: 1347
Я тут с 06 сен 2012
Репутация 4 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 06:47

Огромное спасибо! Теперь хоть более-менее стало ясно с появлением игр на андроид.
Последний раз редактировалось Seryiza 09 мар 2013, 05:09, всего редактировалось 1 раз.
Аватара пользователя

Игродел
Сообщений: 226
Я тут с 11 фев 2013
Откуда: Россия, О. Сахалин
Skype: Seryiza
Репутация 180 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 07:38

ну для проверки изменений можно использовать клиент cocoonjs.apk на маркете есть, и не надо ничего загружать к ним на сервер, только если уже собирать конечный вариант. Просто кидаешь zip архив в корень sdcard на android устройстве и все проверяешь! вот ссылка на google play
Вот если бы действительно решить вопрос как убрать их заставку при запуске приложения, ковырял apk? но так и не нашел где это закодировано!
Аватара пользователя

Участник
Сообщений: 189
Я тут с 14 сен 2012
Откуда: Россия г. Томск
Репутация 5 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 07:50

degortg, ахахах)) где ж ты раньше был, когда я был озадачен этим вопросом?) Спасибо! Безусловно пригодится.

Чтобы узнать где закодировано их тайное послание - нудно расшифровывать файлы... для этого потребуются другие утилиты. Я уже готов ковырять, да только вот... праздник на носу, готовимся=) Как ежели что узнаю новое - дополню пост и здесь отпишусь!

Позже планирую еще долнить маниуал тем, как же поступить владельцам Free-лицении. Там ведь нельзя использовать ништяки экспорта в CocoonJS. Вроде бы проблема решается простым сбором всех файлов игры в одну папку...
Большое спасибо всем, кто пишет мне респекты в ЛС! Очень рад, что до сих пор мои советы, примеры и уроки пользуются спросом... Но, к сожалению, я уже давно не занимаюсь разработкой игр и программированием вообще, поэтому я уже не лучший советчик в этом деле, да и времени совсем нет. Здесь на форуме я уже практически не бываю, но всегда открыт для общения в ВК: vk.com/virusfun
Но хоть меня здесь почти нет, мне все равно будут приятны ваши отзывы и плюсы [+]
Аватара пользователя

Игродел
Сообщений: 893
Я тут с 23 сен 2012
Откуда: Хабаровск
Репутация 124 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 08:18

virusfun писал(а):Позже планирую еще долнить маниуал тем, как же поступить владельцам Free-лицении. Там ведь нельзя использовать ништяки экспорта в CocoonJS. Вроде бы проблема решается простым сбором всех файлов игры в одну папку...

мне кажется это не поможет, но попробовать стоит!
Аватара пользователя

Участник
Сообщений: 189
Я тут с 14 сен 2012
Откуда: Россия г. Томск
Репутация 5 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 10:07

virusfun, красавчик!! :good2:
Аватара пользователя

Администратор
Сообщений: 5556
Я тут с 05 сен 2012
Двиг: Construct2
Лицензия: Personal
Skype: c2community
VK: gabrielsailergray
Репутация 370 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 11:38

Пригодится )
осталось только допилить игру
Аватара пользователя

Игродел
Сообщений: 373
Я тут с 24 ноя 2012
Репутация 78 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 15:39

Судя по всему, логотипы и вообще "тело" cocoonjs находится в файле libCocoonJSLib.so. Открыл его HEX-редактором, вижу 3 тела файла PNG, одно из них очень похоже на то, что они предлагают в примеры (zip-пак их логотипов) - наверняка оно! прям уверен! После праздника попробую заменить тело нулями или другим телом. Теоретически должно проканать!

У меня возникла идея... А что если найти игру, которая создана методами CocoonJS, но от премиум пользователя? Затем таким же макаром её выпотрошить, и заменить файлы игры на свои=)) Гениально и просто! Вот только где игру то найти такую?
Большое спасибо всем, кто пишет мне респекты в ЛС! Очень рад, что до сих пор мои советы, примеры и уроки пользуются спросом... Но, к сожалению, я уже давно не занимаюсь разработкой игр и программированием вообще, поэтому я уже не лучший советчик в этом деле, да и времени совсем нет. Здесь на форуме я уже практически не бываю, но всегда открыт для общения в ВК: vk.com/virusfun
Но хоть меня здесь почти нет, мне все равно будут приятны ваши отзывы и плюсы [+]
Аватара пользователя

Игродел
Сообщений: 893
Я тут с 23 сен 2012
Откуда: Хабаровск
Репутация 124 [ ? ]

Сообщение Re: Экспорт на мобильные платформы при помощи CocoonJS
» 07 мар 2013, 17:59

virusfun писал(а):У меня возникла идея... А что если найти игру, которая создана методами CocoonJS, но от премиум пользователя? Затем таким же макаром её выпотрошить, и заменить файлы игры на свои=)) Гениально и просто! Вот только где игру то найти такую?


google play

вот игра от ludei собранная на cocoonjs, качай да потроши:)только не уверен, что без этого логотипа, не ставил не проверял!
Аватара пользователя

Участник
Сообщений: 189
Я тут с 14 сен 2012
Откуда: Россия г. Томск
Репутация 5 [ ? ]



Вернуться в Вопрос-Ответ по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх