'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // Colors const BG_COLOR = "#0f172a"; const UNITY_COLOR = "#ffffff"; // Unity White/Grey const UNITY_ACCENT = "#22d3ee"; // Cyan for tech feel const UNREAL_COLOR = "#ffffff"; // Unreal White const UNREAL_ACCENT = "#f472b6"; // Pink/Purple for contrast (or Blue) -> Let's use Unreal Blue #3b82f6 const PHASES = [ "IDENTITY", // Logos "LANGUAGE", // C# vs C++/Blueprints "GRAPHICS", // Stylized vs Photoreal "STATS" // Radar Chart ]; export default function UnityVsUnrealAnimation() { const [phaseIndex, setPhaseIndex] = useState(0); const [time, setTime] = useState(0); // Animation loop useEffect(() => { let animationFrameId: number; let startTime = Date.now(); const animate = () => { const now = Date.now(); const t = (now - startTime) / 1000; // time in seconds setTime(t); animationFrameId = requestAnimationFrame(animate); }; animate(); return () => cancelAnimationFrame(animationFrameId); }, []); // Phase controller useEffect(() => { const interval = setInterval(() => { setPhaseIndex((prev) => (prev + 1) % PHASES.length); }, 4500); // Change phase every 4.5 seconds return () => clearInterval(interval); }, []); const currentPhase = PHASES[phaseIndex]; return ( ); } // ------------------------------------------------------------------ // Sub-Components // ------------------------------------------------------------------ const BackgroundGrid = ({ time }: { time: number }) => { // Moving grid simulation const offset = (time * 20) % 50; return ( {Array.from({ length: 25 }).map((_, i) => ( {/* Vertical Lines */} {/* Horizontal Lines (Moving) */} ))} ); }; const UnitySide = ({ phase, time }: { phase: string; time: number }) => { const isActive = true; return ( {/* Background Symbol */} UNITY {/* Phase 0: Identity (Logo) */} {/* Phase 1: Language (C#) */} {phase === 'LANGUAGE' && ( C# 脚本 )} {/* Phase 2: Graphics (Stylized/Mobile) */} {phase === 'GRAPHICS' && ( 多平台/风格化高效渲染管线 (URP) )} {/* Phase 3: Stats */} {phase === 'STATS' && ( )} ); }; const UnrealSide = ({ phase, time }: { phase: string; time: number }) => { return ( UNREAL ENGINE {/* Phase 0: Identity (Logo) */} {/* Phase 1: Language (C++ / Blueprint) */} {phase === 'LANGUAGE' && ( C++ & 蓝图 )} {/* Phase 2: Graphics (Photoreal) */} {phase === 'GRAPHICS' && ( 影视级画质 Nanite & Lumen )} {/* Phase 3: Stats */} {phase === 'STATS' && ( )} ); }; // ------------------------------------------------------------------ // Specific Visual Elements // ------------------------------------------------------------------ const UnityLogo = ({ time, scale }: { time: number; scale: number }) => { // A simple cube representation const rotate = Math.sin(time) * 5; return ( {/* Inner Cube */} ); }; const UnrealLogo = ({ time, scale }: { time: number; scale: number }) => { // A circle with a U const pulse = 1 + Math.sin(time * 2) * 0.05; return ( ); }; const CodeFlow = ({ time, type }: { time: number; type: string }) => { const snippets = [ "void Start()", "GameObject.Find()", "Vector3.up", "GetComponent()", "Debug.Log()", "IEnumerator", "Transform.position" ]; return ( {snippets.map((txt, i) => { const yPos = ((time * 30 + i * 40) % 200) - 50; const opacity = 1 - Math.abs(yPos - 50) / 100; return ( {txt} ); })} ); }; const BlueprintNodes = ({ time }: { time: number }) => { // Visual representation of nodes return ( {/* Node 1 */} Event BeginPlay {/* Wire */} {/* Node 2 */} Spawn Actor Class: BP_Hero ); }; const LowPolyPlanet = ({ time }: { time: number }) => { // Simulating a low poly object rotating const rotation = time * 50; return ( {/* Floating particles */} {Array.from({length: 4}).map((_, i) => ( ))} ); }; const HighFidelitySphere = ({ time }: { time: number }) => { return ( {/* Ray Tracing Lines */} {Array.from({length: 6}).map((_, i) => { const angle = (time + i) % (Math.PI * 2); const x2 = Math.cos(angle) * 70; const y2 = Math.sin(angle) * 70; return ( ); })} {/* Lens Flare Ring */} ); }; const StatBar = ({ label, value, color, delay }: { label: string, value: number, color: string, delay: number }) => { return ( {/* Wrapper to handle stacking */} {label} {/* Background Bar */} {/* Active Bar */} {value}% ); };