It 522 fix plain placement (#15)

* update ecs lib * add placement frame * fix material * thin frame * fix render placement when placement not found * placement width - frame dimension * fix ts errors * changelog * changelog * refactor plainPlacement * fix ts errors * changelog * fix placement positions on stands * tiny frame * citylight baner position * review remarks * change basePlacement to plainPlacement * remove unused import
adshares · May 30, 2023 · cd95607 · cd95607
1 parent 4e2942c
commit cd95607
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 83 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Base placement without any side effect
+- Plain stand with frame and include base placement
+### Fixed
+- Blinking banner
+- Display placement when banner not found
 
 ## [2.2.0] - 2022-04-26
 ### Added

diff --git a/README.md b/README.md
@@ -76,7 +76,6 @@ Available options:
   no?: number | null,
   types?: string[] | null,
   mimes?: string[] | null,
-  background?: Material | null,
 }
 ```
 
@@ -96,6 +95,26 @@ const placement = new Ads.UIPlacement(name: string, position: 'top' | 'bottom' |
 Stands combine several placements into one object.
 Every stand implements IEntity and has access to IEntity methods.
 
+The simplest stand is the PlainStand, which repeats the PlainPlacement and adds a frame and a background that covers the gaps between the layers. You can define own Material for frame.
+
+```js
+const plain = new Ads.PlainStand(name: string, options?: {})
+```
+Available options:
+
+```js
+{
+  position?: Vector3, // @decentraland-ecs
+  rotation?: Quaternion, // @decentraland-ecs
+  width?: number,
+  ratio?: '9:16' | '3:4' | '1:1' | '4:3' | '16:9',
+  no?: number | null,
+  types?: string[] | null,
+  mimes?: string[] | null,
+  frameMaterial?: Material,
+}
+```
+
 Available stands:
 
 | Class     | Description                                                      | Ratios                                    | Models                                                                                                                              |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "yarn": "please use npm"
   },
   "dependencies": {
-    "decentraland-ecs": "^6.11.11"
+    "decentraland-ecs": "^6.11.15"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.2",

diff --git a/src/index.ts b/src/index.ts
@@ -3,14 +3,15 @@ import { Chain } from './enums'
 import { PlainPlacement } from './plainPlacement'
 import { UIPlacement } from './UIPlacement'
 import { IPlacement, IStand } from './types'
-import { Billboard, Citylight, Totem } from './stand'
+import { Billboard, Citylight, Totem, PlainStand } from './stand'
 import SupplyAgent from './supplyAgent'
 
 export {
   Chain,
   SupplyAgent,
   IPlacement,
   PlainPlacement,
+  PlainStand,
   IStand,
   Creative,
   Totem,

diff --git a/src/plainPlacement.ts b/src/plainPlacement.ts
@@ -11,15 +11,12 @@ declare type TConstructorParams = {
   no?: number,
   types?: TPlacementProps['types'],
   mimes?: TPlacementProps['mimes'],
-  background?: Material | null,
 }
 
 const commonMaterials: {
-  default?: Material,
   infobox: Material,
   text: Material,
 } = {
-  default: undefined,
   infobox: new Material(),
   text: new Material()
 }
@@ -34,7 +31,6 @@ export class PlainPlacement extends Entity implements IPlacement {
   private readonly _types: TPlacementProps['types']
   private readonly _mimes: TPlacementProps['mimes']
   private readonly _clickDistance: number = 50
-  private _backgroundMaterial?: Material | null
   public name: string
 
   public constructor (
@@ -48,13 +44,12 @@ export class PlainPlacement extends Entity implements IPlacement {
     this._no = params?.no || null
     this._types = params?.types || null
     this._mimes = params?.mimes || null
-    this._backgroundMaterial = params?.background
     this._transform = new Transform({
-      scale: new Vector3(this._width, (this._width / Ratio[this._ratio]), 1),
+      scale: new Vector3(this._width, (this._width / Ratio[this._ratio]), 0.1),
       position: params?.position,
       rotation: params?.rotation
     })
-    this.initDefaultShape()
+    this.addComponent(this._transform)
   }
 
   public getProps (): TPlacementProps {
@@ -82,13 +77,6 @@ export class PlainPlacement extends Entity implements IPlacement {
   }
 
   public renderCreative (creative: Creative): void {
-
-    const backgroundM = this.getBackgroundMaterial()
-    if (backgroundM !== null) {
-      this.addComponentOrReplace(new PlaneShape())
-      this.addComponentOrReplace(backgroundM)
-    }
-
     const size = creative.scope.split('x')
     const scaleFactor = this.calculateScaleFactor(parseInt(size[0]), parseInt(size[1]))
 
@@ -97,7 +85,7 @@ export class PlainPlacement extends Entity implements IPlacement {
     plane.addComponent(new PlaneShape())
     plane.addComponent(
       new Transform({
-        position: new Vector3(0, 0, -0.01),
+        position: new Vector3(0, 0, 0),
         rotation: Quaternion.Euler(creative.type === 'image' ? 180 : 0, 180, 0),
         scale: new Vector3(scaleFactor.scaleX, scaleFactor.scaleY, 1)
       })
@@ -159,7 +147,7 @@ export class PlainPlacement extends Entity implements IPlacement {
     plane.addComponent(planeShape)
     plane.addComponent(
       new Transform({
-        position: new Vector3(0.5 - scale.x / 2, (1 - scale.y) / 2, -0.0015),
+        position: new Vector3(0.5 - scale.x / 2, (1 - scale.y) / 2, -0.05),
         rotation: Quaternion.Euler(180, 180, 0),
         scale: new Vector3(scale.x, scale.y, 1)
       })
@@ -188,28 +176,6 @@ export class PlainPlacement extends Entity implements IPlacement {
     }
   }
 
-  protected getBackgroundMaterial (): Material | null {
-    if (this._backgroundMaterial === undefined) {
-      return this.getDefaultMaterial()
-    }
-    return this._backgroundMaterial
-  }
-
-  protected getDefaultMaterial (): Material {
-    if (commonMaterials.default === undefined) {
-      commonMaterials.default = new Material()
-      commonMaterials.default.specularIntensity = 0
-      commonMaterials.default.metallic = 0
-      commonMaterials.default.roughness = 1
-      commonMaterials.default.albedoColor = Color3.Black()
-    }
-    return commonMaterials.default
-  }
-
-  protected initDefaultShape () {
-    this.addComponent(this._transform)
-  }
-
   protected calculateScaleFactor (originWidth: number, originHeight: number) {
     const maxScale = this.getComponent(Transform).scale
     const scaleFactor = Math.min((maxScale.x / originWidth), (maxScale.y / originHeight))
@@ -235,7 +201,6 @@ export class PlainPlacement extends Entity implements IPlacement {
       }
       entity = entity.getParent()
     }
-    scale.z = 0.1
     return scale
   }
 
@@ -268,11 +233,8 @@ export class PlainPlacement extends Entity implements IPlacement {
   protected renderText (icon: string, message: string): void {
 
     this.reset()
-    const material = this.getDefaultMaterial()
-    material.albedoColor = Color3.White()
 
     this.addComponentOrReplace(new PlaneShape())
-    this.addComponentOrReplace(material)
 
     const plane = new Entity()
     const planeShape = new PlaneShape()