excalibur 0.28.3 → 0.28.4

package/build/esm/excalibur.js

@@ -1,5 +1,5 @@
 /*!
- * excalibur - 0.28.3 - 2023-12-12
+ * excalibur - 0.29.0-alpha.2+5c28d4e - 2023-12-22
  * https://github.com/excaliburjs/Excalibur
  * Copyright (c) 2023 Excalibur.js <https://github.com/excaliburjs/Excalibur/graphs/contributors>
  * Licensed BSD-2-Clause
@@ -22,129 +22,129 @@
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `/* Buttons styles start */
-
-button#excalibur-play {
-  display: inline-block;
-  position: relative;
-  z-index: 999;
-  border-radius: 6px;
-  border: none;
-  /*border: 3px solid;
-    border-color: white;
-    box-shadow: 0 0 10px #ccc;*/
-  padding: 1rem 1.5rem 1rem 4rem;
-  margin: 0;
-  text-decoration: none;
-  background: #00b233;
-  color: #ffffff;
-  font-family: sans-serif;
-  font-size: 2rem;
-  white-space: nowrap;
-  line-height: 1;
-  cursor: pointer;
-  text-align: center;
-  transition: background 250ms ease-in-out, transform 150ms ease;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-
-  -webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
-  -moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */
-  -ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */
-  -o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */
-  animation: excalibur-button-fadein 200ms;
-}
-
-/*
-button#excalibur-play {
-  display: none;
-}*/
-
-button#excalibur-play:after {
-  position: absolute;
-  content: '';
-  border: 8px solid;
-  border-color: transparent transparent transparent white;
-  left: 35px;
-  top: 24px;
-  width: 0;
-  height: 0;
-}
-
-button#excalibur-play:before {
-  position: absolute;
-  content: '';
-  border: 3px solid;
-  left: 19px;
-  top: 14px;
-  border-radius: 20px;
-  width: 30px;
-  height: 30px;
-}
-
-button#excalibur-play:hover,
-button#excalibur-play:focus {
-  background: #00982c;
-}
-
-button#excalibur-play:focus {
-  outline: 1px solid #fff;
-  outline-offset: -4px;
-}
-
-button#excalibur-play:active {
-  transform: scale(0.99);
-}
-
-@keyframes excalibur-button-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Firefox < 16 */
-@-moz-keyframes excalibur-button-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes excalibur-button-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Internet Explorer */
-@-ms-keyframes excalibur-button-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* Opera < 12.1 */
-@-o-keyframes excalibur-button-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-`, "",{"version":3,"sources":["webpack://./Loader.css"],"names":[],"mappings":"AAAA,yBAAyB;;AAEzB;EACE,qBAAqB;EACrB,kBAAkB;EAClB,YAAY;EACZ,kBAAkB;EAClB,YAAY;EACZ;;+BAE6B;EAC7B,8BAA8B;EAC9B,SAAS;EACT,qBAAqB;EACrB,mBAAmB;EACnB,cAAc;EACd,uBAAuB;EACvB,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,kBAAkB;EAClB,8DAA8D;EAC9D,wBAAwB;EACxB,qBAAqB;;EAErB,gDAAgD,EAAE,oCAAoC;EACtF,6CAA6C,EAAE,iBAAiB;EAChE,4CAA4C,EAAE,sBAAsB;EACpE,2CAA2C,EAAE,iBAAiB;EAC9D,wCAAwC;AAC1C;;AAEA;;;EAGE;;AAEF;EACE,kBAAkB;EAClB,WAAW;EACX,iBAAiB;EACjB,uDAAuD;EACvD,UAAU;EACV,SAAS;EACT,QAAQ;EACR,SAAS;AACX;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,iBAAiB;EACjB,UAAU;EACV,SAAS;EACT,mBAAmB;EACnB,WAAW;EACX,YAAY;AACd;;AAEA;;EAEE,mBAAmB;AACrB;;AAEA;EACE,uBAAuB;EACvB,oBAAoB;AACtB;;AAEA;EACE,sBAAsB;AACxB;;AAEA;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,iBAAiB;AACjB;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,oCAAoC;AACpC;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,sBAAsB;AACtB;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,iBAAiB;AACjB;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF","sourcesContent":["/* Buttons styles start */\r\n\r\nbutton#excalibur-play {\r\n  display: inline-block;\r\n  position: relative;\r\n  z-index: 999;\r\n  border-radius: 6px;\r\n  border: none;\r\n  /*border: 3px solid;\r\n    border-color: white;\r\n    box-shadow: 0 0 10px #ccc;*/\r\n  padding: 1rem 1.5rem 1rem 4rem;\r\n  margin: 0;\r\n  text-decoration: none;\r\n  background: #00b233;\r\n  color: #ffffff;\r\n  font-family: sans-serif;\r\n  font-size: 2rem;\r\n  white-space: nowrap;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  text-align: center;\r\n  transition: background 250ms ease-in-out, transform 150ms ease;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n\r\n  -webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */\r\n  -moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */\r\n  -ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */\r\n  -o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */\r\n  animation: excalibur-button-fadein 200ms;\r\n}\r\n\r\n/*\r\nbutton#excalibur-play {\r\n  display: none;\r\n}*/\r\n\r\nbutton#excalibur-play:after {\r\n  position: absolute;\r\n  content: '';\r\n  border: 8px solid;\r\n  border-color: transparent transparent transparent white;\r\n  left: 35px;\r\n  top: 24px;\r\n  width: 0;\r\n  height: 0;\r\n}\r\n\r\nbutton#excalibur-play:before {\r\n  position: absolute;\r\n  content: '';\r\n  border: 3px solid;\r\n  left: 19px;\r\n  top: 14px;\r\n  border-radius: 20px;\r\n  width: 30px;\r\n  height: 30px;\r\n}\r\n\r\nbutton#excalibur-play:hover,\r\nbutton#excalibur-play:focus {\r\n  background: #00982c;\r\n}\r\n\r\nbutton#excalibur-play:focus {\r\n  outline: 1px solid #fff;\r\n  outline-offset: -4px;\r\n}\r\n\r\nbutton#excalibur-play:active {\r\n  transform: scale(0.99);\r\n}\r\n\r\n@keyframes excalibur-button-fadein {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n/* Firefox < 16 */\r\n@-moz-keyframes excalibur-button-fadein {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n/* Safari, Chrome and Opera > 12.1 */\r\n@-webkit-keyframes excalibur-button-fadein {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n/* Internet Explorer */\r\n@-ms-keyframes excalibur-button-fadein {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n/* Opera < 12.1 */\r\n@-o-keyframes excalibur-button-fadein {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `/* Buttons styles start */
+
+button#excalibur-play {
+  display: inline-block;
+  position: relative;
+  z-index: 999;
+  border-radius: 6px;
+  border: none;
+  /*border: 3px solid;
+    border-color: white;
+    box-shadow: 0 0 10px #ccc;*/
+  padding: 1rem 1.5rem 1rem 4rem;
+  margin: 0;
+  text-decoration: none;
+  background: #00b233;
+  color: #ffffff;
+  font-family: sans-serif;
+  font-size: 2rem;
+  white-space: nowrap;
+  line-height: 1;
+  cursor: pointer;
+  text-align: center;
+  transition: background 250ms ease-in-out, transform 150ms ease;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  -webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */
+  -moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */
+  -ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */
+  -o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */
+  animation: excalibur-button-fadein 200ms;
+}
+
+/*
+button#excalibur-play {
+  display: none;
+}*/
+
+button#excalibur-play:after {
+  position: absolute;
+  content: '';
+  border: 8px solid;
+  border-color: transparent transparent transparent white;
+  left: 35px;
+  top: 24px;
+  width: 0;
+  height: 0;
+}
+
+button#excalibur-play:before {
+  position: absolute;
+  content: '';
+  border: 3px solid;
+  left: 19px;
+  top: 14px;
+  border-radius: 20px;
+  width: 30px;
+  height: 30px;
+}
+
+button#excalibur-play:hover,
+button#excalibur-play:focus {
+  background: #00982c;
+}
+
+button#excalibur-play:focus {
+  outline: 1px solid #fff;
+  outline-offset: -4px;
+}
+
+button#excalibur-play:active {
+  transform: scale(0.99);
+}
+
+@keyframes excalibur-button-fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes excalibur-button-fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes excalibur-button-fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Internet Explorer */
+@-ms-keyframes excalibur-button-fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes excalibur-button-fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+`, "",{"version":3,"sources":["webpack://./Loader.css"],"names":[],"mappings":"AAAA,yBAAyB;;AAEzB;EACE,qBAAqB;EACrB,kBAAkB;EAClB,YAAY;EACZ,kBAAkB;EAClB,YAAY;EACZ;;+BAE6B;EAC7B,8BAA8B;EAC9B,SAAS;EACT,qBAAqB;EACrB,mBAAmB;EACnB,cAAc;EACd,uBAAuB;EACvB,eAAe;EACf,mBAAmB;EACnB,cAAc;EACd,eAAe;EACf,kBAAkB;EAClB,8DAA8D;EAC9D,wBAAwB;EACxB,qBAAqB;;EAErB,gDAAgD,EAAE,oCAAoC;EACtF,6CAA6C,EAAE,iBAAiB;EAChE,4CAA4C,EAAE,sBAAsB;EACpE,2CAA2C,EAAE,iBAAiB;EAC9D,wCAAwC;AAC1C;;AAEA;;;EAGE;;AAEF;EACE,kBAAkB;EAClB,WAAW;EACX,iBAAiB;EACjB,uDAAuD;EACvD,UAAU;EACV,SAAS;EACT,QAAQ;EACR,SAAS;AACX;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,iBAAiB;EACjB,UAAU;EACV,SAAS;EACT,mBAAmB;EACnB,WAAW;EACX,YAAY;AACd;;AAEA;;EAEE,mBAAmB;AACrB;;AAEA;EACE,uBAAuB;EACvB,oBAAoB;AACtB;;AAEA;EACE,sBAAsB;AACxB;;AAEA;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,iBAAiB;AACjB;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,oCAAoC;AACpC;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,sBAAsB;AACtB;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,iBAAiB;AACjB;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF","sourcesContent":["/* Buttons styles start */\n\nbutton#excalibur-play {\n  display: inline-block;\n  position: relative;\n  z-index: 999;\n  border-radius: 6px;\n  border: none;\n  /*border: 3px solid;\n    border-color: white;\n    box-shadow: 0 0 10px #ccc;*/\n  padding: 1rem 1.5rem 1rem 4rem;\n  margin: 0;\n  text-decoration: none;\n  background: #00b233;\n  color: #ffffff;\n  font-family: sans-serif;\n  font-size: 2rem;\n  white-space: nowrap;\n  line-height: 1;\n  cursor: pointer;\n  text-align: center;\n  transition: background 250ms ease-in-out, transform 150ms ease;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n\n  -webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */\n  -moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */\n  -ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */\n  -o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */\n  animation: excalibur-button-fadein 200ms;\n}\n\n/*\nbutton#excalibur-play {\n  display: none;\n}*/\n\nbutton#excalibur-play:after {\n  position: absolute;\n  content: '';\n  border: 8px solid;\n  border-color: transparent transparent transparent white;\n  left: 35px;\n  top: 24px;\n  width: 0;\n  height: 0;\n}\n\nbutton#excalibur-play:before {\n  position: absolute;\n  content: '';\n  border: 3px solid;\n  left: 19px;\n  top: 14px;\n  border-radius: 20px;\n  width: 30px;\n  height: 30px;\n}\n\nbutton#excalibur-play:hover,\nbutton#excalibur-play:focus {\n  background: #00982c;\n}\n\nbutton#excalibur-play:focus {\n  outline: 1px solid #fff;\n  outline-offset: -4px;\n}\n\nbutton#excalibur-play:active {\n  transform: scale(0.99);\n}\n\n@keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Safari, Chrome and Opera > 12.1 */\n@-webkit-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Internet Explorer */\n@-ms-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Opera < 12.1 */\n@-o-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -166,35 +166,35 @@ button#excalibur-play:active {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `
-#ex-toast-container {
-  position: absolute;
-  height: 0;
-  min-width: 50%;
-  left: 50%;
-  top: 0;
-}
-
-.ex-toast-message {
-  left: -50%;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-
-
-  padding: 10px;
-  margin-top: 5px;
-  font-size: 18px;
-  font-family: sans-serif;
-  border-radius: 6px;
-  border: 3px solid #b7b779;
-  background-color: rgb(253, 253, 192);
-}
-
-
-.ex-toast-message button {
-  align-self: flex-start;
-}`, "",{"version":3,"sources":["webpack://./Util/Toaster.css"],"names":[],"mappings":";AACA;EACE,kBAAkB;EAClB,SAAS;EACT,cAAc;EACd,SAAS;EACT,MAAM;AACR;;AAEA;EACE,UAAU;EACV,kBAAkB;EAClB,aAAa;EACb,8BAA8B;;;EAG9B,aAAa;EACb,eAAe;EACf,eAAe;EACf,uBAAuB;EACvB,kBAAkB;EAClB,yBAAyB;EACzB,oCAAoC;AACtC;;;AAGA;EACE,sBAAsB;AACxB","sourcesContent":["\r\n#ex-toast-container {\r\n  position: absolute;\r\n  height: 0;\r\n  min-width: 50%;\r\n  left: 50%;\r\n  top: 0;\r\n}\r\n\r\n.ex-toast-message {\r\n  left: -50%;\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n\r\n\r\n  padding: 10px;\r\n  margin-top: 5px;\r\n  font-size: 18px;\r\n  font-family: sans-serif;\r\n  border-radius: 6px;\r\n  border: 3px solid #b7b779;\r\n  background-color: rgb(253, 253, 192);\r\n}\r\n\r\n\r\n.ex-toast-message button {\r\n  align-self: flex-start;\r\n}"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `
+#ex-toast-container {
+  position: absolute;
+  height: 0;
+  min-width: 50%;
+  left: 50%;
+  top: 0;
+}
+
+.ex-toast-message {
+  left: -50%;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+
+
+  padding: 10px;
+  margin-top: 5px;
+  font-size: 18px;
+  font-family: sans-serif;
+  border-radius: 6px;
+  border: 3px solid #b7b779;
+  background-color: rgb(253, 253, 192);
+}
+
+
+.ex-toast-message button {
+  align-self: flex-start;
+}`, "",{"version":3,"sources":["webpack://./Util/Toaster.css"],"names":[],"mappings":";AACA;EACE,kBAAkB;EAClB,SAAS;EACT,cAAc;EACd,SAAS;EACT,MAAM;AACR;;AAEA;EACE,UAAU;EACV,kBAAkB;EAClB,aAAa;EACb,8BAA8B;;;EAG9B,aAAa;EACb,eAAe;EACf,eAAe;EACf,uBAAuB;EACvB,kBAAkB;EAClB,yBAAyB;EACzB,oCAAoC;AACtC;;;AAGA;EACE,sBAAsB;AACxB","sourcesContent":["\n#ex-toast-container {\n  position: absolute;\n  height: 0;\n  min-width: 50%;\n  left: 50%;\n  top: 0;\n}\n\n.ex-toast-message {\n  left: -50%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n\n\n  padding: 10px;\n  margin-top: 5px;\n  font-size: 18px;\n  font-family: sans-serif;\n  border-radius: 6px;\n  border: 3px solid #b7b779;\n  background-color: rgb(253, 253, 192);\n}\n\n\n.ex-toast-message button {\n  align-self: flex-start;\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -2690,6 +2690,7 @@ __webpack_require__.d(Util_Index_namespaceObject, {
   delay: () => (delay),
   fail: () => (fail),
   getPosition: () => (getPosition),
+  omit: () => (omit),
   removeItemFromArray: () => (removeItemFromArray)
 });
 
@@ -6063,6 +6064,20 @@ function delay(milliseconds, clock) {
     }, milliseconds);
     return future.promise;
 }
+/**
+ * Remove keys from object literals
+ * @param object
+ * @param keys
+ */
+function omit(object, keys) {
+    const newObj = {};
+    for (const key in object) {
+        if (!keys.includes(key)) {
+            newObj[key] = object[key];
+        }
+    }
+    return newObj;
+}
 
 ;// CONCATENATED MODULE: ./Math/matrix.ts
 
@@ -6513,11 +6528,11 @@ class Matrix {
             this.data[15] === 1);
     }
     toString() {
-        return `
-[${this.data[0]} ${this.data[4]} ${this.data[8]} ${this.data[12]}]
-[${this.data[1]} ${this.data[5]} ${this.data[9]} ${this.data[13]}]
-[${this.data[2]} ${this.data[6]} ${this.data[10]} ${this.data[14]}]
-[${this.data[3]} ${this.data[7]} ${this.data[11]} ${this.data[15]}]
+        return `
+[${this.data[0]} ${this.data[4]} ${this.data[8]} ${this.data[12]}]
+[${this.data[1]} ${this.data[5]} ${this.data[9]} ${this.data[13]}]
+[${this.data[2]} ${this.data[6]} ${this.data[10]} ${this.data[14]}]
+[${this.data[3]} ${this.data[7]} ${this.data[11]} ${this.data[15]}]
 `;
     }
 }
