// ==================== // IMPORTANT MESSAGE TO FUTURE SELF // ==================== /* Game Concept: Rosebud Animator This is an interactive 3D animation editor built with Three.js and Cannon.js. It allows users to animate a green block in a 3D space, create keyframes, and modify properties like position, rotation, and scale over time. Key Components: 1. 3D Scene: Uses Three.js for rendering and Cannon.js for physics. 2. Animation Editor: Custom UI for creating and editing animations. 3. Tutorial System: Guides users through the animation process. 4. Intro Sequence: Logo and title animation with background music. 5. Game Modes: Switchable modes (functionality to be implemented). Assets: 1. Audio: 'https://play.rosebud.ai/assets/ambient-piano-logo-165357.mp3?wbju' 2. Logo: 'https://play.rosebud.ai/assets/IMG_2655.png?gDUs' Important Reminders: - Maintain the existing structure and functionality of the Animation Editor. - Keep the tutorial steps and their actions intact. - Preserve the intro sequence with logo and animated text. - Ensure all event listeners and UI interactions remain functional. - Do not modify the core animation logic or keyframe system. - Maintain the preview functionality in the Animation Editor. - Keep the game mode selection feature, even if modes are not fully implemented. - Preserve the loading screen and asset management system. - Maintain the first-person controls and camera bobbing effect. - Keep the copy/paste keyframe functionality. Code Structure: - The code is organized into logical sections (scene setup, UI creation, animation logic, etc.). - Many functions are interdependent, so be cautious when modifying any part. - The Animation Editor UI is created dynamically in JavaScript. - The tutorial system uses a step-by-step approach with highlighted elements. Future Improvements: - Implement actual functionality for different game modes. - Enhance the preview window with more features. - Add more complex animation capabilities (e.g., bezier curves, more easing functions). When implementing new features or making changes: 1. Ensure they don't conflict with existing functionality. 2. Maintain the current UI layout and style for consistency. 3. Update the tutorial if new major features are added. 4. Keep the intro sequence intact unless specifically requested to change. 5. Always test thoroughly after any modifications. Remember: The core of this project is the animation system. Any changes should enhance or complement this central feature, not detract from it or fundamentally alter its operation. */ import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { STLLoader } from 'three/addons/loaders/STLLoader.js'; // Get the parent div where the game will be rendered const parentDiv = document.getElementById('renderDiv'); if (!parentDiv) { console.error('Parent div with id "renderDiv" not found. Please ensure it exists in your HTML.'); throw new Error('Parent div not found'); } // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const audioLoader = new THREE.AudioLoader(loadingManager); const loader = new STLLoader(loadingManager); // STL loader for 3D models let assetsLoaded = false; let totalAssets = 3; // Total number of assets to load let loadedAssets = 0; // Counter for loaded assets // Create loading screen if it doesn't exist let loadingScreen = document.getElementById('loadingScreen'); if (!loadingScreen) { loadingScreen = document.createElement('div'); loadingScreen.id = 'loadingScreen'; loadingScreen.style.cssText = ` position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.8s ease; z-index: 1000; `; parentDiv.appendChild(loadingScreen); } // Create loading wheel container const loadingWheelContainer = document.createElement('div'); loadingWheelContainer.style.cssText = ` position: absolute; bottom: 20px; right: 20px; width: 100px; height: 100px; `; loadingScreen.appendChild(loadingWheelContainer); // Create loading wheel const loadingWheel = document.createElement('div'); loadingWheel.style.cssText = ` width: 100%; height: 100%; border-radius: 50%; border: 4px solid rgba(255, 0, 0, 0.3); border-top: 4px solid #ff0000; animation: spin 1.5s linear infinite; `; loadingWheelContainer.appendChild(loadingWheel); // Create animated text container const textContainer = document.createElement('div'); textContainer.style.cssText = ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); white-space: nowrap; `; loadingScreen.appendChild(textContainer); // Create loading progress text const loadingProgress = document.createElement('div'); loadingProgress.id = 'loadingProgress'; loadingProgress.style.cssText = ` position: absolute; bottom: 30px; right: 130px; font-size: 18px; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); `; loadingProgress.textContent = '0%'; loadingScreen.appendChild(loadingProgress); // Add animation keyframes const styleSheet = document.createElement('style'); styleSheet.textContent = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } @keyframes drawLine { 0% { width: 0; } 100% { width: 100%; } } @keyframes flame { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1.1); opacity: 0.9; } } `; document.head.appendChild(styleSheet); const words = ['Believe', 'Create', 'Animate']; let currentWordIndex = 0; function animateText() { if (currentWordIndex >= words.length) { currentWordIndex = 0; } const word = words[currentWordIndex]; textContainer.innerHTML = ''; // Clear previous word word.split('').forEach((letter, index) => { const letterSpan = document.createElement('span'); letterSpan.textContent = letter; letterSpan.style.cssText = ` display: inline-block; opacity: 0; animation: fadeIn 0.5s forwards; animation-delay: ${index * 0.1}s; `; textContainer.appendChild(letterSpan); }); // Add underline effect const underline = document.createElement('div'); underline.style.cssText = ` width: 0; height: 3px; background-color: #ff0000; margin-top: 5px; animation: drawLine 0.5s forwards; animation-delay: ${word.length * 0.1}s; `; textContainer.appendChild(underline); // Fade out the word setTimeout(() => { Array.from(textContainer.children).forEach((child, index) => { child.style.animation = `fadeOut 0.5s forwards`; child.style.animationDelay = `${index * 0.1}s`; }); }, (word.length * 0.1 + 2) * 1000); // Wait for the word to fully appear and stay for 2 seconds currentWordIndex++; // Schedule the next word animation setTimeout(animateText, (word.length * 0.1 + 3) * 1000); // Total duration of fade in, display, and fade out } // Start the text animation animateText(); // Remove this entire block as it's now redundant // Create skip loading button const skipLoadingButton = document.createElement('button'); skipLoadingButton.textContent = 'Skip Loading'; skipLoadingButton.style.cssText = ` position: absolute; bottom: 20px; left: 20px; background-color: black; color: white; border: 2px solid red; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; `; skipLoadingButton.addEventListener('mouseenter', () => { skipLoadingButton.style.backgroundColor = 'red'; skipLoadingButton.style.color = 'black'; }); skipLoadingButton.addEventListener('mouseleave', () => { skipLoadingButton.style.backgroundColor = 'black'; skipLoadingButton.style.color = 'white'; }); skipLoadingButton.addEventListener('click', skipLoading); loadingScreen.appendChild(skipLoadingButton); // CSS keyframes for loading wheel and flame animations const style = document.createElement('style'); style.innerHTML = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes flame { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1.1); opacity: 0.9; } } `; document.head.appendChild(style); // Function to update loading progress function updateLoadingProgress() { loadedAssets++; const progress = Math.min((loadedAssets / totalAssets * 100), 100).toFixed(0); loadingProgress.textContent = `Loading... ${progress}%`; } // Function to load all assets function loadAssets() { return new Promise((resolve, reject) => { loadingManager.onLoad = () => { console.log('All assets loaded'); assetsLoaded = true; resolve(); }; loadingManager.onProgress = (url, itemsLoaded, itemsTotal) => { console.log(`Loading file: ${url}. ${itemsLoaded} of ${itemsTotal} files.`); updateLoadingProgress(); }; loadingManager.onError = (url) => { console.error('Error loading:', url); loadingProgress.textContent = 'Error loading assets. Please refresh or check your connection.'; reject(new Error(`Failed to load ${url}`)); }; // Load logo texture textureLoader.load( 'https://play.rosebud.ai/assets/IMG_2655.png?gDUs', (texture) => { console.log('Logo texture loaded'); updateLoadingProgress(); }, undefined, (error) => { console.error('Error loading logo texture:', error); reject(error); } ); // Load audio audioLoader.load( 'https://play.rosebud.ai/assets/ambient-piano-logo-165357.mp3?wbju', (buffer) => { console.log('Audio loaded'); updateLoadingProgress(); }, undefined, (error) => { console.error('Error loading audio:', error); reject(error); } ); // Load sword model loader.load( 'https://play.rosebud.ai/assets/sword.stl?vhV4', (geometry) => { console.log('Sword model loaded'); updateLoadingProgress(); }, undefined, (error) => { console.error('Error loading sword model:', error); reject(error); } ); }); } // Skip loading function function skipLoading() { if (loadingScreen) { loadingScreen.style.opacity = '0'; setTimeout(() => { if (parentDiv.contains(loadingScreen)) { parentDiv.removeChild(loadingScreen); } assetsLoaded = true; playIntro(); // Start the game or next phase here }, 800); } else { assetsLoaded = true; playIntro(); } } // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -20, 0); world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; // Load the sword model loader.load('https://play.rosebud.ai/assets/sword.stl?vhV4', function(geometry) { const material = new THREE.MeshPhongMaterial({ color: 0xcccccc, specular: 0x111111, shininess: 200 }); sword = new THREE.Mesh(geometry, material); // Scale and rotate the sword as needed sword.scale.set(0.02, 0.02, 0.02); // Adjust scale as needed sword.rotation.set(0, 0, Math.PI / 2); // Adjust rotation as needed // Position the sword relative to the camera sword.position.set(0.5, -0.3, -0.5); camera.add(sword); }); function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const clock = new THREE.Clock(); // Create canvas element const canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, parentDiv.offsetWidth / parentDiv.offsetHeight, 0.1, 1000 ); // Adjusted camera position for first-person view camera.position.set(0, 1.7, 0); // Average human eye level // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: "high-performance" }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(parentDiv.offsetWidth, parentDiv.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors const skyColor = new THREE.Color(0x87CEEB); // Bright sky blue const groundColor = new THREE.Color(0xFFFFFF); // White ground reflection // Create sky dome const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 } }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Set up PointerLockControls const controls = new PointerLockControls(camera, canvas); // Function to lock controls function lockControls() { controls.lock(); } // Add event listener to lock controls on canvas click canvas.addEventListener('click', lockControls); // Add player movement const moveSpeed = 10; const velocity = new THREE.Vector3(); const direction = new THREE.Vector3(); let moveForward = false; let moveBackward = false; let moveLeft = false; let moveRight = false; // Add sword let sword; let isSwinging = false; let swingProgress = 0; const onKeyDown = function(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; } }; const onKeyUp = function(event) { switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; } }; document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); // Raycaster for click detection const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); // Function to handle clicks function onMouseClick(event) { if (!controls.isLocked) { lockControls(); return; } // Raycast from the center of the screen raycaster.setFromCamera(new THREE.Vector2(), camera); const intersects = raycaster.intersectObject(block); if (intersects.length > 0) { showAnimationEditor(); } } // Add click event listener document.addEventListener('click', onMouseClick); // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const material = new THREE.MeshStandardMaterial({ color: 0x808080, // Grey color roughness: 0.8, metalness: 0.2 }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0 }); groundBody.addShape(groundShape); groundBody.position.set(0, -0.1, 0); world.addBody(groundBody); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(50, 100, 50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // Create initial scene const terrain = createTerrain(); // Create the animatable block const blockGeometry = new THREE.BoxGeometry(1, 1, 1); const blockMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const block = new THREE.Mesh(blockGeometry, blockMaterial); block.position.set(0, 1, -3); // Position the block in front of the camera block.name = 'block'; // Add a name to the block for easier selection scene.add(block); // Add these variables for camera bobbing let bobTimer = 0; const bobFrequency = 10; // Adjust for faster/slower bobbing const bobAmplitude = 0.05; // Adjust for more/less intense bobbing function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { world.step(deltaTime); // Handle player movement only when editor is closed if (controls.isLocked === true && animationEditorUI && animationEditorUI.style.bottom === '-500px') { velocity.x -= velocity.x * 10.0 * deltaTime; velocity.z -= velocity.z * 10.0 * deltaTime; direction.z = Number(moveForward) - Number(moveBackward); direction.x = Number(moveRight) - Number(moveLeft); direction.normalize(); if (moveForward || moveBackward) velocity.z -= direction.z * moveSpeed * deltaTime; if (moveLeft || moveRight) velocity.x -= direction.x * moveSpeed * deltaTime; controls.moveRight(-velocity.x * deltaTime); controls.moveForward(-velocity.z * deltaTime); // Camera bobbing effect if (moveForward || moveBackward || moveLeft || moveRight) { bobTimer += deltaTime * bobFrequency; const bobOffset = Math.sin(bobTimer) * bobAmplitude; camera.position.y = 1.7 + bobOffset; // 1.7 is the original eye level } else { // Gradually return to normal height when not moving camera.position.y += (1.7 - camera.position.y) * 4 * deltaTime; } } // Handle sword swinging if (isSwinging && sword) { swingProgress += deltaTime * 5; // Adjust swing speed here if (swingProgress >= 1) { isSwinging = false; swingProgress = 0; } const swingAngle = Math.sin(swingProgress * Math.PI) * Math.PI / 4; // Reduced swing angle sword.rotation.x = sword.rotation.x - swingAngle; sword.position.y = -0.3 + Math.sin(swingProgress * Math.PI) * 0.1; // Add slight vertical movement } // Handle animation playback if (isPlaying) { setCurrentTime(currentTime + deltaTime); if (currentTime >= totalDuration) { if (isLooping) { setCurrentTime(0); } else { isPlaying = false; updatePlayPauseButton(); } } updateBlockAnimation(); updateCurrentTimeDisplay(); } updatePreview(); } composer.render(); } function updateBlockAnimation() { if (keyframes.length < 2) return; let prevKeyframe = keyframes[0]; let nextKeyframe = keyframes[1]; for (let i = 1; i < keyframes.length; i++) { if (keyframes[i].time > currentTime) { nextKeyframe = keyframes[i]; prevKeyframe = keyframes[i - 1]; break; } } const t = (currentTime - prevKeyframe.time) / (nextKeyframe.time - prevKeyframe.time); const easingFunction = getEasingFunction(prevKeyframe.easing); const easedT = easingFunction(t); block.position.lerpVectors(prevKeyframe.position, nextKeyframe.position, easedT); block.rotation.set( lerpAngle(prevKeyframe.rotation.x, nextKeyframe.rotation.x, easedT), lerpAngle(prevKeyframe.rotation.y, nextKeyframe.rotation.y, easedT), lerpAngle(prevKeyframe.rotation.z, nextKeyframe.rotation.z, easedT) ); block.scale.lerpVectors(prevKeyframe.scale, nextKeyframe.scale, easedT); updatePropertyInputs(); updateTimeMarker(); } function lerpAngle(start, end, t) { const diff = (end - start) % (Math.PI * 2); const shortestAngle = ((2 * diff) % (Math.PI * 2)) - diff; return start + shortestAngle * t; } function getEasingFunction(easing) { switch (easing) { case 'linear': return t => t; case 'easeIn': return t => t * t; case 'easeOut': return t => 1 - (1 - t) * (1 - t); case 'easeInOut': return t => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; default: return t => t; } } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Create animation editor UI // Animation state let isPlaying = false; let currentTime = 0; const totalDuration = 5; // Total animation duration in seconds const keyframes = []; let isAutoKeyframeEnabled = false; let isLooping = false; // Add this line to declare and initialize isLooping function createAnimationEditorUI() { const editorContainer = document.createElement('div'); editorContainer.id = 'animationEditor'; editorContainer.style.position = 'absolute'; editorContainer.style.bottom = '-80%'; editorContainer.style.left = '0'; editorContainer.style.width = '100%'; editorContainer.style.height = '80%'; editorContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; editorContainer.style.color = 'white'; editorContainer.style.transition = 'bottom 0.5s ease-out'; editorContainer.style.padding = '20px'; editorContainer.style.boxSizing = 'border-box'; editorContainer.style.overflowY = 'auto'; editorContainer.innerHTML = `

