Flexible multiple clips (#421)

* Revert "Only one clip at a time"

This reverts commit 0a7f8a0.

* Support for multiple clips using regular expressions

* Code review feedback

* Revert "Code review feedback"

This reverts commit f1a2069.

* Use single quotes

Author: diarmidmackenzie

examples/animation-controls/animation-controls.js

@@ -10,14 +10,18 @@ const animationNames = {
 
 updateAnimationMixer = () => {
 
-  const data = {}
+  const data = {useRegExp: true}
   data.clip = 'none'
   Object.entries(animationNames).forEach((name) => {
 
-    const el = document.getElementById(name[0])
-    
+    const regExpEscape = (s) => {
+      return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+    }
+
+    el = document.getElementById(name[0])
     if (el.checked) {
-      data.clip = name[1]
+      if (data.clip) data.clip += "|"
+      data.clip += regExpEscape(name[1])
     }
   })
 

examples/animation-controls/index.html

@@ -14,20 +14,18 @@
     <div class="topRight">
       <div>Controls</div>
       <div style="display: grid; grid-template-columns: 50% 50%">
-          <label for="none">None</label>
-          <input type="radio" id="none" name="animations" checked="true">
           <label for="attack">Attack</label>
-          <input type="radio" id="attack" name="animations">
+          <input type="checkbox" id="attack" name="attack">
           <label for="death">Death</label>
-          <input type="radio" id="death" name="animations">
+          <input type="checkbox" id="death" name="death">
           <label for="idle">Idle</label>
-          <input type="radio" id="idle" name="animations">
+          <input type="checkbox" id="idle" name="idle">
           <label for="jump">Jump</label>
-          <input type="radio" id="jump" name="animations">
+          <input type="checkbox" id="jump" name="jump">
           <label for="run">Run</label>
-          <input type="radio" id="run" name="animations">        
+          <input type="checkbox" id="run" name="run">        
           <label for="walk">Walk</label>
-          <input type="radio" id="walk" name="animations">        
+          <input type="checkbox" id="walk" name="walk">        
           <label for="duration">Duration (s)</label>
           <input type="text" id="duration" name="duration" value="0">
           <label for="clampWhenFinished">Clamp When Finished</label>

examples/bundle.js

@@ -45064,6 +45064,7 @@ var LoopMode = {
 module.exports = AFRAME.registerComponent('animation-mixer', {
   schema: {
     clip: { default: '*' },
+    useRegExp: { default: false },
     duration: { default: 0 },
     clampWhenFinished: { default: false, type: 'boolean' },
     crossFadeDuration: { default: 0 },
@@ -45158,7 +45159,7 @@ module.exports = AFRAME.registerComponent('animation-mixer', {
 
     if (!clips.length) return;
 
-    var re = wildcardToRegExp(data.clip);
+    var re = data.useRegExp ? data.clip : wildcardToRegExp(data.clip);
 
     for (var clip, i = 0; clip = clips[i]; i++) {
       if (clip.name.match(re)) {

src/loaders/README.md

@@ -33,6 +33,8 @@ an animation and its duration:
 | Property          | Default  | Description                                               |
 |-------------------|----------|-----------------------------------------------------------|
 | clip              | *        | Name of the animation clip(s) to play. Accepts wildcards. |
+| useRegExp         | false    | If true, interpret the `clip` string as a regular expression.  If false, it is treated as a literal string, except for the * character, which is treated as a variable-length wildcard. |
+
 | duration          | 0     | Duration of one cycle of the animation clip, in seconds.  This provides the same functionality as timeScale (apart from pausing), with duration = clipLength/timeScale.  This property only has an effect if timeScale is set to 1, otherwise the value of timeScale is used to determine animation playback speed.  |
 | crossFadeDuration | 0        | Duration of cross-fades between clips, in seconds.        |
 | loop              | repeat   | `once`, `repeat`, or `pingpong`. In `repeat` and `pingpong` modes, the clip plays once plus the specified number of repetitions. For `pingpong`, every second clip plays in reverse. |
@@ -41,9 +43,7 @@ an animation and its duration:
 | clampWhenFinished | false        | If true, halts the animation at the last frame. |
 | startAt           | 0        | Configures the animation clip to begin at a specific start time (in milliseconds). This is useful when you need to jump to an exact time in an animation. The input parameter will be scaled by the mixer's timeScale.  Negative values will result in a pause before the animation begins. |
 
-A list of available animations can usually be found by inspecting the model file or its documentation. All animations will play by default. To play only a specific set of animations, use wildcards: `animation-mixer="clip: run_*"`.
-
-There is no provided syntax to specify multiple animations, except via the * wildcard.  For example: `animation-mixer="clip: run,walk"` will match neither `run` nor `walk`, and would only match a clip named `run,walk`.
+A list of available animations can usually be found by inspecting the model file or its documentation. All animations will play by default. To play only a specific set of animations, use wildcards: `animation-mixer="clip: run_*"`, or use the useRegExp flag to enable full regular expression matching, e.g. `animation-mixer="useRegExp: true; clip: run|walk"`.
 
 ### Animation Events
 

src/loaders/animation-mixer.js

@@ -14,6 +14,7 @@ const LoopMode = {
 module.exports = AFRAME.registerComponent('animation-mixer', {
   schema: {
     clip: { default: '*' },
+    useRegExp: {default: false},
     duration: { default: 0 },
     clampWhenFinished: { default: false, type: 'boolean' },
     crossFadeDuration: { default: 0 },
@@ -108,7 +109,7 @@ module.exports = AFRAME.registerComponent('animation-mixer', {
 
     if (!clips.length) return;
 
-    const re = wildcardToRegExp(data.clip);
+    const re = data.useRegExp ? data.clip : wildcardToRegExp(data.clip);
 
     for (let clip, i = 0; (clip = clips[i]); i++) {
       if (clip.name.match(re)) {