@@ -6846,10 +6861,10 @@ class AffineMatrix {
         return mat;
     }
     toString() {
-        return `
-[${this.data[0]} ${this.data[2]} ${this.data[4]}]
-[${this.data[1]} ${this.data[3]} ${this.data[5]}]
-[0 0 1]
+        return `
+[${this.data[0]} ${this.data[2]} ${this.data[4]}]
+[${this.data[1]} ${this.data[3]} ${this.data[5]}]
+[0 0 1]
 `;
     }
 }
@@ -7145,7 +7160,7 @@ class Graphic {
         this._transformStale = true;
     }
     constructor(options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.id = Graphic._ID++;
         this.transform = AffineMatrix.identity();
         this.tint = null;
@@ -7172,16 +7187,20 @@ class Graphic {
             this.rotation = (_d = options.rotation) !== null && _d !== void 0 ? _d : this.rotation;
             this.opacity = (_e = options.opacity) !== null && _e !== void 0 ? _e : this.opacity;
             this.scale = (_f = options.scale) !== null && _f !== void 0 ? _f : this.scale;
+            this.tint = (_g = options.tint) !== null && _g !== void 0 ? _g : this.tint;
         }
     }
     cloneGraphicOptions() {
         return {
+            width: this.width / this.scale.x,
+            height: this.height / this.scale.y,
             origin: this.origin ? this.origin.clone() : null,
             flipHorizontal: this.flipHorizontal,
             flipVertical: this.flipVertical,
             rotation: this.rotation,
             opacity: this.opacity,
-            scale: this.scale ? this.scale.clone() : null
+            scale: this.scale ? this.scale.clone() : null,
+            tint: this.tint ? this.tint.clone() : null
         };
     }
     /**
@@ -8005,9 +8024,9 @@ class RenderTarget {
 }
 
 ;// CONCATENATED MODULE: ./Graphics/Context/line-renderer/line-vertex.glsl
-/* harmony default export */ const line_vertex = ("#version 300 es\r\nin vec2 a_position;\r\nin vec4 a_color;\r\n\r\nout lowp vec4 v_color;\r\n\r\nuniform mat4 u_matrix;\r\n\r\nvoid main() {\r\n   // Set the vertex position using the ortho transform matrix\r\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\r\n\r\n   // Passthrough the color\r\n   v_color = a_color;\r\n}");
+/* harmony default export */ const line_vertex = ("#version 300 es\nin vec2 a_position;\nin vec4 a_color;\n\nout lowp vec4 v_color;\n\nuniform mat4 u_matrix;\n\nvoid main() {\n   // Set the vertex position using the ortho transform matrix\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n\n   // Passthrough the color\n   v_color = a_color;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/line-renderer/line-fragment.glsl
-/* harmony default export */ const line_fragment = ("#version 300 es\r\nprecision mediump float;\r\n\r\n// Color\r\nin lowp vec4 v_color;\r\n\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n  fragColor = v_color;\r\n}");
+/* harmony default export */ const line_fragment = ("#version 300 es\nprecision mediump float;\n\n// Color\nin lowp vec4 v_color;\n\nout vec4 fragColor;\n\nvoid main() {\n  fragColor = v_color;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/webgl-util.ts
 /**
  * Return the size of the GlType in bytes
@@ -8708,9 +8727,9 @@ class LineRenderer {
 }
 
 ;// CONCATENATED MODULE: ./Graphics/Context/point-renderer/point-vertex.glsl
-/* harmony default export */ const point_vertex = ("#version 300 es\r\nin vec2 a_position;\r\nin vec4 a_color;\r\nin float a_size;\r\nout lowp vec4 v_color;\r\nuniform mat4 u_matrix;\r\n\r\nvoid main() {\r\n  gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\r\n  gl_PointSize = a_size * 2.0;\r\n  v_color = a_color;\r\n}");
+/* harmony default export */ const point_vertex = ("#version 300 es\nin vec2 a_position;\nin vec4 a_color;\nin float a_size;\nout lowp vec4 v_color;\nuniform mat4 u_matrix;\n\nvoid main() {\n  gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n  gl_PointSize = a_size * 2.0;\n  v_color = a_color;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/point-renderer/point-fragment.glsl
-/* harmony default export */ const point_fragment = ("#version 300 es\r\n\r\nprecision mediump float;\r\nin lowp vec4 v_color;\r\n\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n  float r = 0.0, delta = 0.0, alpha = 1.0;\r\n  vec2 cxy = 2.0 * gl_PointCoord - 1.0;\r\n  r = dot(cxy, cxy);\r\n\r\n  delta = fwidth(r);\r\n  alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);\r\n  // \"premultiply\" the color by alpha\r\n  vec4 color = v_color;\r\n  color.a = color.a * alpha;\r\n  color.rgb = color.rgb * color.a;\r\n  fragColor = color;\r\n}");
+/* harmony default export */ const point_fragment = ("#version 300 es\n\nprecision mediump float;\nin lowp vec4 v_color;\n\nout vec4 fragColor;\n\nvoid main() {\n  float r = 0.0, delta = 0.0, alpha = 1.0;\n  vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n  r = dot(cxy, cxy);\n\n  delta = fwidth(r);\n  alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);\n  // \"premultiply\" the color by alpha\n  vec4 color = v_color;\n  color.a = color.a * alpha;\n  color.rgb = color.rgb * color.a;\n  fragColor = color;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/point-renderer/point-renderer.ts
 
 
@@ -8804,9 +8823,9 @@ class PointRenderer {
 }
 
 ;// CONCATENATED MODULE: ./Graphics/Context/screen-pass-painter/screen-vertex.glsl
-/* harmony default export */ const screen_vertex = ("#version 300 es\r\nin vec2 a_position;\r\n\r\nin vec2 a_texcoord;\r\nout vec2 v_texcoord;\r\n\r\nvoid main() {\r\n  gl_Position = vec4(a_position, 0.0, 1.0);\r\n\r\n  // Pass the texcoord to the fragment shader.\r\n  v_texcoord = a_texcoord;\r\n}");
+/* harmony default export */ const screen_vertex = ("#version 300 es\nin vec2 a_position;\n\nin vec2 a_texcoord;\nout vec2 v_texcoord;\n\nvoid main() {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n\n  // Pass the texcoord to the fragment shader.\n  v_texcoord = a_texcoord;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/screen-pass-painter/screen-fragment.glsl
-/* harmony default export */ const screen_fragment = ("#version 300 es\r\nprecision mediump float;\r\n\r\n// Passed in from the vertex shader.\r\nin vec2 v_texcoord;\r\n\r\n// The texture.\r\nuniform sampler2D u_texture;\r\n\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n   fragColor = texture(u_texture, v_texcoord);\r\n}");
+/* harmony default export */ const screen_fragment = ("#version 300 es\nprecision mediump float;\n\n// Passed in from the vertex shader.\nin vec2 v_texcoord;\n\n// The texture.\nuniform sampler2D u_texture;\n\nout vec4 fragColor;\n\nvoid main() {\n   fragColor = texture(u_texture, v_texcoord);\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/screen-pass-painter/screen-pass-painter.ts
 
 
@@ -8933,9 +8952,9 @@ class QuadIndexBuffer {
 }
 
 ;// CONCATENATED MODULE: ./Graphics/Context/image-renderer/image-renderer.frag.glsl
-/* harmony default export */ const image_renderer_frag = ("#version 300 es\r\nprecision mediump float;\r\n\r\n// UV coord\r\nin vec2 v_texcoord;\r\n\r\n// Texture index\r\nin lowp float v_textureIndex;\r\n\r\n// Textures in the current draw\r\nuniform sampler2D u_textures[%%count%%];\r\n\r\n// Opacity\r\nin float v_opacity;\r\n\r\nin vec4 v_tint;\r\n\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n   // In order to support the most efficient sprite batching, we have multiple\r\n   // textures loaded into the gpu (usually 8) this picker logic skips over textures\r\n   // that do not apply to a particular sprite.\r\n\r\n   vec4 color = vec4(1.0, 0, 0, 1.0);\r\n\r\n   // GLSL is templated out to pick the right texture and set the vec4 color\r\n   %%texture_picker%%\r\n\r\n   color.rgb = color.rgb * v_opacity;\r\n   color.a = color.a * v_opacity;\r\n   fragColor = color * v_tint;\r\n}");
+/* harmony default export */ const image_renderer_frag = ("#version 300 es\nprecision mediump float;\n\n// UV coord\nin vec2 v_texcoord;\n\n// Texture index\nin lowp float v_textureIndex;\n\n// Textures in the current draw\nuniform sampler2D u_textures[%%count%%];\n\n// Opacity\nin float v_opacity;\n\nin vec4 v_tint;\n\nout vec4 fragColor;\n\nvoid main() {\n   // In order to support the most efficient sprite batching, we have multiple\n   // textures loaded into the gpu (usually 8) this picker logic skips over textures\n   // that do not apply to a particular sprite.\n\n   vec4 color = vec4(1.0, 0, 0, 1.0);\n\n   // GLSL is templated out to pick the right texture and set the vec4 color\n   %%texture_picker%%\n\n   color.rgb = color.rgb * v_opacity;\n   color.a = color.a * v_opacity;\n   fragColor = color * v_tint;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/image-renderer/image-renderer.vert.glsl
-/* harmony default export */ const image_renderer_vert = ("#version 300 es\r\nin vec2 a_position;\r\n\r\n// Opacity \r\nin float a_opacity;\r\nout float v_opacity;\r\n\r\n// UV coordinate\r\nin vec2 a_texcoord;\r\nout vec2 v_texcoord;\r\n\r\n// Texture number\r\nin lowp float a_textureIndex;\r\nout lowp float v_textureIndex;\r\n\r\nin vec4 a_tint;\r\nout vec4 v_tint;\r\n\r\nuniform mat4 u_matrix;\r\n\r\nvoid main() {\r\n   // Set the vertex position using the ortho transform matrix\r\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\r\n\r\n   // Pass through the Opacity to the fragment shader\r\n   v_opacity = a_opacity;\r\n   // Pass through the UV coord to the fragment shader\r\n   v_texcoord = a_texcoord;\r\n   // Pass through the texture number to the fragment shader\r\n   v_textureIndex = a_textureIndex;\r\n   // Pass through the tint\r\n   v_tint = a_tint;\r\n}");
+/* harmony default export */ const image_renderer_vert = ("#version 300 es\nin vec2 a_position;\n\n// Opacity \nin float a_opacity;\nout float v_opacity;\n\n// UV coordinate\nin vec2 a_texcoord;\nout vec2 v_texcoord;\n\n// Texture number\nin lowp float a_textureIndex;\nout lowp float v_textureIndex;\n\nin vec4 a_tint;\nout vec4 v_tint;\n\nuniform mat4 u_matrix;\n\nvoid main() {\n   // Set the vertex position using the ortho transform matrix\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n\n   // Pass through the Opacity to the fragment shader\n   v_opacity = a_opacity;\n   // Pass through the UV coord to the fragment shader\n   v_texcoord = a_texcoord;\n   // Pass through the texture number to the fragment shader\n   v_textureIndex = a_textureIndex;\n   // Pass through the tint\n   v_tint = a_tint;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/image-renderer/image-renderer.ts
 
 
@@ -9184,9 +9203,9 @@ class ImageRenderer {
 }
 
 ;// CONCATENATED MODULE: ./Graphics/Context/rectangle-renderer/rectangle-renderer.frag.glsl
-/* harmony default export */ const rectangle_renderer_frag = ("#version 300 es\r\n\r\nprecision mediump float;\r\n\r\n// UV coord\r\nin vec2 v_uv;\r\n\r\nin vec2 v_size; // in pixels\r\n\r\n// Color coord to blend with image\r\nin lowp vec4 v_color;\r\n\r\n// Stroke color if used\r\nin lowp vec4 v_strokeColor;\r\n\r\n// Stroke thickness if used\r\nin lowp float v_strokeThickness; // in pixels\r\n\r\n// Opacity\r\nin float v_opacity;\r\n\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n    // modified from https://stackoverflow.com/questions/59197671/glsl-rounded-rectangle-with-variable-border\r\n    vec2 uv = v_uv;\r\n    vec2 fragCoord = uv * v_size;\r\n    float maxX = v_size.x - v_strokeThickness;\r\n    float minX = v_strokeThickness;\r\n    float maxY = v_size.y - v_strokeThickness;\r\n    float minY = v_strokeThickness;\r\n\r\n    if (fragCoord.x < maxX && fragCoord.x > minX &&\r\n        fragCoord.y < maxY && fragCoord.y > minY) {\r\n      fragColor = v_color;\r\n    } else {\r\n      fragColor = v_strokeColor;\r\n    }\r\n    fragColor.a *= v_opacity;\r\n    fragColor.rgb *= fragColor.a;\r\n\r\n    // vec2 v2CenteredPos     = abs(fragCoord - v_size.xy / 2.0);\r\n    // vec2 v2HalfShapeSizePx = v_size.xy/2.0 - v_strokeThickness/2.0;\r\n\r\n    // float fHalfBorderDist      = 0.0;\r\n    // float fHalfBorderThickness = 0.0;\r\n\r\n    // if (fragCoord.x > max(v_radius, v_strokeThickness) && \r\n    //     fragCoord.x < v_size.x - max(v_radius, v_strokeThickness))\r\n    // {\r\n    //     fHalfBorderDist      = v2CenteredPos.y - v2HalfShapeSizePx.y;\r\n    //     fHalfBorderThickness = v_strokeThickness / 2.0;\r\n    // }\r\n    // else if (fragCoord.y > max(v_radius, v_strokeThickness) && \r\n    //          fragCoord.y < v_size.y - max(v_radius, v_strokeThickness))\r\n    // {\r\n    //     fHalfBorderDist      = v2CenteredPos.x - v2HalfShapeSizePx.x;\r\n    //     fHalfBorderThickness = v_strokeThickness / 2.0;\r\n    // }\r\n    // else\r\n    // {\r\n    //     vec2 edgeVec = max(vec2(0.0), v_radius - vec2(\r\n    //         uv.x > 0.5 ? v_size.x - fragCoord.x : fragCoord.x,\r\n    //         uv.y > 0.5 ? v_size.y - fragCoord.y : fragCoord.y));\r\n        \r\n    //     float ellipse_ab    = v_radius-v_strokeThickness;\r\n    //     vec2 ellipse_isect = (v_strokeThickness > v_radius || v_strokeThickness > v_radius) ? vec2(0.0) :\r\n    //                             edgeVec.xy * ellipse_ab*ellipse_ab / length(ellipse_ab*edgeVec.yx); \r\n            \r\n    //     fHalfBorderThickness = (v_radius - length(ellipse_isect)) / 2.0;\r\n    //     fHalfBorderDist      = length(edgeVec) - (v_radius - fHalfBorderThickness);\r\n    // }\r\n\r\n    // vec4 v4FromColor = v_strokeColor;\r\n    // v4FromColor.rgb *= v4FromColor.a;\r\n    // vec4 v4ToColor   = vec4(0.0); // background color is transparent\r\n    // if (fHalfBorderDist < 0.0) {\r\n    //     v4ToColor = v_color;\r\n    //     v4ToColor.rgb *= v4ToColor.a;\r\n    // }\r\n\r\n    // float mixPct = abs(fHalfBorderDist) - fHalfBorderThickness;\r\n\r\n    // vec4 finalColor = mix(v4FromColor, v4ToColor, mixPct);\r\n    // gl_FragColor = finalColor;\r\n}");
+/* harmony default export */ const rectangle_renderer_frag = ("#version 300 es\n\nprecision mediump float;\n\n// UV coord\nin vec2 v_uv;\n\nin vec2 v_size; // in pixels\n\n// Color coord to blend with image\nin lowp vec4 v_color;\n\n// Stroke color if used\nin lowp vec4 v_strokeColor;\n\n// Stroke thickness if used\nin lowp float v_strokeThickness; // in pixels\n\n// Opacity\nin float v_opacity;\n\nout vec4 fragColor;\n\nvoid main() {\n    // modified from https://stackoverflow.com/questions/59197671/glsl-rounded-rectangle-with-variable-border\n    vec2 uv = v_uv;\n    vec2 fragCoord = uv * v_size;\n    float maxX = v_size.x - v_strokeThickness;\n    float minX = v_strokeThickness;\n    float maxY = v_size.y - v_strokeThickness;\n    float minY = v_strokeThickness;\n\n    if (fragCoord.x < maxX && fragCoord.x > minX &&\n        fragCoord.y < maxY && fragCoord.y > minY) {\n      fragColor = v_color;\n    } else {\n      fragColor = v_strokeColor;\n    }\n    fragColor.a *= v_opacity;\n    fragColor.rgb *= fragColor.a;\n\n    // vec2 v2CenteredPos     = abs(fragCoord - v_size.xy / 2.0);\n    // vec2 v2HalfShapeSizePx = v_size.xy/2.0 - v_strokeThickness/2.0;\n\n    // float fHalfBorderDist      = 0.0;\n    // float fHalfBorderThickness = 0.0;\n\n    // if (fragCoord.x > max(v_radius, v_strokeThickness) && \n    //     fragCoord.x < v_size.x - max(v_radius, v_strokeThickness))\n    // {\n    //     fHalfBorderDist      = v2CenteredPos.y - v2HalfShapeSizePx.y;\n    //     fHalfBorderThickness = v_strokeThickness / 2.0;\n    // }\n    // else if (fragCoord.y > max(v_radius, v_strokeThickness) && \n    //          fragCoord.y < v_size.y - max(v_radius, v_strokeThickness))\n    // {\n    //     fHalfBorderDist      = v2CenteredPos.x - v2HalfShapeSizePx.x;\n    //     fHalfBorderThickness = v_strokeThickness / 2.0;\n    // }\n    // else\n    // {\n    //     vec2 edgeVec = max(vec2(0.0), v_radius - vec2(\n    //         uv.x > 0.5 ? v_size.x - fragCoord.x : fragCoord.x,\n    //         uv.y > 0.5 ? v_size.y - fragCoord.y : fragCoord.y));\n        \n    //     float ellipse_ab    = v_radius-v_strokeThickness;\n    //     vec2 ellipse_isect = (v_strokeThickness > v_radius || v_strokeThickness > v_radius) ? vec2(0.0) :\n    //                             edgeVec.xy * ellipse_ab*ellipse_ab / length(ellipse_ab*edgeVec.yx); \n            \n    //     fHalfBorderThickness = (v_radius - length(ellipse_isect)) / 2.0;\n    //     fHalfBorderDist      = length(edgeVec) - (v_radius - fHalfBorderThickness);\n    // }\n\n    // vec4 v4FromColor = v_strokeColor;\n    // v4FromColor.rgb *= v4FromColor.a;\n    // vec4 v4ToColor   = vec4(0.0); // background color is transparent\n    // if (fHalfBorderDist < 0.0) {\n    //     v4ToColor = v_color;\n    //     v4ToColor.rgb *= v4ToColor.a;\n    // }\n\n    // float mixPct = abs(fHalfBorderDist) - fHalfBorderThickness;\n\n    // vec4 finalColor = mix(v4FromColor, v4ToColor, mixPct);\n    // gl_FragColor = finalColor;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/rectangle-renderer/rectangle-renderer.vert.glsl
-/* harmony default export */ const rectangle_renderer_vert = ("#version 300 es\r\nin vec2 a_position;\r\n\r\n// UV coordinate\r\nin vec2 a_uv;\r\nout vec2 v_uv;\r\n\r\nin vec2 a_size;\r\nout vec2 v_size;\r\n\r\n// Opacity \r\nin float a_opacity;\r\nout float v_opacity;\r\n\r\nin vec4 a_color;\r\nout vec4 v_color;\r\n\r\nin vec4 a_strokeColor;\r\nout vec4 v_strokeColor;\r\n\r\nin float a_strokeThickness;\r\nout float v_strokeThickness;\r\n\r\nuniform mat4 u_matrix;\r\n\r\n\r\nvoid main() {\r\n   // Set the vertex position using the ortho transform matrix\r\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\r\n\r\n   // Pass through UV coords\r\n   v_uv = a_uv;\r\n   // Pass through size\r\n   v_size = a_size;\r\n   // Pass through the Opacity to the fragment shader\r\n   v_opacity = a_opacity;\r\n   // Pass through the color to the fragment shader\r\n   v_color = a_color;\r\n   // Pass through the stroke color to the fragment shader\r\n   v_strokeColor = a_strokeColor;\r\n   // Pass through the stroke thickenss to the fragment shader\r\n   v_strokeThickness = a_strokeThickness;\r\n}");
+/* harmony default export */ const rectangle_renderer_vert = ("#version 300 es\nin vec2 a_position;\n\n// UV coordinate\nin vec2 a_uv;\nout vec2 v_uv;\n\nin vec2 a_size;\nout vec2 v_size;\n\n// Opacity \nin float a_opacity;\nout float v_opacity;\n\nin vec4 a_color;\nout vec4 v_color;\n\nin vec4 a_strokeColor;\nout vec4 v_strokeColor;\n\nin float a_strokeThickness;\nout float v_strokeThickness;\n\nuniform mat4 u_matrix;\n\n\nvoid main() {\n   // Set the vertex position using the ortho transform matrix\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n\n   // Pass through UV coords\n   v_uv = a_uv;\n   // Pass through size\n   v_size = a_size;\n   // Pass through the Opacity to the fragment shader\n   v_opacity = a_opacity;\n   // Pass through the color to the fragment shader\n   v_color = a_color;\n   // Pass through the stroke color to the fragment shader\n   v_strokeColor = a_strokeColor;\n   // Pass through the stroke thickenss to the fragment shader\n   v_strokeThickness = a_strokeThickness;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/rectangle-renderer/rectangle-renderer.ts
 
 
@@ -9494,9 +9513,9 @@ class RectangleRenderer {
 }
 
 ;// CONCATENATED MODULE: ./Graphics/Context/circle-renderer/circle-renderer.frag.glsl
-/* harmony default export */ const circle_renderer_frag = ("#version 300 es\r\nprecision highp float;\r\n\r\n// UV coord\r\nin vec2 v_uv;\r\n\r\n// Color coord to blend with image\r\nin lowp vec4 v_color;\r\n\r\n// Stroke color if used\r\nin lowp vec4 v_strokeColor;\r\n\r\n// Stroke thickness if used\r\nin lowp float v_strokeThickness;\r\n\r\n// Opacity\r\nin float v_opacity;\r\n\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n  // make (0, 0) the center the uv \r\n  vec2 uv = v_uv * 2.0 - 1.0;\r\n\r\n  vec4 color = v_color;\r\n  vec4 strokeColor = v_strokeColor;\r\n\r\n  // circle border is at radius 1.0 \r\n  // dist is > 0 when inside the circle \r\n  float d = length(uv);\r\n  float dist = 1.0 - length(uv);\r\n\r\n  // Fade based on fwidth\r\n  float fade = fwidth(dot(uv, uv));\r\n\r\n  // if dist is greater than 0 step to 1;\r\n  // when we cross this 0 threshold add a smooth fade\r\n  float fill = smoothstep(-fade/2.0, fade/2.0, dist);\r\n\r\n  // if dist is greater than the stroke thickness step to 1\r\n  float stroke = 1.0 - smoothstep(v_strokeThickness, v_strokeThickness + fade, dist);\r\n\r\n  strokeColor.a *= fill * stroke;\r\n  strokeColor.rgb *= strokeColor.a;\r\n\r\n  color.a *= fill * (1.0 - stroke);\r\n  color.rgb *= color.a;\r\n\r\n  vec4 finalColor = mix(vec4(0.0), (color + strokeColor), fill);\r\n  finalColor.rgb = finalColor.rgb * v_opacity;\r\n  finalColor.a = finalColor.a * v_opacity;\r\n  fragColor = finalColor;\r\n}");
+/* harmony default export */ const circle_renderer_frag = ("#version 300 es\nprecision highp float;\n\n// UV coord\nin vec2 v_uv;\n\n// Color coord to blend with image\nin lowp vec4 v_color;\n\n// Stroke color if used\nin lowp vec4 v_strokeColor;\n\n// Stroke thickness if used\nin lowp float v_strokeThickness;\n\n// Opacity\nin float v_opacity;\n\nout vec4 fragColor;\n\nvoid main() {\n  // make (0, 0) the center the uv \n  vec2 uv = v_uv * 2.0 - 1.0;\n\n  vec4 color = v_color;\n  vec4 strokeColor = v_strokeColor;\n\n  // circle border is at radius 1.0 \n  // dist is > 0 when inside the circle \n  float d = length(uv);\n  float dist = 1.0 - length(uv);\n\n  // Fade based on fwidth\n  float fade = fwidth(dot(uv, uv));\n\n  // if dist is greater than 0 step to 1;\n  // when we cross this 0 threshold add a smooth fade\n  float fill = smoothstep(-fade/2.0, fade/2.0, dist);\n\n  // if dist is greater than the stroke thickness step to 1\n  float stroke = 1.0 - smoothstep(v_strokeThickness, v_strokeThickness + fade, dist);\n\n  strokeColor.a *= fill * stroke;\n  strokeColor.rgb *= strokeColor.a;\n\n  color.a *= fill * (1.0 - stroke);\n  color.rgb *= color.a;\n\n  vec4 finalColor = mix(vec4(0.0), (color + strokeColor), fill);\n  finalColor.rgb = finalColor.rgb * v_opacity;\n  finalColor.a = finalColor.a * v_opacity;\n  fragColor = finalColor;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/circle-renderer/circle-renderer.vert.glsl
-/* harmony default export */ const circle_renderer_vert = ("#version 300 es\r\nin vec2 a_position;\r\n\r\n// UV coordinate\r\nin vec2 a_uv;\r\nout vec2 v_uv;\r\n\r\n// Opacity \r\nin float a_opacity;\r\nout float v_opacity;\r\n\r\nin vec4 a_color;\r\nout vec4 v_color;\r\n\r\nin vec4 a_strokeColor;\r\nout vec4 v_strokeColor;\r\n\r\nin float a_strokeThickness;\r\nout float v_strokeThickness;\r\n\r\nuniform mat4 u_matrix;\r\n\r\n\r\nvoid main() {\r\n   // Set the vertex position using the ortho transform matrix\r\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\r\n\r\n   // Pass through UV coords\r\n   v_uv = a_uv;\r\n   // Pass through the Opacity to the fragment shader\r\n   v_opacity = a_opacity;\r\n   // Pass through the color to the fragment shader\r\n   v_color = a_color;\r\n   // Pass through the stroke color to the fragment shader\r\n   v_strokeColor = a_strokeColor;\r\n   // Pass through the stroke thickenss to the fragment shader\r\n   v_strokeThickness = a_strokeThickness;\r\n}");
+/* harmony default export */ const circle_renderer_vert = ("#version 300 es\nin vec2 a_position;\n\n// UV coordinate\nin vec2 a_uv;\nout vec2 v_uv;\n\n// Opacity \nin float a_opacity;\nout float v_opacity;\n\nin vec4 a_color;\nout vec4 v_color;\n\nin vec4 a_strokeColor;\nout vec4 v_strokeColor;\n\nin float a_strokeThickness;\nout float v_strokeThickness;\n\nuniform mat4 u_matrix;\n\n\nvoid main() {\n   // Set the vertex position using the ortho transform matrix\n   gl_Position = u_matrix * vec4(a_position, 0.0, 1.0);\n\n   // Pass through UV coords\n   v_uv = a_uv;\n   // Pass through the Opacity to the fragment shader\n   v_opacity = a_opacity;\n   // Pass through the color to the fragment shader\n   v_color = a_color;\n   // Pass through the stroke color to the fragment shader\n   v_strokeColor = a_strokeColor;\n   // Pass through the stroke thickenss to the fragment shader\n   v_strokeThickness = a_strokeThickness;\n}");
 ;// CONCATENATED MODULE: ./Graphics/Context/circle-renderer/circle-renderer.ts
 
 
@@ -9766,22 +9785,26 @@ class DrawCall {
 
 ;// CONCATENATED MODULE: ./Graphics/Context/material.ts
 
-const defaultVertexSource = `#version 300 es
-in vec2 a_position;
-
-in vec2 a_uv;
-out vec2 v_uv;
-
-uniform mat4 u_matrix;
-uniform mat4 u_transform;
-
-void main() {
-  // Set the vertex position using the ortho & transform matrix
-  gl_Position = u_matrix * u_transform * vec4(a_position, 0.0, 1.0);
-
-  // Pass through the UV coord to the fragment shader
-  v_uv = a_uv;
-}
+const defaultVertexSource = `#version 300 es
+in vec2 a_position;
+
+in vec2 a_uv;
+out vec2 v_uv;
+
+in vec2 a_screenuv;
+out vec2 v_screenuv;
+
+uniform mat4 u_matrix;
+uniform mat4 u_transform;
+
+void main() {
+  // Set the vertex position using the ortho & transform matrix
+  gl_Position = u_matrix * u_transform * vec4(a_position, 0.0, 1.0);
+
+  // Pass through the UV coord to the fragment shader
+  v_uv = a_uv;
+  v_screenuv = a_screenuv;
+}
 `;
 class Material {
     constructor(options) {
@@ -9808,6 +9831,15 @@ class Material {
         var _a;
         return (_a = this._name) !== null && _a !== void 0 ? _a : 'anonymous material';
     }
+    get isUsingScreenTexture() {
+        return this._fragmentSource.includes('u_screen_texture');
+    }
+    update(callback) {
+        if (this._shader) {
+            this._shader.use();
+            callback(this._shader);
+        }
+    }
     getShader() {
         return this._shader;
     }
@@ -9843,7 +9875,7 @@ class MaterialRenderer {
         // Setup memory layout
         this._buffer = new VertexBuffer({
             gl,
-            size: 4 * 4, // 4 components * 4 verts
+            size: 6 * 4, // 6 components * 4 verts
             type: 'dynamic'
         });
         // Setup a vertex layout/buffer to the material
@@ -9852,7 +9884,8 @@ class MaterialRenderer {
             vertexBuffer: this._buffer,
             attributes: [
                 ['a_position', 2],
-                ['a_uv', 2]
+                ['a_uv', 2],
+                ['a_screenuv', 2]
             ]
         });
         // Setup index buffer
@@ -9898,26 +9931,40 @@ class MaterialRenderer {
         const uvy0 = (sy) / imageHeight;
         const uvx1 = (sx + sw - 0.01) / imageWidth;
         const uvy1 = (sy + sh - 0.01) / imageHeight;
+        const topLeftScreen = transform.getPosition();
+        const bottomRightScreen = topLeftScreen.add(bottomRight);
+        const screenUVX0 = topLeftScreen.x / this._context.width;
+        const screenUVY0 = topLeftScreen.y / this._context.height;
+        const screenUVX1 = bottomRightScreen.x / this._context.width;
+        const screenUVY1 = bottomRightScreen.y / this._context.height;
         // (0, 0) - 0
         vertexBuffer[vertexIndex++] = topLeft.x;
         vertexBuffer[vertexIndex++] = topLeft.y;
         vertexBuffer[vertexIndex++] = uvx0;
         vertexBuffer[vertexIndex++] = uvy0;
+        vertexBuffer[vertexIndex++] = screenUVX0;
+        vertexBuffer[vertexIndex++] = screenUVY0;
         // (0, 1) - 1
         vertexBuffer[vertexIndex++] = bottomLeft.x;
         vertexBuffer[vertexIndex++] = bottomLeft.y;
         vertexBuffer[vertexIndex++] = uvx0;
         vertexBuffer[vertexIndex++] = uvy1;
+        vertexBuffer[vertexIndex++] = screenUVX0;
+        vertexBuffer[vertexIndex++] = screenUVY1;
         // (1, 0) - 2
         vertexBuffer[vertexIndex++] = topRight.x;
         vertexBuffer[vertexIndex++] = topRight.y;
         vertexBuffer[vertexIndex++] = uvx1;
         vertexBuffer[vertexIndex++] = uvy0;
+        vertexBuffer[vertexIndex++] = screenUVX1;
+        vertexBuffer[vertexIndex++] = screenUVY0;
         // (1, 1) - 3
         vertexBuffer[vertexIndex++] = bottomRight.x;
         vertexBuffer[vertexIndex++] = bottomRight.y;
         vertexBuffer[vertexIndex++] = uvx1;
         vertexBuffer[vertexIndex++] = uvy1;
+        vertexBuffer[vertexIndex++] = screenUVX1;
+        vertexBuffer[vertexIndex++] = screenUVY1;
         // This creates and uploads the texture if not already done
         const texture = this._addImageAsTexture(image);
         // apply material
@@ -9925,6 +9972,8 @@ class MaterialRenderer {
         this._layout.shader = shader;
         // apply layout and geometry
         this._layout.use(true);
+        // apply time in ms since the page (performance.now())
+        shader.trySetUniformFloat('u_time_ms', performance.now());
         // apply opacity
         shader.trySetUniformFloat('u_opacity', opacity);
         // apply resolution
@@ -9941,6 +9990,10 @@ class MaterialRenderer {
         gl.activeTexture(gl.TEXTURE0 + 0);
         gl.bindTexture(gl.TEXTURE_2D, texture);
         shader.trySetUniformInt('u_graphic', 0);
+        // bind the screen texture
+        gl.activeTexture(gl.TEXTURE0 + 1);
+        gl.bindTexture(gl.TEXTURE_2D, this._context.materialScreenTexture);
+        shader.trySetUniformInt('u_screen_texture', 1);
         // bind quad index buffer
         this._quads.bind();
         // Draw a single quad
@@ -10143,6 +10196,14 @@ class ExcaliburGraphicsContextWebGL {
         this.register(new CircleRenderer());
         this.register(new PointRenderer());
         this.register(new LineRenderer());
+        this.materialScreenTexture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.materialScreenTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+        gl.bindTexture(gl.TEXTURE_2D, null);
         this._screenRenderer = new ScreenPassPainter(gl);
         this._renderTarget = new RenderTarget({
             gl,
@@ -10401,6 +10462,13 @@ class ExcaliburGraphicsContextWebGL {
                         currentRendererName = this._drawCalls[i].renderer;
                         currentRenderer = this._renderers.get(currentRendererName);
                     }
+                    // ! hack to grab screen texture before materials run because they might want it
+                    if (currentRenderer instanceof MaterialRenderer && this.material.isUsingScreenTexture) {
+                        const gl = this.__gl;
+                        gl.bindTexture(gl.TEXTURE_2D, this.materialScreenTexture);
+                        gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, this.width, this.height, 0);
+                        this._renderTarget.use();
+                    }
                     // If we are still using the same renderer we can add to the current batch
                     currentRenderer.draw(...this._drawCalls[i].args);
                 }
@@ -11666,6 +11734,7 @@ var Loader_0 = __webpack_require__(1388);
 
 
 
+
 /**
  * A Raster is a Graphic that needs to be first painted to a HTMLCanvasElement before it can be drawn to the
  * [[ExcaliburGraphicsContext]]. This is useful for generating custom images using the 2D canvas api.
@@ -11675,7 +11744,7 @@ var Loader_0 = __webpack_require__(1388);
 class Raster extends Graphic {
     constructor(options) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        super(options);
+        super(omit(options, ['width', 'height'])); // rasters do some special sauce with width/height
         this.filtering = null;
         this.lineCap = 'butt';
         this.quality = 1;
@@ -14225,9 +14294,9 @@ class CollisionGroup {
         return CollisionGroupManager.create(combinedName, combinedMask);
     }
     toString() {
-        return `
-category: ${this.category.toString(2).padStart(32, '0')}
-mask:     ${(this.mask >>> 0).toString(2).padStart(32, '0')}
+        return `
+category: ${this.category.toString(2).padStart(32, '0')}
+mask:     ${(this.mask >>> 0).toString(2).padStart(32, '0')}
     `;
     }
 }
@@ -20810,7 +20879,7 @@ class FontCache {
         const currentHashCodes = new Set();
         for (const [textInstance, time] of FontCache._TEXT_USAGE.entries()) {
             // if bitmap hasn't been used in 100 ms clear it
-            if (time + 100 < performance.now()) {
+            if (time + FontCache.FONT_TIMEOUT < performance.now()) {
                 FontCache._LOGGER.debug(`Text cache entry timed out ${textInstance.text}`);
                 deferred.push(textInstance);
                 textInstance.dispose();
@@ -20854,6 +20923,7 @@ class FontCache {
         FontCache._MEASURE_CACHE.clear();
     }
 }
+FontCache.FONT_TIMEOUT = 500;
 FontCache._LOGGER = Logger.getInstance();
 FontCache._TEXT_USAGE = new Map();
 FontCache._TEXT_CACHE = new Map();
@@ -22230,7 +22300,6 @@ class QuadTree {
 
 
 
-
 const TileMapEvents = {
     PreUpdate: 'preupdate',
     PostUpdate: 'postupdate',
@@ -22348,7 +22417,7 @@ class TileMap extends Entity {
         this.addComponent(new GraphicsComponent({
             onPostDraw: (ctx, delta) => this.draw(ctx, delta)
         }));
-        this.addComponent(new DebugGraphicsComponent((ctx) => this.debug(ctx), false));
+        this.addComponent(new DebugGraphicsComponent((ctx, debugFlags) => this.debug(ctx, debugFlags), false));
         this.addComponent(new ColliderComponent());
         this._graphics = this.get(GraphicsComponent);
         this._transform = this.get(TransformComponent);
@@ -22427,14 +22496,53 @@ class TileMap extends Entity {
         const colliders = [];
         this._composite = this._collider.useCompositeCollider([]);
         let current;
-        // Bad square tesselation algo
+        /**
+         * Returns wether or not the 2 boxes share an edge and are the same height
+         * @param prev
+         * @param next
+         * @returns true if they share and edge, false if not
+         */
+        const shareEdges = (prev, next) => {
+            if (prev && next) {
+                // same top/bottom
+                return prev.top === next.top &&
+                    prev.bottom === next.bottom &&
+                    // Shared right/left edge
+                    prev.right === next.left;
+            }
+            return false;
+        };
+        /**
+         * Potentially merges the current collider into a list of previous ones, mutating the list
+         * If checkAndCombine returns true, the collider was successfully merged and should be thrown away
+         * @param current current collider to test
+         * @param colliders List of colliders to consider merging with
+         * @param maxLookBack The amount of colliders to look back for combindation
+         * @returns false when no combination found, true when successfully combined
+         */
+        const checkAndCombine = (current, colliders, maxLookBack = 10) => {
+            if (!current) {
+                return false;
+            }
+            // walk backwards through the list of colliders and combine with the first that shares an edge
+            for (let i = colliders.length - 1; i >= 0; i--) {
+                if (maxLookBack-- < 0) {
+                    // blunt the O(n^2) algorithm a bit
+                    return false;
+                }
+                const prev = colliders[i];
+                if (shareEdges(prev, current)) {
+                    colliders[i] = prev.combine(current);
+                    return true;
+                }
+            }
+            return false;
+        };
+        // ? configurable bias perhaps, horizontal strips vs. vertical ones
+        // Bad tile collider packing algorithm
         for (let i = 0; i < this.columns; i++) {
             // Scan column for colliders
             for (let j = 0; j < this.rows; j++) {
-                // Columns start with a new collider
-                if (j === 0) {
-                    current = null;
-                }
                 const tile = this.tiles[i + j * this.columns];
                 // Current tile in column is solid build up current collider
                 if (tile.solid) {
@@ -22448,7 +22556,7 @@ class TileMap extends Entity {
                             this._composite.addCollider(collider);
                         }
                         //we push any current collider before nulling the current run
-                        if (current) {
+                        if (current && !checkAndCombine(current, colliders)) {
                             colliders.push(current);
                         }
                         current = null;
@@ -22467,24 +22575,20 @@ class TileMap extends Entity {
                 }
                 else {
                     // Not solid skip and cut off the current collider
-                    if (current) {
+                    // End of run check and combine
+                    if (current && !checkAndCombine(current, colliders)) {
                         colliders.push(current);
                     }
                     current = null;
                 }
             }
             // After a column is complete check to see if it can be merged into the last one
-            if (current) {
-                // if previous is the same combine it
-                const prev = colliders[colliders.length - 1];
-                if (prev && prev.top === current.top && prev.bottom === current.bottom) {
-                    colliders[colliders.length - 1] = prev.combine(current);
-                }
-                else {
-                    // else new collider
-                    colliders.push(current);
-                }
+            // Eno of run check and combine
+            if (current && !checkAndCombine(current, colliders)) {
+                // else new collider if no combination
+                colliders.push(current);
             }
+            current = null;
         }
         for (const c of colliders) {
             const collider = Shape.Box(c.width, c.height, Vector.Zero, vec(c.left - this.pos.x, c.top - this.pos.y));
@@ -22590,37 +22694,53 @@ class TileMap extends Entity {
         }
         this.emit('postdraw', new PostDrawEvent(ctx, delta, this));
     }
-    debug(gfx) {
+    debug(gfx, debugFlags) {
+        const { showAll, showGrid, gridColor, gridWidth, showSolidBounds: showColliderBounds, solidBoundsColor: colliderBoundsColor, showColliderGeometry, colliderGeometryColor, showQuadTree } = debugFlags.tilemap;
         const width = this.tileWidth * this.columns * this.scale.x;
         const height = this.tileHeight * this.rows * this.scale.y;
         const pos = this.pos;
-        for (let r = 0; r < this.rows + 1; r++) {
-            const yOffset = vec(0, r * this.tileHeight * this.scale.y);
-            gfx.drawLine(pos.add(yOffset), pos.add(vec(width, yOffset.y)), Color.Red, 2);
-        }
-        for (let c = 0; c < this.columns + 1; c++) {
-            const xOffset = vec(c * this.tileWidth * this.scale.x, 0);
-            gfx.drawLine(pos.add(xOffset), pos.add(vec(xOffset.x, height)), Color.Red, 2);
+        if (showGrid || showAll) {
+            for (let r = 0; r < this.rows + 1; r++) {
+                const yOffset = vec(0, r * this.tileHeight * this.scale.y);
+                gfx.drawLine(pos.add(yOffset), pos.add(vec(width, yOffset.y)), gridColor, gridWidth);
+            }
+            for (let c = 0; c < this.columns + 1; c++) {
+                const xOffset = vec(c * this.tileWidth * this.scale.x, 0);
+                gfx.drawLine(pos.add(xOffset), pos.add(vec(xOffset.x, height)), gridColor, gridWidth);
+            }
         }
-        const colliders = this._composite.getColliders();
-        gfx.save();
-        gfx.translate(this.pos.x, this.pos.y);
-        gfx.scale(this.scale.x, this.scale.y);
-        for (const collider of colliders) {
-            const grayish = Color.Gray;
-            grayish.a = 0.5;
-            const bounds = collider.localBounds;
-            const pos = collider.worldPos.sub(this.pos);
-            gfx.drawRectangle(pos, bounds.width, bounds.height, grayish);
+        if (showAll || showColliderBounds || showColliderGeometry) {
+            const colliders = this._composite.getColliders();
+            gfx.save();
+            gfx.translate(this.pos.x, this.pos.y);
+            gfx.scale(this.scale.x, this.scale.y);
+            for (const collider of colliders) {
+                const bounds = collider.localBounds;
+                const pos = collider.worldPos.sub(this.pos);
+                if (showColliderBounds) {
+                    gfx.drawRectangle(pos, bounds.width, bounds.height, colliderBoundsColor);
+                }
+            }
+            gfx.restore();
+            if (showColliderGeometry) {
+                for (const collider of colliders) {
+                    collider.debug(gfx, colliderGeometryColor);
+                }
+            }
         }
-        gfx.restore();
-        gfx.save();
-        gfx.z = 999;
-        this._quadTree.debug(gfx);
-        for (let i = 0; i < this.tiles.length; i++) {
-            this.tiles[i].bounds.draw(gfx);
+        if (showAll || showQuadTree || showColliderBounds) {
+            gfx.save();
+            gfx.z = 999;
+            if (showQuadTree) {
+                this._quadTree.debug(gfx);
+            }
+            if (showColliderBounds) {
+                for (let i = 0; i < this.tiles.length; i++) {
+                    this.tiles[i].bounds.draw(gfx);
+                }
+            }
+            gfx.restore();
         }
-        gfx.restore();
     }
 }
 /**
@@ -26046,7 +26166,7 @@ class DebugSystem extends System {
                 if (!debugDraw.useTransform) {
                     this._graphicsContext.restore();
                 }
-                debugDraw.draw(this._graphicsContext);
+                debugDraw.draw(this._graphicsContext, this._engine.debug);
                 if (!debugDraw.useTransform) {
                     this._graphicsContext.save();
                     this._applyTransform(entity);
@@ -27047,7 +27167,7 @@ var ColorBlindnessMode;
 })(ColorBlindnessMode || (ColorBlindnessMode = {}));
 
 ;// CONCATENATED MODULE: ./Graphics/PostProcessor/color-blind-fragment.glsl
-/* harmony default export */ const color_blind_fragment = ("#version 300 es\r\nprecision mediump float;\r\n// our texture\r\nuniform sampler2D u_image;\r\n// the texCoords passed in from the vertex shader.\r\nin vec2 v_texcoord;\r\n\r\n// color blind type\r\nuniform int u_type;\r\n\r\n// simulation?\r\nuniform bool u_simulate;\r\n\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n  vec4 o =  texture(u_image, v_texcoord);\r\n  // RGB to LMS matrix conversion\r\n  float L = (17.8824 * o.r) + (43.5161 * o.g) + (4.11935 * o.b);\r\n  float M = (3.45565 * o.r) + (27.1554 * o.g) + (3.86714 * o.b);\r\n  float S = (0.0299566 * o.r) + (0.184309 * o.g) + (1.46709 * o.b);\r\n  // Simulate color blindness\r\n  float l;\r\n  float m;\r\n  float s;\r\n  //MODE CODE//\r\n  if (u_type == 0) {\r\n    // Protanope\r\n    l = 0.0 * L + 2.02344 * M + -2.52581 * S;\r\n    m = 0.0 * L + 1.0 * M + 0.0 * S;\r\n    s = 0.0 * L + 0.0 * M + 1.0 * S;;\r\n  } else if (u_type == 1) {\r\n    // Deuteranope\r\n    l = 1.0 * L + 0.0 * M + 0.0 * S;\r\n    m = 0.494207 * L + 0.0 * M + 1.24827 * S;\r\n    s = 0.0 * L + 0.0 * M + 1.0 * S;\r\n  } else if (u_type == 2) {\r\n    // Tritanope\r\n    l = 1.0 * L + 0.0 * M + 0.0 * S;\r\n    m = 0.0 * L + 1.0 * M + 0.0 * S;\r\n    s = -0.395913 * L + 0.801109 * M + 0.0 * S;\r\n  }\r\n\r\n  // LMS to RGB matrix conversion\r\n  vec4 error; // simulate the colors\r\n  error.r = (0.0809444479 * l) + (-0.130504409 * m) + (0.116721066 * s);\r\n  error.g = (-0.0102485335 * l) + (0.0540193266 * m) + (-0.113614708 * s);\r\n  error.b = (-0.000365296938 * l) + (-0.00412161469 * m) + (0.693511405 * s);\r\n  error.a = 1.0;\r\n  vec4 diff = o - error;\r\n  vec4 correction; // correct the colors\r\n  correction.r = 0.0;\r\n  correction.g =  (diff.r * 0.7) + (diff.g * 1.0);\r\n  correction.b =  (diff.r * 0.7) + (diff.b * 1.0);\r\n  correction = o + correction;\r\n  correction.a = o.a;\r\n  //SIMULATE//\r\n\r\n  // sim \r\n  if (u_simulate) {\r\n    fragColor = error.rgba;\r\n  } else {\r\n    fragColor = correction.rgba;\r\n  }\r\n}");
+/* harmony default export */ const color_blind_fragment = ("#version 300 es\nprecision mediump float;\n// our texture\nuniform sampler2D u_image;\n// the texCoords passed in from the vertex shader.\nin vec2 v_texcoord;\n\n// color blind type\nuniform int u_type;\n\n// simulation?\nuniform bool u_simulate;\n\nout vec4 fragColor;\n\nvoid main() {\n  vec4 o =  texture(u_image, v_texcoord);\n  // RGB to LMS matrix conversion\n  float L = (17.8824 * o.r) + (43.5161 * o.g) + (4.11935 * o.b);\n  float M = (3.45565 * o.r) + (27.1554 * o.g) + (3.86714 * o.b);\n  float S = (0.0299566 * o.r) + (0.184309 * o.g) + (1.46709 * o.b);\n  // Simulate color blindness\n  float l;\n  float m;\n  float s;\n  //MODE CODE//\n  if (u_type == 0) {\n    // Protanope\n    l = 0.0 * L + 2.02344 * M + -2.52581 * S;\n    m = 0.0 * L + 1.0 * M + 0.0 * S;\n    s = 0.0 * L + 0.0 * M + 1.0 * S;;\n  } else if (u_type == 1) {\n    // Deuteranope\n    l = 1.0 * L + 0.0 * M + 0.0 * S;\n    m = 0.494207 * L + 0.0 * M + 1.24827 * S;\n    s = 0.0 * L + 0.0 * M + 1.0 * S;\n  } else if (u_type == 2) {\n    // Tritanope\n    l = 1.0 * L + 0.0 * M + 0.0 * S;\n    m = 0.0 * L + 1.0 * M + 0.0 * S;\n    s = -0.395913 * L + 0.801109 * M + 0.0 * S;\n  }\n\n  // LMS to RGB matrix conversion\n  vec4 error; // simulate the colors\n  error.r = (0.0809444479 * l) + (-0.130504409 * m) + (0.116721066 * s);\n  error.g = (-0.0102485335 * l) + (0.0540193266 * m) + (-0.113614708 * s);\n  error.b = (-0.000365296938 * l) + (-0.00412161469 * m) + (0.693511405 * s);\n  error.a = 1.0;\n  vec4 diff = o - error;\n  vec4 correction; // correct the colors\n  correction.r = 0.0;\n  correction.g =  (diff.r * 0.7) + (diff.g * 1.0);\n  correction.b =  (diff.r * 0.7) + (diff.b * 1.0);\n  correction = o + correction;\n  correction.a = o.a;\n  //SIMULATE//\n\n  // sim \n  if (u_simulate) {\n    fragColor = error.rgba;\n  } else {\n    fragColor = correction.rgba;\n  }\n}");
 ;// CONCATENATED MODULE: ./Graphics/PostProcessor/ScreenShader.ts
 
 
@@ -27062,15 +27182,15 @@ class ScreenShader {
     constructor(gl, fragmentSource) {
         this._shader = new Shader({
             gl,
-            vertexSource: `#version 300 es
-      in vec2 a_position;
-      in vec2 a_texcoord;
-      out vec2 v_texcoord;
-
-      void main() {
-        gl_Position = vec4(a_position, 0.0, 1.0);
-        // Pass the texcoord to the fragment shader.
-        v_texcoord = a_texcoord;
+            vertexSource: `#version 300 es
+      in vec2 a_position;
+      in vec2 a_texcoord;
+      out vec2 v_texcoord;
+
+      void main() {
+        gl_Position = vec4(a_position, 0.0, 1.0);
+        // Pass the texcoord to the fragment shader.
+        v_texcoord = a_texcoord;
       }`,
             fragmentSource: fragmentSource
         });
@@ -27326,6 +27446,17 @@ class Debug {
             focusColor: Color.Red,
             showZoom: false
         };
+        this.tilemap = {
+            showAll: false,
+            showGrid: false,
+            gridColor: Color.Red,
+            gridWidth: .5,
+            showSolidBounds: false,
+            solidBoundsColor: Color.fromHex('#8080807F'), // grayish
+            showColliderGeometry: true,
+            colliderGeometryColor: Color.Green,
+            showQuadTree: false
+        };
         this._engine = engine;
         this.colorBlindMode = new ColorBlindFlags(this._engine);
     }
@@ -28965,9 +29096,9 @@ class Engine {
             // eslint-disable-next-line no-console
             console.log(`%cPowered by Excalibur.js (v${EX_VERSION})`, 'background: #176BAA; color: white; border-radius: 5px; padding: 15px; font-size: 1.5em; line-height: 80px;');
             // eslint-disable-next-line no-console
-            console.log('\n\
-      /| ________________\n\
-O|===|* >________________>\n\
+            console.log('\n\
+      /| ________________\n\
+O|===|* >________________>\n\
       \\|');
             // eslint-disable-next-line no-console
             console.log('Visit', 'http://excaliburjs.com', 'for more information');
@@ -31107,7 +31238,7 @@ class Semaphore {
  * The current Excalibur version string
  * @description `process.env.__EX_VERSION` gets replaced by Webpack on build
  */
-const EX_VERSION = "0.28.3";
+const EX_VERSION = "0.29.0-alpha.2+5c28d4e";
 
 polyfill();
 // This file is used as the bundle entry point and exports everything