matrix-engine-wgpu 1.0.5 → 1.1.0

package/src/engine/utils.js

@@ -523,7 +523,7 @@ export function randomIntFromTo(min, max) {
   }
 }
 
-export var QueryString = (function() {
+export var urlQuery = (function() {
   var query_string = {};
   var query = window.location.search.substring(1);
   var vars = query.split('&');
@@ -543,17 +543,18 @@ export var QueryString = (function() {
 
 
 export function getAxisRot(q1) {
-  var x,y,z;
+  var x, y, z;
 
   // if w>1 acos and sqrt will produce errors, this cant happen if quaternion is normalised
-  if (q1.w > 1) q1.normalise(); 
+  if(q1.w > 1) q1.normalise();
   var angle = 2 * Math.acos(q1.w);
   // assuming quaternion normalised then w is less than 1, so term always positive.
-  var s = Math.sqrt(1-q1.w*q1.w); 
-   // test to avoid divide by zero, s is always positive due to sqrt
-  if (s < 0.001) {
+  var s = Math.sqrt(1 - q1.w * q1.w);
+  // test to avoid divide by zero, s is always positive due to sqrt
+  if(s < 0.001) {
     // if s close to zero then direction of axis not important
-     // if it is important that axis is normalised then replace with x=1; y=z=0;
+    // if it is important that axis is normalised then replace with x=1; y=z=0;
+
     x = q1.x;
     y = q1.y;
     z = q1.z;
@@ -562,12 +563,53 @@ export function getAxisRot(q1) {
     y = q1.y / s;
     z = q1.z / s;
   }
-  return [radToDeg(x),radToDeg(y), radToDeg(z)]
+  return [radToDeg(x), radToDeg(y), radToDeg(z)]
+}
+
+export function getAxisRot2(targetAxis, Q) {
+  Q.normalize(); // if w>1 acos and sqrt will produce errors, this cant happen if quaternion is normalised
+  var angle = 2 * Math.acos(Q.w());
+  var s = Math.sqrt(1 - Q.w() * Q.w()); // assuming quaternion normalised then w is less than 1, so term always positive.
+  if(s < 0.001) { // test to avoid divide by zero, s is always positive due to sqrt
+    // if s close to zero then direction of axis not important
+    // if it is important that axis is normalised then replace with x=1; y=z=0;
+    // targetAxis.x = 1;
+    // targetAxis.y = 0;
+    // targetAxis.z = 0;
+    targetAxis.x = Q.x();
+    targetAxis.y = Q.y();
+    targetAxis.z = Q.z();
+  } else {
+    targetAxis.x = Q.x() / s; // normalise axis
+    targetAxis.y = Q.y() / s;
+    targetAxis.z = Q.z() / s;
+  }
+  return [targetAxis, angle];
+}
+
+export function getAxisRot3(Q) {
+
+  var angle = Math.acos(Q.w) * 2;
+  var axis = {};
+
+  if(Math.sin(Math.acos(angle)) > 0) {
+
+    axis.x = Q.x / Math.sin(Math.acos(angle / 2));
+    axis.y = Q.y / Math.sin(Math.acos(angle / 2));
+    axis.z = Q.z / Math.sin(Math.acos(angle / 2));
+
+  } else {
+    axis.x = 0;
+    axis.y = 0;
+    axis.z = 0;
+  }
+
+  return axis;
 }
 
 // NTO TESTED
 export function quaternion_rotation_matrix(Q) {
-    
+
   // Covert a quaternion into a full three-dimensional rotation matrix.
 
   // Input
@@ -583,26 +625,98 @@ export function quaternion_rotation_matrix(Q) {
   var q1 = Q[1]
   var q2 = Q[2]
   var q3 = Q[3]
-   
+
   // # First row of the rotation matrix
   var r00 = 2 * (q0 * q0 + q1 * q1) - 1
   var r01 = 2 * (q1 * q2 - q0 * q3)
   var r02 = 2 * (q1 * q3 + q0 * q2)
-   
+
   // # Second row of the rotation matrix
   var r10 = 2 * (q1 * q2 + q0 * q3)
   var r11 = 2 * (q0 * q0 + q2 * q2) - 1
   var r12 = 2 * (q2 * q3 - q0 * q1)
-   
+
   // # Third row of the rotation matrix
   var r20 = 2 * (q1 * q3 - q0 * q2)
   var r21 = 2 * (q2 * q3 + q0 * q1)
   var r22 = 2 * (q0 * q0 + q3 * q3) - 1
-   
+
   // # 3x3 rotation matrix
   var rot_matrix = [[r00, r01, r02],
-                         [r10, r11, r12],
-                         [r20, r21, r22]]
+  [r10, r11, r12],
+  [r20, r21, r22]]
 
   return rot_matrix;
+}
+
+// copnsole log graphics
+export const LOG_WARN = 'background: gray; color: yellow; font-size:10px';
+export const LOG_INFO = 'background: green; color: white; font-size:11px';
+export const LOG_MATRIX = "font-family: stormfaze;color: #lime; font-size:11px;text-shadow: 2px 2px 4px orangered;background: black;";
+export const LOG_FUNNY = "font-family: stormfaze;color: #f1f033; font-size:14px;text-shadow: 2px 2px 4px #f335f4, 4px 4px 4px #d64444, 2px 2px 4px #c160a6, 6px 2px 0px #123de3;background: black;";
+export const LOG_FUNNY_SMALL = "font-family: stormfaze;color: #f1f033; font-size:10px;text-shadow: 2px 2px 4px #f335f4, 4px 4px 4px #d64444, 1px 1px 2px #c160a6, 3px 1px 0px #123de3;background: black;";
+
+export function genName(length) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for(let i = 0;i < length;i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
+
+export let mb = {
+  root: () => byId('msgBox'),
+  pContent: () => byId('not-content'),
+  copy: function() {
+    navigator.clipboard.writeText(mb.root().children[0].innerText);
+  },
+  c: 0, ic: 0, t: {},
+  setContent: function(content, t) {
+    var iMsg = document.createElement('div');
+    iMsg.innerHTML = content;
+    iMsg.id = `msgbox-loc-${mb.c}`;
+    mb.root().appendChild(iMsg);
+    iMsg.classList.add('animate1')
+    if(t == 'ok') {
+      iMsg.style = 'font-family: stormfaze;color:white;padding:7px;margin:2px';
+    } else {
+      iMsg.style = 'font-family: stormfaze;color:white;padding:7px;margin:2px';
+    }
+  },
+  kill: function() {
+    mb.root().remove();
+  },
+  show: function(content, t) {
+    mb.setContent(content, t);
+    mb.root().style.display = "block";
+    var loc2 = mb.c;
+    setTimeout(function() {
+      byId(`msgbox-loc-${loc2}`).classList.remove("fadeInDown");
+      byId(`msgbox-loc-${loc2}`).classList.add("fadeOut");
+      setTimeout(function() {
+        byId(`msgbox-loc-${loc2}`).style.display = "none";
+        byId(`msgbox-loc-${loc2}`).classList.remove("fadeOut");
+
+        byId(`msgbox-loc-${loc2}`).remove();
+        mb.ic++;
+        if(mb.c == mb.ic) {
+          mb.root().style.display = 'none';
+        }
+      }, 1000)
+    }, 3000);
+    mb.c++;
+  },
+  error: function(content) {
+    mb.root().classList.remove("success")
+    mb.root().classList.add("error")
+    mb.root().classList.add("fadeInDown");
+    mb.show(content, 'err');
+  },
+  success: function(content) {
+    mb.root().classList.remove("error")
+    mb.root().classList.add("success")
+    mb.root().classList.add("fadeInDown");
+    mb.show(content, 'ok');
+  }
 }

package/src/multilang/lang.js

@@ -0,0 +1,35 @@
+import {LOG_MATRIX} from "../engine/utils";
+
+export class MultiLang {
+
+  constructor() {
+    addEventListener('updateLang', () => {
+      console.log('Multilang updated.')
+      this.update();
+    })
+  }
+
+  update = function() {
+    var allTranDoms = document.querySelectorAll('[data-label]');
+    allTranDoms.forEach((i) => {
+      i.innerHTML = this.get[i.getAttribute('data-label')]
+    })
+  }
+
+  loadMultilang = async function(lang = 'en') {
+    lang = 'res/multilang/' + lang + '.json';
+    console.info(`%cMultilang: ${lang}` , LOG_MATRIX);
+    try {
+      const r = await fetch(lang, {
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        }
+      });
+      return await r.json()
+    } catch(err) {
+      console.warn('Not possible to access multilang json asset! Err => ', err);
+      return {}
+    }
+  }
+}

package/src/physics/matrix-ammo.js

@@ -1,5 +1,5 @@
-import {vec3, vec4} from "wgpu-matrix";
-import {createAppEvent, getAxisRot, quaternion_rotation_matrix, scriptManager} from "../engine/utils";
+// import {vec3} from "wgpu-matrix";
+import {LOG_FUNNY, degToRad, quaternion_rotation_matrix, radToDeg, scriptManager} from "../engine/utils";
 
 export default class MatrixAmmo {
   constructor() {
@@ -11,25 +11,28 @@ export default class MatrixAmmo {
       undefined,
       this.init,
     );
+
+    this.lastRoll = '';
+    this.presentScore = '';
   }
 
   init = () => {
-    // start
+    // console.log('pre ammo')
     Ammo().then(Ammo => {
       // Physics variables
       this.dynamicsWorld = null;
       this.rigidBodies = [];
       this.Ammo = Ammo;
       this.lastUpdate = 0
-      console.log("Ammo core loaded.");
+      console.log("%c Ammo core loaded.", LOG_FUNNY);
       this.initPhysics();
-      dispatchEvent(new CustomEvent('AmmoReady', {}))
+      // simulate async
+      setTimeout(() => dispatchEvent(new CustomEvent('AmmoReady', {})), 100);
     });
   };
 
   initPhysics() {
     let Ammo = this.Ammo;
-
     // Physics configuration
     var collisionConfiguration = new Ammo.btDefaultCollisionConfiguration(),
       dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration),
@@ -37,57 +40,231 @@ export default class MatrixAmmo {
       solver = new Ammo.btSequentialImpulseConstraintSolver();
 
     this.dynamicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);
-
     this.dynamicsWorld.setGravity(new Ammo.btVector3(0, -10, 0));
 
-    var groundShape = new Ammo.btBoxShape(new Ammo.btVector3(50, 2, 50)),
+    var groundShape = new Ammo.btBoxShape(new Ammo.btVector3(70, 1, 70)),
       groundTransform = new Ammo.btTransform();
     groundTransform.setIdentity();
-    groundTransform.setOrigin(new Ammo.btVector3(0, -1, 0));
+    groundTransform.setOrigin(new Ammo.btVector3(0, -4.45, 0));
     var mass = 0,
       isDynamic = (mass !== 0),
       localInertia = new Ammo.btVector3(0, 0, 0);
 
-    if(isDynamic)
-      groundShape.calculateLocalInertia(mass, localInertia);
+    if(isDynamic) groundShape.calculateLocalInertia(mass, localInertia);
 
     var myMotionState = new Ammo.btDefaultMotionState(groundTransform),
       rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, groundShape, localInertia),
       body = new Ammo.btRigidBody(rbInfo);
-
+    body.name = 'ground';
+    this.ground = body;
     this.dynamicsWorld.addRigidBody(body);
     // this.rigidBodies.push(body);
+    // add collide event
+    this.detectCollision()
   }
 
   addPhysics(MEObject, pOptions) {
-    if (pOptions.geometry == "Sphere") {
-     this.addPhysicsSphere(MEObject, pOptions)
-    } else if (pOptions.geometry == "Cube") {
-      // 
+    if(pOptions.geometry == "Sphere") {
+      this.addPhysicsSphere(MEObject, pOptions)
+    } else if(pOptions.geometry == "Cube") {
+      this.addPhysicsBox(MEObject, pOptions)
     }
   }
 
   addPhysicsSphere(MEObject, pOptions) {
     let Ammo = this.Ammo;
-    var colShape = new Ammo.btSphereShape(1),
+    var colShape = new Ammo.btSphereShape(pOptions.radius),
       startTransform = new Ammo.btTransform();
     startTransform.setIdentity();
     var mass = 1;
     var localInertia = new Ammo.btVector3(0, 0, 0);
     colShape.calculateLocalInertia(mass, localInertia);
 
-    startTransform.setOrigin(new Ammo.btVector3(0, 15, -10));
+    startTransform.setOrigin(new Ammo.btVector3(pOptions.position.x, pOptions.position.y, pOptions.position.z));
+
+    var myMotionState = new Ammo.btDefaultMotionState(startTransform),
+      rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
+      body = new Ammo.btRigidBody(rbInfo);
+
+    body.MEObject = MEObject;
+    this.dynamicsWorld.addRigidBody(body);
+    this.rigidBodies.push(body);
+    return body;
+  }
+
+  addPhysicsBox(MEObject, pOptions) {
+
+    const FLAGS = {
+      TEST_NIDZA: 3,
+      CF_KINEMATIC_OBJECT: 2
+    }
+
+    let Ammo = this.Ammo;
+    // improve this - scale by comp
+    var colShape = new Ammo.btBoxShape(new Ammo.btVector3(pOptions.scale[0], pOptions.scale[1], pOptions.scale[2])),
+      startTransform = new Ammo.btTransform();
+    startTransform.setIdentity();
+    var mass = pOptions.mass;
+    var localInertia = new Ammo.btVector3(0, 0, 0);
+    colShape.calculateLocalInertia(mass, localInertia);
+    startTransform.setOrigin(new Ammo.btVector3(pOptions.position.x, pOptions.position.y, pOptions.position.z));
+    //rotation
+    // console.log('startTransform.setRotation', startTransform.setRotation)
+    var t = startTransform.getRotation()
+    t.setX(degToRad(pOptions.rotation.x))
+    t.setY(degToRad(pOptions.rotation.y))
+    t.setZ(degToRad(pOptions.rotation.z))
+    startTransform.setRotation(t)
+
+    // startTransform.setRotation(pOptions.rotation.x, pOptions.rotation.y, pOptions.rotation.z);
 
     var myMotionState = new Ammo.btDefaultMotionState(startTransform),
       rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
       body = new Ammo.btRigidBody(rbInfo);
 
+    if(pOptions.mass == 0 && typeof pOptions.state == 'undefined' && typeof pOptions.collide == 'undefined') {
+      body.setActivationState(2)
+      body.setCollisionFlags(FLAGS.CF_KINEMATIC_OBJECT);
+      // console.log('what is pOptions.mass and state is 2 ....', pOptions.mass)
+    } else if(typeof pOptions.collide != 'undefined' && pOptions.collide == false) {
+      // idea not work for now - eliminate collide effect
+      body.setActivationState(4)
+      body.setCollisionFlags(FLAGS.TEST_NIDZA);
+    } else {
+      body.setActivationState(4)
+    }
+    // console.log('what is name.', pOptions.name)
+    body.name = pOptions.name;
     body.MEObject = MEObject;
     this.dynamicsWorld.addRigidBody(body);
     this.rigidBodies.push(body);
     return body;
   }
 
+  setBodyVelocity(body, x, y, z) {
+    var tbv30 = new Ammo.btVector3();
+    tbv30.setValue(x, y, z);
+    body.setLinearVelocity(tbv30);
+  }
+
+  setKinematicTransform(body, x, y, z, rx, ry, rz) {
+    if(typeof rx == 'undefined') {var rx = 0;}
+    if(typeof ry == 'undefined') {var ry = 0;}
+    if(typeof rz == 'undefined') {var rz = 0;}
+    let pos = new Ammo.btVector3();
+    // let quat = new Ammo.btQuaternion();
+    pos = body.getWorldTransform().getOrigin();
+    let localRot = body.getWorldTransform().getRotation();
+    // console.log('pre pos x:', pos.x(), " y : ", pos.y(), " z:", pos.z())
+    pos.setX(pos.x() + x)
+    pos.setY(pos.y() + y)
+    pos.setZ(pos.z() + z)
+    // console.log('position kinematic move : ', pos)
+    // console.log('position localRot  : ', localRot)
+    localRot.setX(rx)
+    localRot.setY(ry)
+    localRot.setZ(rz)
+    let physicsBody = body;
+    let ms = physicsBody.getMotionState();
+    if(ms) {
+      var tmpTrans = new Ammo.btTransform();
+
+      // quat.setValue(quat.x(), quat.y(), quat.z(), quat.w());
+      tmpTrans.setIdentity();
+      tmpTrans.setOrigin(pos);
+      tmpTrans.setRotation(localRot);
+      ms.setWorldTransform(tmpTrans);
+    }
+    // console.log('body, ', body)
+  }
+
+  getBodyByName(name) {
+    var b = null;
+    this.rigidBodies.forEach((item, index, array) => {
+      if(item.name == name) {
+        b = array[index];
+      }
+    });
+    return b;
+  }
+
+  getNameByBody(body) {
+    var b = null;
+    this.rigidBodies.forEach((item, index, array) => {
+      if(item.kB == body.kB) {
+        b = array[index].name;
+      }
+    });
+    return b;
+  }
+
+  detectCollision() {
+    console.log('override this')
+    return;
+
+    this.lastRoll = '';
+    this.presentScore = '';
+
+    let dispatcher = this.dynamicsWorld.getDispatcher();
+    let numManifolds = dispatcher.getNumManifolds();
+
+    for(let i = 0;i < numManifolds;i++) {
+      let contactManifold = dispatcher.getManifoldByIndexInternal(i);
+      // let numContacts = contactManifold.getNumContacts();
+      // this.rigidBodies.forEach((item) => {
+      //   if(item.kB == contactManifold.getBody0().kB) {
+      //     // console.log('Detected body0 =', item.name)
+      //   }
+      //   if(item.kB == contactManifold.getBody1().kB) {
+      //     // console.log('Detected body1 =', item.name)
+      //   }
+      // })
+
+      if(this.ground.kB == contactManifold.getBody0().kB &&
+        this.getNameByBody(contactManifold.getBody1()) == 'CubePhysics1') {
+        // console.log(this.ground ,'GROUND IS IN CONTACT WHO IS BODY1 ', contactManifold.getBody1())
+        // console.log('GROUND IS IN CONTACT WHO IS BODY1 getNameByBody  ', this.getNameByBody(contactManifold.getBody1()))
+        // CHECK ROTATION
+        var testR = contactManifold.getBody1().getWorldTransform().getRotation();
+        if(Math.abs(testR.y()) < 0.00001) {
+          this.lastRoll += " 4 +";
+          this.presentScore += 4;
+          dispatchEvent(new CustomEvent('dice-1', {}));
+        }
+        if(Math.abs(testR.x()) < 0.00001) {
+          this.lastRoll += " 3 +";
+          this.presentScore += 3;
+          dispatchEvent(new CustomEvent('dice-4', {}));
+        }
+        if(testR.x().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
+          this.lastRoll += " 2 +";
+          this.presentScore += 2;
+          dispatchEvent(new CustomEvent('dice-6', {}));
+        }
+
+        if(testR.x().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
+          this.lastRoll += " 1 +";
+          this.presentScore += 1;
+          dispatchEvent(new CustomEvent('dice-2', {}));
+        }
+
+        if(testR.z().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
+          this.lastRoll += " 6 +";
+          this.presentScore += 6;
+          dispatchEvent(new CustomEvent('dice-5', {}));
+        }
+
+        if(testR.z().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
+          this.lastRoll += " 5 +";
+          this.presentScore += 5;
+          dispatchEvent(new CustomEvent('dice-3', {}));
+        }
+
+        console.log('this.lastRoll = ', this.lastRoll, ' presentScore = ', this.presentScore)
+      }
+    }
+  }
+
   updatePhysics() {
     // Step world
     this.dynamicsWorld.stepSimulation(1 / 60, 10);
@@ -100,20 +277,17 @@ export default class MatrixAmmo {
         var _y = trans.getOrigin().y().toFixed(2);
         var _z = trans.getOrigin().z().toFixed(2);
         body.MEObject.position.setPosition(_x, _y, _z)
-        
         var test = trans.getRotation();
-        // var testAxis = test.getAxis();
-        // var testAngle = test.getAngle()
-        // testAxis.x()
-        // console.log("world axis X = " + testAxis.x());
-        console.log("world axis X = " + test.x());
-        console.log("world axis Y = " + test.y());
-        console.log("world axis Z = " + test.z());
-        console.log("world axis W = " + test.w());
-        var bug = getAxisRot({x: test.x(), y: test.y(), z: test.z(), w: test.w()})
-        console.log('bug:', bug)
-        // transform.setRotation(new Ammo.btQuaternion(quat.x, quat.y, quat.z, quat.w));
+        var testAxis = test.getAxis();
+        test.normalize()
+        body.MEObject.rotation.axis.x = testAxis.x()
+        body.MEObject.rotation.axis.y = testAxis.y()
+        body.MEObject.rotation.axis.z = testAxis.z()
+        body.MEObject.rotation.matrixRotation = quaternion_rotation_matrix(test);
+        body.MEObject.rotation.angle = radToDeg(parseFloat(test.getAngle().toFixed(2)))
       }
     })
+    // collision detect
+    this.detectCollision()
   }
 }

package/src/shaders/fragment.wgsl.js

@@ -20,7 +20,7 @@ struct FragmentInput {
 }
 
 const albedo = vec3f(0.9);
-const ambientFactor = 0.2;
+const ambientFactor = 0.7;
 
 @fragment
 fn main(input : FragmentInput) -> @location(0) vec4f {
@@ -39,10 +39,12 @@ fn main(input : FragmentInput) -> @location(0) vec4f {
     }
   }
   visibility /= 9.0;
-
   let lambertFactor = max(dot(normalize(scene.lightPos - input.fragPos), normalize(input.fragNorm)), 0.0);
   let lightingFactor = min(ambientFactor + visibility * lambertFactor, 1.0);
   let textureColor = textureSample(meshTexture, meshSampler, input.uv);
 
   return vec4(textureColor.rgb * lightingFactor * albedo, 1.0);
+  // return vec4f(input.fragNorm * 0.5 + 0.5, 1)
+  // return vec4f(input.uv, 0, 1)
+  // return vec4(textureColor.rgb , 0.5);
 }`

package/src/shaders/shaders.js

@@ -35,7 +35,7 @@ fn vertexMain(input: VertexInput) -> VertexOutput {
 @group(1) @binding(2) var meshTexture: texture_2d<f32>;
 
 // Static directional lighting
-const lightDir = vec3f(1, 1, 1);
+const lightDir = vec3f(0, 1, 0);
 const dirColor = vec3(1);
 const ambientColor = vec3f(0.05);
 

package/src/shaders/vertexShadow.wgsl.js

@@ -15,6 +15,6 @@ struct Model {
 fn main(
   @location(0) position: vec3f
 ) -> @builtin(position) vec4f {
-  return scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+  return scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1);
 }
 `

package/src/sounds/sounds.js

@@ -0,0 +1,47 @@
+
+export class MatrixSounds {
+
+  constructor() {
+    this.volume = 0.5;
+    this.audios = {};
+  }
+
+  createClones(c, name, path) {
+    for(var x = 1;x < c;x++) {
+      let a = new Audio(path);
+      a.id = name + x;
+      a.volume = this.volume;
+      this.audios[name + x] = a;
+      document.body.append(a);
+    }
+  }
+
+  createAudio(name, path, useClones) {
+    let a = new Audio(path);
+    a.id = name;
+    a.volume = this.volume;
+    this.audios[name] = a;
+    document.body.append(a);
+    if(typeof useClones !== 'undefined') {
+      this.createClones(useClones, name, path);
+    }
+  }
+
+  play(name) {
+    if(this.audios[name].paused == true) {
+      this.audios[name].play()
+    } else {
+      this.tryClone(name);
+    }
+  }
+
+  tryClone(name) {
+    var cc = 1;
+    try {
+      while(this.audios[name + cc].paused == false) {
+        cc++;
+      }
+      if (this.audios[name + cc]) this.audios[name + cc].play();
+    } catch(err) {}
+  }
+}