Gameartoutsourcestudio | Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Animaci\u00f3n de Entornos, Animaci\u00f3n de Interfaz de Usuario, Efectos Visuales 2D, Animaci\u00f3n de Recortes, Animaci\u00f3n de Cinem\u00e1ticas, Rigging 2D Avanzado, Optimizaci\u00f3n de Activos Animados<\/title>\n \n <meta name=\"description\" content=\"Estudio de \u00e9lite en animaci\u00f3n para videojuegos. Ofrecemos Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Animaci\u00f3n de Entornos, Animaci\u00f3n de Interfaz de Usuario, Efectos Visuales 2D, Animaci\u00f3n de Recortes, Animaci\u00f3n de Cinem\u00e1ticas y Rigging 2D Avanzado. Cont\u00e1ctenos: info@gameartoutsourcestudio.de\">\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n dark: '#0f172a',\n darker: '#020617',\n brand: {\n rose: '#f43f5e',\n orange: '#f97316',\n amber: '#f59e0b',\n yellow: '#eab308',\n slate: '#64748b'\n }\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n .icon-gradient-anim {\n background: -webkit-linear-gradient(45deg, #f43f5e, #f59e0b);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .glow-effect-anim {\n box-shadow: 0 0 20px rgba(244, 63, 94, 0.15);\n transition: all 0.3s ease;\n }\n .glow-effect-anim:hover {\n box-shadow: 0 0 30px rgba(249, 115, 22, 0.4);\n transform: translateY(-5px);\n border-color: rgba(245, 158, 11, 0.5);\n }\n .kinetic-pattern {\n background-image: radial-gradient(rgba(244, 63, 94, 0.05) 2px, transparent 2px);\n background-size: 40px 40px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-darker text-slate-300 font-sans antialiased selection:bg-brand-rose selection:text-white kinetic-pattern\">\n\n \n <nav class=\"fixed w-full z-50 top-0 bg-darker\/90 backdrop-blur-md border-b border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-20\">\n <div class=\"flex-shrink-0 flex items-center gap-3\">\n <i class=\"fa-solid fa-gamepad text-3xl text-brand-rose\"><\/i>\n <span class=\"font-bold text-xl md:text-2xl tracking-tighter text-white\">\n Gameart<span class=\"text-brand-orange\">outsource<\/span>studio\n <\/span>\n <\/div>\n <div class=\"hidden md:flex space-x-8 items-center\">\n <a href=\"index.html\" class=\"text-sm font-medium hover:text-brand-rose transition-colors\"><i class=\"fa-solid fa-arrow-left mr-1\"><\/i> Inicio<\/a>\n <a href=\"#servicios-anim\" class=\"text-sm font-medium hover:text-brand-rose transition-colors\">Servicios 2D<\/a>\n <a href=\"#pipeline\" class=\"text-sm font-medium hover:text-brand-rose transition-colors\">Flujo de Trabajo<\/a>\n <a href=\"#faq\" class=\"text-sm font-medium hover:text-brand-rose transition-colors\">FAQ Animaci\u00f3n<\/a>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"bg-gradient-to-r from-brand-rose to-brand-orange hover:from-brand-orange hover:to-brand-rose text-white px-5 py-2.5 rounded-full font-bold transition-all shadow-lg shadow-brand-rose\/20 flex items-center gap-2\">\n <i class=\"fa-solid fa-envelope\"><\/i> Dar Vida a tu Juego\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <section class=\"relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden\">\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-brand-rose\/10 via-darker to-darker -z-10\"><\/div>\n \n \n <div class=\"absolute top-32 left-10 text-brand-rose text-6xl opacity-10\"><i class=\"fa-solid fa-person-running\"><\/i><\/div>\n <div class=\"absolute bottom-20 right-10 text-brand-amber text-8xl opacity-10\"><i class=\"fa-solid fa-film\"><\/i><\/div>\n <div class=\"absolute top-52 right-20 text-brand-orange text-5xl opacity-10\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\n <div class=\"absolute bottom-32 left-32 text-brand-yellow text-7xl opacity-10\"><i class=\"fa-solid fa-bone\"><\/i><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center\">\n \n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-rose-900\/30 border border-brand-rose\/50 text-brand-rose text-sm font-bold mb-8 uppercase tracking-widest\">\n <i class=\"fa-solid fa-clapperboard\"><\/i> Divisi\u00f3n de Movimiento y Cin\u00e9tica\n <\/div>\n \n \n <h1 class=\"text-3xl md:text-5xl lg:text-7xl font-extrabold text-white tracking-tight mb-8 leading-tight max-w-6xl mx-auto\">\n Movimiento Fluido que <br class=\"hidden md:block\">\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-rose via-brand-orange to-brand-amber\">Transforma Arte Est\u00e1tico en Vida<\/span>\n <\/h1>\n \n <h2 class=\"text-xl md:text-2xl font-semibold text-slate-300 mb-6 max-w-5xl mx-auto\">\n L\u00edderes globales en <span class=\"text-brand-orange\">Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Efectos Visuales 2D y Animaci\u00f3n de Cinem\u00e1ticas.<\/span>\n <\/h2>\n \n <p class=\"mt-6 text-lg text-slate-400 max-w-4xl mx-auto leading-relaxed mb-10\">\n El arte 2D de alta calidad atrapa la mirada del jugador, pero es la animaci\u00f3n fluida y receptiva la que conquista su coraz\u00f3n. En <strong>Gameartoutsourcestudio<\/strong>, nuestro equipo de animadores senior aplica los 12 principios fundamentales de la animaci\u00f3n tradicional a los motores de juegos modernos. Dominamos la ilusi\u00f3n de peso, la anticipaci\u00f3n y el impacto. Ya sea que su proyecto requiera ciclos de ataque a 60 FPS mediante Spine 2D, explosiones m\u00e1gicas cuadro por cuadro, o escenas narrativas profundas, entregamos un movimiento que amplifica el \u00abgame feel\u00bb y se integra a la perfecci\u00f3n en su c\u00f3digo.\n <\/p>\n \n <div class=\"flex flex-col sm:flex-row justify-center gap-4\">\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"bg-gradient-to-r from-brand-rose to-brand-orange text-white px-8 py-4 rounded-full font-bold text-lg hover:from-brand-orange hover:to-brand-rose hover:text-white transition-all shadow-[0_0_20px_rgba(244,63,94,0.4)] flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-paper-plane\"><\/i> Presupuestar Animaciones\n <\/a>\n <a href=\"#servicios-anim\" class=\"px-8 py-4 rounded-full font-bold text-lg border border-brand-rose\/50 text-brand-rose hover:bg-brand-rose\/10 transition-all flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-person-snowboarding\"><\/i> Ver Cat\u00e1logo de Animaci\u00f3n\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"servicios-anim\" class=\"py-24 bg-dark relative border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-20\">\n <i class=\"fa-solid fa-layer-group text-4xl text-brand-orange mb-4\"><\/i>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Nuestras Disciplinas de Animaci\u00f3n 2D<\/h2>\n <p class=\"text-lg text-slate-400 leading-relaxed\">\n Abarcamos todo el espectro del movimiento bidimensional. Desde la eficiencia quir\u00fargica de la interpolaci\u00f3n esquel\u00e9tica hasta el encanto artesanal de la animaci\u00f3n tradicional, tenemos la soluci\u00f3n t\u00e9cnica perfecta para su dise\u00f1o de juego y presupuesto de memoria.\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-rose transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-rose-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-rose group-hover:text-white transition-all text-brand-rose shadow-inner border border-brand-rose\/20\">\n <i class=\"fa-solid fa-bone text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n Esquel\u00e9tica 2D<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Nuestra especialidad absoluta. Utilizamos software l\u00edder en la industria como Spine 2D para crear animaciones fluidas basadas en mallas (meshes). Este m\u00e9todo permite transiciones perfectas, mezcla de animaciones (ej. disparar mientras se corre) y tama\u00f1os de archivo extremadamente peque\u00f1os ideales para plataformas m\u00f3viles.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-orange transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-orange-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-orange group-hover:text-white transition-all text-brand-orange shadow-inner border border-brand-orange\/20\">\n <i class=\"fa-solid fa-film text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n Cuadro por Cuadro<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Para aquellos juegos que buscan la est\u00e9tica retro de los 16 bits, el \u00abpixel art\u00bb, o el estilo de dibujos animados cl\u00e1sicos de televisi\u00f3n. Dibujamos manualmente cada fotograma clave (keyframe) y fotograma intermedio (in-between) para crear un impacto visual exagerado, din\u00e1mico y lleno de personalidad artesanal.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-amber transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-amber-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-amber group-hover:text-white transition-all text-brand-amber shadow-inner border border-brand-amber\/20\">\n <i class=\"fa-solid fa-user-ninja text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Personajes 2D<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Desarrollamos el conjunto completo de movimientos para sus h\u00e9roes y jefes finales (bosses). Entregamos paquetes de animaci\u00f3n completos que incluyen estados de reposo (idle), caminar, correr, saltar, atacar, recibir da\u00f1o, bloqueo y secuencias de muerte, todos con un \u00abtiming\u00bb ajustado para la respuesta inmediata del control.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-yellow transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-yellow-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-yellow group-hover:text-white transition-all text-brand-yellow shadow-inner border border-brand-yellow\/20\">\n <i class=\"fa-solid fa-tree text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Entornos<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Un escenario est\u00e1tico parece un lienzo muerto. Damos vida a los biomas a\u00f1adiendo bucles de animaci\u00f3n (loops) al viento moviendo los \u00e1rboles, cascadas fluyendo, nubes desplaz\u00e1ndose, fuego parpadeante y criaturas de fondo, creando una inmersi\u00f3n profunda sin distraer la atenci\u00f3n de la acci\u00f3n principal.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-rose transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-rose-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-rose group-hover:text-white transition-all text-brand-rose shadow-inner border border-brand-rose\/20\">\n <i class=\"fa-solid fa-computer-mouse text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Interfaz de Usuario<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n A\u00f1adimos la retroalimentaci\u00f3n t\u00e1ctil crucial (\u00abJuiciness\u00bb) a sus men\u00fas. Animamos la apertura de cofres de bot\u00edn, brillos al pasar el cursor (hover), transiciones de pantalla de carga, y celebraciones de \u00abNivel Completado\u00bb con efectos cin\u00e9ticos que mantienen altos los niveles de dopamina del jugador.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-orange transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-orange-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-orange group-hover:text-white transition-all text-brand-orange shadow-inner border border-brand-orange\/20\">\n <i class=\"fa-solid fa-meteor text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Efectos Visuales 2D (VFX)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Desde hechizos m\u00e1gicos arcanos hasta explosiones de ciencia ficci\u00f3n y estelas de espadas (slash trails). Combinamos animaci\u00f3n tradicional de part\u00edculas, t\u00e9cnicas de sombreado (shaders) y deformaci\u00f3n de mallas para crear efectos visuales potentes que comunican claramente el da\u00f1o y la escala de las habilidades en el juego.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-amber transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-amber-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-amber group-hover:text-white transition-all text-brand-amber shadow-inner border border-brand-amber\/20\">\n <i class=\"fa-solid fa-scissors text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Recortes (Cut-out)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Un estilo visual ic\u00f3nico utilizado en muchos juegos aclamados por la cr\u00edtica. Segmentamos el arte 2D plano en piezas r\u00edgidas simulando articulaciones de marionetas de papel. Ofrece un encanto visual \u00fanico, es altamente eficiente de producir en masa y permite una iteraci\u00f3n r\u00e1pida durante la fase de equilibrio del juego.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-yellow transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-yellow-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-yellow group-hover:text-white transition-all text-brand-yellow shadow-inner border border-brand-yellow\/20\">\n <i class=\"fa-solid fa-video text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Cinem\u00e1ticas<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Contamos su historia. Producimos videos de introducci\u00f3n (Intros), finales de juego (Outros) y escenas narrativas entre niveles. Utilizamos After Effects y animaci\u00f3n por capas para crear experiencias cinematogr\u00e1ficas 2.5D que sumergen a la audiencia profundamente en el \u00ablore\u00bb de su universo.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-rose transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-rose-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-rose group-hover:text-white transition-all text-brand-rose shadow-inner border border-brand-rose\/20\">\n <i class=\"fa-solid fa-sitemap text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Rigging 2D Avanzado<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n El esqueleto t\u00e9cnico de la animaci\u00f3n moderna. Construimos sistemas \u00f3seos l\u00f3gicos, implementamos Cinem\u00e1tica Inversa (IK) para un contacto s\u00f3lido con el suelo, aplicamos restricciones (constraints) y realizamos pesados de v\u00e9rtices (skinning) complejos para permitir pseudo-rotaciones 3D en dibujos puramente 2D.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-orange transition-all glow-effect-anim group md:col-span-2 lg:col-span-3\">\n <div class=\"flex flex-col md:flex-row items-center gap-6\">\n <div class=\"w-20 h-20 shrink-0 rounded-2xl bg-orange-500\/10 flex items-center justify-center group-hover:bg-brand-orange group-hover:text-white transition-all text-brand-orange shadow-inner border border-brand-orange\/20\">\n <i class=\"fa-solid fa-file-zipper text-4xl\"><\/i>\n <\/div>\n <div class=\"text-left\">\n <h3 class=\"text-2xl font-bold text-white mb-3\">Optimizaci\u00f3n de Activos Animados<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed\">\n El arte animado pesado destruye la tasa de fotogramas (FPS) en dispositivos de gama baja. Nuestro servicio de Optimizaci\u00f3n asegura que sus animaciones sean ligeras. Generamos Atlas de Texturas empaquetados eficientemente, depuramos fotogramas innecesarios, exportamos datos JSON limpios y garantizamos que el motor del juego procese cada movimiento con la menor cantidad de llamadas de dibujo (draw calls) y sobrecarga de CPU posible, preservando al mismo tiempo la fidelidad visual original.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"pipeline\" class=\"py-24 bg-darker relative border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n \n \n <div>\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-rose\/10 border border-brand-rose\/30 text-brand-rose text-sm font-semibold mb-6\">\n <i class=\"fa-solid fa-clock-rotate-left\"><\/i> Disciplina y Flujo\n <\/div>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6 leading-tight\">\n Nuestro <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-rose to-brand-amber\">Flujo de Trabajo de Animaci\u00f3n<\/span>\n <\/h2>\n <p class=\"text-slate-400 mb-6 leading-relaxed\">\n Animar para videojuegos requiere un equilibrio perfecto entre est\u00e9tica y mec\u00e1nica funcional. Una animaci\u00f3n de ataque bell\u00edsima no sirve si sus fotogramas de anticipaci\u00f3n (wind-up) tardan tanto que el jugador siente que los controles no responden. En <strong>Gameartoutsourcestudio<\/strong>, integramos los principios de \u00abGame Feel\u00bb en cada paso.\n <\/p>\n \n <div class=\"space-y-6 mt-8\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-rose font-bold shrink-0 shadow-[0_0_10px_rgba(244,63,94,0.3)]\">01<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">An\u00e1lisis de Fotogramas y Mec\u00e1nicas<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Evaluamos junto a sus dise\u00f1adores de juego los tiempos exactos requeridos: duraci\u00f3n de la anticipaci\u00f3n, el punto de impacto (Hitbox activo), y el tiempo de recuperaci\u00f3n (recovery frames) para asegurar respuestas precisas.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-orange font-bold shrink-0 shadow-[0_0_10px_rgba(249,115,22,0.3)]\">02<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Corte de Arte (Slicing) y Rigging<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Tomamos el arte est\u00e1tico final, lo dividimos l\u00f3gicamente en cientos de piezas individuales, repintamos las partes ocultas y construimos la estructura esquel\u00e9tica (Rig) con deformaciones de malla complejas.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-amber font-bold shrink-0 shadow-[0_0_10px_rgba(245,158,11,0.3)]\">03<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Bloqueo de Poses Clave (Stepped Animation)<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Creamos las poses extremas sin interpolaci\u00f3n. Esto permite a sus directores de arte revisar la silueta, la actitud y el peso de la acci\u00f3n antes de comprometer tiempo en suavizar el movimiento.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-yellow font-bold shrink-0 shadow-[0_0_10px_rgba(234,179,8,0.3)]\">04<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Pulido (Splining) e Integraci\u00f3n<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Ajustamos las curvas de interpolaci\u00f3n gr\u00e1fica, a\u00f1adimos acciones secundarias (rebote de ropa, movimiento de cabello) y exportamos la animaci\u00f3n directamente en formatos compatibles con Unity o Unreal.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-rose-900\/30 flex flex-col items-center justify-center text-center glow-effect-anim\">\n <i class=\"fa-solid fa-person-running text-5xl text-brand-rose mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Spine Pro<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">El Est\u00e1ndar de la Industria 2D<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-orange-900\/30 flex flex-col items-center justify-center text-center glow-effect-anim transform translate-y-8\">\n <i class=\"fa-solid fa-dragon text-5xl text-brand-orange mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">DragonBones<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Alternativas Ligeras y Eficientes<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-amber-900\/30 flex flex-col items-center justify-center text-center glow-effect-anim\">\n <i class=\"fa-solid fa-film text-5xl text-brand-amber mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">After Effects<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Motion Graphics y VFX Avanzados<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-yellow-900\/30 flex flex-col items-center justify-center text-center glow-effect-anim transform translate-y-8\">\n <i class=\"fa-solid fa-code text-5xl text-brand-yellow mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Motor Nativo<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">\u00c1rboles de Estado en Unity\/UE5<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"faq\" class=\"py-24 bg-dark relative border-t border-slate-800\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <i class=\"fa-solid fa-circle-question text-4xl text-brand-orange mb-4\"><\/i>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Preguntas Frecuentes sobre Animaci\u00f3n 2D<\/h2>\n <p class=\"text-slate-400 text-lg\">Respuestas t\u00e9cnicas para integrar el arte en movimiento a sus flujos de desarrollo.<\/p>\n <\/div>\n\n <div class=\"space-y-6\">\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-rose\"><\/i> \u00bfPor qu\u00e9 elegir Animaci\u00f3n Esquel\u00e9tica (Spine) en lugar de Sprites tradicionales?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n La animaci\u00f3n esquel\u00e9tica ofrece ventajas t\u00e9cnicas masivas para la mayor\u00eda de los juegos modernos. En lugar de guardar 30 im\u00e1genes diferentes para una animaci\u00f3n de un segundo (Frame-by-Frame), guardamos 1 imagen cortada en partes y un peque\u00f1o archivo de texto con las matem\u00e1ticas del movimiento. Esto reduce el uso de memoria RAM en m\u00e1s de un 80%, permite animaciones a 60 FPS ultra-suaves e incluso permite cambiar piezas (como equipar una nueva espada) din\u00e1micamente durante el juego sin redibujar toda la animaci\u00f3n.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-orange\"><\/i> \u00bfLos animadores pueden crear pseudorrotaciones 3D en 2D?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n S\u00ed, mediante el uso avanzado de mallas deformables (Mesh Deformation) en herramientas como Spine Pro. Al asignar pesos de v\u00e9rtices (skinning) a una imagen plana y mover los huesos, podemos enga\u00f1ar al ojo haci\u00e9ndole creer que un rostro 2D est\u00e1 girando en el espacio 3D, a\u00f1adiendo una profundidad incre\u00edble a las interacciones de los personajes y a los fondos de tipo \u00abparalaje\u00bb, sin el inmenso costo de modelar verdaderamente en 3D.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-amber\"><\/i> \u00bfSuministran \u00e1rboles de animaci\u00f3n (Animation State Machines)?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n Nuestros Artistas T\u00e9cnicos no solo entregan las animaciones base, sino que pueden configurarlas directamente dentro de la m\u00e1quina de estados de su motor (como el \u00abAnimator Controller\u00bb en Unity). Podemos configurar los par\u00e1metros, las transiciones suaves (Blending) entre estar inactivo (Idle) y empezar a correr, y asegurar que la l\u00f3gica de c\u00f3digo reaccione perfectamente a los \u00abEventos de Animaci\u00f3n\u00bb (ej. reproducir el sonido de pisada justo cuando el pie toca el suelo).\n <\/p>\n <\/div>\n \n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-yellow\"><\/i> Si ya tengo el arte de mi juego, \u00bfsolo pueden proporcionar la animaci\u00f3n?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n Totalmente. Aunque ofrecemos paquetes completos de dise\u00f1o y animaci\u00f3n, muchos clientes nos env\u00edan sus archivos de Photoshop o Illustrator (PSD\/AI) preexistentes. Nuestro equipo se encargar\u00e1 de realizar el proceso de \u00abSlicing\u00bb (separar la imagen en piezas l\u00f3gicas para las articulaciones), crear el Rigging y luego animar todo seg\u00fan sus especificaciones y lista de requerimientos (Shot List), entregando los datos finales listos para ser implementados.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative overflow-hidden bg-gradient-to-b from-dark to-slate-900 border-t border-slate-800\">\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-brand-rose\/10 via-darker to-darker -z-10\"><\/div>\n <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n \n <i class=\"fa-solid fa-clapperboard text-6xl text-brand-rose mb-8 glow-effect-anim rounded-full bg-slate-800 p-6\"><\/i>\n \n <h2 class=\"text-4xl md:text-5xl font-bold text-white mb-6\">\n Inyecte Vida a su <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-rose to-brand-amber\">Pr\u00f3ximo Gran \u00c9xito<\/span>\n <\/h2>\n <p class=\"text-xl text-slate-400 mb-12 max-w-2xl mx-auto\">\n Una animaci\u00f3n torpe arruina el mejor de los artes. Una animaci\u00f3n estelar eleva los dise\u00f1os m\u00e1s simples a niveles legendarios. As\u00f3ciese con expertos que comprenden el \u00abGame Feel\u00bb desde el primer fotograma.\n <\/p>\n\n <div class=\"bg-slate-800\/50 backdrop-blur-sm border border-slate-700 rounded-3xl p-8 md:p-12 shadow-2xl\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n <div class=\"text-left\">\n <h3 class=\"text-2xl font-bold text-white mb-4\">Coordinaci\u00f3n de Producci\u00f3n 2D<\/h3>\n <p class=\"text-slate-400 mb-8 text-sm\">\n Nuestros Productores de Animaci\u00f3n est\u00e1n disponibles para revisar sus hojas de sprites o descripciones de personajes. Ofrecemos estimaciones detalladas sobre tiempos de rigging e interpolaci\u00f3n de cuadros por ciclo de animaci\u00f3n.\n <\/p>\n \n <div class=\"flex items-center gap-4 mb-6 group cursor-pointer\">\n <div class=\"w-12 h-12 rounded-full bg-brand-rose\/20 flex items-center justify-center group-hover:bg-brand-rose\/40 transition-colors\">\n <i class=\"fa-solid fa-envelope text-xl text-brand-rose\"><\/i>\n <\/div>\n <div>\n <p class=\"text-xs text-slate-500 uppercase tracking-wider font-bold\">L\u00ednea Directa del Estudio<\/p>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"text-lg font-bold text-white hover:text-brand-orange transition-colors\">\n info@gameartoutsourcestudio.de\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center gap-4 group cursor-pointer\">\n <div class=\"w-12 h-12 rounded-full bg-brand-amber\/20 flex items-center justify-center group-hover:bg-brand-amber\/40 transition-colors\">\n <i class=\"fa-solid fa-shield text-xl text-brand-amber\"><\/i>\n <\/div>\n <div>\n <p class=\"text-xs text-slate-500 uppercase tracking-wider font-bold\">Protecci\u00f3n de la IP<\/p>\n <p class=\"text-sm font-bold text-white\">Listos para firmar NDA<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-darker rounded-2xl p-6 border border-slate-700 text-left\">\n <h4 class=\"text-lg font-bold text-white mb-6 flex items-center gap-2\">\n <i class=\"fa-solid fa-globe text-brand-orange\"><\/i> Soporte de Animaci\u00f3n Global\n <\/h4>\n <div class=\"space-y-4\">\n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-rose transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-map-location-dot text-brand-rose group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Am\u00e9rica del Norte (USA\/CAN)<\/span>\n <\/div>\n <span class=\"text-xs text-brand-rose bg-brand-rose\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Principal<\/span>\n <\/div>\n \n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-orange transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-landmark-flag text-brand-orange group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Europa Continental \/ UK<\/span>\n <\/div>\n <span class=\"text-xs text-brand-orange bg-brand-orange\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Principal<\/span>\n <\/div>\n \n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-amber transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-torii-gate text-brand-amber group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Asia-Pac\u00edfico<\/span>\n <\/div>\n <span class=\"text-xs text-brand-amber bg-brand-amber\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Activo<\/span>\n <\/div>\n\n <div class=\"mt-4 pt-4 border-t border-slate-700\">\n <p class=\"text-xs text-slate-500 leading-relaxed\">\n <i class=\"fa-solid fa-circle-info mr-1\"><\/i> Nuestros Supervisores de Animaci\u00f3n se adaptan a su \u00abDaily Standup\u00bb para revisar entregables en video o mediante compilaciones jugables en la franja horaria que mejor le convenga.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-darker py-12 border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6\">\n \n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-gamepad text-2xl text-brand-rose\"><\/i>\n <span class=\"font-bold text-xl tracking-tighter text-white\">\n Gameart<span class=\"text-brand-orange\">outsource<\/span>studio\n <\/span>\n <\/div>\n \n \n <div class=\"flex flex-wrap justify-center gap-4 text-sm text-slate-500 max-w-5xl\">\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-bone text-brand-rose\"><\/i> Animaci\u00f3n Esquel\u00e9tica 2D<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-film text-brand-orange\"><\/i> Animaci\u00f3n Cuadro por Cuadro<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-user-ninja text-brand-amber\"><\/i> Animaci\u00f3n de Personajes 2D<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-tree text-brand-yellow\"><\/i> Animaci\u00f3n de Entornos<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-computer-mouse text-brand-rose\"><\/i> Animaci\u00f3n de Interfaz de Usuario<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-meteor text-brand-orange\"><\/i> Efectos Visuales 2D<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-scissors text-brand-amber\"><\/i> Animaci\u00f3n de Recortes<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-video text-brand-yellow\"><\/i> Animaci\u00f3n de Cinem\u00e1ticas<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-sitemap text-brand-rose\"><\/i> Rigging 2D Avanzado<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-file-zipper text-brand-orange\"><\/i> Optimizaci\u00f3n de Activos Animados<\/span>\n <\/div>\n \n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-brand-rose transition-colors\">\n <i class=\"fa-brands fa-linkedin-in\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-brand-orange transition-colors\">\n <i class=\"fa-brands fa-artstation\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-brand-amber transition-colors\">\n <i class=\"fa-brands fa-behance\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"mt-8 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-slate-500 text-sm text-center md:text-left\">\n © 2024 Gameartoutsourcestudio. Todos los derechos reservados. Divisi\u00f3n Experta en Animaci\u00f3n 2D para Juegos.\n <\/p>\n <div class=\"flex items-center gap-2 text-slate-400 text-sm font-semibold bg-slate-800 px-4 py-2 rounded-full\">\n <i class=\"fa-solid fa-envelope text-brand-rose\"><\/i>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"hover:text-white transition-colors\">info@gameartoutsourcestudio.de<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gameartoutsourcestudio | Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Animaci\u00f3n de Entornos, Animaci\u00f3n de Interfaz de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"wangjianchen02@gmail.com","author_link":"https:\/\/3danimationart.co.uk\/bg\/author\/wangjianchen02gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Gameartoutsourcestudio | Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Animaci\u00f3n de Entornos, Animaci\u00f3n de Interfaz de […]","_links":{"self":[{"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":1,"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/pages\/24\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n \n Gameartoutsourcestudio | Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Animaci\u00f3n de Entornos, Animaci\u00f3n de Interfaz de Usuario, Efectos Visuales 2D, Animaci\u00f3n de Recortes, Animaci\u00f3n de Cinem\u00e1ticas, Rigging 2D Avanzado, Optimizaci\u00f3n de Activos Animados<\/title>\n \n <meta name=\"description\" content=\"Estudio de \u00e9lite en animaci\u00f3n para videojuegos. Ofrecemos Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Animaci\u00f3n de Entornos, Animaci\u00f3n de Interfaz de Usuario, Efectos Visuales 2D, Animaci\u00f3n de Recortes, Animaci\u00f3n de Cinem\u00e1ticas y Rigging 2D Avanzado. Cont\u00e1ctenos: info@gameartoutsourcestudio.de\">\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n dark: '#0f172a',\n darker: '#020617',\n brand: {\n rose: '#f43f5e',\n orange: '#f97316',\n amber: '#f59e0b',\n yellow: '#eab308',\n slate: '#64748b'\n }\n },\n fontFamily: {\n sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n <style>\n .icon-gradient-anim {\n background: -webkit-linear-gradient(45deg, #f43f5e, #f59e0b);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .glow-effect-anim {\n box-shadow: 0 0 20px rgba(244, 63, 94, 0.15);\n transition: all 0.3s ease;\n }\n .glow-effect-anim:hover {\n box-shadow: 0 0 30px rgba(249, 115, 22, 0.4);\n transform: translateY(-5px);\n border-color: rgba(245, 158, 11, 0.5);\n }\n .kinetic-pattern {\n background-image: radial-gradient(rgba(244, 63, 94, 0.05) 2px, transparent 2px);\n background-size: 40px 40px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-darker text-slate-300 font-sans antialiased selection:bg-brand-rose selection:text-white kinetic-pattern\">\n\n \n <nav class=\"fixed w-full z-50 top-0 bg-darker\/90 backdrop-blur-md border-b border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-20\">\n <div class=\"flex-shrink-0 flex items-center gap-3\">\n <i class=\"fa-solid fa-gamepad text-3xl text-brand-rose\"><\/i>\n <span class=\"font-bold text-xl md:text-2xl tracking-tighter text-white\">\n Gameart<span class=\"text-brand-orange\">outsource<\/span>studio\n <\/span>\n <\/div>\n <div class=\"hidden md:flex space-x-8 items-center\">\n <a href=\"index.html\" class=\"text-sm font-medium hover:text-brand-rose transition-colors\"><i class=\"fa-solid fa-arrow-left mr-1\"><\/i> Inicio<\/a>\n <a href=\"#servicios-anim\" class=\"text-sm font-medium hover:text-brand-rose transition-colors\">Servicios 2D<\/a>\n <a href=\"#pipeline\" class=\"text-sm font-medium hover:text-brand-rose transition-colors\">Flujo de Trabajo<\/a>\n <a href=\"#faq\" class=\"text-sm font-medium hover:text-brand-rose transition-colors\">FAQ Animaci\u00f3n<\/a>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"bg-gradient-to-r from-brand-rose to-brand-orange hover:from-brand-orange hover:to-brand-rose text-white px-5 py-2.5 rounded-full font-bold transition-all shadow-lg shadow-brand-rose\/20 flex items-center gap-2\">\n <i class=\"fa-solid fa-envelope\"><\/i> Dar Vida a tu Juego\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <section class=\"relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden\">\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-brand-rose\/10 via-darker to-darker -z-10\"><\/div>\n \n \n <div class=\"absolute top-32 left-10 text-brand-rose text-6xl opacity-10\"><i class=\"fa-solid fa-person-running\"><\/i><\/div>\n <div class=\"absolute bottom-20 right-10 text-brand-amber text-8xl opacity-10\"><i class=\"fa-solid fa-film\"><\/i><\/div>\n <div class=\"absolute top-52 right-20 text-brand-orange text-5xl opacity-10\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\n <div class=\"absolute bottom-32 left-32 text-brand-yellow text-7xl opacity-10\"><i class=\"fa-solid fa-bone\"><\/i><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center\">\n \n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-rose-900\/30 border border-brand-rose\/50 text-brand-rose text-sm font-bold mb-8 uppercase tracking-widest\">\n <i class=\"fa-solid fa-clapperboard\"><\/i> Divisi\u00f3n de Movimiento y Cin\u00e9tica\n <\/div>\n \n \n <h1 class=\"text-3xl md:text-5xl lg:text-7xl font-extrabold text-white tracking-tight mb-8 leading-tight max-w-6xl mx-auto\">\n Movimiento Fluido que <br class=\"hidden md:block\">\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-rose via-brand-orange to-brand-amber\">Transforma Arte Est\u00e1tico en Vida<\/span>\n <\/h1>\n \n <h2 class=\"text-xl md:text-2xl font-semibold text-slate-300 mb-6 max-w-5xl mx-auto\">\n L\u00edderes globales en <span class=\"text-brand-orange\">Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Efectos Visuales 2D y Animaci\u00f3n de Cinem\u00e1ticas.<\/span>\n <\/h2>\n \n <p class=\"mt-6 text-lg text-slate-400 max-w-4xl mx-auto leading-relaxed mb-10\">\n El arte 2D de alta calidad atrapa la mirada del jugador, pero es la animaci\u00f3n fluida y receptiva la que conquista su coraz\u00f3n. En <strong>Gameartoutsourcestudio<\/strong>, nuestro equipo de animadores senior aplica los 12 principios fundamentales de la animaci\u00f3n tradicional a los motores de juegos modernos. Dominamos la ilusi\u00f3n de peso, la anticipaci\u00f3n y el impacto. Ya sea que su proyecto requiera ciclos de ataque a 60 FPS mediante Spine 2D, explosiones m\u00e1gicas cuadro por cuadro, o escenas narrativas profundas, entregamos un movimiento que amplifica el \u00abgame feel\u00bb y se integra a la perfecci\u00f3n en su c\u00f3digo.\n <\/p>\n \n <div class=\"flex flex-col sm:flex-row justify-center gap-4\">\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"bg-gradient-to-r from-brand-rose to-brand-orange text-white px-8 py-4 rounded-full font-bold text-lg hover:from-brand-orange hover:to-brand-rose hover:text-white transition-all shadow-[0_0_20px_rgba(244,63,94,0.4)] flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-paper-plane\"><\/i> Presupuestar Animaciones\n <\/a>\n <a href=\"#servicios-anim\" class=\"px-8 py-4 rounded-full font-bold text-lg border border-brand-rose\/50 text-brand-rose hover:bg-brand-rose\/10 transition-all flex justify-center items-center gap-3\">\n <i class=\"fa-solid fa-person-snowboarding\"><\/i> Ver Cat\u00e1logo de Animaci\u00f3n\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"servicios-anim\" class=\"py-24 bg-dark relative border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-20\">\n <i class=\"fa-solid fa-layer-group text-4xl text-brand-orange mb-4\"><\/i>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Nuestras Disciplinas de Animaci\u00f3n 2D<\/h2>\n <p class=\"text-lg text-slate-400 leading-relaxed\">\n Abarcamos todo el espectro del movimiento bidimensional. Desde la eficiencia quir\u00fargica de la interpolaci\u00f3n esquel\u00e9tica hasta el encanto artesanal de la animaci\u00f3n tradicional, tenemos la soluci\u00f3n t\u00e9cnica perfecta para su dise\u00f1o de juego y presupuesto de memoria.\n <\/p>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n \n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-rose transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-rose-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-rose group-hover:text-white transition-all text-brand-rose shadow-inner border border-brand-rose\/20\">\n <i class=\"fa-solid fa-bone text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n Esquel\u00e9tica 2D<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Nuestra especialidad absoluta. Utilizamos software l\u00edder en la industria como Spine 2D para crear animaciones fluidas basadas en mallas (meshes). Este m\u00e9todo permite transiciones perfectas, mezcla de animaciones (ej. disparar mientras se corre) y tama\u00f1os de archivo extremadamente peque\u00f1os ideales para plataformas m\u00f3viles.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-orange transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-orange-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-orange group-hover:text-white transition-all text-brand-orange shadow-inner border border-brand-orange\/20\">\n <i class=\"fa-solid fa-film text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n Cuadro por Cuadro<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Para aquellos juegos que buscan la est\u00e9tica retro de los 16 bits, el \u00abpixel art\u00bb, o el estilo de dibujos animados cl\u00e1sicos de televisi\u00f3n. Dibujamos manualmente cada fotograma clave (keyframe) y fotograma intermedio (in-between) para crear un impacto visual exagerado, din\u00e1mico y lleno de personalidad artesanal.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-amber transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-amber-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-amber group-hover:text-white transition-all text-brand-amber shadow-inner border border-brand-amber\/20\">\n <i class=\"fa-solid fa-user-ninja text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Personajes 2D<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Desarrollamos el conjunto completo de movimientos para sus h\u00e9roes y jefes finales (bosses). Entregamos paquetes de animaci\u00f3n completos que incluyen estados de reposo (idle), caminar, correr, saltar, atacar, recibir da\u00f1o, bloqueo y secuencias de muerte, todos con un \u00abtiming\u00bb ajustado para la respuesta inmediata del control.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-yellow transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-yellow-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-yellow group-hover:text-white transition-all text-brand-yellow shadow-inner border border-brand-yellow\/20\">\n <i class=\"fa-solid fa-tree text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Entornos<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Un escenario est\u00e1tico parece un lienzo muerto. Damos vida a los biomas a\u00f1adiendo bucles de animaci\u00f3n (loops) al viento moviendo los \u00e1rboles, cascadas fluyendo, nubes desplaz\u00e1ndose, fuego parpadeante y criaturas de fondo, creando una inmersi\u00f3n profunda sin distraer la atenci\u00f3n de la acci\u00f3n principal.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-rose transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-rose-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-rose group-hover:text-white transition-all text-brand-rose shadow-inner border border-brand-rose\/20\">\n <i class=\"fa-solid fa-computer-mouse text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Interfaz de Usuario<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n A\u00f1adimos la retroalimentaci\u00f3n t\u00e1ctil crucial (\u00abJuiciness\u00bb) a sus men\u00fas. Animamos la apertura de cofres de bot\u00edn, brillos al pasar el cursor (hover), transiciones de pantalla de carga, y celebraciones de \u00abNivel Completado\u00bb con efectos cin\u00e9ticos que mantienen altos los niveles de dopamina del jugador.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-orange transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-orange-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-orange group-hover:text-white transition-all text-brand-orange shadow-inner border border-brand-orange\/20\">\n <i class=\"fa-solid fa-meteor text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Efectos Visuales 2D (VFX)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Desde hechizos m\u00e1gicos arcanos hasta explosiones de ciencia ficci\u00f3n y estelas de espadas (slash trails). Combinamos animaci\u00f3n tradicional de part\u00edculas, t\u00e9cnicas de sombreado (shaders) y deformaci\u00f3n de mallas para crear efectos visuales potentes que comunican claramente el da\u00f1o y la escala de las habilidades en el juego.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-amber transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-amber-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-amber group-hover:text-white transition-all text-brand-amber shadow-inner border border-brand-amber\/20\">\n <i class=\"fa-solid fa-scissors text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Recortes (Cut-out)<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Un estilo visual ic\u00f3nico utilizado en muchos juegos aclamados por la cr\u00edtica. Segmentamos el arte 2D plano en piezas r\u00edgidas simulando articulaciones de marionetas de papel. Ofrece un encanto visual \u00fanico, es altamente eficiente de producir en masa y permite una iteraci\u00f3n r\u00e1pida durante la fase de equilibrio del juego.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-yellow transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-yellow-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-yellow group-hover:text-white transition-all text-brand-yellow shadow-inner border border-brand-yellow\/20\">\n <i class=\"fa-solid fa-video text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Animaci\u00f3n de Cinem\u00e1ticas<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n Contamos su historia. Producimos videos de introducci\u00f3n (Intros), finales de juego (Outros) y escenas narrativas entre niveles. Utilizamos After Effects y animaci\u00f3n por capas para crear experiencias cinematogr\u00e1ficas 2.5D que sumergen a la audiencia profundamente en el \u00ablore\u00bb de su universo.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-rose transition-all glow-effect-anim group\">\n <div class=\"w-16 h-16 rounded-2xl bg-rose-500\/10 flex items-center justify-center mb-6 group-hover:bg-brand-rose group-hover:text-white transition-all text-brand-rose shadow-inner border border-brand-rose\/20\">\n <i class=\"fa-solid fa-sitemap text-3xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-white mb-3\">Rigging 2D Avanzado<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed mb-4\">\n El esqueleto t\u00e9cnico de la animaci\u00f3n moderna. Construimos sistemas \u00f3seos l\u00f3gicos, implementamos Cinem\u00e1tica Inversa (IK) para un contacto s\u00f3lido con el suelo, aplicamos restricciones (constraints) y realizamos pesados de v\u00e9rtices (skinning) complejos para permitir pseudo-rotaciones 3D en dibujos puramente 2D.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-gradient-to-b from-slate-800\/80 to-slate-900\/80 rounded-3xl p-8 border border-slate-700 hover:border-brand-orange transition-all glow-effect-anim group md:col-span-2 lg:col-span-3\">\n <div class=\"flex flex-col md:flex-row items-center gap-6\">\n <div class=\"w-20 h-20 shrink-0 rounded-2xl bg-orange-500\/10 flex items-center justify-center group-hover:bg-brand-orange group-hover:text-white transition-all text-brand-orange shadow-inner border border-brand-orange\/20\">\n <i class=\"fa-solid fa-file-zipper text-4xl\"><\/i>\n <\/div>\n <div class=\"text-left\">\n <h3 class=\"text-2xl font-bold text-white mb-3\">Optimizaci\u00f3n de Activos Animados<\/h3>\n <p class=\"text-slate-400 text-sm leading-relaxed\">\n El arte animado pesado destruye la tasa de fotogramas (FPS) en dispositivos de gama baja. Nuestro servicio de Optimizaci\u00f3n asegura que sus animaciones sean ligeras. Generamos Atlas de Texturas empaquetados eficientemente, depuramos fotogramas innecesarios, exportamos datos JSON limpios y garantizamos que el motor del juego procese cada movimiento con la menor cantidad de llamadas de dibujo (draw calls) y sobrecarga de CPU posible, preservando al mismo tiempo la fidelidad visual original.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"pipeline\" class=\"py-24 bg-darker relative border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 items-center\">\n \n \n <div>\n <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-rose\/10 border border-brand-rose\/30 text-brand-rose text-sm font-semibold mb-6\">\n <i class=\"fa-solid fa-clock-rotate-left\"><\/i> Disciplina y Flujo\n <\/div>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6 leading-tight\">\n Nuestro <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-rose to-brand-amber\">Flujo de Trabajo de Animaci\u00f3n<\/span>\n <\/h2>\n <p class=\"text-slate-400 mb-6 leading-relaxed\">\n Animar para videojuegos requiere un equilibrio perfecto entre est\u00e9tica y mec\u00e1nica funcional. Una animaci\u00f3n de ataque bell\u00edsima no sirve si sus fotogramas de anticipaci\u00f3n (wind-up) tardan tanto que el jugador siente que los controles no responden. En <strong>Gameartoutsourcestudio<\/strong>, integramos los principios de \u00abGame Feel\u00bb en cada paso.\n <\/p>\n \n <div class=\"space-y-6 mt-8\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-rose font-bold shrink-0 shadow-[0_0_10px_rgba(244,63,94,0.3)]\">01<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">An\u00e1lisis de Fotogramas y Mec\u00e1nicas<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Evaluamos junto a sus dise\u00f1adores de juego los tiempos exactos requeridos: duraci\u00f3n de la anticipaci\u00f3n, el punto de impacto (Hitbox activo), y el tiempo de recuperaci\u00f3n (recovery frames) para asegurar respuestas precisas.<\/p>\n <\/div>\n <\/div>\n \n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-orange font-bold shrink-0 shadow-[0_0_10px_rgba(249,115,22,0.3)]\">02<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Corte de Arte (Slicing) y Rigging<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Tomamos el arte est\u00e1tico final, lo dividimos l\u00f3gicamente en cientos de piezas individuales, repintamos las partes ocultas y construimos la estructura esquel\u00e9tica (Rig) con deformaciones de malla complejas.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-amber font-bold shrink-0 shadow-[0_0_10px_rgba(245,158,11,0.3)]\">03<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Bloqueo de Poses Clave (Stepped Animation)<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Creamos las poses extremas sin interpolaci\u00f3n. Esto permite a sus directores de arte revisar la silueta, la actitud y el peso de la acci\u00f3n antes de comprometer tiempo en suavizar el movimiento.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-brand-yellow font-bold shrink-0 shadow-[0_0_10px_rgba(234,179,8,0.3)]\">04<\/div>\n <div>\n <h4 class=\"text-white font-bold mb-1\">Pulido (Splining) e Integraci\u00f3n<\/h4>\n <p class=\"text-sm text-slate-500 leading-relaxed\">Ajustamos las curvas de interpolaci\u00f3n gr\u00e1fica, a\u00f1adimos acciones secundarias (rebote de ropa, movimiento de cabello) y exportamos la animaci\u00f3n directamente en formatos compatibles con Unity o Unreal.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-rose-900\/30 flex flex-col items-center justify-center text-center glow-effect-anim\">\n <i class=\"fa-solid fa-person-running text-5xl text-brand-rose mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Spine Pro<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">El Est\u00e1ndar de la Industria 2D<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-orange-900\/30 flex flex-col items-center justify-center text-center glow-effect-anim transform translate-y-8\">\n <i class=\"fa-solid fa-dragon text-5xl text-brand-orange mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">DragonBones<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Alternativas Ligeras y Eficientes<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-amber-900\/30 flex flex-col items-center justify-center text-center glow-effect-anim\">\n <i class=\"fa-solid fa-film text-5xl text-brand-amber mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">After Effects<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">Motion Graphics y VFX Avanzados<\/span>\n <\/div>\n <div class=\"bg-gradient-to-br from-slate-800 to-slate-900 p-8 rounded-3xl border border-yellow-900\/30 flex flex-col items-center justify-center text-center glow-effect-anim transform translate-y-8\">\n <i class=\"fa-solid fa-code text-5xl text-brand-yellow mb-4\"><\/i>\n <span class=\"text-2xl font-extrabold text-white mb-2\">Motor Nativo<\/span>\n <span class=\"text-xs font-medium text-slate-400 uppercase tracking-wide\">\u00c1rboles de Estado en Unity\/UE5<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"faq\" class=\"py-24 bg-dark relative border-t border-slate-800\">\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-16\">\n <i class=\"fa-solid fa-circle-question text-4xl text-brand-orange mb-4\"><\/i>\n <h2 class=\"text-3xl md:text-5xl font-bold text-white mb-6\">Preguntas Frecuentes sobre Animaci\u00f3n 2D<\/h2>\n <p class=\"text-slate-400 text-lg\">Respuestas t\u00e9cnicas para integrar el arte en movimiento a sus flujos de desarrollo.<\/p>\n <\/div>\n\n <div class=\"space-y-6\">\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-rose\"><\/i> \u00bfPor qu\u00e9 elegir Animaci\u00f3n Esquel\u00e9tica (Spine) en lugar de Sprites tradicionales?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n La animaci\u00f3n esquel\u00e9tica ofrece ventajas t\u00e9cnicas masivas para la mayor\u00eda de los juegos modernos. En lugar de guardar 30 im\u00e1genes diferentes para una animaci\u00f3n de un segundo (Frame-by-Frame), guardamos 1 imagen cortada en partes y un peque\u00f1o archivo de texto con las matem\u00e1ticas del movimiento. Esto reduce el uso de memoria RAM en m\u00e1s de un 80%, permite animaciones a 60 FPS ultra-suaves e incluso permite cambiar piezas (como equipar una nueva espada) din\u00e1micamente durante el juego sin redibujar toda la animaci\u00f3n.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-orange\"><\/i> \u00bfLos animadores pueden crear pseudorrotaciones 3D en 2D?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n S\u00ed, mediante el uso avanzado de mallas deformables (Mesh Deformation) en herramientas como Spine Pro. Al asignar pesos de v\u00e9rtices (skinning) a una imagen plana y mover los huesos, podemos enga\u00f1ar al ojo haci\u00e9ndole creer que un rostro 2D est\u00e1 girando en el espacio 3D, a\u00f1adiendo una profundidad incre\u00edble a las interacciones de los personajes y a los fondos de tipo \u00abparalaje\u00bb, sin el inmenso costo de modelar verdaderamente en 3D.\n <\/p>\n <\/div>\n\n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-amber\"><\/i> \u00bfSuministran \u00e1rboles de animaci\u00f3n (Animation State Machines)?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n Nuestros Artistas T\u00e9cnicos no solo entregan las animaciones base, sino que pueden configurarlas directamente dentro de la m\u00e1quina de estados de su motor (como el \u00abAnimator Controller\u00bb en Unity). Podemos configurar los par\u00e1metros, las transiciones suaves (Blending) entre estar inactivo (Idle) y empezar a correr, y asegurar que la l\u00f3gica de c\u00f3digo reaccione perfectamente a los \u00abEventos de Animaci\u00f3n\u00bb (ej. reproducir el sonido de pisada justo cuando el pie toca el suelo).\n <\/p>\n <\/div>\n \n \n <div class=\"bg-slate-800\/40 rounded-2xl p-6 border border-slate-700\">\n <h4 class=\"text-xl font-bold text-white mb-3 flex items-center gap-3\">\n <i class=\"fa-solid fa-check text-brand-yellow\"><\/i> Si ya tengo el arte de mi juego, \u00bfsolo pueden proporcionar la animaci\u00f3n?\n <\/h4>\n <p class=\"text-slate-400 text-sm leading-relaxed pl-8\">\n Totalmente. Aunque ofrecemos paquetes completos de dise\u00f1o y animaci\u00f3n, muchos clientes nos env\u00edan sus archivos de Photoshop o Illustrator (PSD\/AI) preexistentes. Nuestro equipo se encargar\u00e1 de realizar el proceso de \u00abSlicing\u00bb (separar la imagen en piezas l\u00f3gicas para las articulaciones), crear el Rigging y luego animar todo seg\u00fan sus especificaciones y lista de requerimientos (Shot List), entregando los datos finales listos para ser implementados.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"py-24 relative overflow-hidden bg-gradient-to-b from-dark to-slate-900 border-t border-slate-800\">\n <div class=\"absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-brand-rose\/10 via-darker to-darker -z-10\"><\/div>\n <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n \n <i class=\"fa-solid fa-clapperboard text-6xl text-brand-rose mb-8 glow-effect-anim rounded-full bg-slate-800 p-6\"><\/i>\n \n <h2 class=\"text-4xl md:text-5xl font-bold text-white mb-6\">\n Inyecte Vida a su <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-rose to-brand-amber\">Pr\u00f3ximo Gran \u00c9xito<\/span>\n <\/h2>\n <p class=\"text-xl text-slate-400 mb-12 max-w-2xl mx-auto\">\n Una animaci\u00f3n torpe arruina el mejor de los artes. Una animaci\u00f3n estelar eleva los dise\u00f1os m\u00e1s simples a niveles legendarios. As\u00f3ciese con expertos que comprenden el \u00abGame Feel\u00bb desde el primer fotograma.\n <\/p>\n\n <div class=\"bg-slate-800\/50 backdrop-blur-sm border border-slate-700 rounded-3xl p-8 md:p-12 shadow-2xl\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n <div class=\"text-left\">\n <h3 class=\"text-2xl font-bold text-white mb-4\">Coordinaci\u00f3n de Producci\u00f3n 2D<\/h3>\n <p class=\"text-slate-400 mb-8 text-sm\">\n Nuestros Productores de Animaci\u00f3n est\u00e1n disponibles para revisar sus hojas de sprites o descripciones de personajes. Ofrecemos estimaciones detalladas sobre tiempos de rigging e interpolaci\u00f3n de cuadros por ciclo de animaci\u00f3n.\n <\/p>\n \n <div class=\"flex items-center gap-4 mb-6 group cursor-pointer\">\n <div class=\"w-12 h-12 rounded-full bg-brand-rose\/20 flex items-center justify-center group-hover:bg-brand-rose\/40 transition-colors\">\n <i class=\"fa-solid fa-envelope text-xl text-brand-rose\"><\/i>\n <\/div>\n <div>\n <p class=\"text-xs text-slate-500 uppercase tracking-wider font-bold\">L\u00ednea Directa del Estudio<\/p>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"text-lg font-bold text-white hover:text-brand-orange transition-colors\">\n info@gameartoutsourcestudio.de\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"flex items-center gap-4 group cursor-pointer\">\n <div class=\"w-12 h-12 rounded-full bg-brand-amber\/20 flex items-center justify-center group-hover:bg-brand-amber\/40 transition-colors\">\n <i class=\"fa-solid fa-shield text-xl text-brand-amber\"><\/i>\n <\/div>\n <div>\n <p class=\"text-xs text-slate-500 uppercase tracking-wider font-bold\">Protecci\u00f3n de la IP<\/p>\n <p class=\"text-sm font-bold text-white\">Listos para firmar NDA<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-darker rounded-2xl p-6 border border-slate-700 text-left\">\n <h4 class=\"text-lg font-bold text-white mb-6 flex items-center gap-2\">\n <i class=\"fa-solid fa-globe text-brand-orange\"><\/i> Soporte de Animaci\u00f3n Global\n <\/h4>\n <div class=\"space-y-4\">\n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-rose transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-map-location-dot text-brand-rose group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Am\u00e9rica del Norte (USA\/CAN)<\/span>\n <\/div>\n <span class=\"text-xs text-brand-rose bg-brand-rose\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Principal<\/span>\n <\/div>\n \n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-orange transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-landmark-flag text-brand-orange group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Europa Continental \/ UK<\/span>\n <\/div>\n <span class=\"text-xs text-brand-orange bg-brand-orange\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Principal<\/span>\n <\/div>\n \n <div class=\"flex items-center justify-between p-3 rounded-xl bg-slate-800\/50 border border-slate-700 hover:border-brand-amber transition-colors group cursor-default\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-torii-gate text-brand-amber group-hover:scale-110 transition-transform\"><\/i>\n <span class=\"text-slate-300 font-semibold\">Asia-Pac\u00edfico<\/span>\n <\/div>\n <span class=\"text-xs text-brand-amber bg-brand-amber\/10 px-2 py-1 rounded font-bold uppercase tracking-wide\">Activo<\/span>\n <\/div>\n\n <div class=\"mt-4 pt-4 border-t border-slate-700\">\n <p class=\"text-xs text-slate-500 leading-relaxed\">\n <i class=\"fa-solid fa-circle-info mr-1\"><\/i> Nuestros Supervisores de Animaci\u00f3n se adaptan a su \u00abDaily Standup\u00bb para revisar entregables en video o mediante compilaciones jugables en la franja horaria que mejor le convenga.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-darker py-12 border-t border-slate-800\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6\">\n \n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-gamepad text-2xl text-brand-rose\"><\/i>\n <span class=\"font-bold text-xl tracking-tighter text-white\">\n Gameart<span class=\"text-brand-orange\">outsource<\/span>studio\n <\/span>\n <\/div>\n \n \n <div class=\"flex flex-wrap justify-center gap-4 text-sm text-slate-500 max-w-5xl\">\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-bone text-brand-rose\"><\/i> Animaci\u00f3n Esquel\u00e9tica 2D<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-film text-brand-orange\"><\/i> Animaci\u00f3n Cuadro por Cuadro<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-user-ninja text-brand-amber\"><\/i> Animaci\u00f3n de Personajes 2D<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-tree text-brand-yellow\"><\/i> Animaci\u00f3n de Entornos<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-computer-mouse text-brand-rose\"><\/i> Animaci\u00f3n de Interfaz de Usuario<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-meteor text-brand-orange\"><\/i> Efectos Visuales 2D<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-scissors text-brand-amber\"><\/i> Animaci\u00f3n de Recortes<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-video text-brand-yellow\"><\/i> Animaci\u00f3n de Cinem\u00e1ticas<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-sitemap text-brand-rose\"><\/i> Rigging 2D Avanzado<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-file-zipper text-brand-orange\"><\/i> Optimizaci\u00f3n de Activos Animados<\/span>\n <\/div>\n \n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-brand-rose transition-colors\">\n <i class=\"fa-brands fa-linkedin-in\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-brand-orange transition-colors\">\n <i class=\"fa-brands fa-artstation\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:bg-brand-amber transition-colors\">\n <i class=\"fa-brands fa-behance\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n \n <div class=\"mt-8 pt-8 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4\">\n <p class=\"text-slate-500 text-sm text-center md:text-left\">\n © 2024 Gameartoutsourcestudio. Todos los derechos reservados. Divisi\u00f3n Experta en Animaci\u00f3n 2D para Juegos.\n <\/p>\n <div class=\"flex items-center gap-2 text-slate-400 text-sm font-semibold bg-slate-800 px-4 py-2 rounded-full\">\n <i class=\"fa-solid fa-envelope text-brand-rose\"><\/i>\n <a href=\"mailto:info@gameartoutsourcestudio.de\" class=\"hover:text-white transition-colors\">info@gameartoutsourcestudio.de<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n<\/body>\n<\/html>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gameartoutsourcestudio | Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Animaci\u00f3n de Entornos, Animaci\u00f3n de Interfaz de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"wangjianchen02@gmail.com","author_link":"https:\/\/3danimationart.co.uk\/bg\/author\/wangjianchen02gmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Gameartoutsourcestudio | Animaci\u00f3n Esquel\u00e9tica 2D, Animaci\u00f3n Cuadro por Cuadro, Animaci\u00f3n de Personajes 2D, Animaci\u00f3n de Entornos, Animaci\u00f3n de Interfaz de […]","_links":{"self":[{"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":1,"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/pages\/24\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/3danimationart.co.uk\/bg\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}