added OverlayPreloader and made a bunch of clones

examples/clonedOverlaysExample.js

@@ -11,6 +11,9 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
+const NUM_OF_TREES = 40;
+const NUM_OF_SANTAS = 20;
+
 // Image source: https://openclipart.org/detail/447/christmas-tree-by-theresaknott (heavily edited by Maximillian Merlin)
 const CHRISTMAS_TREE_SPRITES_URL = "http://test.thoys.nl/hifi/images/santa/christmas-tree.svg";
 
@@ -27,13 +30,31 @@ Array.prototype.contains = function(obj) {
     return false;
 };
 
-function getRandomPosAroundMyAvatar(radius) {
+function getRandomPosAroundMyAvatar(radius, height_offset) {
-    return {x: MyAvatar.position.x + Math.floor(Math.random() * radius * 2) - radius, y: MyAvatar.position.y, z: MyAvatar.position.z + Math.floor(Math.random() * radius * 2) - radius};
+    if (height_offset == undefined) {
+        height_offset = 0;
+    }
+    return {x: MyAvatar.position.x + Math.floor(Math.random() * radius * 2) - radius, y: MyAvatar.position.y + height_offset, z: MyAvatar.position.z + Math.floor(Math.random() * radius * 2) - radius};
 }
 
-function SpriteBillboard(sprite_properties) {
+function OverlayPreloader(overlay_type, overlay_properties, loaded_callback) {
     var _this = this;
+    this.loaded_callback = loaded_callback;
+    this.overlay = Overlays.addOverlay(overlay_type, overlay_properties);
+    this.timer = null;
+    this.timer = Script.setInterval(function() { 
+        if (Overlays.isLoaded(_this.overlay)) {
+            Script.clearInterval(_this.timer);
+            _this.loaded_callback();
+        }
+    }, 100);
+}
+
+function SpriteBillboard(sprite_properties, overlay) {
+    var _this = this;
+    
     // set properties
+    this.overlay = overlay;
     this.overlay_properties = {};
     this.sprite_properties = sprite_properties;
     this.edited_overlay_properties = [];
@@ -41,11 +62,11 @@ function SpriteBillboard(sprite_properties) {
     this.currentSequence = "";
     this.sequenceIndex = 0;
     this.sequenceFPS = 0;
-	this.sequenceStepToNext = false;
+    this.sequenceStepToNext = false;
     this.sequenceTimer = null;
     this.prevSequenceIndex = -1;
-	this.sequenceX = 0;
+    this.sequenceX = 0;
-	this.sequenceY = 0;
+    this.sequenceY = 0;
     
     this.spriteSize = {x: 0, y: 0, width: 32, height: 64};
     
@@ -67,12 +88,6 @@ function SpriteBillboard(sprite_properties) {
         return _this;
     };
 
-    this.setURL = function(url) {
-        this.overlay_properties.url = url;
-        this.editedProperty("url");
-        return _this;
-    }
-
     this.setAlpha = function(alpha) {
         this.overlay_properties.alpha = alpha;
         this.editedProperty("alpha");
@@ -92,14 +107,14 @@ function SpriteBillboard(sprite_properties) {
     };
     
     this.setSpriteXIndex = function(x_index) {
-	    _this.sequenceX = x_index;
+        _this.sequenceX = x_index;
         _this.overlay_properties.subImage.x = x_index * _this.overlay_properties.subImage.width;
         _this.editedProperty("subImage");
         return _this;
     }
     
     this.setSpriteYIndex = function(y_index) {
-	    _this.sequenceY = y_index;
+        _this.sequenceY = y_index;
         _this.overlay_properties.subImage.y = y_index * _this.overlay_properties.subImage.height;
         _this.editedProperty("subImage");
         return _this;
@@ -107,8 +122,8 @@ function SpriteBillboard(sprite_properties) {
 
     this.editOverlay = function(properties) {
         for (var key in properties) {
-             _this.overlay_properties[attrname] = properties[key];
+            _this.overlay_properties[attrname] = properties[key];
-             _this.editedProperty(key);
+            _this.editedProperty(key);
         }
         return _this;
     };
@@ -119,9 +134,9 @@ function SpriteBillboard(sprite_properties) {
              var key = _this.edited_overlay_properties[i];
              changed_properties[key] = _this.overlay_properties[key];
         }
-		if (Object.keys(changed_properties).length === 0) {
+        if (Object.keys(changed_properties).length === 0) {
-		    return;
+            return;
-		}
+        }
         Overlays.editOverlay(_this.overlay, changed_properties);
         _this.edited_overlay_properties = [];
     };
@@ -129,9 +144,9 @@ function SpriteBillboard(sprite_properties) {
     this._renderFrame = function() {
         var currentSequence = _this.sprite_properties.sequences[_this.currentSequence];
         var currentItem = currentSequence[_this.sequenceIndex];
-		var indexChanged = _this.sequenceIndex != _this.prevSequenceIndex;
+        var indexChanged = _this.sequenceIndex != _this.prevSequenceIndex;
-		var canMoveToNext = true;
+        var canMoveToNext = true;
-		_this.prevSequenceIndex = _this.sequenceIndex;
+        _this.prevSequenceIndex = _this.sequenceIndex;
         if (indexChanged) {
             if (currentItem.loop != undefined) {
                 _this.loopSequence = currentItem.loop;
@@ -139,45 +154,44 @@ function SpriteBillboard(sprite_properties) {
             if (currentItem.fps !== undefined && currentItem.fps != _this.sequenceFPS) {
                 _this.startSequenceTimerFPS(currentItem.fps);
             }
-			if (currentItem.step_to_next !== undefined) {
+            if (currentItem.step_to_next !== undefined) {
-			    _this.sequenceStepToNext = currentItem.step_to_next;
+                _this.sequenceStepToNext = currentItem.step_to_next;
-			}
+            }
-			if (currentItem.x !== undefined) {
+            if (currentItem.x !== undefined) {
-			    _this.setSpriteXIndex(currentItem.x);
+                _this.setSpriteXIndex(currentItem.x);
-			}
+            }
-			if (currentItem.y !== undefined) {
+            if (currentItem.y !== undefined) {
-			    _this.setSpriteYIndex(currentItem.y);
+                _this.setSpriteYIndex(currentItem.y);
-			}
+            }
-			
+            
-			if (_this.sequenceStepToNext) {
+            if (_this.sequenceStepToNext) {
-			    canMoveToNext = false;
+                canMoveToNext = false;
-			}
+            }
         }
-		_this.prevSequenceIndex = _this.sequenceIndex;
+        _this.prevSequenceIndex = _this.sequenceIndex;
         var nextIndex = (_this.sequenceIndex + 1) % currentSequence.length;
         var nextItem = currentSequence[nextIndex];
-		var nextX = nextItem.x != undefined ? nextItem.x : _this.sequenceX;
+        var nextX = nextItem.x != undefined ? nextItem.x : _this.sequenceX;
-		var nextY = nextItem.Y != undefined ? nextItem.Y : _this.sequenceY;
+        var nextY = nextItem.Y != undefined ? nextItem.Y : _this.sequenceY;
-		
+        
-		if (_this.sequenceStepToNext && !indexChanged) {
+        if (_this.sequenceStepToNext && !indexChanged) {
-		    var XMoveNext = true;
+            var XMoveNext = true;
-			var YMoveNext = true;
+            var YMoveNext = true;
-			if (Math.abs(nextX - _this.sequenceX) > 1) {
+            if (Math.abs(nextX - _this.sequenceX) > 1) {
-				_this.setSpriteXIndex(_this.sequenceX + (nextX > _this.sequenceX ? 1 : -1));
+                _this.setSpriteXIndex(_this.sequenceX + (nextX > _this.sequenceX ? 1 : -1));
-				XMoveNext = Math.abs(nextX - _this.sequenceX) == 1;
+                XMoveNext = Math.abs(nextX - _this.sequenceX) == 1;
             }
-			if (Math.abs(nextY - _this.sequenceY) > 1) {
+            if (Math.abs(nextY - _this.sequenceY) > 1) {
-				_this.setSpriteYIndex(_this.sequenceY + (nextY > _this.sequenceY ? 1 : -1));
+                _this.setSpriteYIndex(_this.sequenceY + (nextY > _this.sequenceY ? 1 : -1));
-				YMoveNext = Math.abs(nextY - _this.sequenceY) == 1;
+                YMoveNext = Math.abs(nextY - _this.sequenceY) == 1;
             }
-			canMoveToNext = XMoveNext && YMoveNext;
+            canMoveToNext = XMoveNext && YMoveNext;
-		   
+        }
-		}
+        if (canMoveToNext) {
-		if (canMoveToNext) {
             _this.sequenceIndex = nextIndex;
-		}
+        }
-		_this.commitChanges();
+        _this.commitChanges();
-		
+        
     };
 
     this.clone = function() {
@@ -223,14 +237,12 @@ function SpriteBillboard(sprite_properties) {
         this.setPosition(this.sprite_properties.position);
     }
 
-    // set the overlay
+    _this.commitChanges();
-    this.overlay = Overlays.addOverlay("billboard", this.overlay_properties);
-    this.new_properties = {};
 
     if (this.sprite_properties.startup_sequence != undefined) {
         this.start(this.sprite_properties.startup_sequence);
     }
-
+    
     Script.scriptEnding.connect(function () {
         if (_this.sequenceTimer != null) {
             Script.clearInterval(_this.sequenceTimer);
@@ -239,40 +251,44 @@ function SpriteBillboard(sprite_properties) {
     });
 }
 
-var chrismastree = new SpriteBillboard({
+var christmastree_loader = null;
-    position: getRandomPosAroundMyAvatar(6),
+christmastree_loader = new OverlayPreloader("billboard", 
-    url: CHRISTMAS_TREE_SPRITES_URL,
+    {url: CHRISTMAS_TREE_SPRITES_URL, alpha: 0}, function() {
-    sprite_size: {x: 0, y: 0, width: 250.000, height: 357.626},
+        for (var i = 0; i < NUM_OF_TREES; i++) {
-    scale: 6,
+            var clonedOverlay = Overlays.cloneOverlay(christmastree_loader.overlay);
-    alpha: 1,
+            new SpriteBillboard({
-    sequences: {"idle": [{x: 0, y: 0, step_to_next: true, fps: 3}, {x: 3, step_to_next: false}]},
+                position: getRandomPosAroundMyAvatar(20),
-    startup_sequence: "idle"
+                sprite_size: {x: 0, y: 0, width: 250.000, height: 357.626},
-});
+                scale: 6,
+                alpha: 1,
+                sequences: {"idle": [{x: 0, y: 0, step_to_next: true, fps: 3}, {x: 3, step_to_next: false}]},
+                startup_sequence: "idle"
+            }, clonedOverlay);
+        }
+    }
+);
 
-var santa = new SpriteBillboard({
+var santa_loader = null;
-    position: getRandomPosAroundMyAvatar(6),
+santa_loader = new OverlayPreloader("billboard", 
-    url: SANTA_SPRITES_URL,
+    {url: SANTA_SPRITES_URL, alpha: 0}, function() {
-    loop: true,
+        for (var i = 0; i < NUM_OF_SANTAS; i++) {
-    sprite_size: {x: 0, y: 0, width: 64, height:  72},
+            var clonedOverlay = Overlays.cloneOverlay(santa_loader.overlay);
-    scale: 4,
+            new SpriteBillboard({
-    alpha: 1,
+                position: getRandomPosAroundMyAvatar(18, -1),
-    sequences: {
+                sprite_size: {x: 0, y: 0, width: 64, height:  72},
-		"walk_left": [{x: 2, y: 0, step_to_next: true, fps: 4}, {x: 10, step_to_next: false}],
+                scale: 4,
-		"walk_right": [{x: 10, y: 1, step_to_next: true, fps: 4}, {x: 2, step_to_next: false}],
+                alpha: 1,
-	},
+                sequences: {
-    startup_sequence: "walk_left"
+                    "walk_left": [{x: 2, y: 0, step_to_next: true, fps: 4}, {x: 10, step_to_next: false}],
-});
+                    "walk_right": [{x: 10, y: 1, step_to_next: true, fps: 4}, {x: 2, step_to_next: false}],
+                },
+                startup_sequence: (i % 2 == 0) ? "walk_left" : "walk_right"
+            }, clonedOverlay);
+        }
+    }
+);
 
-var santa = new SpriteBillboard({
+Script.scriptEnding.connect(function () {
-    position: getRandomPosAroundMyAvatar(6),
+    Overlays.deleteOverlay(christmastree_loader.overlay);
-    url: SANTA_SPRITES_URL,
+    Overlays.deleteOverlay(santa_loader.overlay);
-    loop: true,
+});
-    sprite_size: {x: 0, y: 0, width: 64, height:  72},
-    scale: 4,
-    alpha: 1,
-    sequences: {
-		"walk_left": [{x: 2, y: 0, step_to_next: true, fps: 4}, {x: 10, step_to_next: false}],
-		"walk_right": [{x: 10, y: 1, step_to_next: true, fps: 4}, {x: 2, step_to_next: false}],
-	},
-    startup_sequence: "walk_right"
-});