Build Cocos Creator to single file HTML

I test ads with Facebook Playable Ads but have problem. Facebook requires: "A single file for playable ad that contains all assets as part of that single HTML file and assets should be data uri compressed. (Javascript, CSS, images, sounds). "
https://www.facebook.com/business/help/412951382532338?helpref=related

2 Likes

@pandamicro @slackmoehrle help me

I have the same question @pandamicro @slackmoehrle

@duchieu @gadapchetvoi

Iā€™m about to look into this as well. Did any of you come up with a solution?

1 Like

Iā€™d like to know about this, too.

Found this but havenā€™t tried it yet: https://github.com/chongshengzhujue/playableFBCompile

1 Like

Ok, I tried it a sort of got it to work. The python script didnā€™t work for me so I had to write my own node script to convert assets to base64 encoded strings. I used the to two files, index.html and main.js provided in the above link and got a hello world example to work.

Running it on our own games gave me errors as the physics engine was having trouble accessing bodies for some reason.

Tried this as well and got the compile.py to work by installing Python 2.7.15.

I have successfuly created and uploaded to Facebook Ads manager my Ad. But it seems that my ad as well as the pure compiled demo project uploaded to Facebook (I needed to add FB click function to be able to upload it) does not render sprites (?).

I am able to see the ā€œhelloā€ text but neither the green background nor the cocos sprite from the demo is visible in Facebook preview. I do see everything fine if I host the ad for example on my web server (only the html file is needed so it is merged ok).

Has anyone been successful in creating a Facebook Ad with Cocos and actually created a working Ad from it? :slight_smile:

Hi have this error.

I think is for setLoadingDisplay parameter and files in raw-internal

any idea?

I fixed it, you can check https://github.com/cocos-creator/engine/commit/ada2855dbeb5c2913a4f44d2947854daea9aa3f5

Hello duchieu,

Thank you for your help! Unfortunately I am not sure what I can do with this :slight_smile: Could you walk me through it?

  1. I am working on Cocos 1.9.3 since the example facebook Ad project does not work with Cocos 2.0. After building and merging with python script the generated index.html crashes at start in Cocos 2.0.4.
  2. I have made the changes that you have posted to my locally installed engine version (1.9.3). I did it by editing *.js files in notepad but this seem to have no effect. I am new to Cocos so not sure if this is what I should have done.
  3. If this is of any help please find attached the one file build of the demo that crashes index_Cocos_1_9_3.zip (325.3 KB)

And the crashing single file version build on 2_0_4 (crashes also while hosted on a simple www server).
index.zip (330.2 KB)

thanks, it worked very well.

iXen, could you post your project somewhere pliz so I could take a look how you did it?:slight_smile:

mstruzyna

If you only change the file, this not work, because you need compile the cocos2d.

In this page are de instruction.

Maybe if you use all pakage of cocos creator substituting the cocos2d-js-min.js for my file is enough for you, change before you use python script.

I can not send it here.

Edit: I make all this for compile in mac:

Last login: Tue Oct 23 17:32:48 on ttys003
iMac-Felix:~ felixantonioenriquezpedrote$ cd /Applications/CocosCreator1.9.app/Contents/Resources/engine/bin
iMac-Felix:bin felixantonioenriquezpedrote$ ls -l
total 84976
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 3168102 4 jul 11:14 cocos2d-js-for-preview.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 2399518 4 jul 11:14 cocos2d-js-for-preview.js.map
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 1607062 4 jul 11:14 cocos2d-js-min.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 12908264 4 jul 11:14 cocos2d-js-min.js.map
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 3975451 4 jul 11:14 cocos2d-js.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 13205077 4 jul 11:14 cocos2d-js.js.map
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 1078621 4 jul 11:14 jsb_polyfill-for-preview.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 1033864 4 jul 11:14 jsb_polyfill.dev.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 559953 4 jul 11:14 jsb_polyfill.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 817716 4 jul 11:14 modular-cocos2d-cut.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 957994 4 jul 11:14 modular-cocos2d-cut.js.map
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 817712 4 jul 11:14 modular-cocos2d.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 957990 4 jul 11:14 modular-cocos2d.js.map
iMac-Felix:bin felixantonioenriquezpedrote$ cd ā€¦
iMac-Felix:engine felixantonioenriquezpedrote$ ls -l
total 456
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 12479 4 jul 11:14 AUTHORS.txt
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 4564 4 jul 11:14 CCBoot.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 13635 4 jul 11:14 CCDebugger.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 60843 4 jul 11:14 CHANGELOG.txt
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 52565 4 jul 11:14 DebugInfos.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 33986 4 jul 11:14 EngineErrorMap.md
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 90 4 jul 11:14 MAINTAINERS
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 2690 4 jul 11:14 README.md
drwxr-xr-x@ 16 felixantonioenriquezpedrote admin 544 28 ago 11:07 bin
drwxr-xr-x@ 18 felixantonioenriquezpedrote admin 612 4 jul 11:14 cocos2d
drwxr-xr-x@ 4 felixantonioenriquezpedrote admin 136 4 jul 11:14 docs
drwxr-xr-x@ 3 felixantonioenriquezpedrote admin 102 4 jul 11:14 editor
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 2143 4 jul 11:14 extends.js
drwxr-xr-x@ 6 felixantonioenriquezpedrote admin 204 4 jul 11:14 extensions
drwxr-xr-x@ 6 felixantonioenriquezpedrote admin 204 4 jul 11:14 external
drwxr-xr-x@ 5 felixantonioenriquezpedrote admin 170 4 jul 11:14 gulp
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 5000 4 jul 11:14 gulpfile.js
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 6494 4 jul 11:14 index.js
drwxr-xr-x@ 23 felixantonioenriquezpedrote admin 782 4 jul 11:14 jsb
drwxr-xr-x@ 7 felixantonioenriquezpedrote admin 238 4 jul 11:14 licenses
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 4633 4 jul 11:14 modules.json
-rw-rā€“r--@ 1 felixantonioenriquezpedrote admin 1770 4 jul 11:14 package.json
drwxr-xr-x@ 7 felixantonioenriquezpedrote admin 238 4 jul 11:14 polyfill
drwxr-xr-x@ 2 felixantonioenriquezpedrote admin 68 4 jul 11:14 test
iMac-Felix:engine felixantonioenriquezpedrote$ gulp build
-bash: gulp: command not found
iMac-Felix:engine felixantonioenriquezpedrote$ npm rm --global gulp
up to date in 0.265s
iMac-Felix:engine felixantonioenriquezpedrote$ gulp build
-bash: gulp: command not found
iMac-Felix:engine felixantonioenriquezpedrote$ node --version
v10.11.0
iMac-Felix:engine felixantonioenriquezpedrote$ npm --version
6.4.1
iMac-Felix:engine felixantonioenriquezpedrote$ npx --version
6.4.1
iMac-Felix:engine felixantonioenriquezpedrote$ npm install --global gulp-cli
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp-cli/bin/gulp.js

  • gulp-cli@2.0.1
    added 235 packages from 148 contributors in 11.819s
    iMac-Felix:engine felixantonioenriquezpedrote$ gulp --version
    [13:53:58] CLI version 2.0.1
    iMac-Felix:engine felixantonioenriquezpedrote$ gulp build
    [13:54:10] Local gulp not found in /Applications/CocosCreator1.9.app/Contents/Resources/engine
    [13:54:10] Try running: npm install gulp
    iMac-Felix:engine felixantonioenriquezpedrote$ npm install
    npm WARN deprecated gulp-header@1.2.2: gulp-header 1.x is deprecated and will no longer be updated, please update to 2.x
    npm WARN deprecated gulp-util@3.0.6: gulp-util is deprecated - replace it, following the guidelines at *
    npm WARN deprecated babel-plugin-parser-opts@1.0.1: Please use Babelā€™s parserOpts option in order to change parser options. For more information, see **
    npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at **
    npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
    npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

