{"id":1737,"date":"2017-11-15T12:33:48","date_gmt":"2017-11-15T12:33:48","guid":{"rendered":"\/blog\/?p=1737"},"modified":"2020-02-10T11:38:27","modified_gmt":"2020-02-10T11:38:27","slug":"you-can-now-upload-your-own-sprites-and-background-on-game-builder","status":"publish","type":"post","link":"https:\/\/wps.codemonkey.com\/es\/blog\/you-can-now-upload-your-own-sprites-and-background-on-game-builder\/","title":{"rendered":"\u00a1Ahora puedes cargar tus propios sprites y fondos en Game Builder!"},"content":{"rendered":"<h2 style=\"text-align: center;\"><span style=\"font-weight: 400;\">Hemos agregado una caracter\u00edstica NUEVA para la plataforma Game Builder.\u00a0<\/span><\/h2>\n<p style=\"text-align: center;\"><em>\u00a1Ahora puedes ser a\u00fan m\u00e1s creativo con tus dise\u00f1os!<\/em><\/p>\n<p><strong>3 pasos para utilizar esta funci\u00f3n:<\/strong><\/p>\n<p><span style=\"font-size: 1rem;\">1. Puede cargar su propia hoja de sprites y configurarla como su sprite animado.<\/span><\/p>\n<p>Para hacer esto, haga clic en Crear juegos -&gt; el signo m\u00e1s -&gt; y luego en Sus hojas de Sprite. All\u00ed, ver\u00e1 la opci\u00f3n de &quot;cargar hoja de sprites&quot;. Haga clic en &quot;cargar hoja de sprites&quot; y luego en &quot;cargar&quot; para seleccionar el archivo que desea agregar.<\/p>\n<p><strong>Imagen 1:<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-13741\" src=\"https:\/\/www.codemonkey.com\/wp-content\/uploads\/2017\/11\/upload-a-sprite-sheet.png\" alt=\"\" width=\"500\" height=\"406\" srcset=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113631\/upload-a-sprite-sheet.png 500w, https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113631\/upload-a-sprite-sheet-300x244.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Mientras tanto, busque una hoja de sprites que desee usar en su juego y luego c\u00e1rguela.<\/p>\n<p>A continuaci\u00f3n se muestra un ejemplo de <strong>duende<\/strong> hoja para cargar:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-13742\" src=\"https:\/\/www.codemonkey.com\/wp-content\/uploads\/2017\/11\/Sprite-example.png\" alt=\"\" width=\"500\" height=\"83\" srcset=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113635\/Sprite-example.png 500w, https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113635\/Sprite-example-300x50.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Si desea utilizar una hoja de sprites de este tipo, introduzca el n\u00famero de fotogramas en N\u00famero de fotogramas. Dado que en esta hoja de sprites espec\u00edfica se ve a la ni\u00f1a corriendo en 6 acciones diferentes (o cuadros, ingres\u00e9 6 ..<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-13743\" src=\"https:\/\/www.codemonkey.com\/wp-content\/uploads\/2017\/11\/Choose-Number-of-Frames.png\" alt=\"\" width=\"500\" height=\"404\" srcset=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113642\/Choose-Number-of-Frames.png 500w, https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113642\/Choose-Number-of-Frames-300x242.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Haga clic en Aceptar y se agregar\u00e1 su objeto.<\/p>\n<p>Para programar o controlar tu sprite, primero debes definir la animaci\u00f3n. Para hacerlo, haga clic en agregar animaci\u00f3n debajo de Pantalla en la parte inferior de la pantalla.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13744\" src=\"https:\/\/www.codemonkey.com\/wp-content\/uploads\/2017\/11\/Define-Animation-Game-Builder.png\" alt=\"\" width=\"768\" height=\"174\" srcset=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113649\/Define-Animation-Game-Builder.png 768w, https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113649\/Define-Animation-Game-Builder-300x68.png 300w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p>Luego defina la &quot;clave&quot;. Por ejemplo, si la hoja de sprites que carg\u00f3 es de una chica corriendo, configure la clave como &quot;ejecutar&quot;. Luego, agregue la cantidad de fotogramas en la hoja de sprites dentro de los par\u00e9ntesis. Dado que hay 6 marcos, los par\u00e9ntesis incluyen n\u00fameros del 0 al 5. A continuaci\u00f3n, defina frameRate, 12 es un buen n\u00famero para comenzar. Saltaremos loopanimation<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13745\" src=\"https:\/\/www.codemonkey.com\/wp-content\/uploads\/2017\/11\/Frame-Rate.png\" alt=\"\" width=\"363\" height=\"80\" srcset=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113651\/Frame-Rate.png 363w, https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113651\/Frame-Rate-300x66.png 300w\" sizes=\"(max-width: 363px) 100vw, 363px\" \/><\/p>\n<p>Puede encontrar un c\u00f3digo de ejemplo a continuaci\u00f3n:<br \/>\n@addAnimation &quot;ejecutar&quot;, [0, 1, 2, 3, 4, 5], 12<\/p>\n<p>@onKey = (clave) =&gt;<br \/>\nEjemplo #:<br \/>\nif clave == keyboard.right<br \/>\n@startAnimation &quot;ejecutar&quot;<br \/>\n@paso 5<\/p>\n<p>@onAnimationEnd &quot;ejecutar&quot;, () =&gt;<br \/>\n@stopAnimation s\u00ed<\/p>\n<p><span style=\"font-weight: 400;\">2. Sube tus propias im\u00e1genes y config\u00faralas como fondo del juego.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Imagen 2:<\/strong> <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13746\" src=\"https:\/\/www.codemonkey.com\/wp-content\/uploads\/2017\/11\/Uploaded-Background-for-Game-Builder.png\" alt=\"\" width=\"842\" height=\"527\" srcset=\"https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113700\/Uploaded-Background-for-Game-Builder.png 842w, https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113700\/Uploaded-Background-for-Game-Builder-300x188.png 300w, https:\/\/d3sujgifhk94se.cloudfront.net\/wp-content\/uploads\/2017\/11\/10113700\/Uploaded-Background-for-Game-Builder-768x481.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Como se vio en<strong> Imagen 2<\/strong>, vaya a la pesta\u00f1a Juego en la parte inferior derecha de la pantalla y luego haga clic en Cargar para elegir un nuevo fondo de juego.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">3. Interfaz de usuario mejorada para seleccionar el fondo del juego.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Despu\u00e9s de crear tu juego, \u00a1no olvides guardarlo antes de compartirlo!<\/span><\/p>\n<p><strong>\u00bfNecesitas ayuda? Verificar <a href=\"https:\/\/www.playcodemonkey.com\/games\/bD5J3QnB\">esta<\/a> juego de referencia para ayudarte o env\u00edanos un correo electr\u00f3nico a info@codemonkey.com<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>We have added a NEW feature for the Game Builder platform.\u00a0 Now you can get even more creative with your designs! 3 Steps to Use &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wps.codemonkey.com\/es\/blog\/you-can-now-upload-your-own-sprites-and-background-on-game-builder\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;You Can Now Upload Your Own Sprites &#038; Backgrounds on Game Builder!&#8221;<\/span><\/a><\/p>","protected":false},"author":41,"featured_media":11957,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"footnotes":""},"categories":[31],"tags":[161,516,514,515],"class_list":["post-1737","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-new-features","tag-codemonkey","tag-design","tag-game-builder","tag-sprite-animations","post_format-post-format-image"],"_links":{"self":[{"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/posts\/1737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/comments?post=1737"}],"version-history":[{"count":5,"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/posts\/1737\/revisions"}],"predecessor-version":[{"id":13747,"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/posts\/1737\/revisions\/13747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/media\/11957"}],"wp:attachment":[{"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/media?parent=1737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/categories?post=1737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wps.codemonkey.com\/es\/wp-json\/wp\/v2\/tags?post=1737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}