Add some Backbox tweens

assets/ReplicatedStorage/ArcadeTables/Pinball1/Backbox.rbxmx

@@ -132,7 +132,7 @@
           <Z>3.5033193</Z>
         </Vector3>
         <int64 name="SourceAssetId">-1</int64>
-        <BinaryString name="Tags"></BinaryString>
+        <BinaryString name="Tags">Q29sb3JGYWRl</BinaryString>
         <float name="TopParamA">-0.5</float>
         <float name="TopParamB">0.5</float>
         <token name="TopSurface">0</token>

assets/ReplicatedStorage/ArcadeTables/Pinball1/Box/MaterializeWall.rbxmx

@@ -13,7 +13,7 @@
       <token name="BottomSurface">0</token>
       <token name="BottomSurfaceInput">0</token>
       <CoordinateFrame name="CFrame">
-        <X>5.4889174</X>
+        <X>1.9554594</X>
         <Y>8.145643</Y>
         <Z>131.22559</Z>
         <R00>0</R00>

src/ReplicatedStorage/shared/constants/tags.ts

@@ -4,6 +4,7 @@ export const BallTag = 'Ball'
 export const BarrierTag = 'Barrier'
 export const BlinkTag = 'Blink'
 export const BouncerTag = 'Bouncer'
+export const ColorFadeTag = 'ColorFade'
 export const DrainTag = 'Drain'
 export const JoinTeamTag = 'JoinTeam'
 export const LavaTag = 'Lava'

src/ServerScriptService/buildin.ts

@@ -0,0 +1,57 @@
+import { TweenService } from '@rbxts/services'
+import { getDescendentsWhichAre } from 'ServerScriptService/utils'
+
+const BUILDING_ANIMATION_POSITION_OFFSET_AMOUNT = 5
+const BUILDING_ANIMATION_PART_DELAY = 0.03
+const random = new Random()
+
+export function animateBuildingIn(buildingModel: Model, tweenInfo: TweenInfo) {
+  // Collect BaseParts and original properties
+  const parts = <BasePart[]>(
+    getDescendentsWhichAre(buildingModel, 'BasePart').filter(
+      (x) => x.Name !== 'Baseplate',
+    )
+  )
+  const originalProperties = parts.map((x) => ({
+    Transparency: x.Transparency,
+    CFrame: x.CFrame,
+    Color: x.Color,
+    Size: x.Size,
+  }))
+
+  // Make parts invisible and randomly move them
+  parts.forEach((part, i) => {
+    part.Transparency = 1
+    part.Color = Color3.fromRGB(255, 255, 255)
+    part.Size = new Vector3()
+    const positionOffset = new Vector3(
+      random.NextNumber(-1, 1),
+      random.NextNumber(-0.25, 1.75),
+      random.NextNumber(-1, 1),
+    ).mul(BUILDING_ANIMATION_POSITION_OFFSET_AMOUNT)
+    const rotationOffset = CFrame.Angles(
+      random.NextNumber(-math.pi, math.pi),
+      random.NextNumber(-math.pi, math.pi),
+      random.NextNumber(-math.pi, math.pi),
+    )
+    part.CFrame = part.CFrame.mul(
+      new CFrame(positionOffset).mul(rotationOffset),
+    )
+  })
+
+  // Tween them back to their original state, one at a time
+  let lastTween: Tween | undefined // Return this so the caller can do animateBuildingIn(...).Wait()
+  parts.forEach((part, i) => {
+    const tween = TweenService.Create(part, tweenInfo, originalProperties[i])
+    lastTween = tween
+    tween.Completed.Connect((playbackState) => {
+      // Sometimes Tweens stop before reaching their goal property.
+      const original = originalProperties[i]
+      part.Transparency = original.Transparency
+      part.CFrame = original.CFrame
+    })
+    tween.Play()
+    wait(BUILDING_ANIMATION_PART_DELAY)
+  })
+  return lastTween?.Completed
+}

src/ServerScriptService/services/MapService.ts

@@ -10,6 +10,7 @@ import {
   isArcadeTableNextName,
   nextArcadeTableName,
 } from 'ReplicatedStorage/shared/state/ArcadeTablesState'
+import { animateBuildingIn } from 'ServerScriptService/buildin'
 import { Events } from 'ServerScriptService/network'
 import { store } from 'ServerScriptService/store'
 import { getDescendentsWhichAre } from 'ServerScriptService/utils'
@@ -167,6 +168,11 @@ export class MapService implements OnStart {
       const isNextName = isArcadeTableNextName(name)
       if (isNextName) game.Workspace.ArcadeTables?.[baseName]?.Destroy()
       Events.arcadeTableMaterialize.fire(player, name)
+      if (arcadeTable.Backbox)
+        animateBuildingIn(
+          arcadeTable.Backbox,
+          new TweenInfo(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out),
+        )?.Wait()
     }
   }
 

src/StarterPlayer/StarterPlayerScripts/components/ColorFade.ts

@@ -0,0 +1,24 @@
+import { BaseComponent, Component } from '@flamework/components'
+import { OnStart } from '@flamework/core'
+import { TweenService } from '@rbxts/services'
+import { ColorFadeTag } from 'ReplicatedStorage/shared/constants/tags'
+
+@Component({ tag: ColorFadeTag })
+export class ColorFadeComponent
+  extends BaseComponent<{}, BasePart>
+  implements OnStart
+{
+  onStart() {
+    const numberValue = new Instance('NumberValue')
+    numberValue.Changed.Connect(() => {
+      this.instance.Color = Color3.fromHSV(numberValue.Value, 1, 1)
+    })
+    const tweenInfo = new TweenInfo(10, Enum.EasingStyle.Linear)
+    const tween = TweenService.Create(numberValue, tweenInfo, { Value: 1 })
+    for (;;) {
+      tween.Play()
+      tween.Completed.Wait()
+      numberValue.Value = 0
+    }
+  }
+}