Merge branch 'develop'

CHANGELOG.MD

@@ -1,5 +1,23 @@
 # Change Log
 
+## v3.64.0 - Nov 10, 2023
+
+* Fixes making thumbnails of single-layer prefabs.
+* Allows merging Import and Open buttons in the Asset Pack Entry section.
+* [#251](https://github.com/PhaserEditor2D/PhaserEditor2D-v3/issues/251) Fixes sprite positioning in Animations Editor.
+* [#209](https://github.com/PhaserEditor2D/PhaserEditor2D-v3/issues/209) Improves scene border painting.
+* Improves animations preview UI:
+    - New Animation preview section.
+    - New Animations Preview section.
+    - Shows a preview button in the Animation Key user property.
+* Adds new Animation section to Sprite game objects. It is about to auto-start a sprite animation.
+* Adds `showBeforeDelay` to the Animations Editor.
+* Shows Sprite Animation blocks in the Scene Editor's Blocks view.
+* Aseprite animations support.
+* New Code Snippets scene elements.
+* Optimizes pooling of WEBGL contexts.
+* [#295](https://github.com/PhaserEditor2D/PhaserEditor2D-v3/issues/295) Fixes tilemapLayer nullable method factory.
+
 ## v3.63.0 - Sep 30, 2023
 
 * Opens the file given in the `openfile` URL search parameter. Like in `?openfile=some/file`.

design/texture-packer/phasereditor2d.resources/phasereditor2d.resources@1x.tps

@@ -183,6 +183,7 @@
             <key type="filename">x1/dark/align-top.png</key>
             <key type="filename">x1/dark/angle.png</key>
             <key type="filename">x1/dark/animations.png</key>
+            <key type="filename">x1/dark/aseprite.png</key>
             <key type="filename">x1/dark/asset-pack.png</key>
             <key type="filename">x1/dark/bitmapfont-type.png</key>
             <key type="filename">x1/dark/blocks.png</key>
@@ -246,6 +247,7 @@
             <key type="filename">x1/light/align-top.png</key>
             <key type="filename">x1/light/angle.png</key>
             <key type="filename">x1/light/animations.png</key>
+            <key type="filename">x1/light/aseprite.png</key>
             <key type="filename">x1/light/asset-pack.png</key>
             <key type="filename">x1/light/bitmapfont-type.png</key>
             <key type="filename">x1/light/blocks.png</key>

design/texture-packer/phasereditor2d.resources/phasereditor2d.resources@2x.tps

@@ -183,6 +183,7 @@
             <key type="filename">x2/dark/[email protected]</key>
             <key type="filename">x2/dark/[email protected]</key>
             <key type="filename">x2/dark/[email protected]</key>
+            <key type="filename">x2/dark/[email protected]</key>
             <key type="filename">x2/dark/[email protected]</key>
             <key type="filename">x2/dark/[email protected]</key>
             <key type="filename">x2/dark/[email protected]</key>
@@ -246,6 +247,7 @@
             <key type="filename">x2/light/[email protected]</key>
             <key type="filename">x2/light/[email protected]</key>
             <key type="filename">x2/light/[email protected]</key>
+            <key type="filename">x2/light/[email protected]</key>
             <key type="filename">x2/light/[email protected]</key>
             <key type="filename">x2/light/[email protected]</key>
             <key type="filename">x2/light/[email protected]</key>

scripts/make-all-help-files.js

@@ -8,6 +8,9 @@ utils.makeHelpFile([
     "Phaser.Loader.LoaderPlugin.atlas(textureURL)",
     "Phaser.Types.Loader.FileTypes.AtlasJSONFileConfig.normalMap",
 
+    "Phaser.Loader.LoaderPlugin.aseprite(atlasURL)",
+    "Phaser.Loader.LoaderPlugin.aseprite(textureURL)",
+
     "Phaser.Loader.LoaderPlugin.atlasXML(atlasURL)",
     "Phaser.Loader.LoaderPlugin.atlasXML(textureURL)",
     "Phaser.Types.Loader.FileTypes.AtlasXMLFileConfig.normalMap",
@@ -285,7 +288,18 @@ utils.makeHelpFile([
     "spine.SkinsAndAnimationBoundsProvider(timeStep)",
     "spine.AnimationState.timeScale",
     "spine.AnimationStateData.defaultMix",
-    "spine.AnimationStateData.setMixWith"
+    "spine.AnimationStateData.setMixWith",
+
+    "Phaser.Types.Animations.PlayAnimationConfig.frameRate",
+    "Phaser.Types.Animations.PlayAnimationConfig.delay",
+    "Phaser.Types.Animations.PlayAnimationConfig.repeat",
+    "Phaser.Types.Animations.PlayAnimationConfig.repeatDelay",
+    "Phaser.Types.Animations.PlayAnimationConfig.yoyo",
+    "Phaser.Types.Animations.PlayAnimationConfig.showOnStart",
+    "Phaser.Types.Animations.PlayAnimationConfig.hideOnComplete",
+    "Phaser.Types.Animations.PlayAnimationConfig.showBeforeDelay",
+    "Phaser.Types.Animations.PlayAnimationConfig.startFrame",
+    "Phaser.Types.Animations.PlayAnimationConfig.timeScale",
 
 
 ], "../source/editor/plugins/phasereditor2d.resources/_res/phasereditor2d.scene/docs/phaser.json");
@@ -300,7 +314,9 @@ utils.makeHelpFile([
     "Phaser.Types.Animations.Animation.yoyo",
     "Phaser.Types.Animations.Animation.showOnStart",
     "Phaser.Types.Animations.Animation.hideOnComplete",
+    "Phaser.Types.Animations.Animation.showBeforeDelay",
     "Phaser.Types.Animations.Animation.skipMissedFrames",
+    "Phaser.Types.Animations.PlayAnimationConfig.startFrame",
 
 ], "../source/editor/plugins/phasereditor2d.resources/_res/phasereditor2d.animations/docs/phaser-docs.json");
 

source/editor/plugins/colibri/src/ui/controls/properties/FormBuilder.ts

@@ -44,11 +44,20 @@ namespace colibri.ui.controls.properties {
             return label;
         }
 
-        createButton(parent: HTMLElement, text: string, callback: (e?: MouseEvent) => void) {
+        createButton(parent: HTMLElement, textOrIcon: string | IImage, callback: (e?: MouseEvent) => void) {
 
             const btn = document.createElement("button");
 
-            btn.innerText = text;
+            if (typeof textOrIcon === "string") {
+
+                btn.innerText = textOrIcon;
+
+            } else {
+
+                const iconControl = new controls.IconControl(textOrIcon);
+
+                btn.appendChild(iconControl.getCanvas());
+            }
 
             btn.addEventListener("click", e => callback(e));
 

source/editor/plugins/colibri/src/ui/controls/properties/PropertyPage.ts

@@ -192,6 +192,7 @@ namespace colibri.ui.controls.properties {
             const sortedPanes = this._sectionPanes
                 .map(p => p)
                 .sort((a, b) =>
+
                     sectionIdList.indexOf(a.getSection().getId()) - sectionIdList.indexOf(b.getSection().getId())
                 );
 

source/editor/plugins/colibri/src/ui/controls/properties/PropertySection.ts

@@ -81,6 +81,7 @@ namespace colibri.ui.controls.properties {
         }
 
         isFillSpace() {
+
             return this._fillSpace;
         }
 

source/editor/plugins/colibri/src/ui/controls/properties/PropertySectionProvider.ts

@@ -11,6 +11,17 @@ namespace colibri.ui.controls.properties {
 
         abstract addSections(page: PropertyPage, sections: Array<PropertySection<any>>): void;
 
+        sortSections(sections: controls.properties.PropertySection<any>[]) {
+
+            sections.sort((a, b) => {
+
+                const aa = a.isFillSpace() ? 1 : 0;
+                const bb = b.isFillSpace() ? 1 : 0;
+
+                return aa - bb;
+            });
+        }
+
         getEmptySelectionObject() {
 
             return null;

source/editor/plugins/colibri/src/ui/controls/viewers/IconGridCellRenderer.ts

@@ -41,10 +41,12 @@ namespace colibri.ui.controls.viewers {
         }
 
         cellHeight(args: RenderCellArgs): number {
+
             return args.viewer.getCellSize();
         }
 
         preload(args: PreloadCellArgs): Promise<any> {
+
             return this._icon.preload();
         }
     }

source/editor/plugins/colibri/src/ui/controls/viewers/TreeViewerRenderer.ts

@@ -170,7 +170,7 @@ namespace colibri.ui.controls.viewers {
 
                 y += 15;
 
-            } else if (renderer.layout === "full-width") {
+            } else if (renderer.layout === "full-width" && args.h > ROW_HEIGHT * 2) {
 
                 args2 = new RenderCellArgs(
                     args.canvasContext, args.x, args.y, args.w, args.h - 20, args.obj, args.viewer);

source/editor/plugins/colibri/src/ui/ide/ContentTypeEditorFactory.ts

@@ -6,14 +6,14 @@ namespace colibri.ui.ide {
     export class ContentTypeEditorFactory extends EditorFactory {
 
         private _name: string;
-        private _contentType: string;
+        private _contentTypeSet: Set<string>;
         private _newEditor?: (factory?: ContentTypeEditorFactory) => EditorPart;
 
-        constructor(name: string, contentType: string, newEditor: (factory?: ContentTypeEditorFactory) => EditorPart) {
+        constructor(name: string, contentType: string | string[], newEditor: (factory?: ContentTypeEditorFactory) => EditorPart) {
             super();
 
             this._name = name;
-            this._contentType = contentType;
+            this._contentTypeSet = new Set(Array.isArray(contentType) ? contentType : [contentType]);
             this._newEditor = newEditor;
         }
 
@@ -29,7 +29,7 @@ namespace colibri.ui.ide {
                 const contentType = colibri.Platform.getWorkbench()
                     .getContentTypeRegistry().getCachedContentType(input);
 
-                return this._contentType === contentType;
+                return this._contentTypeSet.has(contentType);
             }
 
             return false;

source/editor/plugins/colibri/src/ui/ide/properties/BaseManyImagePreviewSection.ts

@@ -11,7 +11,7 @@ namespace colibri.ui.ide.properties {
             const viewer = new controls.viewers.TreeViewer("colibri.ui.ide.properties.ManyImagePreviewFormArea");
 
             viewer.setContentProvider(new controls.viewers.ArrayTreeContentProvider());
-            viewer.setTreeRenderer(new controls.viewers.GridTreeViewerRenderer(viewer, false, true).setPaintItemShadow(true));
+            viewer.setTreeRenderer(this.createTreeRenderer(viewer));
 
             this.prepareViewer(viewer);
 
@@ -35,6 +35,11 @@ namespace colibri.ui.ide.properties {
             });
         }
 
+        protected createTreeRenderer(viewer: controls.viewers.TreeViewer): controls.viewers.TreeViewerRenderer {
+
+            return new controls.viewers.GridTreeViewerRenderer(viewer, false, true).setPaintItemShadow(true);
+        }
+
         protected abstract getViewerInput(): Promise<unknown>;
 
         protected abstract prepareViewer(viewer: controls.viewers.TreeViewer);

source/editor/plugins/phasereditor2d.animations/src/AnimationsPlugin.ts

@@ -19,14 +19,31 @@ namespace phasereditor2d.animations {
             super("phasereditor2d.animations");
         }
 
+        async openAnimationInEditor(anim: pack.core.AnimationConfigInPackItem) {
+
+            const animationsItem = anim.getParent();
+
+            const file = animationsItem.getAnimationsFile();
+
+            if (file) {
+
+                const editor = colibri.Platform.getWorkbench().openEditor(file);
+
+                if (editor instanceof ui.editors.AnimationsEditor) {
+
+                    editor.selectAnimationByKey(anim.getKey());
+                }
+            }
+        }
+
         getPhaserDocs() {
 
             if (!this._docs) {
 
                 this._docs = new phasereditor2d.ide.core.PhaserDocs(
                     resources.ResourcesPlugin.getInstance(), "phasereditor2d.animations/docs/phaser-docs.json");
             }
-            
+
             return this._docs;
         }
 
@@ -48,6 +65,17 @@ namespace phasereditor2d.animations {
             reg.addExtension(
                 new colibri.ui.ide.commands.CommandExtension(manager => this.registerCommands(manager))
             );
+
+            // asset pack preview extension
+
+            reg.addExtension(new pack.ui.AssetPackPreviewPropertyProviderExtension(
+                page => new ui.editors.properties.AnimationInfoSection(page),
+            ));
+
+            scene.ScenePlugin.getInstance().openAnimationInEditor = anim => {
+
+                return this.openAnimationInEditor(anim);
+            };
         }
 
         private registerCommands(manager: colibri.ui.ide.commands.CommandManager) {

source/editor/plugins/phasereditor2d.animations/src/ui/editors/AnimationsEditor.ts

@@ -21,6 +21,8 @@ namespace phasereditor2d.animations.ui.editors {
         private _currentDependenciesHash: string;
         private _menuCreator: AnimationsEditorMenuCreator;
         private _model: AnimationsModel;
+        private _editorReady = false;
+        private _selectAnimationKeyOnBoot: string;
 
         static getFactory() {
 
@@ -392,9 +394,9 @@ namespace phasereditor2d.animations.ui.editors {
             this._overlayLayer = new AnimationsOverlayLayer(this);
             container.appendChild(this._overlayLayer.getCanvas());
 
-            const pool = Phaser.Display.Canvas.CanvasPool;
+            this._gameCanvas = scene.ScenePlugin.getInstance().getCanvasManager().takeCanvas();
+            this._gameCanvas.style.visibility = "hidden";
 
-            this._gameCanvas = pool.create2D(this.getElement(), 100, 100);
             this._gameCanvas.style.position = "absolute";
             this._gameCanvas.tabIndex = 1;
             container.appendChild(this._gameCanvas);
@@ -408,7 +410,11 @@ namespace phasereditor2d.animations.ui.editors {
 
         private registerDropListeners() {
 
-            this._gameCanvas.addEventListener("dragover", e => {
+            // canvas can be reused, don't use it for events
+
+            const eventElement = this._gameCanvas.parentElement;
+
+            eventElement.addEventListener("dragover", e => {
 
                 const dataArray = controls.Controls.getApplicationDragData();
 
@@ -424,7 +430,7 @@ namespace phasereditor2d.animations.ui.editors {
                 }
             });
 
-            this._gameCanvas.addEventListener("drop", e => {
+            eventElement.addEventListener("drop", e => {
 
                 e.preventDefault();
 
@@ -440,7 +446,11 @@ namespace phasereditor2d.animations.ui.editors {
 
             this._menuCreator = new AnimationsEditorMenuCreator(this);
 
-            this._gameCanvas.addEventListener("contextmenu", e => this.onMenu(e));
+            // canvas can be reused, don't use it for events
+
+            const eventElement = this._gameCanvas.parentElement;
+
+            eventElement.addEventListener("contextmenu", e => this.onMenu(e));
         }
 
         private onMenu(e: MouseEvent) {
@@ -464,7 +474,7 @@ namespace phasereditor2d.animations.ui.editors {
             this._scene = new AnimationsScene(this);
 
             this._game = new Phaser.Game({
-                type: Phaser.CANVAS,
+                type: scene.ScenePlugin.DEFAULT_EDITOR_CANVAS_CONTEXT,
                 canvas: this._gameCanvas,
                 scale: {
                     mode: Phaser.Scale.NONE
@@ -493,6 +503,8 @@ namespace phasereditor2d.animations.ui.editors {
 
             this._gameBooted = true;
 
+            this._gameCanvas.style.visibility = "visible";
+
             if (!this._sceneRead) {
 
                 await this.readScene();
@@ -502,7 +514,21 @@ namespace phasereditor2d.animations.ui.editors {
 
             this.refreshOutline();
 
-            this.setSelection([]);
+            let selection: Phaser.Animations.Animation[] = [];
+
+            if (this._selectAnimationKeyOnBoot) {
+
+                const anims = this.getAnimations();
+
+                if (anims) {
+
+                    selection = anims.filter(a => a.key === this._selectAnimationKeyOnBoot);
+                }
+            }
+
+            this.setSelection(selection);
+
+            this._editorReady = true;
         }
 
         private async readScene() {
@@ -744,6 +770,18 @@ namespace phasereditor2d.animations.ui.editors {
             return list;
         }
 
+        selectAnimationByKey(animationKey: string) {
+
+            if (this._editorReady) {
+
+                this.setSelection(this.getAnimations().filter(a => a.key === animationKey));
+
+            } else {
+
+                this._selectAnimationKeyOnBoot = animationKey;
+            }
+        }
+
         getAnimations() {
 
             return this._scene.anims["anims"].getArray();

source/editor/plugins/phasereditor2d.animations/src/ui/editors/AnimationsModel.ts

@@ -73,6 +73,8 @@ namespace phasereditor2d.animations.ui.editors {
 
                 if (!a.yoyo) delete a.yoyo;
 
+                if (!a.showBeforeDelay) delete a.showBeforeDelay;
+
                 if (!a.showOnStart) delete a.showOnStart;
 
                 if (!a.hideOnComplete) delete a.hideOnComplete;