Add integrations for Playcanvas Engine and Editor

README.md

@@ -6,6 +6,7 @@ Currently, we support the following platforms:
 
 - [aframe](https://github.com/zestyxyz/ads-sdk/tree/main/aframe)
 - [babylon.js](https://github.com/zestyxyz/ads-sdk/tree/main/babylonjs)
+- [playcanvas](https://github.com/zestyxyz/ads-sdk/tree/main/playcanvas)
 - [react-three-fiber](https://github.com/zestyxyz/ads-sdk/tree/main/r3f)
 - [three.js](https://github.com/zestyxyz/ads-sdk/tree/main/threejs)
 - [unity](https://github.com/zestyxyz/ads-sdk/tree/main/unity)

playcanvas/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "playcanvas",
+  "version": "3.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build:editor": "esbuild src/editor.js --minify --sourcemap --format=esm --bundle --outfile=dist/zesty-playcanvas-sdk-editor.js --external:playcanvas",
+    "build:no-editor": "esbuild src/no-editor.js --minify --sourcemap --format=esm --bundle --outfile=dist/zesty-playcanvas-sdk.js --external:playcanvas",
+    "build:editor-dev": "esbuild src/editor.js --sourcemap --format=esm --bundle --outfile=dist/zesty-playcanvas-sdk-editor.js --external:playcanvas",
+    "build:no-editor-dev": "esbuild src/no-editor.js --sourcemap --format=esm --bundle --outfile=dist/zesty-playcanvas-sdk.js --external:playcanvas"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "esbuild": "^0.25.5",
+    "playcanvas": "^2.8.0"
+  }
+}

playcanvas/src/editor.js

@@ -0,0 +1,119 @@
+import { fetchCampaignAd, sendOnLoadMetric, sendOnClickMetric, AD_REFRESH_INTERVAL } from '../../utils/networking';
+import { openURL, visibilityCheck } from '../../utils/helpers';
+import { formats } from '../../utils/formats';
+
+/** @type {typeof import("playcanvas").ScriptType} */
+const ZestyBanner = pc.createScript('zesty-banner');
+
+ZestyBanner.attributes.add("adUnitId", { type: "string" });
+ZestyBanner.attributes.add("format", {
+    type: "number",
+    enum: [
+        { "Medium Rectangle": 1 },
+        { "Billboard": 2 },
+        { "Mobile Phone Interstitial": 3 },
+    ],
+    default: 1,
+});
+ZestyBanner.attributes.add("cameraEntity", { type: "entity" });
+
+const FORMATS = {
+    1: "medium-rectangle",
+    2: "billboard",
+    3: "mobile-phone-interstitial",
+}
+
+// initialize code called once per entity
+ZestyBanner.prototype.initialize = function() {
+    this.ctaUrl = "https://relay.zesty.xyz";
+    this.campaignId = "DefaultCampaign";
+
+    // Create banner material
+    this.bannerMaterial = new pc.StandardMaterial();
+
+    // Create banner texture
+    setInterval(() => this.refreshIfVisible.bind(this)(), AD_REFRESH_INTERVAL);
+    sendOnLoadMetric(this.adUnitId, this.campaignId);
+
+    // Create banner entity and configure
+    const width = formats[FORMATS[this.format]].width;
+    const height = formats[FORMATS[this.format]].height;
+    const bannerEntity = new pc.Entity();
+    bannerEntity.addComponent("render", { type: "plane", material: this.bannerMaterial });
+    bannerEntity.addComponent("collision", { type: "box", halfExtents: new pc.Vec3(width / 2, 0.001, height / 2) });
+    bannerEntity.setLocalScale(width, 1, height);
+
+    // Click handling
+    document.body.addEventListener('mousedown', this.onSelect.bind(this), false);
+    this.on('destroy', function() {
+        document.body.removeEventListener('mousedown', this.onSelect.bind(this), false);
+    }, this);
+
+    // VR handling
+    this.app.xr.input.on('select', (inputSource) => {
+        this.onSelect(null, inputSource).bind(this);
+    });
+
+    this.entity.addChild(bannerEntity);
+};
+
+ZestyBanner.prototype.loadBanner = async function() {
+    const activeBanner = await fetchCampaignAd(this.adUnitId, FORMATS[this.format]);
+
+    const { asset_url: image, cta_url: url } = activeBanner.Ads[0];
+
+    return { image, url, campaignId: activeBanner.CampaignId };
+}
+
+ZestyBanner.prototype.refreshIfVisible = function() {
+    /** @type {import("playcanvas").CameraComponent} */
+    const camera = this.cameraEntity.camera;
+    const bb = new pc.BoundingBox(this.entity.getPosition(), this.entity.getScale().mul(0.5));
+    const isVisible = visibilityCheck(
+        bb.getMin().toArray(),
+        bb.getMax().toArray(),
+        camera.projectionMatrix.data,
+        camera.entity.getWorldTransform().data,
+    );
+    if (isVisible) {
+        const self = this;
+        self.loadBanner(self.adUnitId, FORMATS[self.format]).then(banner => {
+            self.app.assets.loadFromUrl(banner.image, "texture", function(err, asset) {
+                self.ctaUrl = banner.url;
+                self.campaignId = banner.campaignId;
+                const texture = asset._resources[0];
+                self.bannerMaterial.diffuseMap = texture;
+                self.bannerMaterial.opacityMap = texture;
+                self.bannerMaterial.blendType = pc.BLEND_NORMAL;
+                self.bannerMaterial.update();
+            });
+        });
+    }
+}
+
+/**
+ * 
+ * @param {MouseEvent} e
+ * @param {import("playcanvas").XrInputSource} inputSource
+ */
+ZestyBanner.prototype.onSelect = function(e, inputSource) {
+    let from, to;
+    if (inputSource) {
+        from = inputSource.getOrigin();
+
+        const direction = inputSource.getDirection().normalize();
+        const rayLength = 1000;
+
+        to = new pc.Vec3().copy(from).add(direction.mulScalar(rayLength));
+    } else {
+        from = this.cameraEntity.camera.screenToWorld(e.x, e.y, this.cameraEntity.camera.nearClip);
+        to = this.cameraEntity.camera.screenToWorld(e.x, e.y, this.cameraEntity.camera.farClip);
+    }
+
+    var result = this.app.systems.rigidbody.raycastFirst(from, to);
+    if (result) {
+        this.app.xr.end();
+        sendOnClickMetric(this.adUnitId, this.campaignId);
+        openURL(this.ctaUrl);
+    }
+}

playcanvas/src/no-editor.js

@@ -0,0 +1,122 @@
+import { fetchCampaignAd, sendOnLoadMetric, sendOnClickMetric, AD_REFRESH_INTERVAL } from '../../utils/networking';
+import { openURL, visibilityCheck } from '../../utils/helpers';
+import * as pc from 'playcanvas';
+import { formats } from '../../utils/formats';
+
+/** @type {typeof import("playcanvas").ScriptType} */
+const ZestyBanner = pc.createScript('zesty-banner');
+
+ZestyBanner.attributes.add("adUnitId", { type: "string" });
+ZestyBanner.attributes.add("format", {
+    type: "number",
+    enum: [
+        { "Medium Rectangle": 1 },
+        { "Billboard": 2 },
+        { "Mobile Phone Interstitial": 3 },
+    ],
+    default: 1,
+});
+ZestyBanner.attributes.add("cameraEntity", { type: "entity" });
+
+const FORMATS = {
+    1: "medium-rectangle",
+    2: "billboard",
+    3: "mobile-phone-interstitial",
+}
+
+// initialize code called once per entity
+ZestyBanner.prototype.initialize = function() {
+    this.ctaUrl = "https://relay.zesty.xyz";
+    this.campaignId = "DefaultCampaign";
+
+    // Create banner material
+    this.bannerMaterial = new pc.StandardMaterial();
+
+    // Create banner texture
+    setInterval(this.refreshIfVisible.bind(this), AD_REFRESH_INTERVAL);
+    sendOnLoadMetric(this.adUnitId, this.campaignId);
+
+    // Create banner entity and configure
+    const width = formats[FORMATS[this.format]].width;
+    const height = formats[FORMATS[this.format]].height;
+    const bannerEntity = new pc.Entity();
+    bannerEntity.addComponent("render", { type: "plane", material: this.bannerMaterial });
+    bannerEntity.addComponent("collision", { type: "box", halfExtents: new pc.Vec3(width / 2, 0.001, height / 2) });
+    bannerEntity.setLocalScale(width, 1, height);
+
+    // Click handling
+    document.body.addEventListener('mousedown', this.onSelect.bind(this), false);
+    this.on('destroy', function() {
+        document.body.removeEventListener('mousedown', this.onSelect.bind(this), false);
+    }, this);
+
+    // VR handling
+    this.app.xr.input.on('select', (inputSource) => {
+        this.onSelect(null, inputSource).bind(this);
+    });
+
+    this.entity.addChild(bannerEntity);
+};
+
+ZestyBanner.prototype.loadBanner = async function() {
+    const activeBanner = await fetchCampaignAd(this.adUnitId, FORMATS[this.format]);
+
+    const { asset_url: image, cta_url: url } = activeBanner.Ads[0];
+
+    return { image, url, campaignId: activeBanner.CampaignId };
+}
+
+ZestyBanner.prototype.refreshIfVisible = function() {
+    /** @type {import("playcanvas").CameraComponent} */
+    const camera = this.cameraEntity.camera;
+    const bb = new pc.BoundingBox(this.entity.getPosition(), this.entity.getScale().mul(0.5));
+    const isVisible = visibilityCheck(
+        bb.getMin().toArray(),
+        bb.getMax().toArray(),
+        camera.projectionMatrix.data,
+        camera.entity.getWorldTransform().data,
+    );
+    if (isVisible) {
+        const self = this;
+        self.loadBanner(self.adUnitId, FORMATS[self.format]).then(banner => {
+          self.app.assets.loadFromUrl(banner.image, "texture", function(err, asset) {
+                self.ctaUrl = banner.url;
+                self.campaignId = banner.campaignId;
+                const texture = asset._resources[0];
+                self.bannerMaterial.diffuseMap = texture;
+                self.bannerMaterial.opacityMap = texture;
+                self.bannerMaterial.blendType = pc.BLEND_NORMAL;
+                self.bannerMaterial.update();
+            });
+        });
+    }
+}
+
+/**
+ * 
+ * @param {MouseEvent} e
+ * @param {import("playcanvas").XrInputSource} inputSource
+ */
+ZestyBanner.prototype.onSelect = function(e, inputSource) {
+    let from, to;
+    if (inputSource) {
+        from = inputSource.getOrigin();
+
+        const direction = inputSource.getDirection().normalize();
+        const rayLength = 1000;
+
+        to = new pc.Vec3().copy(from).add(direction.mulScalar(rayLength));
+    } else {
+        from = this.cameraEntity.camera.screenToWorld(e.x, e.y, this.cameraEntity.camera.nearClip);
+        to = this.cameraEntity.camera.screenToWorld(e.x, e.y, this.cameraEntity.camera.farClip);
+    }
+
+    var result = this.app.systems.rigidbody.raycastFirst(from, to);
+    if (result) {
+        this.app.xr.end();
+        sendOnClickMetric(this.adUnitId, this.campaignId);
+        openURL(this.ctaUrl);
+    }
+}
+
+export default ZestyBanner;