@urso/core 0.4.5 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urso/core",
-  "version": "0.4.5",
+  "version": "0.4.10",
   "description": "HTML5 game engine",
   "main": "build/js/index.js",
   "author": "Megbrimef",

package/src/js/extra/_info.js

@@ -17,6 +17,8 @@ require('./setTimeout');
 import Howler from 'howler';
 window.Howler = Howler;
 
+require("./pixiPatch.js");
+
 Urso.Core.Extra = {
     BrowserEvents: require('./browserEvents.js')
 };

package/src/js/extra/pixiPatch.js

@@ -0,0 +1,77 @@
+/**
+ * ModulesObjectsModelsText  fillCustomColors patch
+ */
+
+
+/**
+ * Render the text with letter-spacing.
+ *
+ * @param text - The text to draw
+ * @param x - Horizontal position to draw the text
+ * @param y - Vertical position to draw the text
+ * @param isStroke - Is this drawing for the outside stroke of the
+ *  text? If not, it's for the inside fill
+ */
+PIXI.Text.prototype.drawLetterSpacing = function (text, x, y, isStroke) {
+    if (isStroke === void 0) { isStroke = false; }
+    var style = this._style;
+    // letterSpacing of 0 means normal
+    var letterSpacing = style.letterSpacing;
+    // Checking that we can use moddern canvas2D api
+    // https://developer.chrome.com/origintrials/#/view_trial/3585991203293757441
+    // note: this is unstable API, Chrome less 94 use a `textLetterSpacing`, newest use a letterSpacing
+    // eslint-disable-next-line max-len
+    var supportLetterSpacing = 'letterSpacing' in CanvasRenderingContext2D.prototype
+        || 'textLetterSpacing' in CanvasRenderingContext2D.prototype;
+
+    if ((letterSpacing === 0 || supportLetterSpacing) && (!this.fillCustomColors || this.fillCustomColors.length === 0)) { //colors patch in if state
+        if (supportLetterSpacing) {
+            this.context.letterSpacing = letterSpacing;
+            this.context.textLetterSpacing = letterSpacing;
+        }
+        if (isStroke) {
+            this.context.strokeText(text, x, y);
+        }
+        else {
+            this.context.fillText(text, x, y);
+        }
+        return;
+    }
+    var currentPosition = x;
+
+    var customColors = [];//colors patch block
+    var textIndexOffset = this.text.indexOf(text);
+    if (this.fillCustomColors) {
+        for (var k in this.fillCustomColors){
+            var colorsParams = this.fillCustomColors[k];
+            customColors[colorsParams.position] = colorsParams.color;
+        }
+    }
+
+    // Using Array.from correctly splits characters whilst keeping emoji together.
+    // This is not supported on IE as it requires ES6, so regular text splitting occurs.
+    // This also doesn't account for emoji that are multiple emoji put together to make something else.
+    // Handling all of this would require a big library itself.
+    // https://medium.com/@giltayar/iterating-over-emoji-characters-the-es6-way-f06e4589516
+    // https://github.com/orling/grapheme-splitter
+    var stringArray = Array.from ? Array.from(text) : text.split('');
+    var previousWidth = this.context.measureText(text).width;
+    var currentWidth = 0;
+    for (var i = 0; i < stringArray.length; ++i) {
+        var currentChar = stringArray[i];
+
+        if (isStroke) {
+            this.context.strokeText(currentChar, currentPosition, y);
+        }
+        else {
+            if (customColors[textIndexOffset + i]) { //colors patch block
+                this.context.fillStyle = customColors[textIndexOffset + i];
+            }
+
+            this.context.fillText(currentChar, currentPosition, y);
+        }
+        currentWidth = this.context.measureText(text.substring(i + 1)).width;
+        currentPosition += previousWidth - currentWidth + letterSpacing;
+        previousWidth = currentWidth;
+    }
+};

package/src/js/modules/assets/service.js

