egret cross domain solution

1. Brief description

Subject to the same-origin policy. egret is extremely limited when loading cross-domain material. For example, cross-domain pictures cannot be drawn twice under canvas, and cross-domain pictures cannot be displayed under webgl. I want to put resources on cdn, but there is no same-domain cdn, and a series of problems.
   Oh, by the way, also, the released files cannot be directly double-clicked to run (requires an http server to run).

2. Implementation principle The
   principle is that js files are not restricted by the same-origin policy. Using jsonp, we can convert all non-js/css resources into js files (images to base64), which are loaded and parsed by egret.
   This solution provides a conversion js script tool for converting all materials into js files.
   At the same time, a parsing library for egret is provided, which is injected through Analyzer. Existing workflows are not affected at all.

3. Operation steps
   a. Introduce two library files, CrossdomainLib.ts and AssetAdapter.ts in the egret project (see the example attached below)
   b. Modify the index.html file as follows:

 

<script>
        //Whether to enable cross-domain support, it is only recommended to enable it in the release version
        var needCross = false;
        var resourcePath = 'http://www.nofastfat.com/h5/test/crossdomainSource/';//Read CDN and other cross-domain resources
        // var resourcePath = '';//Read local resources
             
        egret.runEgret({renderMode:"webgl"});
    </script>

  c. Modify the Main.ts file as follows. Depending on each project, there may be slight differences. The key point is to use AssetAdapter to manage materials, and use startCross(this.stage, true, window['resourcePath']); to enable cross-domain support

 

 

public constructor() {
        super();
        this.once( egret.Event.ADDED_TO_STAGE, this.__addedHandler, this );
    }
 
    private __addedHandler( e: egret.Event ): void {
        if ( !egret.Capabilities.isMobile ) {
            this.stage.scaleMode = egret.StageScaleMode.SHOW_ALL;
            this.stage.orientation = egret.OrientationMode.AUTO;
        }
  
        this.stage.registerImplementation( "eui.IAssetAdapter", new AssetAdapter() );
        var vc: RES.VersionController = new RES.VersionController();
 
        vc.getVirtualUrl = function ( url: string ): string {
            return url + '?v=' + '0.0.1';
        }
         
        RES.registerVersionController( vc );
         
        //Bypass the key code of egret same-domain policy, it is only recommended to set needCross = true after release, so that it will take effect across domains
        if(window && window['needCross']){
            startCross(this.stage, true, window['resourcePath']);
        }
           
        this.startLoadSource();
    }

  d. Publish your project

 

  e. Install the script tool (see the attachment, install it once): modify INSTALL in installScript.cmd to your egret installation directory, and then double-click the file to install successfully

 

f. Open the cmd command line tool in the released release project directory, and enter egret crossdomain (if you are prompted that the name cannot be found, please return to the previous step to reinstall). At this point all required cross-origin resources have been automatically generated.

 

 e. Modify the settings in index.html under the release directory, needCross is true, and set the location of the cross-domain material as needed. If it is loading local resources, set it to empty.
If you need to place resources on the CDN, copy the complete resource directory to the CDN, as shown in the figure below (the figure below shows the directory structure of the http server for testing, corresponding to: http://www.nofastfat.com/h5/test/crossdomainSource/ ) , and set resourcePath to the corresponding URL address.

 

  f. At the end of the operation, you will find that the modified and processed html file can not only be accessed directly by double-clicking, but also the resources on the cross-domain CDN.

4. Written at the end a. Due to the use of base64 to transfer pictures, there will be a certain loss in performance, so it is not recommended to use it on medium and large games.     b. The tool has not been tested on the go-live project. (Updated on 2017-4.17: After feedback from many friends QQ, this tool has gone through different online projects and is basically stable)  
   
 

    c. The engine version supports up to 3.2.6 . 4.0 is not supported for the time being due to the problem of Analyzer compatibility (2017-4.17 update: After actual measurement, due to the reservation of RES in version 4.0.3, it is still available, and the current version can support up to 4.0. 3)  
    d . A lot of gameplay can be derived by using this tool, such as using apicloud and other tools to package ipa and apk files online ( without having to go to the native all kinds of sad reminders ). Use C# to shell and run on the windows desktop (electron package has 100M+), and so on. (2017-4.17 update: After my actual use, it is recommended to use the HBuilder+htmlplus framework to package the app, which is stable and efficient, and has rich local APIs)  

 

When there is an fnt bitmap font in the project, there will be a bug, which needs to be processed as follows:
1. In the *.fnt file,  the slash (/) in {"file":"/fnt.png", must be removed. To remove, the pit of the bitmap font tool
2. Do not manually load the fnt.png file in default.res.json, because the *.fnt file itself will load the corresponding fnt.png file