We Keep Coding

Does have instagram masks specified UI to chage the 3d objects instead changing textures only?

So i have 3 different, which contains different 3d objects with special animations.
First is 3d objects rotating above the head and change the angle of orbit with our head shakes. The second one is falling 2d sprites all around character calling by eye closing. And the third one is simple facemesh with grid texture on it. Im draw special UI and code it, so in ArPlayer it works perfects, but when im try to upload it to facebook this UI not working and i have only mask number 1.
So im try to search the solution on Youtube and have only this, but this works only with texture changing i think. So my question is: Can i use instagram changing ui with my effects and if yes, how i can do this. Thaks a lot!
P.S: All images u can find.

Effects must not use custom buttons, keyboards, pickers or sliders - effects may use the native UI picker and slider only. (Spark AR Review Policies 2.6)
Using the Native UI picker, you can not only change textures, but also the visibility of objects.
Example:
Create a new project
Create several plane objects on the scene (for example 3 pieces) and name them obj0,
obj1, obj2 and make them invisible
In Capabilities add Native UI -> Picker
Add 3 textures to the project and name them icon_1, icon_2, icon_3 and check the "No compression" option for everyone
Add such a script
const NativeUI = require('NativeUI');
const Textures = require('Textures');
const Scene = require('Scene');
Promise.all([
Textures.findFirst('icon_1'),
Textures.findFirst('icon_2'),
Textures.findFirst('icon_3'),
Scene.root.findFirst('obj0'),
Scene.root.findFirst('obj1'),
Scene.root.findFirst('obj2')
]).then(onReady);
function onReady(assets) {
const texture0 = assets[0];
const texture1 = assets[1];
const texture2 = assets[2];
const objects = [assets[3],assets[4],assets[5]];
const picker = NativeUI.picker;
const index = 0;
const configuration = {
selectedIndex: index,
items: [
{image_texture: texture0},
{image_texture: texture1},
{image_texture: texture2}
]
};
picker.configure(configuration);
picker.visible = true;
picker.selectedIndex.monitor({fireOnInitialValue:true}).subscribe(function(index) {
objects[index.newValue].hidden = false;
if(index.oldValue != undefined)
{
objects[index.oldValue].hidden = true;
}
});
}
A similar official example is from developers, there they used Native UI picker (script) + patch to hide objects. Launch Spark AR Studio and create new project from template "3D Stickers" and watch how they did it. If you don’t have such a project template, update Spark AR Studio.

Phaser 3: destroying all instances of a sprite

So i'm trying to make my game unload a bunch of un-used resources. It's proving to be a lot more complicated. here's my code:
var meteor = this.physics.add.group();
this.physics.add.collider(meteor, sput, deathControl, null, this);
meteorSpawnFrequency = 500;
setInterval(spawnMeteor, meteorSpawnFrequency);
var meteorCap = 0;
function spawnMeteor() {
//Create Meteors
meteorCap++;
meteors = meteor.create(Math.floor(Math.random() *800) + 1, 30, "meteor");
//Edit Meteors
meteors.depth = -1;
meteors.setVelocityY(500);
meteors.setScale(Math.floor(Math.random() * 2) + 1);
meteors.setCollideWorldBounds(true);
//Destroy meteors after the cap reaches 10
if(meteorCap > 10){
meteors.destroy();
console.log("meteors destroyed");
meteorCap = 0;
}
}
I'm using an interval to spawn the sprites, and all of it works just fine. What I'm trying to do is set a cap that when 100 meteors are present, they'll get destroyed, and the cap gets set back to 0, to repeat this process.
Only problem is it's not working. How do I get this working?

Almost certainly a scope issue and there isn't enough source code shown to determine the root cause. But meteorCap looks dangerous like a local variable, so reading it from spawnMeteor isn't going to work.
Also, don't use setInterval, there is literally a TimerEvents feature built into the Phaser API for exactly this that is game-step safe and manages the scope context for you. Here is one such an example.

Sketch Plugin: How to programmatically make a layer exportable?

So, in Sketch, you can mark a layer/group as exportable.
And then the layer/group can be exported as .png/.svg/.pdf etc. I was trying to make a Sketch Plugin recently, where I need to mark a layer/group as exportable from code. A layer in code is represented using MSLayer and group is MSLayerGroup. The sketch documentation is not mature enough yet, so I used ClassDump to extract all the headers that has been used in the app. I have been looking for a method that might seem to do my job, but it has been days and am still out of luck. Can anybody please help me out in this regard?