@@ -6,6 +6,7 @@ class ModulesAssetsService {
 
         this._currentQuality = 'auto';
         this._addedAssetsCache = [];
+        this.lazyLoadProcessStarted = false;
     };
 
     getQuality() {
@@ -30,7 +31,7 @@ class ModulesAssetsService {
     startLoad(callback) {
         this.loadGroup(
             this.getInstance('Config').loadingGroups.initial,
-            (() => { callback(); this._continueLazyLoad(); }).bind(this)
+            (() => { callback(); this._startLazyLoad(); }).bind(this)
         )
     }
 
@@ -263,6 +264,14 @@ class ModulesAssetsService {
         this.assets[model.loadingGroup].push(model);
     }
 
+    _startLazyLoad() {
+        if (this.lazyLoadProcessStarted)
+            return;
+
+        this.lazyLoadProcessStarted = true;
+        this._continueLazyLoad();
+    }
+
     _continueLazyLoad(step) {
         if (!step)
             step = 0;

package/src/js/modules/objects/controller.js

@@ -30,7 +30,7 @@ class ModulesObjectsController {
     }
 
     _createSingleObject(object, parent, doNotRefreshStylesFlag) {
-        //parse template for assets and objects (groups, components)
+        //parse template for assets and objects (groups, components)  Urso.types.objects.COMPONENT  Urso.types.objects.GROUP
         if (!object._parsed) { //todo only for objects, contains components && groups in future
             return Urso.scenes.addObject(object, parent, doNotRefreshStylesFlag);
         }

package/src/js/modules/objects/models/text.js

@@ -20,6 +20,7 @@ class ModulesObjectsModelsText extends Urso.Core.Modules.Objects.BaseModel {
         this.fontStyle = Urso.helper.recursiveGet('fontStyle', params, false); //'italic'
         this.fontWeight = Urso.helper.recursiveGet('fontWeight', params, false); // 'bold'
         this.fill = Urso.helper.recursiveGet('fill', params, '#000000'); // gradient  ['#ffffff', '#00ff99']
+        this.fillCustomColors = Urso.helper.recursiveGet('fillCustomColors', params, false); //or array [{position:12,color:'#000000'},...]
         this.stroke = Urso.helper.recursiveGet('stroke', params, 'black');
         this.strokeThickness = Urso.helper.recursiveGet('strokeThickness', params, 0);
         this.dropShadow = Urso.helper.recursiveGet('dropShadow', params, false);
@@ -38,6 +39,10 @@ class ModulesObjectsModelsText extends Urso.Core.Modules.Objects.BaseModel {
             this._originalModel.text = this.text = Urso.i18n.get(this.localeId, this.localeVariables);
 
         this._baseObject = new PIXI.Text(this.text);
+
+        if (this.fillCustomColors) {
+            this._baseObject.fillCustomColors = this.fillCustomColors;
+        }
     };
 
     _newLocaleHandler() {

package/src/js/modules/objects/proxy.js

@@ -161,6 +161,7 @@ class ModulesObjectsProxy {
             'fontStyle': 'style.fontStyle',
             'fontWeight': 'style.fontWeight',
             'fill': 'style.fill',
+            'fillCustomColors': 'fillCustomColors',
             'stroke': 'style.stroke',
             'strokeThickness': 'style.strokeThickness',
             'dropShadow': 'style.dropShadow',

package/src/js/modules/observer/events.js

@@ -28,6 +28,8 @@ class ModulesObserverConfig {
             MODULES_SCENES_DISPLAY_START: 'modules.scenes.display.start',
             MODULES_SCENES_DISPLAY_FINISHED: 'modules.scenes.display.finished',
             MODULES_SCENES_MOUSE_NEW_POSITION: 'modules.scenes.mouse.newPosition',
+            MODULES_SCENES_PAUSE: 'modules.scenes.pause',
+            MODULES_SCENES_RESUME: 'modules.scenes.resume',
             MODULES_SCENES_UPDATE: 'modules.scenes.update',
             EXTRA_BROWSEREVENTS_WINDOW_PRE_RESIZE: 'extra.browserEvents.window.pre.resize',
             EXTRA_BROWSEREVENTS_WINDOW_RESIZE: 'extra.browserEvents.window.resize',

package/src/js/modules/scenes/controller.js

@@ -6,38 +6,86 @@ class ModulesScenesController {
         this.init();
     }
 
+    /**
+     * init scenes mahager
+     */
     init() {
         this._service = this.getInstance('Service');
     }
 
+    /**
+     * display scene with name
+     * @param {String} name 
+     */
     display(name) {
         this._service.display(name);
     }
 
+    /**
+     * pause scene
+     */
+    pause() {
+        this._service.pause();
+    }
+
+    /**
+     * resume scene
+     */
+    resume() {
+        this._service.resume();
+    }
+
+    /**
+     * system function for transfer loadUpdate progress to components
+     * @param {Number} loadProgress 
+     */
     loadUpdate(loadProgress) {
         this._service.loadUpdate(loadProgress);
     }
 
+    /**
+     * system function, returns pixi world container
+     */
     getPixiWorld() {
         return this.getInstance('PixiWrapper').getPixiWorld();
     }
 
+    /**
+     * get template size
+     * @returns {Object}
+     */
     getTemplateSize() {
         return this.getInstance('Resolutions').getTemplateSize();
     }
 
+    /**
+     * return mouse coords related to scene
+     * @returns {Object}
+     */
     getMouseCoords() {
         return this.getInstance('PixiWrapper').getCachedMouseCoords();
     }
 
+    /**
+     * system function to add custom objects to scene like groups or components
+     * @param {Object|Array} objects 
+     * @param {Object} parent 
+     * @param {Boolean} doNotRefreshStylesFlag 
+     */
     addObject(objects, parent, doNotRefreshStylesFlag) {
-        this._service.addObject(objects, parent, doNotRefreshStylesFlag);
+        return this._service.addObject(objects, parent, doNotRefreshStylesFlag);
     }
 
+    /**
+     * global timeScale getter
+     */
     get timeScale() {
-        return this._service.timeScale;
+        return this._service.getTimeScale();
     }
 
+    /**
+     * global timeScale setter
+     */
     set timeScale(value) {
         return this._service.setTimeScale(value);
     }

package/src/js/modules/scenes/model.js

@@ -1,7 +1,4 @@
 class ModulesScenesModel {
-    constructor() {
-        this._isPaused = false;
-    }
 
     loadUpdate() {
         //just blank
@@ -23,10 +20,6 @@ class ModulesScenesModel {
         //just blank
     }
 
-    isPaused() {
-        return this._isPaused;
-    }
-
     destroy() {
         //just blank
     }

package/src/js/modules/scenes/pixiWrapper.js

@@ -40,6 +40,32 @@ class ModulesScenesPixiWrapper {
         this.getInstance('Resolutions');
     }
 
+    /**
+     * returns is scene paused
+     * @returns {Boolean}
+     */
+    isPaused() {
+        return this._loopPaused;
+    }
+
+    /**
+     * pause scene
+     */
+    pause() {
+        this._loopPaused = true;
+        PIXI.spine.settings.GLOBAL_AUTO_UPDATE = false;
+    }
+
+    /**
+     * resume scene
+     */
+    resume() {
+        this._loopLastCall = Date.now();
+        this._loopPaused = false;
+        this.update();
+        PIXI.spine.settings.GLOBAL_AUTO_UPDATE = true;
+    }
+
     _setPixiSettings() {
         PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;
         PIXI.settings.TEXT_RESOLUTION = 1;
@@ -94,7 +120,7 @@ class ModulesScenesPixiWrapper {
     };
 
     update() {
-        if (!this.currentScene || this.currentScene.isPaused())
+        if (!this.currentScene)
             return;
 
         let deltaTime = this._getDeltaTime();

package/src/js/modules/scenes/service.js

@@ -21,6 +21,33 @@ class ModulesScenesService {
         this._pixiWrapper.init();
     }
 
+    /**
+     * pause scene
+     */
+    pause() {
+        this.getInstance('PixiWrapper').pause();
+        this.emit(Urso.events.MODULES_SCENES_PAUSE);
+    }
+
+    /**
+     * resume scene
+     */
+    resume() {
+        this.getInstance('PixiWrapper').resume();
+        this.emit(Urso.events.MODULES_SCENES_RESUME);
+    }
+
+    /**
+     * global timeScale getter
+     */
+    getTimeScale() {
+        const loopPaused = this.getInstance('PixiWrapper').isPaused();
+        return loopPaused ? 0 : this.timeScale;
+    }
+
+    /**
+     * global timeScale setter
+     */
     setTimeScale(value) {
         this.timeScale = value;
         gsap.globalTimeline.timeScale(this.timeScale);
@@ -28,15 +55,22 @@ class ModulesScenesService {
 
     addObject(objects, parent, doNotRefreshStylesFlag) {
         const newTemplatePart = Urso.template.parse({ objects: [objects] }, true);
-        Urso.assets.preload(newTemplatePart.assets, () => this._newTemplateAssetsLoadedHandler(newTemplatePart, parent, doNotRefreshStylesFlag));
+
+        if (newTemplatePart.assets.length) {
+            Urso.assets.preload(newTemplatePart.assets, () => this._newTemplateAssetsLoadedHandler(newTemplatePart, parent, doNotRefreshStylesFlag));
+            return null; //objects will be created soon. Maybe we can return a promice
+        } else
+            return this._newTemplateAssetsLoadedHandler(newTemplatePart, parent, doNotRefreshStylesFlag);
     }
 
     _newTemplateAssetsLoadedHandler(newTemplatePart, parent, doNotRefreshStylesFlag) {
-        Urso.objects.create(newTemplatePart.objects, parent, doNotRefreshStylesFlag);
+        const objectToCreate = newTemplatePart.objects[0];
+        const result = Urso.objects.create(objectToCreate, parent, doNotRefreshStylesFlag);
 
         //components create
         newTemplatePart.components.forEach(component => component.create());
         this._currentSceneTemplate.components = Urso.helper.mergeArrays(this._currentSceneTemplate.components, newTemplatePart.components);
+        return result;
     }
 
     display(name) {