[开源]分享一个适用 Cocos 导出多渠道试玩广告的项目

[jjppp]

可以在这里看看项目链接https://github.com/ppgee/cocos-pnp哈，里面包括导出核心包和 Cocos 插件，里面还有之前为 Cocos 适配淘宝小程序的插件。

Playable Adapter Core

Support exporting playable ads for the cocos plugin and node.js

Features

• Support some popular platform
• Support exporting a single html for target platform
• Remove XMLHttpRequest from single html passing the platform test
• Add TinyPng to compress

Cocos Version Support

>= 2.4.6	3.6.x
Latest ✅	Latest ✅

Platform Support

platform / version	>= 2.4.6	3.6.x
AppLovin	✅	✅
Facebook	✅	✅
Google	✅	✅
IronSource	✅	✅
Liftoff	✅	✅
Mintegral	✅	✅
Moloco	✅	✅
Pangle	✅	✅
Rubeex	✅	✅
Tiktok	✅	✅
Unity	✅	✅

Installing

Package manager

Using npm:

$ npm install playable-adapter-core

Using yarn:

$ yarn add playable-adapter-core

Using pnpm:

$ pnpm install playable-adapter-core

Example

common

import {
  TPlatform,
  exec2xAdapter,
} from "playable-adapter-core";

const main = async () => {
  const config = {
    buildFolderPath: "/your/build/folder/path",
    adapterRC: {
      buildPlatform: "web-mobile",
      exportChannels: "Facebook",
      injectOptions: {
        Facebook: {},
      },
      orientation: "auto",
      skipBuild: true,
      tinify: true,
      tinifyApiKey: "your tinify api key",
    },
  };

  // required
  const version = "2"; // '2' | '3'
  version === "2"
    ? await exec2xAdapter(config)
    : await exec3xAdapter(config);
};

main();

midway.js/koa etc.

npm install safeify

import { Api, useContext } from "@midwayjs/hooks";
import { Context } from "@midwayjs/koa";
import {
  TPlatform,
  exec2xAdapter,
  exec3xAdapter,
} from "playable-adapter-core";
import { Safeify } from "safeify";

export const uploadBuildPkg = Api(Upload(), async () => {
  const ctx = useContext<Context>();

  // 调用接口
  const files = useFiles();
  const fields = useFields() as UploadFields;
  const buildPkgKey = Object.keys(files).pop();
  const buildPkg = <
    {
      data: string;
      fieldName: string;
      filename: string;
      mimeType: string;
      _ext: string;
    }
  >files[buildPkgKey].pop();

  const buildChannels = JSON.parse(fields.channels ?? "[]") as TChannel[];
  const tinify = JSON.parse(fields.tinify ?? "false") as boolean;
  const tinifyApiKey = fields.tinifyApiKey ?? "";
  const injectOptions = JSON.parse(fields.injectOptions ?? "{}") as {
    [key in TChannel]: TChannelRC;
  };
  const webOrientation = fields.webOrientation ?? "auto";
  const version = fields.version ?? "2";

  const zipFilePath = buildPkg.data;
  const zipExt = buildPkg._ext;
  const filename = buildPkg.filename.replaceAll(buildPkg._ext, "") as TPlatform;
  const unzipDir = join(
    dirname(buildPkg.data),
    basename(zipFilePath).replace(zipExt, "")
  );

  const config = {
    buildFolderPath: unzipDir,
    adapterBuildConfig: {
      buildPlatform: filename,
      exportChannels: buildChannels,
      injectOptions,
      orientation: webOrientation,
      skipBuild: true,
      tinify,
      tinifyApiKey
    },
  }

  // 创建 safeify 实例
  const safeVm = new Safeify({
    timeout: 3000,
    asyncTimeout: 120000,
    unrestricted: true,
  });
  await safeVm.run(
    `
      version === '2'
        ? await exec2xAdapter(config)
        : await exec3xAdapter(config)
    `,
    {
      version,
      exec2xAdapter,
      exec3xAdapter,
      config,
    }
  );

  return true;
});

Support

Global Placeholder '{{__adv_channels_adapter__}}'

support dynamic import from cocos source code, just like:

// source code
window.advChannels = "{{__adv_channels_adapter__}}"; // 防止 rollup 打包进行 tree-shaking 省略掉该代码（ dead code ），占位符变量可挂载在全局

// 在 Facebook 渠道下代码会被替换为
window.advChannels = "Facebook";

Config

exportChannels

export package from target platforms

const exportChannels: TChannel[] = ['Facebook', 'Google']

injectOptions

inject script in building html

type TChannel =
  | "AppLovin"
  | "Facebook"
  | "Google"
  | "IronSource"
  | "Liftoff"
  | "Mintegral"
  | "Moloco"
  | "Pangle"
  | "Rubeex"
  | "Tiktok"
  | "Unity";

const injectOptions: {
  [key in TChannel]: {
    head: string; // 在 html 的 head 标签内尾部追加
    body: string; // 在 html 的 body 标签内，且在所有 script 前追加
    sdkScript: string; // 在渠道对应地方注入 sdk 脚本
  };
} = {};

Tinify

let config = {
  tinify: true, // compress resource before build package
  tinifyApiKey: '', // tinify api key, visit to https://tinypng.com/developers
}

[SamDaYe]

导出，试玩广告，无法理解，能解释下嘛？啥叫试玩广告，还有导出什么东西？

[jjppp]

@SamDaYe 就是游戏向不同渠道进行推广提供一个试玩的互动广告，通常是制作一个简单的互动场景进行投放。
游戏推广渠道有多个平台，而每个平台都会有自己的一个标准，文件大小和文件内部代码规范等等。
譬如向 Google 、Tiktok 等只需要 Cocos 标准导出构建包再加配置项就行了，而像 AppLovin 、Unity 等等需要单个 html ，就需要对 Cocos 构建包进行压缩资源并打入到 html 中。还有像 Facebook 的，需要对外请求的代码进行屏蔽。
这个工具就是针对每个主流投放平台的投放标准进行适配导出。