diff --git a/examples/clonedOverlaysExample.js b/examples/clonedOverlaysExample.js index aacca939f6..7aea048175 100644 --- a/examples/clonedOverlaysExample.js +++ b/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) { - 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}; +function getRandomPosAroundMyAvatar(radius, height_offset) { + 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.sequenceY = 0; + this.sequenceX = 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.editedProperty(key); + _this.overlay_properties[attrname] = properties[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) { - return; - } + if (Object.keys(changed_properties).length === 0) { + 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 canMoveToNext = true; - _this.prevSequenceIndex = _this.sequenceIndex; + var indexChanged = _this.sequenceIndex != _this.prevSequenceIndex; + var canMoveToNext = true; + _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) { - _this.sequenceStepToNext = currentItem.step_to_next; - } - if (currentItem.x !== undefined) { - _this.setSpriteXIndex(currentItem.x); - } - if (currentItem.y !== undefined) { - _this.setSpriteYIndex(currentItem.y); - } - - if (_this.sequenceStepToNext) { - canMoveToNext = false; - } + if (currentItem.step_to_next !== undefined) { + _this.sequenceStepToNext = currentItem.step_to_next; + } + if (currentItem.x !== undefined) { + _this.setSpriteXIndex(currentItem.x); + } + if (currentItem.y !== undefined) { + _this.setSpriteYIndex(currentItem.y); + } + + if (_this.sequenceStepToNext) { + 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 nextY = nextItem.Y != undefined ? nextItem.Y : _this.sequenceY; - - if (_this.sequenceStepToNext && !indexChanged) { - var XMoveNext = true; - var YMoveNext = true; - if (Math.abs(nextX - _this.sequenceX) > 1) { - _this.setSpriteXIndex(_this.sequenceX + (nextX > _this.sequenceX ? 1 : -1)); - XMoveNext = Math.abs(nextX - _this.sequenceX) == 1; + var nextX = nextItem.x != undefined ? nextItem.x : _this.sequenceX; + var nextY = nextItem.Y != undefined ? nextItem.Y : _this.sequenceY; + + if (_this.sequenceStepToNext && !indexChanged) { + var XMoveNext = true; + var YMoveNext = true; + if (Math.abs(nextX - _this.sequenceX) > 1) { + _this.setSpriteXIndex(_this.sequenceX + (nextX > _this.sequenceX ? 1 : -1)); + XMoveNext = Math.abs(nextX - _this.sequenceX) == 1; } - if (Math.abs(nextY - _this.sequenceY) > 1) { - _this.setSpriteYIndex(_this.sequenceY + (nextY > _this.sequenceY ? 1 : -1)); - YMoveNext = Math.abs(nextY - _this.sequenceY) == 1; + if (Math.abs(nextY - _this.sequenceY) > 1) { + _this.setSpriteYIndex(_this.sequenceY + (nextY > _this.sequenceY ? 1 : -1)); + YMoveNext = Math.abs(nextY - _this.sequenceY) == 1; } - canMoveToNext = XMoveNext && YMoveNext; - - } - if (canMoveToNext) { + canMoveToNext = XMoveNext && YMoveNext; + } + 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.overlay = Overlays.addOverlay("billboard", this.overlay_properties); - this.new_properties = {}; + _this.commitChanges(); 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({ - position: getRandomPosAroundMyAvatar(6), - url: CHRISTMAS_TREE_SPRITES_URL, - 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" -}); +var christmastree_loader = null; +christmastree_loader = new OverlayPreloader("billboard", + {url: CHRISTMAS_TREE_SPRITES_URL, alpha: 0}, function() { + for (var i = 0; i < NUM_OF_TREES; i++) { + var clonedOverlay = Overlays.cloneOverlay(christmastree_loader.overlay); + new SpriteBillboard({ + position: getRandomPosAroundMyAvatar(20), + 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({ - position: getRandomPosAroundMyAvatar(6), - url: SANTA_SPRITES_URL, - 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_left" -}); +var santa_loader = null; +santa_loader = new OverlayPreloader("billboard", + {url: SANTA_SPRITES_URL, alpha: 0}, function() { + for (var i = 0; i < NUM_OF_SANTAS; i++) { + var clonedOverlay = Overlays.cloneOverlay(santa_loader.overlay); + new SpriteBillboard({ + position: getRandomPosAroundMyAvatar(18, -1), + 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: (i % 2 == 0) ? "walk_left" : "walk_right" + }, clonedOverlay); + } + } +); -var santa = new SpriteBillboard({ - position: getRandomPosAroundMyAvatar(6), - url: SANTA_SPRITES_URL, - 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" -}); \ No newline at end of file +Script.scriptEnding.connect(function () { + Overlays.deleteOverlay(christmastree_loader.overlay); + Overlays.deleteOverlay(santa_loader.overlay); +});