{"id":666,"date":"2025-12-18T18:07:44","date_gmt":"2025-12-18T18:07:44","guid":{"rendered":"https:\/\/salvador.mata.com.mx\/blog\/?p=666"},"modified":"2026-03-18T17:02:06","modified_gmt":"2026-03-18T17:02:06","slug":"manejando-sprite-sheets-range","status":"publish","type":"post","link":"https:\/\/salvador.mata.com.mx\/blog\/2025\/12\/18\/manejando-sprite-sheets-range\/","title":{"rendered":"Manejando sprite sheets &#8211; RanGE"},"content":{"rendered":"<blockquote>\n<p data-start=\"281\" data-end=\"378\">\u26a0\ufe0f <strong data-start=\"284\" data-end=\"307\">Muchas im\u00e1genes GIF<\/strong><br data-start=\"307\" data-end=\"310\" \/><em data-start=\"310\" data-end=\"378\">Dale un poco de tiempo para cargar si est\u00e1s en una conexi\u00f3n lenta.<\/em><\/p>\n<\/blockquote>\n<hr data-start=\"380\" data-end=\"383\" \/>\n<p data-start=\"385\" data-end=\"733\">Todos sabemos que el <strong data-start=\"406\" data-end=\"435\">BGE<\/strong> ten\u00eda algunas herramientas para lograr texturas animadas, pero el problema es que <strong data-start=\"518\" data-end=\"561\">\u00a1en la pr\u00e1ctica son casi inutilizables!<\/strong> \ud83d\ude05<br data-start=\"564\" data-end=\"567\" \/>Si eres nuevo en RanGE\/Blender, probablemente te est\u00e9s preguntando por qu\u00e9 ocurre esto; y si ya llevas tiempo trabajando con cualquiera de ellos, seguramente estar\u00e1s de acuerdo conmigo.<\/p>\n<p data-start=\"735\" data-end=\"896\">\ud83d\udc49 Si eres completamente nuevo en Blender y quieres aprender sobre el BGE, te recomiendo primero leer <del>este tutorial<\/del> para conocer lo b\u00e1sico y luego volver aqu\u00ed \ud83d\ude42<\/p>\n<hr data-start=\"898\" data-end=\"901\" \/>\n<h2 data-start=\"903\" data-end=\"962\">\ud83e\udde0 Una breve explicaci\u00f3n para quienes empiezan en el BGE<\/h2>\n<p data-start=\"964\" data-end=\"1056\">La forma en que Blender maneja las texturas animadas <strong data-start=\"1017\" data-end=\"1055\">no es realmente usable para juegos<\/strong>.<\/p>\n<ul data-start=\"1058\" data-end=\"1326\">\n<li data-start=\"1058\" data-end=\"1110\">\n<p data-start=\"1060\" data-end=\"1110\">\u274c Lee la hoja de texturas en un orden incorrecto<\/p>\n<\/li>\n<li data-start=\"1111\" data-end=\"1154\">\n<p data-start=\"1113\" data-end=\"1154\">\u274c Las animaciones no son independientes<\/p>\n<\/li>\n<li data-start=\"1155\" data-end=\"1202\">\n<p data-start=\"1157\" data-end=\"1202\">\u274c No hay forma de evitar el loop autom\u00e1tico<\/p>\n<\/li>\n<li data-start=\"1203\" data-end=\"1253\">\n<p data-start=\"1205\" data-end=\"1253\">\u274c El timing no es consistente entre instancias<\/p>\n<\/li>\n<li data-start=\"1254\" data-end=\"1326\">\n<p data-start=\"1256\" data-end=\"1326\">\u274c No hay soporte para texturas con scroll ni animaciones por eventos<\/p>\n<h2 data-start=\"903\" data-end=\"962\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large aligncenter\" src=\"https:\/\/s3.amazonaws.com\/markets-rails\/uploads%2F1479616397811-untitled\" width=\"222\" height=\"186\" \/><\/h2>\n<\/li>\n<\/ul>\n<hr data-start=\"1328\" data-end=\"1331\" \/>\n<h2 data-start=\"1333\" data-end=\"1373\">\ud83d\udd52 Ejemplo de tiempos no consistentes<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-687\" src=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2025\/12\/sprites_nonConsistent-1.gif\" alt=\"\" width=\"490\" height=\"276\" \/><\/p>\n<p data-start=\"1375\" data-end=\"1680\">Como puedes ver en la imagen de arriba, todas las explosiones tienen exactamente el mismo timing, lo que significa que <strong data-start=\"1494\" data-end=\"1527\">cada explosi\u00f3n se ve id\u00e9ntica<\/strong>, sin importar cu\u00e1ndo aparece.<br data-start=\"1557\" data-end=\"1560\" \/>Este mismo problema ocurre con efectos de humo u otras animaciones tipo sprite creadas en diferentes momentos del juego.<\/p>\n<p data-start=\"1682\" data-end=\"1882\">El hecho de que la herramienta interna de Blender no sea suficiente <strong data-start=\"1750\" data-end=\"1808\">no significa que no se pueda hacer animaci\u00f3n en el BGE<\/strong> \ud83d\udca1<br data-start=\"1811\" data-end=\"1814\" \/>Simplemente debemos controlarla manualmente usando <strong data-start=\"1865\" data-end=\"1881\">logic bricks<\/strong>.<\/p>\n<hr data-start=\"1884\" data-end=\"1887\" \/>\n<p data-start=\"1889\" data-end=\"2103\">Existe un addon que facilita la animaci\u00f3n de sprites por alrededor de <strong data-start=\"1959\" data-end=\"1972\">USD $9.99<\/strong>, pero el asunto es que se trata para una versi\u00f3n antigua del motor de juegos y no es compatible con las nuevas versiones de RanGE.<br data-start=\"2036\" data-end=\"2039\" \/>Por eso, aqu\u00ed presento <strong data-start=\"2062\" data-end=\"2090\">una soluci\u00f3n alternativa<\/strong>, ideal para:<\/p>\n<ul data-start=\"2105\" data-end=\"2209\">\n<li data-start=\"2105\" data-end=\"2115\">\n<p data-start=\"2107\" data-end=\"2115\">Sangre<\/p>\n<\/li>\n<li data-start=\"2116\" data-end=\"2131\">\n<p data-start=\"2118\" data-end=\"2131\">Explosiones<\/p>\n<\/li>\n<li data-start=\"2132\" data-end=\"2143\">\n<p data-start=\"2134\" data-end=\"2143\">Monedas<\/p>\n<\/li>\n<li data-start=\"2144\" data-end=\"2161\">\n<p data-start=\"2146\" data-end=\"2161\">Personajes 2D<\/p>\n<\/li>\n<li data-start=\"2162\" data-end=\"2188\">\n<p data-start=\"2164\" data-end=\"2188\">Bandas transportadoras<\/p>\n<\/li>\n<li data-start=\"2189\" data-end=\"2209\">\n<p data-start=\"2191\" data-end=\"2209\">Orugas de tanque<\/p>\n<\/li>\n<li data-start=\"2189\" data-end=\"2209\">Y todo aquello que puedas solucionar con esta t\u00e9cnica.<\/li>\n<\/ul>\n<hr data-start=\"2211\" data-end=\"2214\" \/>\n<p data-start=\"2216\" data-end=\"2349\">\u2699\ufe0f Este m\u00e9todo requiere un poco m\u00e1s de trabajo, <strong data-start=\"2264\" data-end=\"2297\">pero el resultado es perfecto<\/strong>.<br data-start=\"2298\" data-end=\"2301\" \/>Veamos un ejemplo.<\/p>\n<hr data-start=\"2351\" data-end=\"2354\" \/>\n<h2 data-start=\"2356\" data-end=\"2377\">\ud83c\udfac La demostraci\u00f3n<\/h2>\n<p data-start=\"2379\" data-end=\"2465\">Para esta demostraci\u00f3n usaremos un <strong data-start=\"2414\" data-end=\"2440\">sprite sheet de sangre<\/strong> de<br data-start=\"2443\" data-end=\"2446\" \/><strong data-start=\"2446\" data-end=\"2465\">opengameart.org<\/strong><\/p>\n<p data-start=\"2467\" data-end=\"2515\">\ud83e\ude78 <em data-start=\"2470\" data-end=\"2515\">Resultado de imagen para blood sprite sheet<\/em><\/p>\n<p data-start=\"2467\" data-end=\"2515\"><img loading=\"lazy\" decoding=\"async\" class=\"irc_mi aligncenter\" src=\"https:\/\/opengameart.org\/sites\/default\/files\/blood.png\" alt=\"Resultado de imagen para blood sprite sheet\" width=\"1032\" height=\"172\" \/><\/p>\n<hr data-start=\"2517\" data-end=\"2520\" \/>\n<p data-start=\"2522\" data-end=\"2662\">\ud83d\udcc1 <strong data-start=\"2525\" data-end=\"2542\">Recomendaci\u00f3n<\/strong><br data-start=\"2542\" data-end=\"2545\" \/>Organiza la estructura de carpetas de tu proyecto, incluso si es algo sencillo, para mantener todo limpio y ordenado.<\/p>\n<p data-start=\"2522\" data-end=\"2662\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3665\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/09\/3ec2c-2018-02-06_12-46-44.gif\" alt=\"\" width=\"334\" height=\"150\" \/><\/p>\n<hr data-start=\"2664\" data-end=\"2667\" \/>\n<h2 data-start=\"2669\" data-end=\"2705\">\ud83d\udce5 Importando el sprite a Blender<\/h2>\n<p data-start=\"2707\" data-end=\"2805\">Usaremos el addon <strong data-start=\"2725\" data-end=\"2754\">\u201cImport Images as Planes\u201d<\/strong>.<br data-start=\"2755\" data-end=\"2758\" \/>Si no est\u00e1 activo, primero debemos habilitarlo.<\/p>\n<p data-start=\"2807\" data-end=\"2857\">\ud83d\udd27 <em data-start=\"2810\" data-end=\"2857\">Mira el GIF de abajo para ver c\u00f3mo usarlo.<\/em><\/p>\n<p data-start=\"2807\" data-end=\"2857\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3638\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/02\/938db-2018-02-01_11-34-14.gif\" alt=\"\" width=\"448\" height=\"590\" \/>Si el Add-on no est\u00e1 activo, checa este GIF para ponerlo en funcionamiento.<\/p>\n<p data-start=\"2807\" data-end=\"2857\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3640\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/02\/b06ca-2018-02-01_11-35-19.gif\" alt=\"\" width=\"794\" height=\"504\" \/><\/p>\n<hr data-start=\"2859\" data-end=\"2862\" \/>\n<p data-start=\"2864\" data-end=\"2924\">Ahora que el addon est\u00e1 activo, vamos a importar la textura.<\/p>\n<ol data-start=\"2926\" data-end=\"3158\">\n<li data-start=\"2926\" data-end=\"2994\">\n<p data-start=\"2929\" data-end=\"2994\">\ud83d\udcbe Guarda el archivo <code data-start=\"2950\" data-end=\"2958\">.blend<\/code> dentro de la carpeta del proyecto<\/p>\n<\/li>\n<li data-start=\"2995\" data-end=\"3031\">\n<p data-start=\"2998\" data-end=\"3031\">\ud83d\uddd1\ufe0f Elimina el cubo por defecto<\/p>\n<\/li>\n<li data-start=\"3032\" data-end=\"3077\">\n<p data-start=\"3035\" data-end=\"3077\">\ud83d\udce5 Importa <strong data-start=\"3046\" data-end=\"3059\">Blood.png<\/strong> usando el addon &#8220;<strong>Import image as planes<\/strong>&#8220;<\/p>\n<\/li>\n<li data-start=\"3078\" data-end=\"3158\">\n<p data-start=\"3081\" data-end=\"3158\">\ud83c\udfa8 Verifica que el <strong data-start=\"3100\" data-end=\"3115\">canal alpha<\/strong> est\u00e9 activo para permitir transparencias<\/p>\n<\/li>\n<\/ol>\n<p><a href=\"https:\/\/gifyu.com\/image\/Lg16\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/s1.gifyu.com\/images\/2018-02-06_16-07-13.gif\" alt=\"2018-02-06_16-07-13.gif\" border=\"0\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr data-start=\"3190\" data-end=\"3193\" \/>\n<p data-start=\"3195\" data-end=\"3300\">El sprite ya est\u00e1 listo.<br data-start=\"3219\" data-end=\"3222\" \/>El plano se llama <strong data-start=\"3240\" data-end=\"3249\">blood<\/strong> porque toma autom\u00e1ticamente el nombre del archivo.<\/p>\n<p data-start=\"3302\" data-end=\"3312\">Sigamos \ud83d\udc47<\/p>\n<hr data-start=\"3314\" data-end=\"3317\" \/>\n<h2 data-start=\"3319\" data-end=\"3369\">\ud83c\udfaf Configurando el objeto como HALO (billboard)<\/h2>\n<p data-start=\"3371\" data-end=\"3432\">Esto har\u00e1 que el sprite siempre mire a la c\u00e1mara del jugador.<\/p>\n<ol data-start=\"3434\" data-end=\"3672\">\n<li data-start=\"3434\" data-end=\"3459\">\n<p data-start=\"3437\" data-end=\"3459\">Selecciona <strong data-start=\"3448\" data-end=\"3457\">blood<\/strong><\/p>\n<\/li>\n<li data-start=\"3460\" data-end=\"3505\">\n<p data-start=\"3463\" data-end=\"3505\">Entra en <strong data-start=\"3472\" data-end=\"3485\">Edit Mode<\/strong> y selecciona todo<\/p>\n<\/li>\n<li data-start=\"3506\" data-end=\"3528\">\n<p data-start=\"3509\" data-end=\"3528\">Rota <strong data-start=\"3514\" data-end=\"3526\">90\u00b0 en X<\/strong><\/p>\n<\/li>\n<li data-start=\"3529\" data-end=\"3551\">\n<p data-start=\"3532\" data-end=\"3551\">Rota <strong data-start=\"3537\" data-end=\"3549\">90\u00b0 en Z<\/strong><\/p>\n<\/li>\n<li data-start=\"3552\" data-end=\"3622\">\n<p data-start=\"3555\" data-end=\"3622\">Activa <strong data-start=\"3562\" data-end=\"3570\">HALO<\/strong> en<br data-start=\"3573\" data-end=\"3576\" \/><code data-start=\"3579\" data-end=\"3620\">Game Settings \/ Face Orientation \/ Halo<\/code><\/p>\n<\/li>\n<li data-start=\"3623\" data-end=\"3672\">\n<p data-start=\"3626\" data-end=\"3672\">Presiona <strong data-start=\"3635\" data-end=\"3640\">P<\/strong> para probar el motor de juego<\/p>\n<\/li>\n<\/ol>\n<p><a href=\"https:\/\/gifyu.com\/image\/Lg1u\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/s1.gifyu.com\/images\/2018-02-07_12-03-51.gif\" alt=\"2018-02-07_12-03-51.gif\" border=\"0\" \/><\/a><\/p>\n<p data-start=\"3674\" data-end=\"3711\">\u2714\ufe0f Si todo funciona, \u00a1felicidades! \ud83c\udf89<\/p>\n<hr data-start=\"3743\" data-end=\"3746\" \/>\n<h2 data-start=\"3748\" data-end=\"3796\">\ud83e\udde9 Preparando los objetos para \u201cReplace Mesh\u201d<\/h2>\n<ol data-start=\"3798\" data-end=\"4203\">\n<li data-start=\"3798\" data-end=\"3837\">\n<p data-start=\"3801\" data-end=\"3837\">Renombra <strong data-start=\"3810\" data-end=\"3819\">blood<\/strong> a <strong data-start=\"3822\" data-end=\"3835\">blood.001<\/strong><\/p>\n<\/li>\n<li data-start=\"3838\" data-end=\"3946\">\n<p data-start=\"3841\" data-end=\"3880\">En <strong data-start=\"3844\" data-end=\"3857\">Edit Mode<\/strong>, presiona <code data-start=\"3868\" data-end=\"3878\">Ctrl + R<\/code><\/p>\n<ul data-start=\"3884\" data-end=\"3946\">\n<li data-start=\"3884\" data-end=\"3946\">\n<p data-start=\"3886\" data-end=\"3946\">Necesitamos <strong data-start=\"3898\" data-end=\"3910\">5 cortes<\/strong> (porque el sprite tiene 6 frames)<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"3947\" data-end=\"3993\">\n<p data-start=\"3950\" data-end=\"3993\">Selecciona cada cara y sep\u00e1rala con <strong data-start=\"3986\" data-end=\"3991\">P<\/strong><\/p>\n<\/li>\n<li data-start=\"3994\" data-end=\"4033\">\n<p data-start=\"3997\" data-end=\"4033\">Elimina el objeto vac\u00edo resultante<\/p>\n<\/li>\n<li data-start=\"4034\" data-end=\"4093\">\n<p data-start=\"4037\" data-end=\"4093\">Verifica que el nombre del objeto coincida con el mesh<\/p>\n<\/li>\n<li data-start=\"4094\" data-end=\"4173\">\n<p data-start=\"4097\" data-end=\"4141\">Ajusta el origen al centro de la geometr\u00eda<\/p>\n<ul data-start=\"4145\" data-end=\"4173\">\n<li data-start=\"4145\" data-end=\"4173\">\n<p data-start=\"4147\" data-end=\"4173\"><code data-start=\"4147\" data-end=\"4171\">Shift + Ctrl + Alt + C<\/code><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"4174\" data-end=\"4203\">\n<p data-start=\"4177\" data-end=\"4203\">Prueba el motor de juego<\/p>\n<\/li>\n<\/ol>\n<p><a href=\"https:\/\/gifyu.com\/image\/Lg1v\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/s1.gifyu.com\/images\/2018-02-07_13-56-36.gif\" alt=\"2018-02-07_13-56-36.gif\" border=\"0\" \/><\/a><\/p>\n<p data-start=\"4205\" data-end=\"4215\">\u2714\ufe0f \u00a1Listo!<\/p>\n<hr data-start=\"4247\" data-end=\"4250\" \/>\n<h2 data-start=\"4252\" data-end=\"4291\">\ud83e\udde0 Hora de trabajar con Logic Bricks<\/h2>\n<h2 data-start=\"4363\" data-end=\"4401\">\ud83c\udf9e\ufe0f Agregando la propiedad <code data-start=\"4393\" data-end=\"4401\">frames<\/code><\/h2>\n<ol data-start=\"4403\" data-end=\"4682\">\n<li data-start=\"4403\" data-end=\"4456\">\n<p data-start=\"4406\" data-end=\"4456\">Duplica <strong data-start=\"4414\" data-end=\"4427\">blood.001<\/strong> y n\u00f3mbralo <strong data-start=\"4439\" data-end=\"4454\">blood_still<\/strong><\/p>\n<\/li>\n<li data-start=\"4457\" data-end=\"4508\">\n<p data-start=\"4460\" data-end=\"4508\">Agrega una propiedad (variable) entera llamada &#8220;<strong data-start=\"4496\" data-end=\"4506\">frames&#8221;<\/strong><\/p>\n<\/li>\n<li data-start=\"4509\" data-end=\"4572\">\n<p data-start=\"4512\" data-end=\"4539\">Crea un sensor <strong data-start=\"4527\" data-end=\"4537\">Always<\/strong><\/p>\n<ul data-start=\"4543\" data-end=\"4572\">\n<li data-start=\"4543\" data-end=\"4557\">\n<p data-start=\"4545\" data-end=\"4557\">True Pulse<\/p>\n<\/li>\n<li data-start=\"4561\" data-end=\"4572\">\n<p data-start=\"4563\" data-end=\"4572\">Skip 10<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li data-start=\"4573\" data-end=\"4628\">\n<p data-start=\"4576\" data-end=\"4628\">Con\u00e9ctalo a un actuador que sume <strong data-start=\"4609\" data-end=\"4615\">+1<\/strong> a <code data-start=\"4618\" data-end=\"4626\">frames<\/code><\/p>\n<\/li>\n<li data-start=\"4629\" data-end=\"4682\">\n<p data-start=\"4632\" data-end=\"4682\">Activa <strong data-start=\"4639\" data-end=\"4653\">Debug Info<\/strong> para verificar el contador<\/p>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<hr data-start=\"4684\" data-end=\"4687\" \/>\n<h2 data-start=\"4689\" data-end=\"4727\">\ud83d\udd04 Controlando el valor de <code data-start=\"4719\" data-end=\"4727\">frames<\/code><\/h2>\n<ul data-start=\"4729\" data-end=\"4828\">\n<li data-start=\"4729\" data-end=\"4764\">\n<p data-start=\"4731\" data-end=\"4764\">La animaci\u00f3n tiene <strong data-start=\"4750\" data-end=\"4762\">6 frames<\/strong><\/p>\n<\/li>\n<li data-start=\"4765\" data-end=\"4798\">\n<p data-start=\"4767\" data-end=\"4798\"><code data-start=\"4767\" data-end=\"4775\">frames<\/code> debe ir de <strong data-start=\"4787\" data-end=\"4796\">0 a 5<\/strong><\/p>\n<\/li>\n<li data-start=\"4799\" data-end=\"4828\">\n<p data-start=\"4801\" data-end=\"4828\">Al llegar a 5, vuelve a 0<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3693\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/02\/22e9f-2018-02-08_12-42-08.gif\" alt=\"\" width=\"838\" height=\"482\" \/><\/p>\n<p style=\"text-align: center;\">Cuando alcanza el valor de 5, borramos el objeto<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3695\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/02\/23f9e-2018-02-08_13-28-26.gif\" alt=\"\" width=\"838\" height=\"482\" \/><\/p>\n<p data-start=\"4830\" data-end=\"4837\">Usamos:<\/p>\n<ul data-start=\"4839\" data-end=\"4973\">\n<li data-start=\"4839\" data-end=\"4885\">\n<p data-start=\"4841\" data-end=\"4885\"><strong data-start=\"4841\" data-end=\"4860\">Property Sensor<\/strong> para detectar el valor<\/p>\n<\/li>\n<li data-start=\"4886\" data-end=\"4926\">\n<p data-start=\"4888\" data-end=\"4926\"><strong data-start=\"4888\" data-end=\"4909\">Property Actuator<\/strong> para reiniciar<\/p>\n<\/li>\n<li data-start=\"4927\" data-end=\"4973\">\n<p data-start=\"4929\" data-end=\"4973\"><strong data-start=\"4929\" data-end=\"4946\">Delete Object<\/strong> al final de la animaci\u00f3n<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"4975\" data-end=\"4978\" \/>\n<h2 data-start=\"4980\" data-end=\"5028\">\ud83c\udfad Animaci\u00f3n con Replace Mesh y State Machine<\/h2>\n<p data-start=\"5030\" data-end=\"5060\">Usamos <strong data-start=\"5037\" data-end=\"5054\">State Machine<\/strong> para:<\/p>\n<ul data-start=\"5062\" data-end=\"5139\">\n<li data-start=\"5062\" data-end=\"5087\">\n<p data-start=\"5064\" data-end=\"5087\">Reducir l\u00f3gica activa<\/p>\n<\/li>\n<li data-start=\"5088\" data-end=\"5111\">\n<p data-start=\"5090\" data-end=\"5111\">Mejorar rendimiento<\/p>\n<\/li>\n<li data-start=\"5112\" data-end=\"5139\">\n<p data-start=\"5114\" data-end=\"5139\">Mantener todo m\u00e1s claro<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"5141\" data-end=\"5200\">Las capas funcionan como las del View 3D, pero para l\u00f3gica.<\/p>\n<ul data-start=\"5202\" data-end=\"5266\">\n<li data-start=\"5202\" data-end=\"5234\">\n<p data-start=\"5204\" data-end=\"5234\"><strong data-start=\"5204\" data-end=\"5215\">Visible<\/strong>: l\u00f3gica mostrada<\/p>\n<\/li>\n<li data-start=\"5235\" data-end=\"5266\">\n<p data-start=\"5237\" data-end=\"5266\"><strong data-start=\"5237\" data-end=\"5248\">Initial<\/strong>: l\u00f3gica inicial<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3698\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/02\/337cf-2018-02-08_13-38-35.gif\" alt=\"\" width=\"838\" height=\"482\" \/><\/p>\n<hr data-start=\"5268\" data-end=\"5271\" \/>\n<h2 data-start=\"5273\" data-end=\"5295\">\ud83c\udff7\ufe0f Nombrando capas<\/h2>\n<p data-start=\"5297\" data-end=\"5319\">Para nombrar una capa:<\/p>\n<ul data-start=\"5321\" data-end=\"5393\">\n<li data-start=\"5321\" data-end=\"5357\">\n<p data-start=\"5323\" data-end=\"5357\">Nombra el <strong data-start=\"5333\" data-end=\"5355\">primer controlador<\/strong><\/p>\n<\/li>\n<li data-start=\"5358\" data-end=\"5393\">\n<p data-start=\"5360\" data-end=\"5393\">Ese nombre aparece como tooltip<\/p>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3700\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/09\/3b502-2018-02-08_13-47-58.gif\" alt=\"\" width=\"826\" height=\"214\" \/><\/p>\n<p data-start=\"5395\" data-end=\"5451\">La capa de animaci\u00f3n se activa solo cuando es necesaria.<\/p>\n<p data-start=\"5395\" data-end=\"5451\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3702\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/02\/88fd5-2018-02-08_13-52-57.gif\" alt=\"\" width=\"838\" height=\"482\" \/><\/p>\n<hr data-start=\"5453\" data-end=\"5456\" \/>\n<h2 data-start=\"5458\" data-end=\"5479\">\ud83c\udf89 Resultado final<\/h2>\n<p data-start=\"5481\" data-end=\"5519\">Resumen del comportamiento del sprite:<\/p>\n<ul data-start=\"5521\" data-end=\"5714\">\n<li data-start=\"5521\" data-end=\"5553\">\n<p data-start=\"5523\" data-end=\"5553\">\ud83e\ude78 Animaci\u00f3n de <strong data-start=\"5539\" data-end=\"5551\">6 frames<\/strong><\/p>\n<\/li>\n<li data-start=\"5554\" data-end=\"5589\">\n<p data-start=\"5556\" data-end=\"5589\">\ud83e\uddee <code data-start=\"5559\" data-end=\"5567\">frames<\/code> incrementa de 0 a 5<\/p>\n<\/li>\n<li data-start=\"5590\" data-end=\"5634\">\n<p data-start=\"5592\" data-end=\"5634\">\ud83c\udfac Cada valor activa un <strong data-start=\"5616\" data-end=\"5632\">Replace Mesh<\/strong><\/p>\n<\/li>\n<li data-start=\"5635\" data-end=\"5681\">\n<p data-start=\"5637\" data-end=\"5681\">\ud83d\udd04 Estado <strong data-start=\"5647\" data-end=\"5660\">Animation<\/strong> activo entre 0 y 5<\/p>\n<\/li>\n<li data-start=\"5682\" data-end=\"5714\">\n<p data-start=\"5684\" data-end=\"5714\">\ud83d\uded1 Se desactiva al finalizar<\/p>\n<\/li>\n<\/ul>\n<hr data-start=\"5716\" data-end=\"5719\" \/>\n<h2 data-start=\"5721\" data-end=\"5744\">\ud83e\uddea Probando el asset<\/h2>\n<p data-start=\"5746\" data-end=\"5815\">Creamos un objeto simple que act\u00faa como <strong data-start=\"5786\" data-end=\"5797\">spawner<\/strong> de <code data-start=\"5801\" data-end=\"5814\">blood_still<\/code>.<\/p>\n<p data-start=\"5746\" data-end=\"5815\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3702\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/02\/88fd5-2018-02-08_13-52-57.gif\" alt=\"\" width=\"838\" height=\"482\" \/><\/p>\n<p data-start=\"5746\" data-end=\"5815\">Ahora aplicamos este asset &#8220;blood&#8221; en algun proyecto en el que estemos trabajando. En mi caso lo utilic\u00e9 en mi proyecto CrafTal, aqui esta un video en funcionamiento:<\/p>\n<p><iframe loading=\"lazy\" title=\"CrafTal -  testing NPC\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/-VwVp8i7ug4\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<hr data-start=\"5817\" data-end=\"5820\" \/>\n<p data-start=\"5822\" data-end=\"5956\">As\u00ed es como puedes crear <strong data-start=\"5847\" data-end=\"5889\">sprites animados funcionales en el BGE<\/strong> \u2728<br data-start=\"5891\" data-end=\"5894\" \/>Abajo puedes ver otro ejemplo y descargar el archivo.<\/p>\n<p data-start=\"5822\" data-end=\"5956\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3707\" src=\"https:\/\/mataii.files.wordpress.com\/2021\/02\/18cd3-2018-02-08_16-14-59.gif\" alt=\"\" width=\"442\" height=\"254\" \/><\/p>\n<p style=\"text-align: center;\" data-start=\"5822\" data-end=\"5956\"><span class=\"shared-files-shortcode-admin-list shared-files-shortcode-admin-list-file shared-files-shortcode-1041\" title=\"&lt;div class=&quot;shared-files-embed-69e8e1484cf73 shared-files-main-container&quot; data-elem-class=&quot;shared-files-embed-69e8e1484cf73&quot; data-search-type=&quot;0&quot; data-post-id=&quot;666&quot;&gt;&lt;div class=&quot;shared-files-search&quot;&gt;&lt;ul class=&quot;shared-files-main-file-list&quot;&gt;&lt;li class=&quot;shared-files-card-1041&quot;&gt;&lt;div class=&quot;shared-files-main-elements&quot;&gt;&lt;div class=&quot;shared-files-main-elements-left&quot; style=&quot;background-image: url(https:\/\/salvador.mata.com.mx\/blog\/wp-content\/plugins\/shared-files\/img\/2020\/zip.svg);&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;shared-files-main-elements-right&quot;&gt;&lt;a class=&quot;shared-files-file-title&quot;  data-file-type=&quot;&quot;  data-file-url=&quot;\/blog\/uploads\/shared-files\/1041\/?explosion.zip&quot;  data-external-url=&quot;&quot;  data-image-url=&quot;&quot; href=&quot;\/blog\/uploads\/shared-files\/1041\/?explosion.zip&quot; target=&quot;_blank&quot;&gt;Sprite Sheets &#8211; Sample file&lt;\/a&gt;&lt;span class=&quot;shared-file-size&quot;&gt;124.72 KB&lt;\/span&gt;&lt;span class=&quot;shared-file-date&quot;&gt;March 18, 2026&lt;\/span&gt;&lt;div class=&quot;shared-files-download-counter&quot;&gt;&lt;span&gt;Downloads: 34&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;shared-files-download-button-container&quot;&gt;&lt;a href=&quot;\/blog\/uploads\/shared-files\/1041\/?explosion.zip&amp;download=1&quot; class=&quot;shared-files-download-button&quot;  download&gt;Download&lt;\/a&gt;&lt;\/div&gt;&lt;div class=&quot;shared-files-edit-actions&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/li&gt;&lt;\/ul&gt;&lt;\/div&gt;&lt;\/div&gt;\"><div class=\"shared-files-embed-69e8e1484e0c5 shared-files-main-container\" data-elem-class=\"shared-files-embed-69e8e1484e0c5\" data-search-type=\"0\" data-post-id=\"1041\"><div class=\"shared-files-search\"><ul class=\"shared-files-main-file-list\"><li class=\"shared-files-card-1041\"><div class=\"shared-files-main-elements\"><div class=\"shared-files-main-elements-left\" style=\"background-image: url(https:\/\/salvador.mata.com.mx\/blog\/wp-content\/plugins\/shared-files\/img\/2020\/zip.svg);\"><\/div><div class=\"shared-files-main-elements-right\"><a class=\"shared-files-file-title\"  data-file-type=\"\"  data-file-url=\"\/blog\/uploads\/shared-files\/1041\/?explosion.zip\"  data-external-url=\"\"  data-image-url=\"\" href=\"\/blog\/uploads\/shared-files\/1041\/?explosion.zip\" target=\"_blank\">Sprite Sheets &#8211; Sample file<\/a><span class=\"shared-file-size\">124.72 KB<\/span><span class=\"shared-file-date\">March 18, 2026<\/span><div class=\"shared-files-download-counter\"><span>Downloads: 34<\/span><\/div><div class=\"shared-files-download-button-container\"><a href=\"\/blog\/uploads\/shared-files\/1041\/?explosion.zip&download=1\" class=\"shared-files-download-button\"  download>Download<\/a><\/div><div class=\"shared-files-edit-actions\"><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/span><\/p>\n<hr data-start=\"5958\" data-end=\"5961\" \/>\n<p data-start=\"5963\" data-end=\"6075\">\ud83d\ude4f Espero que este tutorial te sea \u00fatil.<br data-start=\"6003\" data-end=\"6006\" \/>Si tienes dudas o comentarios, escr\u00edbelos abajo.<br data-start=\"6054\" data-end=\"6057\" \/>\u00a1Gracias por leer!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u26a0\ufe0f Muchas im\u00e1genes GIFDale un poco de tiempo para cargar si est\u00e1s en una conexi\u00f3n lenta. Todos sabemos que el BGE ten\u00eda algunas herramientas para lograr texturas animadas, pero el problema es que \u00a1en la pr\u00e1ctica son casi inutilizables! \ud83d\ude05Si eres nuevo en RanGE\/Blender, probablemente te est\u00e9s preguntando por qu\u00e9 ocurre esto; y si ya [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":668,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[136],"tags":[84],"class_list":["post-666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-range"],"_links":{"self":[{"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/posts\/666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=666"}],"version-history":[{"count":17,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/posts\/666\/revisions"}],"predecessor-version":[{"id":1043,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/posts\/666\/revisions\/1043"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/media\/668"}],"wp:attachment":[{"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}