Sketch supports slice and export to image. You can use - (void)saveArtboardOrSlice:(id)arg1 toFile:(id)arg2;
method of MSDocument.
This is almost how to do it.
var loopLayerChildren = [[layerToExport children] objectEnumerator],
rect = [MSSliceTrimming trimmedRectForSlice:layer],
useSliceLayer = false,
exportFilePath,
slice;
// Check for MSSliceLayer and overwrite the rect if present
while (layerChild = [loopLayerChildren nextObject]) {
if ([layerChild class] == 'MSSliceLayer') {
rect = [MSSliceTrimming trimmedRectForSlice:layerChild];
useSliceLayer = true;
}
}
slice = [MSExportRequest requestWithRect:rect scale:1];
if (!useSliceLayer) {
slice.shouldTrim = true;
}
// export to image file
[(this.document) saveArtboardOrSlice: slice toFile:exportFilePath];
Reference from #GeertWill's sketch-to-xcode-assets-catalog plugin.

Continuous animation with Angular JS and Snap SVG

I'm trying to get smooth continuous animation using AngularJS and Snap SVG. I thought I'd solved the problem; my animations run smoothly for several hours. But I left my solution running over the weekend in Chrome, Opera, Safari and Firefox (Internet Explorer cannot run it at all). When I came into work this morning Firefox and Opera had both crashed, and the pages on Chrome and Safari had both frozen.
My animation functions are as follows:
/* the centre of the hub in this drawing */
var hubCentre = "269, 367";
/* the time to complete an animation move */
var moveTime = 100;
/* the Angular module name I'm defining */
var turbineApp = angular.module('spinningTurbine', []);
/* the controller for that module */
turbineApp.controller('turbineController', ['$scope', function ($scope) {
$scope.speed = 0;
$scope.angle = 0;
$scope.height = 150;
/**
* rotate the element with the specified tag about the hub centre location
* to indicate the specified value.
*/
$scope.sweep = function( tag, angle) {
var elt = Snap(tag);
var directive = "r" + angle + ", " + hubCentre;
elt.animate({
transform: directive
}, moveTime);
}
function spinner() {
setTimeout( function() {
$scope.angle += parseFloat($scope.speed);
$scope.sweep( '#blades', $scope.angle);
spinner();
}, moveTime);
}
spinner();
}]);
My question is, does the JavaScript setTimeout() function consume resources (e.g. stack)? Or is Snap SVG consuming resources e.g. by continuously extending the transformation path?
Ideally I want this animation to run indefinitely, so I need either to work out what is causing the browsers to crash or else recode it using a different mechanism. Does Angular JS have other mechanisms for performing a non-terminating loop?

Would a better option be to use $interval()
$interval(function() {
... Do Cool Stuff Here
}, moveTime);
You will need to inject it into your controller..

Craftyjs Sprite Animation issue

I'm currently trying to make a game with crafty js and I'm stuck with the sprite Animation.
I don't really know what I'm doing wrong ..
Here is the working code :
http://aaahdontpaintmeinred.me.pn/
Here is how I load the sprite in my loading scene :
Crafty.scene('Loading', function(){
// Draw some text for the player to see in case the file
// takes a noticeable amount of time to load
Crafty.e('2D, DOM, Text')
.text('Loading...')
.attr({ x: 0, y: Game.height()/2 - 24, w: Game.width() });
// Load our sprite map image
Crafty.load(['assets/mansprite.gif'], function(){
// Once the image is loaded...
// Define the individual sprites in the image
// Each one (spr_tree, etc.) becomes a component
// These components' names are prefixed with "spr_"
// to remind us that they simply cause the entity
// to be drawn with a certain sprite
Crafty.sprite(133, 'assets/mansprite.gif', {
mansprite:[0, 0]
});
// Now that our sprites are ready to draw, start the game
Crafty.scene('LevelEditor');
})
})
And here is how I try to bind and Animate in my player component :
Crafty.c('PlayerCharacter', {
init: function() {
this.requires('Actor, Collision,FPS,mansprite,SpriteAnimation,WiredHitBox')
.attr({maxValues:1,boost:false,trailSpacing:100,currentFrame:0})
.collision();
this.animate('run',0, 0, 3);
this.animate('idle',3, 0, 1);
this.requires('FluidControls')
//this.rotation+=90;
.onHit("FinishLine",this.endLevel)
.onHit("DeathWall",this.omagaDie)
.onHit("Booster",this.booster)
.bind("EnterFrame",function(fps){
if(this.move.up)
{
this.animate('run', 4,-1);
var spacing = this.trailSpacing;
if( this.currentFrame%((60*spacing)/1000) == 0)
Crafty.e("montexte").spawn(this.x,this.y,this.boost,this.xspeed,this.yspeed,this.rotation%360,this.h,this.w);
}else
{
if(!this.move.down)
{
this.animate('idle', 4,1);
}
}
this.currentFrame++;
if(this.currentFrame >=60)
this.currentFrame=0
})
;
},
Hope someone could point out what is going wrong !
If you need more details or you have questions, don't hesistate !
Thanks

Ok, so I solved the problem by using the 0.5.3 version.
Still don't know what's going on. But will try to give an answer here.

Use the non minified version.
I was using Crafty v0.5.4 minified and sprite animation was not working, no errors in console log.
Then after several hours of struggling I tried with the non minified version and the sprite animation started to work properly.