kiwiengine 0.5.6 → 0.5.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -50,9 +50,23 @@ export class DomGameObject extends GameNode {
50
50
  this.rotation = options.rotation;
51
51
  if (options.alpha !== undefined)
52
52
  this.alpha = options.alpha;
53
+ if (options.drawOrder !== undefined)
54
+ this.drawOrder = options.drawOrder;
53
55
  this.#useYSort = options.useYSort ?? false;
54
56
  }
55
57
  }
58
+ add(...children) {
59
+ super.add(...children);
60
+ for (const child of children) {
61
+ if (isDomGameObject(child)) {
62
+ this.el.appendChild(child.el);
63
+ }
64
+ }
65
+ }
66
+ remove() {
67
+ this.el.remove();
68
+ super.remove();
69
+ }
56
70
  render(dt) {
57
71
  this.update(dt);
58
72
  this.#updateWorldTransform();
@@ -73,6 +87,8 @@ export class DomGameObject extends GameNode {
73
87
  scale(${wt.scaleX.v}, ${wt.scaleY.v})
74
88
  rotate(${wt.rotation.v}rad)
75
89
  `;
90
+ if (this.#useYSort)
91
+ this.drawOrder = wt.y.v;
76
92
  }
77
93
  if (this.worldAlpha.dirty)
78
94
  this.el.style.opacity = this.worldAlpha.v.toString();
@@ -104,5 +120,7 @@ export class DomGameObject extends GameNode {
104
120
  get pivotY() { return this.#localTransform.pivotY; }
105
121
  set rotation(v) { this.#localTransform.rotation = v; }
106
122
  get rotation() { return this.#localTransform.rotation; }
123
+ set drawOrder(v) { this.el.style.zIndex = v.toString(); }
124
+ get drawOrder() { return Number(this.el.style.zIndex); }
107
125
  }
108
126
  //# sourceMappingURL=dom-game-object.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"dom-game-object.js","sourceRoot":"","sources":["../../src/dom/dom-game-object.ts"],"names":[],"mappings":"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","sourcesContent":["import { EventMap } from '@webtaku/event-emitter'\nimport { DirtyNumber } from '../node/core/dirty-number'\nimport { GameNode } from '../node/core/game-node'\nimport { LocalTransform, WorldTransform } from '../node/core/transform'\nimport { setStyle } from './dom-utils'\n\nexport function isDomGameObject(v: unknown): v is DomGameObject {\n return (v as DomGameObject).worldTransform !== undefined\n}\n\nexport type DomGameObjectOptions = {\n x?: number\n y?: number\n scale?: number\n scaleX?: number\n scaleY?: number\n pivotX?: number\n pivotY?: number\n rotation?: number\n\n alpha?: number\n useYSort?: boolean\n}\n\nclass DomRootNode extends GameNode<EventMap> {\n worldTransform = new WorldTransform()\n worldAlpha = new DirtyNumber(1)\n\n constructor() {\n super()\n this.worldTransform.x.v = 0\n this.worldTransform.y.v = 0\n this.worldTransform.resetDirty()\n }\n}\n\nexport class DomGameObject<E extends EventMap = {}> extends GameNode<E> {\n protected el = document.createElement('div')\n\n #localTransform = new LocalTransform()\n worldTransform = new WorldTransform()\n alpha = 1\n worldAlpha = new DirtyNumber(1)\n #useYSort = false\n\n constructor(options?: DomGameObjectOptions) {\n super()\n\n setStyle(this.el, {\n position: 'absolute',\n left: '50%',\n top: '50%',\n zIndex: '1',\n transform: 'translate(-50%, -50%)',\n })\n\n if (options) {\n if (options.x !== undefined) this.x = options.x\n if (options.y !== undefined) this.y = options.y\n if (options.scale !== undefined) this.scale = options.scale\n if (options.scaleX !== undefined) this.scaleX = options.scaleX\n if (options.scaleY !== undefined) this.scaleY = options.scaleY\n if (options.pivotX !== undefined) this.pivotX = options.pivotX\n if (options.pivotY !== undefined) this.pivotY = options.pivotY\n if (options.rotation !== undefined) this.rotation = options.rotation\n if (options.alpha !== undefined) this.alpha = options.alpha\n\n this.#useYSort = options.useYSort ?? false\n }\n }\n\n render(dt: number) {\n this.update(dt)\n this.#updateWorldTransform()\n }\n\n #updateWorldTransform() {\n const parent = this.parent\n if (parent && isDomGameObject(parent)) {\n this.worldTransform.update(parent.worldTransform, this.#localTransform)\n this.worldAlpha.v = parent.worldAlpha.v * this.alpha\n }\n\n if (this.worldTransform.dirty) {\n const wt = this.worldTransform\n\n this.el.style.transform = `\n translate(\n calc(-50% + ${wt.x.v}px),\n calc(-50% + ${wt.y.v}px)\n )\n scale(${wt.scaleX.v}, ${wt.scaleY.v})\n rotate(${wt.rotation.v}rad)\n `\n }\n if (this.worldAlpha.dirty) this.el.style.opacity = this.worldAlpha.v.toString()\n\n for (const child of this.children) {\n if (isDomGameObject(child)) child.#updateWorldTransform()\n }\n this.worldTransform.resetDirty()\n }\n\n attachTo(target: HTMLElement) {\n target.appendChild(this.el)\n this.parent = new DomRootNode()\n this.#updateWorldTransform()\n return this\n }\n\n set x(v) { this.#localTransform.x = v }\n get x() { return this.#localTransform.x }\n\n set y(v) { this.#localTransform.y = v }\n get y() { return this.#localTransform.y }\n\n set scale(v) { this.#localTransform.scaleX = v; this.#localTransform.scaleY = v }\n get scale() { return this.#localTransform.scaleX }\n\n set scaleX(v) { this.#localTransform.scaleX = v }\n get scaleX() { return this.#localTransform.scaleX }\n\n set scaleY(v) { this.#localTransform.scaleY = v }\n get scaleY() { return this.#localTransform.scaleY }\n\n set pivotX(v) { this.#localTransform.pivotX = v }\n get pivotX() { return this.#localTransform.pivotX }\n\n set pivotY(v) { this.#localTransform.pivotY = v }\n get pivotY() { return this.#localTransform.pivotY }\n\n set rotation(v) { this.#localTransform.rotation = v }\n get rotation() { return this.#localTransform.rotation }\n}\n"]}
1
+ {"version":3,"file":"dom-game-object.js","sourceRoot":"","sources":["../../src/dom/dom-game-object.ts"],"names":[],"mappings":"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","sourcesContent":["import { EventMap } from '@webtaku/event-emitter'\nimport { DirtyNumber } from '../node/core/dirty-number'\nimport { GameNode } from '../node/core/game-node'\nimport { LocalTransform, WorldTransform } from '../node/core/transform'\nimport { setStyle } from './dom-utils'\n\nexport function isDomGameObject(v: unknown): v is DomGameObject {\n return (v as DomGameObject).worldTransform !== undefined\n}\n\nexport type DomGameObjectOptions = {\n x?: number\n y?: number\n scale?: number\n scaleX?: number\n scaleY?: number\n pivotX?: number\n pivotY?: number\n rotation?: number\n drawOrder?: number\n\n alpha?: number\n useYSort?: boolean\n}\n\nclass DomRootNode extends GameNode<EventMap> {\n worldTransform = new WorldTransform()\n worldAlpha = new DirtyNumber(1)\n\n constructor() {\n super()\n this.worldTransform.x.v = 0\n this.worldTransform.y.v = 0\n this.worldTransform.resetDirty()\n }\n}\n\nexport class DomGameObject<E extends EventMap = {}> extends GameNode<E> {\n protected el = document.createElement('div')\n\n #localTransform = new LocalTransform()\n worldTransform = new WorldTransform()\n alpha = 1\n worldAlpha = new DirtyNumber(1)\n #useYSort = false\n\n constructor(options?: DomGameObjectOptions) {\n super()\n\n setStyle(this.el, {\n position: 'absolute',\n left: '50%',\n top: '50%',\n zIndex: '1',\n transform: 'translate(-50%, -50%)',\n })\n\n if (options) {\n if (options.x !== undefined) this.x = options.x\n if (options.y !== undefined) this.y = options.y\n if (options.scale !== undefined) this.scale = options.scale\n if (options.scaleX !== undefined) this.scaleX = options.scaleX\n if (options.scaleY !== undefined) this.scaleY = options.scaleY\n if (options.pivotX !== undefined) this.pivotX = options.pivotX\n if (options.pivotY !== undefined) this.pivotY = options.pivotY\n if (options.rotation !== undefined) this.rotation = options.rotation\n if (options.alpha !== undefined) this.alpha = options.alpha\n if (options.drawOrder !== undefined) this.drawOrder = options.drawOrder\n\n this.#useYSort = options.useYSort ?? false\n }\n }\n\n override add(...children: GameNode<EventMap>[]) {\n super.add(...children)\n\n for (const child of children) {\n if (isDomGameObject(child)) {\n this.el.appendChild(child.el)\n }\n }\n }\n\n override remove() {\n this.el.remove()\n super.remove()\n }\n\n render(dt: number) {\n this.update(dt)\n this.#updateWorldTransform()\n }\n\n #updateWorldTransform() {\n const parent = this.parent\n if (parent && isDomGameObject(parent)) {\n this.worldTransform.update(parent.worldTransform, this.#localTransform)\n this.worldAlpha.v = parent.worldAlpha.v * this.alpha\n }\n\n if (this.worldTransform.dirty) {\n const wt = this.worldTransform\n\n this.el.style.transform = `\n translate(\n calc(-50% + ${wt.x.v}px),\n calc(-50% + ${wt.y.v}px)\n )\n scale(${wt.scaleX.v}, ${wt.scaleY.v})\n rotate(${wt.rotation.v}rad)\n `\n\n if (this.#useYSort) this.drawOrder = wt.y.v\n }\n if (this.worldAlpha.dirty) this.el.style.opacity = this.worldAlpha.v.toString()\n\n for (const child of this.children) {\n if (isDomGameObject(child)) child.#updateWorldTransform()\n }\n this.worldTransform.resetDirty()\n }\n\n attachTo(target: HTMLElement) {\n target.appendChild(this.el)\n this.parent = new DomRootNode()\n this.#updateWorldTransform()\n return this\n }\n\n set x(v) { this.#localTransform.x = v }\n get x() { return this.#localTransform.x }\n\n set y(v) { this.#localTransform.y = v }\n get y() { return this.#localTransform.y }\n\n set scale(v) { this.#localTransform.scaleX = v; this.#localTransform.scaleY = v }\n get scale() { return this.#localTransform.scaleX }\n\n set scaleX(v) { this.#localTransform.scaleX = v }\n get scaleX() { return this.#localTransform.scaleX }\n\n set scaleY(v) { this.#localTransform.scaleY = v }\n get scaleY() { return this.#localTransform.scaleY }\n\n set pivotX(v) { this.#localTransform.pivotX = v }\n get pivotX() { return this.#localTransform.pivotX }\n\n set pivotY(v) { this.#localTransform.pivotY = v }\n get pivotY() { return this.#localTransform.pivotY }\n\n set rotation(v) { this.#localTransform.rotation = v }\n get rotation() { return this.#localTransform.rotation }\n\n set drawOrder(v) { this.el.style.zIndex = v.toString() }\n get drawOrder() { return Number(this.el.style.zIndex) }\n}\n"]}
package/lib/index.js CHANGED
@@ -26,6 +26,7 @@ export { PhysicsWorld } from './node/physics/physics-world';
26
26
  export { RigidbodyType } from './node/physics/rigidbodies';
27
27
  // DOM Nodes
28
28
  export { DomAnimatedSpriteNode } from './dom/dom-animated-sprite';
29
+ export { DomGameObject } from './dom/dom-game-object';
29
30
  export { DomParticleSystem } from './dom/dom-particle';
30
31
  export { domPreload } from './dom/dom-preload';
31
32
  export { DomSpriteNode } from './dom/dom-sprite';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO;AACP,OAAO,EAAE,UAAU,EAAqB,MAAM,yBAAyB,CAAA;AAEvE,WAAW;AACX,OAAO,EAAE,QAAQ,EAAmB,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,SAAS;AACT,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAe,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG/E,YAAY;AACZ,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAA4B,YAAY,EAAuD,MAAM,uBAAuB,CAAA;AAEnI,kBAAkB;AAClB,OAAO,EAAE,kBAAkB,EAA6B,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,cAAc,EAAyB,MAAM,wBAAwB,CAAA;AAC9E,OAAO,EAAE,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAA2B,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAyB,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAwB,MAAM,sBAAsB,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAoB,MAAM,kBAAkB,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAEjE,UAAU;AACV,OAAO,EAAE,aAAa,EAAwB,MAAM,+BAA+B,CAAA;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAoE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE5H,YAAY;AACZ,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAA4B,MAAM,oBAAoB,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAwB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEtD,QAAQ;AACR,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,QAAQ;AACR,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,QAAQ;AACR,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA","sourcesContent":["// Core\nexport { GameObject, GameObjectOptions } from './node/core/game-object'\n\n// Renderer\nexport { Renderer, RendererOptions } from './renderer/renderer'\nexport { Ticker } from './renderer/ticker'\n\n// Assets\nexport { musicPlayer, sfxPlayer } from './asset/audio'\nexport { AssetSource, loadAsset, preload, releaseAsset } from './asset/preload'\nexport { Atlas } from './types/atlas'\n\n// Collision\nexport { checkCollision } from './collision/check-collision'\nexport { CircleCollider, Collider, ColliderType, EllipseCollider, PolygonCollider, RectangleCollider } from './collision/colliders'\n\n// Node Extensions\nexport { AnimatedSpriteNode, AnimatedSpriteNodeOptions } from './node/ext/animated-sprite'\nexport { BitmapTextNode, BitmapTextNodeOptions } from './node/ext/bitmap-text'\nexport { CircleNode, CircleNodeOptions } from './node/ext/circle'\nexport { DelayNode } from './node/ext/deplay'\nexport { DomContainerNode, DomContainerNodeOptions } from './node/ext/dom-container'\nexport { IntervalNode } from './node/ext/interval'\nexport { ParticleSystem, ParticleSystemOptions } from './node/ext/particle'\nexport { RectangleNode, RectangleNodeOptions } from './node/ext/rectangle'\nexport { SpineNode, SpineNodeOptions } from './node/ext/spine'\nexport { SpriteNode, SpriteNodeOptions } from './node/ext/sprite'\n\n// Physics\nexport { PhysicsObject, PhysicsObjectOptions } from './node/physics/physics-object'\nexport { PhysicsWorld } from './node/physics/physics-world'\nexport { CircleRigidbody, PolygonRigidbody, RectangleRigidbody, Rigidbody, RigidbodyType } from './node/physics/rigidbodies'\n\n// DOM Nodes\nexport { DomAnimatedSpriteNode } from './dom/dom-animated-sprite'\nexport { DomParticleSystem, DomParticleSystemOptions } from './dom/dom-particle'\nexport { domPreload } from './dom/dom-preload'\nexport { DomSpriteNode, DomSpriteNodeOptions } from './dom/dom-sprite'\nexport { setStyle, textStroke } from './dom/dom-utils'\n\n// Input\nexport { Joystick } from './input/joystick'\n\n// Utils\nexport { isMobile } from './utils/device'\n\n// Debug\nexport { debugMode, enableDebug } from './debug'\n\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO;AACP,OAAO,EAAE,UAAU,EAAqB,MAAM,yBAAyB,CAAA;AAEvE,WAAW;AACX,OAAO,EAAE,QAAQ,EAAmB,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,SAAS;AACT,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAe,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG/E,YAAY;AACZ,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAA4B,YAAY,EAAuD,MAAM,uBAAuB,CAAA;AAEnI,kBAAkB;AAClB,OAAO,EAAE,kBAAkB,EAA6B,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,cAAc,EAAyB,MAAM,wBAAwB,CAAA;AAC9E,OAAO,EAAE,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAA2B,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAyB,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAwB,MAAM,sBAAsB,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAoB,MAAM,kBAAkB,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAEjE,UAAU;AACV,OAAO,EAAE,aAAa,EAAwB,MAAM,+BAA+B,CAAA;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAoE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE5H,YAAY;AACZ,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,aAAa,EAAwB,MAAM,uBAAuB,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAA4B,MAAM,oBAAoB,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAwB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEtD,QAAQ;AACR,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE3C,QAAQ;AACR,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,QAAQ;AACR,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA","sourcesContent":["// Core\nexport { GameObject, GameObjectOptions } from './node/core/game-object'\n\n// Renderer\nexport { Renderer, RendererOptions } from './renderer/renderer'\nexport { Ticker } from './renderer/ticker'\n\n// Assets\nexport { musicPlayer, sfxPlayer } from './asset/audio'\nexport { AssetSource, loadAsset, preload, releaseAsset } from './asset/preload'\nexport { Animation, Atlas, Frame } from './types/atlas'\n\n// Collision\nexport { checkCollision } from './collision/check-collision'\nexport { CircleCollider, Collider, ColliderType, EllipseCollider, PolygonCollider, RectangleCollider } from './collision/colliders'\n\n// Node Extensions\nexport { AnimatedSpriteNode, AnimatedSpriteNodeOptions } from './node/ext/animated-sprite'\nexport { BitmapTextNode, BitmapTextNodeOptions } from './node/ext/bitmap-text'\nexport { CircleNode, CircleNodeOptions } from './node/ext/circle'\nexport { DelayNode } from './node/ext/deplay'\nexport { DomContainerNode, DomContainerNodeOptions } from './node/ext/dom-container'\nexport { IntervalNode } from './node/ext/interval'\nexport { ParticleSystem, ParticleSystemOptions } from './node/ext/particle'\nexport { RectangleNode, RectangleNodeOptions } from './node/ext/rectangle'\nexport { SpineNode, SpineNodeOptions } from './node/ext/spine'\nexport { SpriteNode, SpriteNodeOptions } from './node/ext/sprite'\n\n// Physics\nexport { PhysicsObject, PhysicsObjectOptions } from './node/physics/physics-object'\nexport { PhysicsWorld } from './node/physics/physics-world'\nexport { CircleRigidbody, PolygonRigidbody, RectangleRigidbody, Rigidbody, RigidbodyType } from './node/physics/rigidbodies'\n\n// DOM Nodes\nexport { DomAnimatedSpriteNode } from './dom/dom-animated-sprite'\nexport { DomGameObject, DomGameObjectOptions } from './dom/dom-game-object'\nexport { DomParticleSystem, DomParticleSystemOptions } from './dom/dom-particle'\nexport { domPreload } from './dom/dom-preload'\nexport { DomSpriteNode, DomSpriteNodeOptions } from './dom/dom-sprite'\nexport { setStyle, textStroke } from './dom/dom-utils'\n\n// Input\nexport { Joystick } from './input/joystick'\n\n// Utils\nexport { isMobile } from './utils/device'\n\n// Debug\nexport { debugMode, enableDebug } from './debug'\n\n"]}
@@ -12,6 +12,7 @@ export type DomGameObjectOptions = {
12
12
  pivotX?: number;
13
13
  pivotY?: number;
14
14
  rotation?: number;
15
+ drawOrder?: number;
15
16
  alpha?: number;
16
17
  useYSort?: boolean;
17
18
  };
@@ -22,6 +23,8 @@ export declare class DomGameObject<E extends EventMap = {}> extends GameNode<E>
22
23
  alpha: number;
23
24
  worldAlpha: DirtyNumber;
24
25
  constructor(options?: DomGameObjectOptions);
26
+ add(...children: GameNode<EventMap>[]): void;
27
+ remove(): void;
25
28
  render(dt: number): void;
26
29
  attachTo(target: HTMLElement): this;
27
30
  set x(v: number);
@@ -40,5 +43,7 @@ export declare class DomGameObject<E extends EventMap = {}> extends GameNode<E>
40
43
  get pivotY(): number;
41
44
  set rotation(v: number);
42
45
  get rotation(): number;
46
+ set drawOrder(v: number);
47
+ get drawOrder(): number;
43
48
  }
44
49
  //# sourceMappingURL=dom-game-object.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"dom-game-object.d.ts","sourceRoot":"","sources":["../../../src/dom/dom-game-object.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAkB,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGvE,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,IAAI,aAAa,CAE9D;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAcD,qBAAa,aAAa,CAAC,CAAC,SAAS,QAAQ,GAAG,EAAE,CAAE,SAAQ,QAAQ,CAAC,CAAC,CAAC;;IACrE,SAAS,CAAC,EAAE,iBAAgC;IAG5C,cAAc,iBAAuB;IACrC,KAAK,SAAI;IACT,UAAU,cAAqB;gBAGnB,OAAO,CAAC,EAAE,oBAAoB;IA0B1C,MAAM,CAAC,EAAE,EAAE,MAAM;IAgCjB,QAAQ,CAAC,MAAM,EAAE,WAAW;IAO5B,IAAI,CAAC,CAAC,CAAC,QAAA,EAAgC;IACvC,IAAI,CAAC,WAAoC;IAEzC,IAAI,CAAC,CAAC,CAAC,QAAA,EAAgC;IACvC,IAAI,CAAC,WAAoC;IAEzC,IAAI,KAAK,CAAC,CAAC,QAAA,EAAsE;IACjF,IAAI,KAAK,WAAyC;IAElD,IAAI,MAAM,CAAC,CAAC,QAAA,EAAqC;IACjD,IAAI,MAAM,WAAyC;IAEnD,IAAI,MAAM,CAAC,CAAC,QAAA,EAAqC;IACjD,IAAI,MAAM,WAAyC;IAEnD,IAAI,MAAM,CAAC,CAAC,QAAA,EAAqC;IACjD,IAAI,MAAM,WAAyC;IAEnD,IAAI,MAAM,CAAC,CAAC,QAAA,EAAqC;IACjD,IAAI,MAAM,WAAyC;IAEnD,IAAI,QAAQ,CAAC,CAAC,QAAA,EAAuC;IACrD,IAAI,QAAQ,WAA2C;CACxD"}
1
+ {"version":3,"file":"dom-game-object.d.ts","sourceRoot":"","sources":["../../../src/dom/dom-game-object.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAkB,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGvE,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,IAAI,aAAa,CAE9D;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAcD,qBAAa,aAAa,CAAC,CAAC,SAAS,QAAQ,GAAG,EAAE,CAAE,SAAQ,QAAQ,CAAC,CAAC,CAAC;;IACrE,SAAS,CAAC,EAAE,iBAAgC;IAG5C,cAAc,iBAAuB;IACrC,KAAK,SAAI;IACT,UAAU,cAAqB;gBAGnB,OAAO,CAAC,EAAE,oBAAoB;IA2BjC,GAAG,CAAC,GAAG,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE;IAUrC,MAAM;IAKf,MAAM,CAAC,EAAE,EAAE,MAAM;IAkCjB,QAAQ,CAAC,MAAM,EAAE,WAAW;IAO5B,IAAI,CAAC,CAAC,CAAC,QAAA,EAAgC;IACvC,IAAI,CAAC,WAAoC;IAEzC,IAAI,CAAC,CAAC,CAAC,QAAA,EAAgC;IACvC,IAAI,CAAC,WAAoC;IAEzC,IAAI,KAAK,CAAC,CAAC,QAAA,EAAsE;IACjF,IAAI,KAAK,WAAyC;IAElD,IAAI,MAAM,CAAC,CAAC,QAAA,EAAqC;IACjD,IAAI,MAAM,WAAyC;IAEnD,IAAI,MAAM,CAAC,CAAC,QAAA,EAAqC;IACjD,IAAI,MAAM,WAAyC;IAEnD,IAAI,MAAM,CAAC,CAAC,QAAA,EAAqC;IACjD,IAAI,MAAM,WAAyC;IAEnD,IAAI,MAAM,CAAC,CAAC,QAAA,EAAqC;IACjD,IAAI,MAAM,WAAyC;IAEnD,IAAI,QAAQ,CAAC,CAAC,QAAA,EAAuC;IACrD,IAAI,QAAQ,WAA2C;IAEvD,IAAI,SAAS,CAAC,CAAC,QAAA,EAAyC;IACxD,IAAI,SAAS,WAA0C;CACxD"}
@@ -3,7 +3,7 @@ export { Renderer, RendererOptions } from './renderer/renderer';
3
3
  export { Ticker } from './renderer/ticker';
4
4
  export { musicPlayer, sfxPlayer } from './asset/audio';
5
5
  export { AssetSource, loadAsset, preload, releaseAsset } from './asset/preload';
6
- export { Atlas } from './types/atlas';
6
+ export { Animation, Atlas, Frame } from './types/atlas';
7
7
  export { checkCollision } from './collision/check-collision';
8
8
  export { CircleCollider, Collider, ColliderType, EllipseCollider, PolygonCollider, RectangleCollider } from './collision/colliders';
9
9
  export { AnimatedSpriteNode, AnimatedSpriteNodeOptions } from './node/ext/animated-sprite';
@@ -20,6 +20,7 @@ export { PhysicsObject, PhysicsObjectOptions } from './node/physics/physics-obje
20
20
  export { PhysicsWorld } from './node/physics/physics-world';
21
21
  export { CircleRigidbody, PolygonRigidbody, RectangleRigidbody, Rigidbody, RigidbodyType } from './node/physics/rigidbodies';
22
22
  export { DomAnimatedSpriteNode } from './dom/dom-animated-sprite';
23
+ export { DomGameObject, DomGameObjectOptions } from './dom/dom-game-object';
23
24
  export { DomParticleSystem, DomParticleSystemOptions } from './dom/dom-particle';
24
25
  export { domPreload } from './dom/dom-preload';
25
26
  export { DomSpriteNode, DomSpriteNodeOptions } from './dom/dom-sprite';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAGvE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAG1C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC/E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAGnI,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAC9E,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAGjE,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAG5H,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGzC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAGvE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAG1C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC/E,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAGnI,OAAO,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAC9E,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAGjE,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAG5H,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGzC,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kiwiengine",
3
- "version": "0.5.6",
3
+ "version": "0.5.12",
4
4
  "types": "./lib/types/index.d.ts",
5
5
  "main": "./lib/index.js",
6
6
  "dependencies": {
@@ -21,4 +21,4 @@
21
21
  "typescript": "^5.8.3"
22
22
  },
23
23
  "packageManager": "yarn@1.22.22"
24
- }
24
+ }
@@ -17,6 +17,7 @@ export type DomGameObjectOptions = {
17
17
  pivotX?: number
18
18
  pivotY?: number
19
19
  rotation?: number
20
+ drawOrder?: number
20
21
 
21
22
  alpha?: number
22
23
  useYSort?: boolean
@@ -64,11 +65,27 @@ export class DomGameObject<E extends EventMap = {}> extends GameNode<E> {
64
65
  if (options.pivotY !== undefined) this.pivotY = options.pivotY
65
66
  if (options.rotation !== undefined) this.rotation = options.rotation
66
67
  if (options.alpha !== undefined) this.alpha = options.alpha
68
+ if (options.drawOrder !== undefined) this.drawOrder = options.drawOrder
67
69
 
68
70
  this.#useYSort = options.useYSort ?? false
69
71
  }
70
72
  }
71
73
 
74
+ override add(...children: GameNode<EventMap>[]) {
75
+ super.add(...children)
76
+
77
+ for (const child of children) {
78
+ if (isDomGameObject(child)) {
79
+ this.el.appendChild(child.el)
80
+ }
81
+ }
82
+ }
83
+
84
+ override remove() {
85
+ this.el.remove()
86
+ super.remove()
87
+ }
88
+
72
89
  render(dt: number) {
73
90
  this.update(dt)
74
91
  this.#updateWorldTransform()
@@ -92,6 +109,8 @@ export class DomGameObject<E extends EventMap = {}> extends GameNode<E> {
92
109
  scale(${wt.scaleX.v}, ${wt.scaleY.v})
93
110
  rotate(${wt.rotation.v}rad)
94
111
  `
112
+
113
+ if (this.#useYSort) this.drawOrder = wt.y.v
95
114
  }
96
115
  if (this.worldAlpha.dirty) this.el.style.opacity = this.worldAlpha.v.toString()
97
116
 
@@ -131,4 +150,7 @@ export class DomGameObject<E extends EventMap = {}> extends GameNode<E> {
131
150
 
132
151
  set rotation(v) { this.#localTransform.rotation = v }
133
152
  get rotation() { return this.#localTransform.rotation }
153
+
154
+ set drawOrder(v) { this.el.style.zIndex = v.toString() }
155
+ get drawOrder() { return Number(this.el.style.zIndex) }
134
156
  }
package/src/index.ts CHANGED
@@ -8,7 +8,7 @@ export { Ticker } from './renderer/ticker'
8
8
  // Assets
9
9
  export { musicPlayer, sfxPlayer } from './asset/audio'
10
10
  export { AssetSource, loadAsset, preload, releaseAsset } from './asset/preload'
11
- export { Atlas } from './types/atlas'
11
+ export { Animation, Atlas, Frame } from './types/atlas'
12
12
 
13
13
  // Collision
14
14
  export { checkCollision } from './collision/check-collision'
@@ -33,6 +33,7 @@ export { CircleRigidbody, PolygonRigidbody, RectangleRigidbody, Rigidbody, Rigid
33
33
 
34
34
  // DOM Nodes
35
35
  export { DomAnimatedSpriteNode } from './dom/dom-animated-sprite'
36
+ export { DomGameObject, DomGameObjectOptions } from './dom/dom-game-object'
36
37
  export { DomParticleSystem, DomParticleSystemOptions } from './dom/dom-particle'
37
38
  export { domPreload } from './dom/dom-preload'
38
39
  export { DomSpriteNode, DomSpriteNodeOptions } from './dom/dom-sprite'