Animation Editor

0.00s

Position

Rotation

Scale

Easing

Auto Keyframe

Loop Animation

`; // Add CSS for editor buttons const style = document.createElement('style'); style.textContent = ` .editor-btn { background-color: #2a2a2a; border: 2px solid #ff4444; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; transition: all 0.3s; } .editor-btn:hover { background-color: #3a3a3a; border-color: #ff6666; } .editor-btn:active { background-color: #1a1a1a; border-color: #ff2222; } #animationEditor input[type="number"], #animationEditor select { width: 100%; padding: 5px; margin-bottom: 10px; background-color: #2a2a2a; color: white; border: 1px solid #444; border-radius: 3px; } #animationEditor input[type="number"]:focus, #animationEditor select:focus { outline: none; border-color: #ff4444; } `; document.head.appendChild(style); parentDiv.appendChild(editorContainer); // Add event listeners document.getElementById('playPauseBtn').addEventListener('click', togglePlayPause); document.getElementById('addKeyframeBtn').addEventListener('click', addKeyframe); document.getElementById('deleteKeyframeBtn').addEventListener('click', deleteKeyframe); document.getElementById('closeEditorBtn').addEventListener('click', closeAnimationEditor); document.getElementById('copyKeyframeBtn').addEventListener('click', copyKeyframe); document.getElementById('pasteKeyframeBtn').addEventListener('click', pasteKeyframe); // Add event listeners for property inputs ['posX', 'posY', 'posZ', 'rotX', 'rotY', 'rotZ', 'scaleX', 'scaleY', 'scaleZ'].forEach(id => { document.getElementById(id).addEventListener('input', updateBlockProperty); }); document.getElementById('easingSelect').addEventListener('change', updateEasing); document.getElementById('autoKeyframeCheckbox').addEventListener('change', (e) => { isAutoKeyframeEnabled = e.target.checked; }); document.getElementById('loopAnimationCheckbox').addEventListener('change', (e) => { isLooping = e.target.checked; }); // Initialize the checkbox state document.getElementById('loopAnimationCheckbox').checked = isLooping; // Add click and drag functionality for the timeline const timeline = document.getElementById('timeline'); const timeMarker = document.getElementById('timeMarker'); let isDragging = false; timeline.addEventListener('mousedown', onTimelineClick); timeMarker.addEventListener('mousedown', (e) => { isDragging = true; document.addEventListener('mousemove', onMarkerDrag); document.addEventListener('mouseup', stopMarkerDrag); }); function onTimelineClick(e) { const rect = timeline.getBoundingClientRect(); let x = e.clientX - rect.left; x = Math.max(0, Math.min(x, rect.width)); const newTime = (x / rect.width) * totalDuration; setCurrentTime(newTime); } function onMarkerDrag(e) { if (!isDragging) return; onTimelineClick(e); } function stopMarkerDrag() { isDragging = false; document.removeEventListener('mousemove', onMarkerDrag); document.removeEventListener('mouseup', stopMarkerDrag); } return editorContainer; } function closeAnimationEditor() { animationEditorUI.style.bottom = '-80%'; lockMouse(); } const animationEditorUI = createAnimationEditorUI(); function togglePlayPause() { isPlaying = !isPlaying; updatePlayPauseButton(); } function updatePlayPauseButton() { const playPauseBtn = document.getElementById('playPauseBtn'); if (isPlaying) { playPauseBtn.textContent = 'Pause'; } else { playPauseBtn.textContent = 'Play'; } } function setCurrentTime(time) { currentTime = Math.max(0, Math.min(time, totalDuration)); updateTimeMarker(); updateBlockAnimation(); updateCurrentTimeDisplay(); } function updateCurrentTimeDisplay() { const timeDisplay = document.getElementById('currentTimeDisplay'); if (timeDisplay) { timeDisplay.textContent = currentTime.toFixed(2) + 's'; } } function updateTimeMarker() { const timeline = document.getElementById('timeline'); const timeMarker = document.getElementById('timeMarker'); const position = (currentTime / totalDuration) * timeline.offsetWidth; timeMarker.style.left = `${position}px`; } function addKeyframe() { const existingKeyframeIndex = keyframes.findIndex(kf => Math.abs(kf.time - currentTime) < 0.001); const keyframe = { time: currentTime, position: block.position.clone(), rotation: block.rotation.clone(), scale: block.scale.clone(), easing: 'linear' }; if (existingKeyframeIndex !== -1) { keyframes[existingKeyframeIndex] = keyframe; } else { keyframes.push(keyframe); keyframes.sort((a, b) => a.time - b.time); } updateTimeline(); } function deleteKeyframe() { const index = keyframes.findIndex(kf => Math.abs(kf.time - currentTime) < 0.1); if (index !== -1) { keyframes.splice(index, 1); updateTimeline(); } } function updateBlockProperty() { const newPosition = new THREE.Vector3( parseFloat(document.getElementById('posX').value), parseFloat(document.getElementById('posY').value), parseFloat(document.getElementById('posZ').value) ); if (isAutoKeyframeEnabled && !newPosition.equals(block.position)) { addKeyframe(); } block.position.copy(newPosition); } function updateTimeline() { const timeline = document.getElementById('timeline'); timeline.innerHTML = '

'; // Create a container for the time marks and labels const marksContainer = document.createElement('div'); marksContainer.style.position = 'absolute'; marksContainer.style.top = '0'; marksContainer.style.left = '0'; marksContainer.style.width = '100%'; marksContainer.style.height = '100%'; marksContainer.style.pointerEvents = 'none'; timeline.appendChild(marksContainer); // Add time marks and labels for each second for (let i = 0; i <= totalDuration; i++) { const markContainer = document.createElement('div'); markContainer.style.position = 'absolute'; markContainer.style.left = `${(i / totalDuration) * 100}%`; markContainer.style.height = '100%'; markContainer.style.display = 'flex'; markContainer.style.flexDirection = 'column'; markContainer.style.alignItems = 'center'; markContainer.style.justifyContent = 'flex-start'; const label = document.createElement('div'); label.textContent = i + 's'; label.style.fontSize = '8px'; label.style.color = 'white'; label.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; label.style.padding = '1px 2px'; label.style.borderRadius = '2px'; label.style.marginBottom = '1px'; const mark = document.createElement('div'); mark.style.width = '1px'; mark.style.height = '100%'; mark.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; markContainer.appendChild(label); markContainer.appendChild(mark); marksContainer.appendChild(markContainer); } // Add keyframe markers keyframes.forEach((kf, index) => { const marker = document.createElement('div'); marker.style.position = 'absolute'; marker.style.left = `${(kf.time / totalDuration) * 100}%`; marker.style.bottom = '0'; marker.style.width = '6px'; marker.style.height = '60%'; marker.style.backgroundColor = 'yellow'; marker.style.cursor = 'pointer'; marker.style.zIndex = '2'; marker.addEventListener('click', () => selectKeyframe(index)); timeline.appendChild(marker); }); } function selectKeyframe(index) { setCurrentTime(keyframes[index].time); updatePropertyInputs(); } function previewAnimation() { isPlaying = true; setCurrentTime(0); updatePlayPauseButton(); } // Function to show animation editor function showAnimationEditor() { animationEditorUI.style.bottom = '0'; updatePropertyInputs(); unlockMouse(); createPreview(); } function unlockMouse() { controls.unlock(); document.removeEventListener('click', onMouseClick); document.addEventListener('click', onEditorClick); } function lockMouse() { controls.lock(); document.removeEventListener('click', onEditorClick); document.addEventListener('click', onMouseClick); } function onEditorClick(event) { // Prevent locking when clicking inside the editor if (!event.target.closest('#animationEditor')) { lockMouse(); } } function updatePropertyInputs() { document.getElementById('posX').value = block.position.x.toFixed(2); document.getElementById('posY').value = block.position.y.toFixed(2); document.getElementById('posZ').value = block.position.z.toFixed(2); } // Tutorial system function startTutorial() { const steps = [{ text: "Welcome to the Animation Tutorial! Let's create a simple animation together.", target: null, action: null }, { text: "This green block is our animation subject. Click on it to open the Animation Editor.", target: 'block', action: () => { showAnimationEditor(); updateStep(); } }, { text: "This is the Animation Editor. Let's start by adding a keyframe at the beginning.", target: 'addKeyframeBtn', action: () => { addKeyframe(); updateStep(); } }, { text: "Now, let's move to the 2.5 second mark on the timeline. Click and drag the red time marker to 2.5s.", target: 'timeline', action: () => { setCurrentTime(2.5); updateStep(); } }, { text: "Let's change the block's position. Set Position X to 2, Y to 3, and Z to -1.", target: 'propertyEditor', action: () => { document.getElementById('posX').value = 2; document.getElementById('posY').value = 3; document.getElementById('posZ').value = -1; updateBlockProperty(); updateStep(); } }, { text: "Now add another keyframe to save this position.", target: 'addKeyframeBtn', action: () => { addKeyframe(); updateStep(); } }, { text: "Let's add some rotation. Set Rotation X to 3.14 (which is approximately π).", target: 'propertyEditor', action: () => { document.getElementById('rotX').value = 3.14; updateBlockProperty(); updateStep(); } }, { text: "Add one more keyframe to save the rotation.", target: 'addKeyframeBtn', action: () => { addKeyframe(); updateStep(); } }, { text: "Let's change the easing. Select 'Ease In Out' from the dropdown.", target: 'easingSelect', action: () => { document.getElementById('easingSelect').value = 'easeInOut'; updateEasing(); updateStep(); } }, { text: "Great job! Now let's preview our animation. Press the Play button.", target: 'playPauseBtn', action: () => { togglePlayPause(); updateStep(); } }, { text: "You can change game modes using the menu in the top left corner. Try selecting a different mode!", target: 'gameModeMenu', action: null }, { text: "Congratulations! You've created your first animation and explored the game modes. Feel free to experiment more!", target: null, action: null }]; let currentStep = 0; function showStep() { if (currentStep >= steps.length) { endTutorial(); return; } const step = steps[currentStep]; const overlay = document.createElement('div'); overlay.id = 'tutorialOverlay'; overlay.style.position = 'absolute'; overlay.style.top = '0'; overlay.style.left = '0'; overlay.style.width = '100%'; overlay.style.height = '100%'; overlay.style.backgroundColor = 'rgba(0,0,0,0.7)'; overlay.style.color = 'white'; overlay.style.display = 'flex'; overlay.style.flexDirection = 'column'; overlay.style.justifyContent = 'center'; overlay.style.alignItems = 'center'; overlay.style.zIndex = '1000'; const message = document.createElement('div'); message.textContent = step.text; message.style.fontSize = '24px'; message.style.marginBottom = '20px'; message.style.textAlign = 'center'; message.style.maxWidth = '80%'; overlay.appendChild(message); const nextButton = document.createElement('button'); nextButton.textContent = currentStep === steps.length - 1 ? 'Finish' : 'Next'; nextButton.style.fontSize = '18px'; nextButton.style.padding = '10px 20px'; nextButton.addEventListener('click', () => { if (step.action) { step.action(); } else { updateStep(); } }); overlay.appendChild(nextButton); parentDiv.appendChild(overlay); if (step.target) { highlightElement(step.target); } } function updateStep() { currentStep++; const overlay = document.getElementById('tutorialOverlay'); if (overlay) { parentDiv.removeChild(overlay); } showStep(); } function highlightElement(targetId) { const target = document.getElementById(targetId); if (target) { target.style.boxShadow = '0 0 0 4px white'; target.style.zIndex = '1001'; target.scrollIntoView({ behavior: 'smooth', block: 'center' }); } } function endTutorial() { const elements = ['block', 'timeline', 'propertyEditor', 'addKeyframeBtn', 'timeMarker', 'playPauseBtn']; elements.forEach(id => { const el = document.getElementById(id); if (el) { el.style.boxShadow = ''; el.style.zIndex = ''; } }); alert("Tutorial completed! Feel free to continue experimenting with the animation editor."); } showStep(); } // Add a button to start the tutorial const tutorialButton = document.createElement('button'); tutorialButton.textContent = 'Start Animation Tutorial'; tutorialButton.style.position = 'absolute'; tutorialButton.style.top = '10px'; tutorialButton.style.right = '10px'; tutorialButton.style.padding = '10px'; tutorialButton.style.fontSize = '16px'; tutorialButton.addEventListener('click', startTutorial); parentDiv.appendChild(tutorialButton); // Add spacebar event listener for play/pause document.addEventListener('keydown', (event) => { if (animationEditorUI.style.bottom === '0px') { if (event.code === 'Space') { event.preventDefault(); // Prevent scrolling togglePlayPause(); } else if (event.code === 'KeyC' && (event.ctrlKey || event.metaKey)) { event.preventDefault(); copyKeyframe(); } else if (event.code === 'KeyV' && (event.ctrlKey || event.metaKey)) { event.preventDefault(); pasteKeyframe(); } } }); // Start animation let copiedKeyframe = null; function copyKeyframe() { const currentKeyframe = keyframes.find(kf => Math.abs(kf.time - currentTime) < 0.001); if (currentKeyframe) { copiedKeyframe = JSON.parse(JSON.stringify(currentKeyframe)); showFeedback('Keyframe copied!'); } else { showFeedback('No keyframe at current time to copy.', 'error'); } } function pasteKeyframe() { if (copiedKeyframe) { const newKeyframe = JSON.parse(JSON.stringify(copiedKeyframe)); newKeyframe.time = currentTime; const existingIndex = keyframes.findIndex(kf => Math.abs(kf.time - currentTime) < 0.001); if (existingIndex !== -1) { keyframes[existingIndex] = newKeyframe; } else { keyframes.push(newKeyframe); keyframes.sort((a, b) => a.time - b.time); } updateTimeline(); updateBlockAnimation(); showFeedback('Keyframe pasted!'); } else { showFeedback('No keyframe copied to paste.', 'error'); } } function updateEasing() { const easingSelect = document.getElementById('easingSelect'); const currentKeyframe = keyframes.find(kf => Math.abs(kf.time - currentTime) < 0.001); if (currentKeyframe) { currentKeyframe.easing = easingSelect.value; updateBlockAnimation(); } } function showFeedback(message, type = 'success') { const feedback = document.createElement('div'); feedback.textContent = message; feedback.style.position = 'absolute'; feedback.style.bottom = '20px'; feedback.style.left = '50%'; feedback.style.transform = 'translateX(-50%)'; feedback.style.padding = '10px 20px'; feedback.style.borderRadius = '5px'; feedback.style.color = 'white'; feedback.style.backgroundColor = type === 'success' ? 'rgba(0, 128, 0, 0.8)' : 'rgba(255, 0, 0, 0.8)'; feedback.style.zIndex = '1002'; parentDiv.appendChild(feedback); setTimeout(() => { feedback.style.opacity = '0'; feedback.style.transition = 'opacity 0.5s ease-out'; setTimeout(() => parentDiv.removeChild(feedback), 500); }, 2000); } let previewRenderer, previewScene, previewCamera, previewBlock; function createPreview() { const previewContainer = document.getElementById('previewContainer'); previewRenderer = new THREE.WebGLRenderer({ antialias: true }); previewRenderer.setSize(previewContainer.clientWidth, previewContainer.clientHeight); previewContainer.appendChild(previewRenderer.domElement); previewScene = new THREE.Scene(); previewScene.background = new THREE.Color(0x222222); previewCamera = new THREE.PerspectiveCamera(75, previewContainer.clientWidth / previewContainer.clientHeight, 0.1, 1000); previewCamera.position.set(0, 2, 5); previewCamera.lookAt(0, 0, 0); const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(1, 1, 1); previewScene.add(light); previewBlock = new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({ color: 0x00ff00 }) ); previewScene.add(previewBlock); const gridHelper = new THREE.GridHelper(10, 10); previewScene.add(gridHelper); } function updatePreview() { if (previewBlock) { previewBlock.position.copy(block.position); previewBlock.rotation.copy(block.rotation); previewBlock.scale.copy(block.scale); previewRenderer.render(previewScene, previewCamera); } } // Create intro screen const introScreen = document.createElement('div'); introScreen.id = 'introScreen'; introScreen.style.position = 'absolute'; introScreen.style.top = '0'; introScreen.style.left = '0'; introScreen.style.width = '100%'; introScreen.style.height = '100%'; introScreen.style.backgroundColor = 'black'; introScreen.style.display = 'flex'; introScreen.style.flexDirection = 'column'; introScreen.style.justifyContent = 'center'; introScreen.style.alignItems = 'center'; introScreen.style.zIndex = '1000'; introScreen.style.opacity = '1'; introScreen.style.transition = 'opacity 1s ease-out'; const logoContainer = document.createElement('div'); logoContainer.style.width = '300px'; logoContainer.style.height = '300px'; logoContainer.style.backgroundImage = 'url(https://play.rosebud.ai/assets/IMG_2655.png?gDUs)'; logoContainer.style.backgroundSize = 'contain'; logoContainer.style.backgroundRepeat = 'no-repeat'; logoContainer.style.backgroundPosition = 'center'; logoContainer.style.opacity = '0'; logoContainer.style.transition = 'opacity 1s ease-in'; const titleContainer = document.createElement('div'); titleContainer.style.marginTop = '20px'; titleContainer.style.display = 'flex'; titleContainer.style.justifyContent = 'center'; titleContainer.style.alignItems = 'center'; titleContainer.style.height = '60px'; introScreen.appendChild(logoContainer); introScreen.appendChild(titleContainer); parentDiv.appendChild(introScreen); // Function to create and animate a word function createAnimatedWord(word, delay) { const wordSpan = document.createElement('span'); wordSpan.textContent = word; wordSpan.style.color = 'white'; wordSpan.style.fontFamily = 'Arial, sans-serif'; wordSpan.style.fontSize = '48px'; wordSpan.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; wordSpan.style.opacity = '0'; wordSpan.style.transition = 'opacity 0.5s ease-in'; wordSpan.style.marginRight = '15px'; setTimeout(() => { wordSpan.style.opacity = '1'; }, delay); return wordSpan; } // Function to handle intro animation and audio function playIntro() { const audio = new Audio('https://play.rosebud.ai/assets/ambient-piano-logo-165357.mp3?wbju'); // Start playing the audio immediately audio.play().catch(error => { console.error("Audio playback failed:", error); }); // Show the logo setTimeout(() => { if (logoContainer) { logoContainer.style.opacity = '1'; } // Animate title words 3 seconds after the logo appears setTimeout(() => { const words = ['Rosebud', 'Animator']; words.forEach((word, index) => { const wordElement = createAnimatedWord(word, index * 500); if (titleContainer) { titleContainer.appendChild(wordElement); } }); }, 3000); }, 500); // Fade out the intro screen setTimeout(() => { if (introScreen) { introScreen.style.opacity = '0'; } setTimeout(() => { if (parentDiv && introScreen && parentDiv.contains(introScreen)) { parentDiv.removeChild(introScreen); } // Start the game here animate(); }, 1000); }, 9000); // Adjusted time to allow for logo, 3-second wait, and word animation } // Load assets before starting the intro loadAssets().then(() => { console.log('Assets loaded, starting intro'); playIntro(); }).catch((error) => { console.error('Failed to load assets:', error); // Handle the error, maybe show an error message to the user });