fsevents@1.2.4 install /Applications/CocosCreator1.9.app/Contents/Resources/engine/node_modules/fsevents
node install

[fsevents] Success: ā€œ/Applications/CocosCreator1.9.app/Contents/Resources/engine/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.nodeā€ already installed
Pass --update-binary to reinstall or --build-from-source to recompile

phantomjs-prebuilt@2.1.16 install /Applications/CocosCreator1.9.app/Contents/Resources/engine/node_modules/phantomjs-prebuilt
node install.js

PhantomJS not found on PATH
Downloading *v2.1.1/phantomjs-2.1.1-macosx.zip
Saving to /var/folders/mx/7yxw0q654lg7c0rfnm1knlx80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
Receivingā€¦
[=======================================-] 96%
Received 16746K total.
Extracting zip contents
Removing /Applications/CocosCreator1.9.app/Contents/Resources/engine/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /var/folders/mx/7yxw0q654lg7c0rfnm1knlx80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1540382135284/phantomjs-2.1.1-macosx -> /Applications/CocosCreator1.9.app/Contents/Resources/engine/node_modules/phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /Applications/CocosCreator1.9.app/Contents/Resources/engine/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN cocos-creator-js@1.9.3 No repository field.

added 894 packages from 448 contributors and audited 11616 packages in 55.504s
found 9 vulnerabilities (4 low, 5 high)
run npm audit fix to fix them, or npm audit for details
iMac-Felix:engine felixantonioenriquezpedrote$ gulp build
[13:55:52] Using gulpfile /Applications/CocosCreator1.9.app/Contents/Resources/engine/gulpfile.js
[13:55:52] Starting ā€˜build-html5-previewā€™ā€¦
[13:55:52] Starting ā€˜build-jsb-previewā€™ā€¦
[13:55:52] Starting ā€˜build-jsb-devā€™ā€¦
[13:55:52] Starting ā€˜build-jsb-minā€™ā€¦
(node:13921) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[13:56:27] Finished ā€˜build-jsb-minā€™ after 36 s
[13:56:27] Finished ā€˜build-jsb-previewā€™ after 36 s
[13:56:27] Finished ā€˜build-jsb-devā€™ after 36 s
[13:56:27] Starting ā€˜build-jsbā€™ā€¦
[13:56:27] Finished ā€˜build-jsbā€™ after 33 Ī¼s
[13:56:27] Finished ā€˜build-html5-previewā€™ after 36 s
[13:56:27] Starting ā€˜buildā€™ā€¦
[13:56:27] Finished ā€˜buildā€™ after 6.53 ms
iMac-Felix:engine felixantonioenriquezpedrote$

does not let me upload files or put links in the forum, any idea of how to share it?

Send you a PM with me email address. Thank you!

Btw. iXen if I understand correctly you have figured out how to use the sample project with Cocos version >2.0. Probably you have modified the build-templates? Maybe you could share this here as well? :slight_smile:

I believe this would be a very valuable share so maybe you could post your project on Github?

mstruzyna

I am using cocos creator 1.9.3.

be sorry, confusion.