From c557293c20dbc3a7740a44f473e8378275e31b6b Mon Sep 17 00:00:00 2001 From: Patrick Macom Date: Tue, 10 May 2022 01:35:37 -0400 Subject: [PATCH] updated docs and fixed bugs --- README.md | 276 +++++++++++++++++++++++++++++++----- src/cache/videoTexture.ts | 2 +- src/entities/LandBarrier.ts | 23 ++- src/utils/Countdown.ts | 6 +- src/utils/DynamicImage.ts | 4 +- src/utils/OnFirstMove.ts | 2 +- src/utils/OnUpdateFrame.ts | 13 +- 7 files changed, 262 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index adf4ddd..24ad32d 100644 --- a/README.md +++ b/README.md @@ -34,10 +34,9 @@ - **Utilities (UV)** Dash_UV_Crop_Video, Dash_UV_Curved_Image, Dash_UV_Curved_Video, Dash_UV_Image, Dash_UV_Video, Dash_UV_Plane_Crop_Image - **Utilities (UI)** Dash_UI_Crop_Image, Dash_UI_Generate_StaticButton, Dash_UI_Generate_StaticButtons, Dash_UI_Generate_StaticImages, Dash_UI_StaticImag -![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-small.png) - -# Debug Utilities + +![](https://pmacom.github.io/assets/dcldash/images/docs/header-debug-utilities.png) ## Tweaker @@ -45,7 +44,7 @@ > > ![](https://pmacom.github.io/assets/dcldash/images/docs/demo-tweaker.png) -``` +```ts import { Dash_Tweaker } from "dcldash" const testEntity = new Entity("testBox") @@ -60,6 +59,7 @@ Dash_Tweaker(testEntity) > **Notes** > +> - Toggle between Position and Rotation modes > - You can select/deselect the current entity. (This feature will only work with entities that have a collider). > - You can also log the output of the Transform by htting the 'Log' button. > - Reset the transform to it's original state with the 'Revert' button. @@ -67,15 +67,33 @@ Dash_Tweaker(testEntity) ![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) -## ZoneCreator (UI Coming Soon) +## ZoneCreator (Admin UI - Coming Soon) > **Purpose:** Drop a zone creation cube into the scene and then move around the area to define the size of the zone. Then click a button to export the Transform information. +> +> ![](https://pmacom.github.io/assets/dcldash/images/docs/demo-zonemaker.gif) +> + +```ts +import { Dash_ZoneMaker } from 'dcldash' + +const zm = new Dash_ZoneMaker(new Vector3(8,1,8)) +engine.addEntity(zm) + +``` + +> **How to use this (until the UI is out)** +> +> 1. Run up to the box and then click on it +> 1. Run around in the area that you want to make into a zone +> 1. When you are done running around (whew.) and the zone is the right size, click it. (This is sometimes tough **in it's current state**. Go to the edge of the zone in 3rd person view, and make sure your camera is on the outside of the zone. Click the zone.) +> 1. In a week or so there will be UI controls to make this process super simple. -![](https://pmacom.github.io/assets/dcldash/images/header-entities.png) +![](https://pmacom.github.io/assets/dcldash/images/docs/header-entities.png) ## SimplePoster @@ -83,7 +101,7 @@ Dash_Tweaker(testEntity) > > ![](https://pmacom.github.io/assets/dcldash/images/docs/demo-simpleposter.gif) -``` +```ts import { Dash_SimplePoster } from 'dcldash' const myPoster = new Dash_SimplePoster() @@ -97,6 +115,46 @@ myPoster.setHyperlink('https://github.com/pmacom/dcldash') myPoster.setImageUrl('https://pmacom.github.io/assets/croakz.png') ``` +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) + +## LandBarrier + +> **Purpose:** Make your scene more private by throwing up barriers to keep people out (or kick them out if they are in the scene when it's enabled). Future updates to this barrier will include easy NFT gates, among other things. +> +> ![](https://pmacom.github.io/assets/dcldash/images/docs/demo-landbarrier.gif) + +> **Example** +> +>```ts +> import { Dash_LandBarrier } from 'dcldash' +> +> const landBarrier = new Dash_LandBarrier(new Vector3(16,0,16)) // param: exitLocation +landBarrier.setMessage("comingsoon") +landBarrier.enable() +// landBarrier.disable() +landBarrier.exitLocation = new Vector3(0,0,0) // Redeclare it if you want +``` + +> **Params** +> +> new DashLandBarrier(**exitLocation**: Vector3) +> + +> **Options** +> +> DashLandBarrier.setMessage(**OPTION**) +> +> - comingsoon +> - privateevent +> - accountrequired +> - nftrequired +> - temporarilylocked +> - outdated +> - undermaintenance +> - loadfully +> - transparent + + ![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) ## TriggerZone @@ -143,11 +201,11 @@ myTriggerZone.onExit = () => { ## Zone -> **Purpose:** An extension of TriggerZone which hides users that are not currently in the same zone. Zones will see a *massive upgrade* in upcoming months. Visit our Discord channel for mor inforamtion +> **Purpose:** An extension of TriggerZone which hides users that are not currently in the same zone. Zones will see a *massive upgrade* in upcoming months. Visit our Discord channel for more inforamtion. > > ![](https://pmacom.github.io/assets/dcldash/images/docs/demo-zone.gif) -``` +```ts import { Dash_Zone } from 'dcldash' const zone1 = new Dash_Zone('zone1', new Transform({ position: new Vector3(3, 1.5, 3), @@ -165,13 +223,12 @@ zone2.enableDebug() > **Notes** > - *A tutorial/explainer video will be posted soon* -![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-small.png) - -# Animation + +![](https://pmacom.github.io/assets/dcldash/images/docs/header-animation.png) ## AnimationQueue -> **Purpose:** Quickly create a simple animation without having to create a new ISystem every single time. +> **Purpose:** Quickly create a simple animation without having to create a new ISystem every single time. The below example uses the `Dash_Ease` util to make the animation smooth. They both work well together. > > ![](https://pmacom.github.io/assets/dcldash/images/docs/demo-animationqueue.gif) @@ -204,35 +261,116 @@ Dash_AnimationQueue.add({ ## OnUpdateFrame -> **Purpose:** Simplify your animations/physics code by creating togglable onUpdateFrame functions. +> **Purpose:** Simplify your animations/physics code by creating togglable ISystem functions (without having to set one up every single time you want to use one) + +```ts + +// Simple Example +const doEveryFrame : Dash_OnUpdateFrame_Instance = Dash_OnUpdateFrame.add((dt: number) => { + log('Do something.') + // This can start doing something every frame +}) +doEveryFrame.start() +doEveryFrame.stop() +``` + +*** + +```ts +// More Practical Example, although not really a full example (Will update this soon) +const physicsCast = PhysicsCast.instance + +class RayGun extends Entity { + private renderLaser: Dash_OnUpdateFrame_Instance + + constructor(){ + super() + this.renderLaser = Dash_OnUpdateFrame.add(this.pewpew) + } + + startShooting(){ + this.renderLaser.start() + } + + stopShooting(){ + this.renderLaser.stop() + } + + pewpew(dt: number){ + physicsCast.hitFirst(physicsCast.getRayFromCamera(200), (e) => { + const { didHit, entity } = e + if(didHit){ + const { entityId } = entity + const obj = engine.entities[entityId] as Entity + log('PEW PEW PEW Hitting target', obj.name) + } + }) + } +} + +const raygun = new RayGun() +raygun.startShooting() +``` ![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) -## DynamicImage + +![](https://pmacom.github.io/assets/dcldash/images/docs/header-ui.png) + +## DynamicImage (Docs Coming Soon) -> **Purpose:** Animate UIImage size, position and cropping with ease +> **Purpose:** Animate UIImage size, position and cropping with ease. ![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) -## DynamicImageBar +## DynamicImageBar (Docs Coming Soon) -> **Purpose:** A very fast, performant and easy to implement image progress bar +> **Purpose:** A very fast, performant and easy to implement image progress bar. -![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-small.png) + +![](https://pmacom.github.io/assets/dcldash/images/docs/header-materials.png) -# Materials +> **Purpose:** Easily implement common materials for testing and debugging purposes. More colors, textures and patterns coming soon. -> **Purpose:** Easily implement common materials for testing and debugging purposes +```ts +const box = new Entity() +box.addComponent(new BoxShape()) +// box.addComponent(Dash_Material.Red()) +// box.addComponent(Dash_Material.Green()) +// box.addComponent(Dash_Material.Blue()) +// box.addComponent(Dash_Material.Black()) +// box.addComponent(Dash_Material.Transparent()) +engine.addEntity(box) +``` -![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-small.png) + +![](https://pmacom.github.io/assets/dcldash/images/docs/header-utilities.png) -# Utils +## Cache -## Wait +> **Purpose:** When creating Textures, VideoClips, VideoMaterials and VideoTextures it is very easy to accidentially create unwanted duplicates in memory. The `Dash_Cache_VideoMaterial` will create all of the necessary elements automatically (VideoClip -> VideoTexture -> Material) for you, and just return the Material for you to use. Saving a lot of typing. -> **Purpose:** Sometimes you want to call a setTimeout function anywhere within your code and not just add it as a component to an entity +```ts +// Create a new cache instance or fetch the cached asset if it already exists +const myTexture: Texture = Dash_Cache_Texture.create('images/image.png') +const myVideoClip: VideoClip = Dash_Cache_VideoClip.create('videos/video.mp4') +const myVideoTexture: VideoTexture = Dash_Cache_VideoTexture.create('videos/video.mp4') +// or +const myMaterial: Material = Dash_Cache_VideoMaterial.create('videos/video.mp4') ``` + +> **Notes** +> +> - *dcldash VideoMaterials will eventually be much more powerful. Check back soon!* + +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) + +## Wait + +> **Purpose:** Sometimes you want to call a setTimeout function anywhere within your code and not just add it as a component to an entity. + +```ts import { Dash_Wait } from 'dcldash' Dash_Wait(() => { @@ -240,11 +378,15 @@ Dash_Wait(() => { }, 5) ``` +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) + ## UVs -> **Purpose:** When you attach a video or image material to a primative shape (BoxShape, PlaneShape, ect) the rotation of the texture will be rotated or flipped incorrectly. Instead of rotating the entire entity, you can leverage one of these functions to just alter the UVmap for how the material is applied to the entity. +> **Purpose:** When you attach a video or image material to a primative shape (BoxShape, PlaneShape, ect) the rotation of the texture will be rotated or flipped incorrectly. +> +> Instead of rotating the entire entity, you can leverage one of these functions to just alter the UVmap for how the material is applied to the entity. -``` +```ts import { Dash_UV_Crop_Video } from 'dcldash' const videoPlane = new PlaneShape() @@ -258,29 +400,89 @@ videoPlane.uvs = Dash_UV_Crop_Video( ) ``` -### OnFirstMove +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) -> **Purpose:** The webbrowser instance of decentraland requires that you interact with the site before a video or audio file will play. Adding any video/audio play events to an onFirstMove will ensure that it plays more consistently + + +## GlobalCanvas + +> **Purpose:** Generating a new `UICanvas` more than once is not preferred for performance purposes. Use the globalcanvas whenever possible instead of generating a new one each time. + +```ts import { Dash_GlobalCanvas } from 'dcldash' + +const myButtonTexture = new Dash_Cache_Texture.create('images/myButton.png') +const myUIButton = new UIImage(Dash_GlobalCanvas, myButtonTexture) ``` -### Ease +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) -> **Purpose:** Easily add ease animations to your AnimationQueues and DynamicImages +## Ease -``` +> **Purpose:** Easily add easing animations to your AnimationQueues and anywhere else you are transitioning between two values. Just make sure that the `progress` variable is from 0 - 1. Look at the AnimationQueue docs for a full usable example. + +```ts import { Dash_Ease } from 'dcldash' -``` +const easeValue = Scalar.Lerp( + startScale, + endScale, + Dash_Ease.easeOutBounce(progress) // <---- EASE +) +``` +> **Options** +> +> Dash_Ease.**OPTION** +> +> - **Sine** - easeInSine, easeOutSine, easeInOutSine +> - **Cubic** - easeInCubic, easeOutCubic, easeInOutCubic +> - **Quint** - easeInQuint, easeOutQuint, easeInOutQuint +> - **Circ** - easeInCirc, easeOutCirc, easeInOutCirc +> - **Elastic** - easeInElastic, easeOutElastic, easeInOutElastic +> - **Quad** - easeInQuad, easeOutQuad, easeInOutQuad +> - **Quart** - easeInQuart, easeOutQuart, easeInOutQuart +> - **Expo** - easeInExpo, easeOutExpo, easeInOutExpo +> - **Back** - easeInBack, easeOutBack, easeInOutBack +> - **Bounce** - easeInBounce, easeOutBounce, easeInOutBounce + +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) -### Countdown +## Countdown > **Purpose:** Invoke a countdown event that allows you to listen for every frame or every second with a callback function when it is completed +```ts +import { Dash_Countdown } from 'dcldash' + +const countdown = new Dash_Countdown() +countdown.setTimer(10) // In seconds +countdown.onSecond((remaining: number) => { log('Seonds Remaining:', remaining) }) +countdown.onUpdate((dt: number) => { log('Time Temaining:', dt) }) +countdown.onComplete(() => { log('Completed') }) +countdown.start() +// countdown.stop() +``` + +> **Notes** +> +> - *onSecond, onUodate and onComplete are all optional. But you probably want to use one of them, otherwise why use this to begin with?* +> - *You can set multiple callbacks to happen for each 'event' by adding another onSecond, onUpdate, or onComplete. Add as many as you want. I have no idea why thats a feature. I'm sure there was a reason. :shrug_emoji:* + + +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) + +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-invis.png) + +![](https://pmacom.github.io/assets/dcldash/images/docs/dash-spacer-small.png) + +## Special Thanks + +- Zoo, Nico, TheShoes, Texas Farmer, Alexis, Grant, Metaverse Architects, Deadfellaz + [EthBuilders.NYC](https://www.meetup.com/ethbuilders/) diff --git a/src/cache/videoTexture.ts b/src/cache/videoTexture.ts index 0ef400a..a99158d 100644 --- a/src/cache/videoTexture.ts +++ b/src/cache/videoTexture.ts @@ -15,4 +15,4 @@ class Dash_VideoTexture_Instance { } } -export const Dash_Cache_VideoTexture = new Dash_VideoTexture_Instance() +export const Dash_Cache_VideoTexture = new Dash_VideoTexture_Instance() \ No newline at end of file diff --git a/src/entities/LandBarrier.ts b/src/entities/LandBarrier.ts index 867b07b..f1aca3e 100644 --- a/src/entities/LandBarrier.ts +++ b/src/entities/LandBarrier.ts @@ -10,15 +10,7 @@ declare const Set: any /** * Usage - new LandBarrier(baseParcel, parcels) * - const landBarrier = new Dash_LandBarrier("-49,-100", [ - "-46,-99", - "-47,-99", - "-48,-99", - "-49,-99", - "-47,-100", - "-48,-100", - "-49,-100", - ], new Vector3(0, 0, -16.1)) + const landBarrier = new Dash_LandBarrier(new Vector3(0, 0, -16.1)) landBarrier.enable() landBarrier.disable() @@ -125,6 +117,7 @@ export class Dash_LandBarrier { private base: Vector2 | undefined private barrierZones: BarrierZone[] = [] private parcelStrings: typeof Set = new Set() + private message: string = "privateevent" // private parcelStrings: Set = new Set() constructor(public exitLocation: Vector3){ @@ -144,7 +137,7 @@ export class Dash_LandBarrier { const west = !this.parcelStrings.has(`${coords.x},${coords.y-1}`) const barrierZone = new BarrierZone( BarrierMaterial, - 'accountrequired', + this.getMessage(), maxHeight, this.exitLocation, north, @@ -158,8 +151,13 @@ export class Dash_LandBarrier { }) } + getMessage(): string { return this.message } + setMessage(message: string){ - this.barrierZones.forEach(barrier => barrier.setMessage(message)) + this.message = message + this.barrierZones.forEach(barrier => { + barrier.setMessage(message) + }) } disable(){ @@ -245,7 +243,7 @@ class BarrierZone extends Entity { north.setParent(this) } - this.animation = Dash_OnUpdateFrame.add((data, dt) => { + this.animation = Dash_OnUpdateFrame.add((dt: number) => { this.shapes.forEach(shape => { let zuvs = shape.uvs!.map((uv: number, index: number) => { return index % 2 == 0 ? uv+(dt*.05) : uv @@ -277,7 +275,6 @@ class BarrierZone extends Entity { enable(){ this.triggerZone.enable() } } - class BarrierPlane extends Entity { public shape: PlaneShape = new PlaneShape() diff --git a/src/utils/Countdown.ts b/src/utils/Countdown.ts index 6406c91..0079a66 100644 --- a/src/utils/Countdown.ts +++ b/src/utils/Countdown.ts @@ -14,15 +14,15 @@ export class Dash_Countdown { // private onSecondMap: Set<(remaining: number) => void> = new Set() constructor(){ - this.timer = Dash_OnUpdateFrame.add((data: any, dt: number) => this.onFrame(data, dt)) + this.timer = Dash_OnUpdateFrame.add((dt: number) => this.onFrame(dt)) } setTimer(remaining: number){ this.remaining = this.seconds = remaining } - onUpdate(func: (remaining: number) => void){ this.onUpdateMap.add(func) } + onUpdate(func: (dt: number) => void){ this.onUpdateMap.add(func) } onSecond(func: (remaining: number) => void){ this.onSecondMap.add(func) } onComplete(func: () => void ){ this.onCompleteMap.add(func) } start(){this.timer.start()} stop(){this.timer.stop()} - onFrame(data: any, dt: number){ + private onFrame(dt: number){ if(this.remaining > 0) { this.remaining -= dt let seconds = Math.floor(this.remaining) diff --git a/src/utils/DynamicImage.ts b/src/utils/DynamicImage.ts index f372168..e931b38 100644 --- a/src/utils/DynamicImage.ts +++ b/src/utils/DynamicImage.ts @@ -21,7 +21,7 @@ export class DynamicImage { // private tweens: Map = new Map() constructor(public image: UIImage){ - this.animation = Dash_OnUpdateFrame.add((data: any, dt: number) => this.update(data, dt)) + this.animation = Dash_OnUpdateFrame.add((dt: number) => this.update(dt)) } fadeIn( @@ -488,7 +488,7 @@ export class DynamicImage { this.animation.start() } - update(data: any, dt: number){ + update(dt: number){ if(this.tweens.size){ this.tweens.forEach((tween: IDynamicImageAction, name: string) => { const { settings } = tween diff --git a/src/utils/OnFirstMove.ts b/src/utils/OnFirstMove.ts index 5cf7f59..d4b3204 100644 --- a/src/utils/OnFirstMove.ts +++ b/src/utils/OnFirstMove.ts @@ -15,7 +15,7 @@ export const Dash_OnFirstMove = (callback: () => void) => { callback() onUpdateFrame.stop() } - }, .1) + }) onUpdateFrame.start() },1) } diff --git a/src/utils/OnUpdateFrame.ts b/src/utils/OnUpdateFrame.ts index 21a0b95..e2f31eb 100644 --- a/src/utils/OnUpdateFrame.ts +++ b/src/utils/OnUpdateFrame.ts @@ -13,11 +13,10 @@ declare const Map: any export interface Dash_OnUpdateFrame_Setting { id?: number data?: any - onFrame?: (data: any, dt: number) => void + onFrame?: (dt: number) => void } export interface Dash_OnUpdateFrame_Instance { - setting: Dash_OnUpdateFrame_Setting start: () => void stop: () => void } @@ -27,17 +26,17 @@ export class Dash_OnUpdateFrame_Controller implements ISystem { private nonce: number = 0 private queue: typeof Map = new Map() constructor(){ this.system = this } - add(onFrame: (data: any, dt: number) => void, data?: any): Dash_OnUpdateFrame_Instance { - const setting = { id: this.nonce++, onFrame, data } + add(onFrame: (dt: number) => void): Dash_OnUpdateFrame_Instance { + const setting = { id: this.nonce++, onFrame } const start = () => { this.queue.set(setting.id, setting); this.enable()} const stop = () => { this.queue.delete(setting.id)} - return { setting, start, stop } + return { start, stop } } update(dt: number){ if(!this.queue.size){ this.disable() } this.queue.forEach((setting: Dash_OnUpdateFrame_Setting) => { - const { id, onFrame, data } = setting - if(onFrame){ onFrame(data, dt) } + const { id, onFrame } = setting + if(onFrame){ onFrame(dt) } }) } enable(){ if(!this.system.active) engine.addSystem(this) }