feat(AnimatedSprite): add asSprite prop

Tresjs · Apr 7, 2024 · 7a14b55 · 7a14b55
1 parent 9dd2673
commit 7a14b55
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/playground/src/pages/abstractions/AnimatedSprite.vue b/playground/src/pages/abstractions/AnimatedSprite.vue
@@ -21,7 +21,7 @@ const gl = {
 }
 
 const { fps, animation, definitions, flipX, loop, paused, 
-  reversed, resetOnEnd, centerX, centerY, scale, rotationX, rotationY, rotationZ, position } = useControls({
+  reversed, resetOnEnd, asSprite, centerX, centerY, scale, rotationX, rotationY, rotationZ, position } = useControls({
   fps: { value: 10, min: 0, max: 120, step: 1 },
   animation: { label: 'Animation', value: 'idle', options: ['idle', 'walk', 'blink'] },
   definitions: { label: 'Definitions', value: '{}', options: ['{}', '{"idle":"0(10),1-5"}'] },
@@ -30,6 +30,7 @@ const { fps, animation, definitions, flipX, loop, paused,
   paused: false,
   reversed: false,
   resetOnEnd: false,
+  asSprite: false,
   centerX: { value: 0.5, min: 0, max: 1, step: 0.01 },
   centerY: { value: 0.5, min: 0, max: 1, step: 0.01 },
   scale: { value: 1, min: 0.1, max: 4, step: 0.01 },
@@ -141,6 +142,7 @@ const centerDemoImgData = (() => {
           :fps="fps.value"
           :loop="loop.value"
           :reset-on-end="resetOnEnd.value"
+          :as-sprite="asSprite.value"
           :center="[centerX.value, centerY.value]"
           :reversed="reversed.value"
           :scale="scale.value"
@@ -175,6 +177,7 @@ const centerDemoImgData = (() => {
           :fps="fps.value"
           :loop="loop.value"
           :reset-on-end="resetOnEnd.value"
+          :as-sprite="asSprite.value"
           :center="[centerX.value, centerY.value]"
           :reversed="reversed.value"
           :scale="scale.value"
@@ -194,6 +197,7 @@ const centerDemoImgData = (() => {
           :fps="fps.value"
           :loop="loop.value"
           :reset-on-end="resetOnEnd.value"
+          :as-sprite="asSprite.value"
           :center="[centerX.value, centerY.value]"
           :reversed="reversed.value"
           :scale="scale.value"
@@ -210,6 +214,7 @@ const centerDemoImgData = (() => {
           :atlas="`${ASSETS_URL}cientosAtlas.json`"
           :definitions="defsParsed"
           :flip-x="flipX.value"
+          :as-sprite="asSprite.value"
           :center="[centerX.value, centerY.value]"
           :animation="animation.value"
           :fps="fps.value"

diff --git a/src/core/abstractions/AnimatedSprite/component.vue b/src/core/abstractions/AnimatedSprite/component.vue
@@ -41,6 +41,8 @@ export interface AnimatedSpriteProps {
   flipX?: boolean
   /** For a non-looping animation, when the animation ends, whether to display the zeroth frame. */
   resetOnEnd?: boolean
+  /** Whether to display the object as a THREE.Sprite. [See THREE.Sprite](https://threejs.org/docs/?q=sprite#api/en/objects/Sprite) */
+  asSprite?: boolean
   /** Anchor point of the object. A value of [0.5, 0.5] corresponds to the center. [0, 0] is left, bottom. */
   center?: TresVector2
   /** Alpha test value for the material. [See THREE.Material.alphaTest](https://threejs.org/docs/#api/en/materials/Material.alphaTest) */
@@ -59,6 +61,7 @@ const props = withDefaults(defineProps<AnimatedSpriteProps>(), {
   reversed: false,
   flipX: false,
   resetOnEnd: false,
+  asSprite: true,
   center: () => [0.5, 0.5],
   alphaTest: 0.0,
   depthTest: true,
@@ -201,22 +204,37 @@ watch(() => [props.definitions], () => {
 <template>
   <TresGroup v-bind="$attrs">
     <Suspense :fallback="null">
-      <TresMesh
-        :scale="[scaleX, scaleY, 1]"
-        :position="[positionX, positionY, 0]"
-        @click="(intr: Intersection) => emit('click', intr)"
-      >
-        <TresPlaneGeometry :args="[1, 1]" />
-        <TresMeshBasicMaterial
-          :toneMapped="false"
-          :side="DoubleSide"
-          :map="texture"
-          :transparent="true"
-          :alphaTest="props.alphaTest"
-          :depthWrite="props.depthWrite"
-          :depthTest="props.depthTest"
-        />
-      </TresMesh>
+      <template v-if="props.asSprite">
+        <TresSprite
+          :scale="[scaleX, scaleY, 1]" 
+          :position="[positionX, positionY, 0]"
+        >
+          <TresSpriteMaterial
+            :toneMapped="false"
+            :map="texture"
+            :transparent="true"
+            :alphaTest="props.alphaTest"
+          />
+        </TresSprite>
+      </template>
+      <template v-else>
+        <TresMesh
+          :scale="[scaleX, scaleY, 1]"
+          :position="[positionX, positionY, 0]"
+          @click="(intr: Intersection) => emit('click', intr)"
+        >
+          <TresPlaneGeometry :args="[1, 1]" />
+          <TresMeshBasicMaterial
+            :toneMapped="false"
+            :side="DoubleSide"
+            :map="texture"
+            :transparent="true"
+            :alphaTest="props.alphaTest"
+            :depthWrite="props.depthWrite"
+            :depthTest="props.depthTest"
+          />
+        </TresMesh>
+      </template>
     </Suspense>
     <slot />
   </TresGroup>