Develop Reference

PhaserRexUI Plugin Not displaying

So I've been trying to use the RexRainbow Phaser UI plugin, and All the Ui i make is invisible for some reason, But when I draw boundaries, it draws them, leaving me with a bunch of red boxes. Why are they all invisible?
Code Here (Github Gist)
//UI
var tabs = this.rexUI.add
.tabs({
x: 400,
y: 1600,
panel: this.rexUI.add.gridTable({
background: this.rexUI.add.roundRectangle(
0,
0,
20,
10,
10,
0x4e342e
),
table: {
width: 250,
height: 400,
cellWidth: 120,
cellHeight: 60,
columns: 1,
mask: {
padding: 2,
},
},
slider: {
//scroll bar
track: this.rexUI.add.roundRectangle(
0,
0,
20,
10,
10,
this.COLOR_DARK
),
thumb: this.rexUI.add.roundRectangle(
0,
0,
5,
40,
10,
this.COLOR_LIGHT
),
}
.layout()
.drawBounds(this.add.graphics(), 0xff0000); //debug for ui
https://codepen.io/vatsadev/pen/dyqGNBG -> full working example

It is hard too say, but I just can assume, that the reason is, that the color's used (that are not visible) are probally undefined and that's why transparent/invisible.
Without knowing the whole code, it is best to check, the variables/properties used for colors (like: this.COLOR_LIGHT, this.COLOR_DARK, ...)
Especially line 62, since here the this context is local to the tabs- object, and is not the scene object.
Tipp: for debugging purposes, I would hardcode all colors, just to see if the setup works, as intended. If so start replacing the hardcoded values with variables, like this you will find the culprit fast.
document.body.style = 'margin:0;';
const COLOR_PRIMARY = 0x4e342e;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x260e04;
var config = {
type: Phaser.AUTO,
width: 536,
height: 283,
scene: {
preload,
create
}
};
var isLeaking = false;
function preload (){
this.load.image('tiles', 'https://labs.phaser.io/assets/tilemaps/tiles/catastrophi_tiles_16.png');
this.load.tilemapCSV('map', 'https://labs.phaser.io/assets/tilemaps/csv/catastrophi_level2.csv');
this.load.scenePlugin({
key: "rexuiplugin",
url: "https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js",
sceneKey: "rexUI",
});
}
function create () {
let map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16 });
let tileset = map.addTilesetImage('tiles');
let fgLayer = map.createLayer(0, tileset, 0, 0);
createUi(this);
updateMap(map);
}
function updateMap (map) {
let originPoint1 = map.getTileAtWorldXY(200, 100);
console.info(map.layers.sort((a,b) => b.depth - a.depth))
map.forEachTile(function (tile) {
var dist = Phaser.Math.Distance.Chebyshev(
originPoint1.x,
originPoint1.y,
tile.x,
tile.y
);
tile.setAlpha(1 - 0.09 * dist);
});
}
function createDataBase () {
var inventory = ['grass', 2, 'dirt', 3, 'wood', 2, 'leaves', 2, ]
// Create the database
var db = new loki();
// Create a collection
var items = db.addCollection("items");
// Insert documents
for (var i = 0; i < inventory.length; i+=2) {
items.insert({
blockType: inventory[i],
quantity: inventory[i+1],
color: Phaser.Math.Between(0, 0xffffff),
});
}
return items;
};
function createUi(scene){
var db = createDataBase();
var tabs = scene.rexUI.add
.tabs({
x: 250,
y: 250,
panel: scene.rexUI.add.gridTable({
background: scene.rexUI.add.roundRectangle(
0,
0,
20,
10,
10,
COLOR_PRIMARY
),
table: {
width: 250,
height: 400,
cellWidth: 120,
cellHeight: 60,
columns: 1,
mask: {
padding: 2,
},
},
slider: { //scroll bar
track: scene.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
thumb: scene.rexUI.add.roundRectangle(0, 0, 5, 40, 10, COLOR_LIGHT),
},
createCellContainerCallback: function (cell) { // each inventory cell
var scene = cell.scene;
var width = 250;
var height = cell.height;
var item = cell.item;
var index = cell.index;
return scene.rexUI.add.label({
width: width,
height: height,
background: scene.rexUI.add
.roundRectangle(0, 0, 20, 20, 0)
.setStrokeStyle(2, COLOR_DARK),
icon: scene.rexUI.add.roundRectangle( // inventory item texture goes here
0,
0,
20,
20,
10,
item.color
),
text: scene.add.text(0, 0, `${item.blockType}: ${item.quantity}`),
space: {
icon: 10,
left: 15,
},
});
},
}),
leftButtons: [
createButton(scene, 2, "Inv."),
],
space: {
leftButtonsOffset: 20,
leftButton: 1,
},
})
.layout()
.drawBounds(scene.add.graphics(), 0xff0000);
tabs.on(
"button.click",
function () {
// Load items into grid table
var items = db
.chain()
.data();
this.getElement("panel").setItems(items).scrollToTop();
},
tabs
);
tabs.emitButtonClick("left", 0);
}
function createButton (scene, direction, text) {
var radius;
switch (direction) {
case 0: // Right
radius = {
tr: 20,
br: 20,
};
break;
case 2: // Left
radius = {
tl: 20,
bl: 20,
};
break;
}
return scene.rexUI.add.label({
width: 50,
height: 40,
background: scene.rexUI.add.roundRectangle(
0,
0,
50,
50,
radius,
COLOR_DARK
),
text: scene.add.text(0, 0, text, {
fontSize: "18pt",
}),
space: {
left: 10,
},
});
};
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lokijs/1.5.5/lokijs.min.js"></script>

How can I render circles around rectangle in Konva js?

I need to render table and chairs like in this picture:
I dont know how to calculate position of circles around rect. I tried some code, but its not working...Anybody knows how to solve it?
Check my code:
let smallCircleRadius = 20
let tableSize = {
width: ((seats-4/2)*(smallCircleRadius)),
height: ((seats-4/2)*(smallCircleRadius))
}
let controlY = 0
let totalCircleSide = (seats-4)/2
let controlX = 0
let distanceY = 0
let distanceX = 0
let table = new Konva.Rect({
width: tableSize.width,
height: tableSize.height,
fill: '#fff',
stroke: '#c3c6cf',//'#b2cfcf',
strokeWidth: 8,
x:150,
y: 150
});
let count = 0
group.add(table)
for (var i = 0; i < seats; i++) {
// let distanceToTable = tableSize.width/2;
// let x = i <= 2 ? table.x() + distanceToTable * i + (smallCircleRadius + 8) : count > totalCircleSide ? distanceToTable + distanceX+smallCircleRadius: controlX
// let y = i < 2 ? table.y() - distanceToTable/2: count > totalCircleSide ? controlY : distanceToTable + distanceY*smallCircleRadius
//let x = table.x()
//let y = table.y()
group.add(new Konva.Circle({ radius: smallCircleRadius, fill: '#d2d6df', stroke: '#c3c6cf',strokeWidth: 3, x, y }));
}

Make yourself a simple model that describes the position of the circles in simple relationship of circles to the table. Something like this can be extended via different models to accommodate other table layouts as the description of the layout is entirely in the model data.
const
// Set up a canvas stage
containerEle = document.getElementById('container'),
stage = new Konva.Stage({
container: "container",
size: {
width: containerEle.offsetWidth,
height: containerEle.offsetHeight
}
}),
layer = new Konva.Layer();
stage.add(layer);
const model = {
table: {
x: 100,
y: 100,
width: 200,
height: 400,
fill: 'black',
stroke: 'silver',
strokeWidth: 5
},
seat: {
radius: 40,
fill: 'white',
stroke: 'silver',
strokeWidth: 5,
gap: 20
},
seats: [{
name: "Seat 1",
x: "25%",
y: "-1r"
},
{
name: "Seat 2",
x: "75%",
y: "-1r"
},
{
name: "Seat 3",
tableX: 1,
tableY: 0,
x: "1r",
y: "16.6%"
},
{
name: "Seat 4",
tableX: 1,
tableY: 0,
x: "1r",
y: "50%"
},
{
name: "Seat 5",
tableX: 1,
tableY: 0,
x: "1r",
y: "83.3%"
},
{
name: "Seat 6",
tableX: 0,
tableY: 1,
x: "75%",
y: "1r"
},
{
name: "Seat 7",
tableX: 0,
tableY: 1,
x: "25%",
y: "1r"
},
]
}
// make the table
const table = new Konva.Rect(model.table);
layer.add(table)
for (const seat of model.seats) {
const seatShape = new Konva.Circle(model.seat);
let tablePos = {
x: seat.tableX && seat.tableX === 1 ? model.table.x + model.table.width : model.table.x,
y: seat.tableY && seat.tableY === 1 ? model.table.y + model.table.height : model.table.y
}
let position = {
x: tablePos.x + getPosComponent(seat.x, model.seat.radius, model.table.width, model.seat.gap),
y: tablePos.y + getPosComponent(seat.y, model.seat.radius, model.table.height, model.seat.gap)
}
seatShape.position(position)
layer.add(seatShape);
}
function getPosComponent(val, radius, size, gap) {
if (val.indexOf('r') > 0) {
let num = parseInt(val),
sign = Math.sign(num);
return sign * ((Math.abs(num) * radius) + gap);
} else if (val.indexOf('%') > 0) {
let num = parseFloat(val),
sign = Math.sign(num);
return sign * (size * num / 100);
}
throw new Error("Unexpected val format " + val);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<script src="https://unpkg.com/konva#8/konva.min.js"></script>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

Implementing bullet collisions in Matter.js for a shooting game

I am trying to make a shooting game in matter.js but can't find a way to shoot bullets from the player's exact location and how to count the collision between player and bullet but not with the walls.
I want to fire a bullet from player1 and then on pressing D again it should fire another bullet from the player1's last position.
My Codepen of this game
let p1= Matter.Bodies.polygon(200, 200, 3, 40, {
chamfer: {
radius: [15,10,15]
},
isStatic: false,
inertia: Infinity,
friction: 0.9,
render: {
fillStyle: '#F9ED69'
},
mass:1
});
let p2 = Matter.Bodies.polygon(1100, 200, 3, 40, {
chamfer: {
radius: [15,10,15]
},
isStatic: false,
inertia: Infinity,
friction: 0.9,
render: {
fillStyle: '#11999E'
},
mass:1
});
let bullet1 = Matter.Bodies.polygon(400, 300, 3, 7, {
chamfer: {
radius: [4,2,4]
},
isStatic: false,
inertia: Infinity,
friction: 0.9,
render: {
fillStyle: '#F9ED69'
},
mass:0
});
const keyHandlers = {
KeyS: () => {
Matter.Body.applyForce(p1, {
x: p1.position.x,
y: p1.position.y
}, {x: 0.0, y: 0.001})
},
KeyW: () => {
Matter.Body.applyForce(p1, {
x: p1.position.x,
y: p1.position.y
}, {x: 0.0, y: -0.002})
},
KeyD:()=>{
Matter.Body.applyForce(bullet1, {
x: p1.position.x,
y: p1.position.y
}, {x: 0.001, y: 0.0})
},
};
const keysDown = new Set();
document.addEventListener("keydown", event => {
keysDown.add(event.code);
});
document.addEventListener("keyup", event => {
keysDown.delete(event.code);
});
Matter.Events.on(engine, "beforeUpdate", event => {
[...keysDown].forEach(k => {
keyHandlers[k]?.();
});
});
// on collision of a bullet with wall and other bodies remove the bullet from the world after some delay and add the score
let score1 = 0;
let score2 = 0;
let health
Matter.Events.on(engine, "collisionStart", event => {
for (let i = 0; i < event.pairs.length; i++) {
const pair = event.pairs[i];
if (pair.bodyA === bullet1 || pair.bodyB === bullet1) {
Matter.World.remove(engine.world, bullet1);
alert('1');
}
if (pair.bodyA === bullet2 || pair.bodyB === bullet2) {
Matter.World.remove(engine.world, bullet2);
alert('2');
}
}
score1++;
alert(`SCore1 is ${score1}`); // these alerts are just to confirm the collision
});

You're on the right track, but if you hardcode bullet1 and bullet2 you're stuck with just those two bullets. Even with a fixed number of bullets and re-using the bodies (good for performance but maybe premature optimization), I'd probably use an array to store these bullets, which is almost always the correct move after you catch yourself doing thing1, thing2...
Here's a proof of concept. I'm creating and destroying bullets here to keep the coding easier, but it'd be more performant to keep a pool of objects and re-use/re-position them.
I'm also using sets to keep track of the types of the bodies, but you might want to use labels. Most of the code here could go in many different directions, specific to your use case.
const engine = Matter.Engine.create();
engine.gravity.y = 0; // enable top-down
const map = {width: 300, height: 300};
const render = Matter.Render.create({
element: document.body,
engine,
options: {...map, wireframes: false},
});
const player = {
score: 0,
body: Matter.Bodies.polygon(
map.width / 2, map.height / 2, 3, 15, {
frictionAir: 0.06,
density: 0.9,
render: {fillStyle: "red"},
},
),
lastShot: Date.now(),
cooldown: 150,
fireForce: 0.1,
rotationAngVel: 0.03,
rotationAmt: 0.03,
rotateLeft() {
Matter.Body.rotate(this.body, -this.rotationAmt);
Matter.Body.setAngularVelocity(
this.body, -this.rotationAngVel
);
},
rotateRight() {
Matter.Body.rotate(this.body, this.rotationAmt);
Matter.Body.setAngularVelocity(
this.body, this.rotationAngVel
);
},
fire() {
if (Date.now() - this.lastShot < this.cooldown) {
return;
}
// move the bullet away from the player a bit
const {x: bx, y: by} = this.body.position;
const x = bx + (Math.cos(this.body.angle) * 10);
const y = by + (Math.sin(this.body.angle) * 10);
const bullet = Matter.Bodies.circle(
x, y, 4, {
frictionAir: 0.006,
density: 0.1,
render: {fillStyle: "yellow"},
},
);
bullets.add(bullet);
Matter.Composite.add(engine.world, bullet);
Matter.Body.applyForce(
bullet, this.body.position, {
x: Math.cos(this.body.angle) * this.fireForce,
y: Math.sin(this.body.angle) * this.fireForce,
},
);
this.lastShot = Date.now();
},
};
const bullets = new Set();
const makeEnemy = () => Matter.Bodies.polygon(
(Math.random() * (map.width - 40)) + 20,
(Math.random() * (map.height - 40)) + 20,
5, 6, {
render: {
fillStyle: "transparent",
strokeStyle: "white",
lineWidth: 1,
},
},
);
const enemies = new Set([...Array(100)].map(makeEnemy));
const walls = new Set([
Matter.Bodies.rectangle(
0, map.height / 2, 20, map.height, {isStatic: true}
),
Matter.Bodies.rectangle(
map.width / 2, 0, map.width, 20, {isStatic: true}
),
Matter.Bodies.rectangle(
map.width, map.height / 2, 20, map.height, {isStatic: true}
),
Matter.Bodies.rectangle(
map.width / 2, map.height, map.width, 20, {isStatic: true}
),
]);
Matter.Composite.add(engine.world, [
player.body, ...walls, ...enemies
]);
const keyHandlers = {
ArrowLeft: () => player.rotateLeft(),
ArrowRight: () => player.rotateRight(),
Space: () => player.fire(),
};
const validKeys = new Set(Object.keys(keyHandlers));
const keysDown = new Set();
document.addEventListener("keydown", e => {
if (validKeys.has(e.code)) {
e.preventDefault();
keysDown.add(e.code);
}
});
document.addEventListener("keyup", e => {
if (validKeys.has(e.code)) {
e.preventDefault();
keysDown.delete(e.code);
}
});
Matter.Events.on(engine, "beforeUpdate", event => {
[...keysDown].forEach(k => {
keyHandlers[k]?.();
});
if (enemies.size < 100 && Math.random() > 0.95) {
const enemy = makeEnemy();
enemies.add(enemy);
Matter.Composite.add(engine.world, enemy);
}
});
Matter.Events.on(engine, "collisionStart", event => {
for (const {bodyA, bodyB} of event.pairs) {
const [a, b] = [bodyA, bodyB].sort((a, b) =>
bullets.has(a) ? -1 : 1
);
if (bullets.has(a) && walls.has(b)) {
Matter.Composite.remove(engine.world, a);
bullets.delete(a);
}
else if (bullets.has(a) && enemies.has(b)) {
Matter.Composite.remove(engine.world, a);
Matter.Composite.remove(engine.world, b);
bullets.delete(a);
enemies.delete(b);
document.querySelector("span").textContent = ++player.score;
}
}
});
Matter.Render.run(render);
Matter.Runner.run(Matter.Runner.create(), engine);
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<div>press left/right arrow keys to rotate and space to shoot</div>
<div>score: <span>0</span></div>

THREE.js, I don't know why not rendering obj files

I'm making obj loader in react view button clicked, I want to see obj file in modal component.This object loader component get url to modal component.
console.log is correct.This loader is get url other component.
Group {uuid: "0C86CC1D-E795-4191-A62A-72DF4A433CEB", name: "", type:
"Group", parent: null, children: Array(8), …} castShadow:
falsechildren: (8) [Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh,
Mesh]frustumCulled: truelayers: Layers {mask: 1}materialLibraries:
["patient.mtl"]matrix: Matrix4 {elements: Array(16)}matrixAutoUpdate:
truematrixWorld: Matrix4 {elements: Array(16)}matrixWorldNeedsUpdate:
falsename: ""parent: Scene {uuid:
"873E8718-F1B0-47B5-AC77-DC1B334B3637", name: "", type: "Scene",
parent: null, children: Array(5), …}position: Vector3 {x: 0, y: 0, z:
0}quaternion: Quaternion {_x: 0, _y: 0, _z: 0, _w: 1,
_onChangeCallback: ƒ}receiveShadow: falserenderOrder: 0rotation: Euler {_x: 0, _y: 0, _z: 0, _order: "XYZ", _onChangeCallback: ƒ}scale:
Vector3 {x: 0.07, y: 0.07, z: 0.07}type: "Group"up: Vector3 {x: 0, y:
1, z: 0}userData: {}uuid:
"0C86CC1D-E795-4191-A62A-72DF4A433CEB"visible: trueeulerOrder:
(...)id: 18modelViewMatrix: Matrix4 {elements: Array(16)}normalMatrix:
Matrix3 {elements: Array(9)} useQuaternion: (...)proto: Object3D
(8) [Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh]
Scene {uuid: "873E8718-F1B0-47B5-AC77-DC1B334B3637", name: "", type:
"Scene", parent: null, children: Array(5), …}
CODE
import React, { Component } from "react";
import * as THREE from "three";
import OBJLoader from "three-obj-loader";
import OrbitControls from "three-orbitcontrols";
OBJLoader(THREE);
let scene;
class ObjectLoader extends Component {
componentDidMount() {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, width / height, 1, 2000);
this.camera.position.z = 250;
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setClearColor("#263238");
this.renderer.setSize(width, height);
this.mount.appendChild(this.renderer.domElement);
const geometry = new THREE.BoxGeometry(5, 5, 5);
const material = new THREE.MeshBasicMaterial({
color: "#0F0",
wireframe: true
});
this.cube = new THREE.Mesh(geometry, material);
scene.add(this.cube);
const controls = new OrbitControls(this.camera, this.renderer.domElement);
//LIGHTS
var lights = [];
lights[0] = new THREE.PointLight(0x304ffe, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(-100, -200, -100);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);
// load Object
loadObj(this.props.url);
}
componentWillUnmount() {
this.stop();
this.mount.removeChild(this.renderer.domElement);
}
start = () => {
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate);
}
};
stop = () => {
cancelAnimationFrame(this.frameId);
};
animate = () => {
this.renderScene();
this.frameId = window.requestAnimationFrame(this.animate);
};
renderScene = () => {
if (this.renderer) this.renderer.render(scene, this.camera);
};
onLoad = () => {
this.renderScene();
//start animation
this.start();
};
onProgress = xhr => {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
};
// Function called when download errors
onError = error => {
console.log("An error happened" + error);
};
render() {
return (
<div
style={{ width: "500px", height: "500px" }}
ref={mount => {
this.mount = mount;
}}
/>
);
}
}
function loadObj(url) {
const objLoader = new THREE.OBJLoader();
objLoader.load(
url,
function(object) {
console.log(object, object.children);
let mesh = object;
scene.add(object);
console.log(scene);
mesh.position.set(0, 0, 0);
mesh.scale.set(0.07, 0.07, 0.07);
},
function(xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
function(error) {
console.log("An error happened" + error);
});
}
export default ObjectLoader;

deck.gl + tripslayer without react.js

How can I enable animation of TripsLayer without react? TripsLayer example uses React and I really don't know, how to convert it to pure js. Please look at "animate" function in the code below. I tried to update state of layer but it doesn't work (there is no animation of TripsLayer). I don't know, where should I assign "time" variable.
Demo of TripsLayer: https://deck.gl/#/examples/custom-layers/trip-routes
React version my code: https://github.com/uber/deck.gl/blob/master/examples/website/trips/app.js
Docs for TripsLayer: https://github.com/uber/deck.gl/tree/master/modules/experimental-layers/src/trips-layer
My code:
import {MapboxLayer} from '#deck.gl/mapbox';
import {TripsLayer} from '#deck.gl/experimental-layers';
import mapboxgl from 'mapbox-gl';
class App
{
constructor()
{
this.stateInfo = { time: 600 };
}
get state()
{
return this.stateInfo;
}
animate() {
var loopLength = 18000; // unit corresponds to the timestamp in source data
var animationSpeed = 30; // unit time per second
const timestamp = Date.now() / 1000;
const loopTime = loopLength / animationSpeed;
var time = Math.round(((timestamp % loopTime) / loopTime) * loopLength);
// HOW SHOULD I USE time VARIABLE???
window.requestAnimationFrame(this.animate.bind(this));
}
}
var obido = new App();
var tripsLayerObido = new TripsLayer({
id: 'trips',
data: 'trips/tripsKR.json',
getPath: d => d.segments,
getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
opacity: 0.6,
strokeWidth: 30,
trailLength: 180,
currentTime: obido.state.time
});
const LIGHT_SETTINGS = {
lightsPosition: [-74.05, 40.7, 8000, -73.5, 41, 5000],
ambientRatio: 0.05,
diffuseRatio: 0.6,
specularRatio: 0.8,
lightsStrength: [2.0, 0.0, 0.0, 0.0],
numberOfLights: 2
};
export const INITIAL_VIEW_STATE = {
longitude: 19.93,
latitude: 50.03,
zoom: 12.8,
maxZoom: 19,
pitch: 60,
bearing: 0
};
mapboxgl.accessToken = "XXX";
const map = new mapboxgl.Map({
container: 'app',
style: 'mapbox://styles/elninopl/cjnlge6rl094w2so70l1cf8y5',
center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
zoom: INITIAL_VIEW_STATE.zoom,
pitch: INITIAL_VIEW_STATE.pitch,
layers: [tripsLayerObido]
});
map.on('load', () => {
obido.animate(0);
});

Please try setProps, which makes my trips layer updates:
this.tripsLayer.setProps({ currentTime: this.currentTime });

yes,it works.
function animate(timestamp) {
var timestamp = Date.now() / 1000;
var loopTime = loopLength / animationSpeed;
curtime= ((timestamp % loopTime) / loopTime) * loopLength;
requestAnimationFrame(animate);
tripLayer.setProps({ currentTime: curtime });
}

I'm a bit late here, but here there is an example of using deck.gl TripsLayer with the Scripting API (without React).
<script src="https://unpkg.com/deck.gl#^8.4.0/dist.min.js"></script>
<script src="https://unpkg.com/#deck.gl/carto#^8.4.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
<link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />
<div id="map" style="width: 100vw; height: 100vh"></div>
const ambientLight = new deck.AmbientLight({
color: [255, 255, 255],
intensity: 1.0
});
const pointLight = new deck.PointLight({
color: [255, 255, 255],
intensity: 2.0,
position: [-74.05, 40.7, 8000]
});
const lightingEffect = new deck.LightingEffect({ ambientLight, pointLight });
const material = {
ambient: 0.1,
diffuse: 0.6,
shininess: 32,
specularColor: [60, 64, 70]
};
const theme = {
buildingColor: [74, 80, 87],
trailColor0: [253, 128, 93],
trailColor1: [23, 184, 190],
material,
effects: [lightingEffect]
};
const LOOP_LENGTH = 1800;
const ANIMATION_SPEED = 0.4;
async function initialize() {
deck.carto.setDefaultCredentials({
username: 'public',
apiKey: 'default_public',
});
// Fetch Data from CARTO
// Notice that you can use any Deck.gl layer with CARTO datasets getting GeoJSON data from CARTO's API. This method is recommended for complex layers with datasets below 50Mb
const tripsUrl = 'https://public.carto.com/api/v2/sql?q=SELECT the_geom, vendor, timestamps FROM sf_trips_v7&format=geojson';
const geojsonTripsData = await fetch(tripsUrl).then(response => response.json());
// TripsLayer needs data in the following format
const layerData = geojsonTripsData.features.map(f => ({
vendor: f.properties.vendor,
timestamps: f.properties.timestamps,
path: f.geometry.coordinates[0]
}));
const staticLayers = [
// This is only needed when using shadow effects
new deck.PolygonLayer({
id: 'ground-layer',
data: [[[-74.0, 40.7], [-74.02, 40.7], [-74.02, 40.72], [-74.0, 40.72]]],
getPolygon: f => f,
stroked: false,
getFillColor: [0, 0, 0, 0]
}),
new deck.carto.CartoSQLLayer({
id: 'buildings-layer',
data: 'SELECT the_geom_webmercator, height FROM sf_buildings',
extruded: true,
wireframe: true,
opacity: 0.5,
getElevation: f => f.properties.height,
getFillColor: [74, 80, 87],
material: theme.material
})
];
// Create Deck.GL map
const deckgl = new deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
initialViewState: {
longitude: -74,
latitude: 40.73,
zoom: 12,
pitch: 45,
bearing: 0
},
controller: true,
layers: staticLayers,
effects: theme.effects
});
let time = 0;
function animate() {
time = (time + ANIMATION_SPEED) % LOOP_LENGTH;
window.requestAnimationFrame(animate);
}
setInterval(() => {
deckgl.setProps({
layers: [
...staticLayers,
new deck.TripsLayer({
id: 'trips-layer',
data: layerData,
getPath: d => d.path,
getTimestamps: d => d.timestamps,
getColor: d => (d.vendor === 0 ? theme.trailColor0 : theme.trailColor1),
opacity: 0.3,
widthMinPixels: 2,
rounded: true,
trailLength: 180,
currentTime: time,
shadowEnabled: false
})
]
});
}, 50);
window.requestAnimationFrame(animate);
}
initialize();