[{"data":1,"prerenderedAt":2933},["ShallowReactive",2],{"navigation_docs":3,"-archivos-ui-rpg-ui-3":412,"-archivos-ui-rpg-ui-3-surround":2928},[4,18,43,118,160,200,231,320,346],{"title":5,"path":6,"stem":7,"children":8,"icon":17},"Evaluación","\u002Fintroduction","1.introduction\u002F1.index",[9,12],{"title":10,"path":6,"stem":7,"icon":11},"Método de Evaluación","i-iconamoon-cheque-bold",{"title":13,"path":14,"stem":15,"icon":16},"Plataforma de Aprendizaje","\u002Fintroduction\u002Fplataforma","1.introduction\u002F2.plataforma","i-lucide-book-marked","i-lucide-house",{"title":19,"icon":20,"path":21,"stem":22,"children":23,"page":42},"Entorno de desarrollo","i-codicon-edit-code","\u002Fide","2.ide",[24,28,33,37],{"title":25,"path":26,"stem":27,"icon":20},"¿Qué es un IDE?","\u002Fide\u002Fentorno","2.ide\u002F1.entorno",{"title":29,"path":30,"stem":31,"icon":32},"Estructura de un Proyecto","\u002Fide\u002Festructura","2.ide\u002F2.estructura","i-clarity-tree-view-line",{"title":34,"path":35,"stem":36,"icon":20},"La compilación en un IDE","\u002Fide\u002Fcompilacion","2.ide\u002F3.compilacion",{"title":38,"path":39,"stem":40,"icon":41},"Depuración de Código","\u002Fide\u002Fdepurar","2.ide\u002F4.depurar","i-lucide-bug",false,{"title":44,"icon":45,"path":46,"stem":47,"children":48,"page":42},"Clases y Objetos","i-catppuccin-java-class","\u002Fclases-objetos","3.clases-objetos",[49,53,57,62,66,70,74,78,83,88,92,96,101,106,110,114],{"title":50,"path":51,"stem":52},"Repaso previo a Clases y Objetos","\u002Fclases-objetos\u002Fpreview","3.clases-objetos\u002F00.preview",{"title":54,"path":55,"stem":56,"icon":45},"¿Qué es la Programación Orientada a Objetos (POO)?","\u002Fclases-objetos\u002Fpoo","3.clases-objetos\u002F01.poo",{"title":58,"path":59,"stem":60,"icon":61},"Diagramas de Clases y Objetos","\u002Fclases-objetos\u002Fdiagramas","3.clases-objetos\u002F02.diagramas","i-devicon-uml",{"title":63,"path":64,"stem":65,"icon":45},"Las Clases","\u002Fclases-objetos\u002Fclases","3.clases-objetos\u002F03.clases",{"title":67,"path":68,"stem":69,"icon":45},"Ámbito y Visibilidad","\u002Fclases-objetos\u002Fambito","3.clases-objetos\u002F04.ambito",{"title":71,"path":72,"stem":73,"icon":45},"Declaración e Instanciación de Objetos","\u002Fclases-objetos\u002Fobjetos","3.clases-objetos\u002F05.objetos",{"title":75,"path":76,"stem":77,"icon":45},"Clases Predefinidas en Java","\u002Fclases-objetos\u002Fpredefinidas","3.clases-objetos\u002F06.predefinidas",{"title":79,"path":80,"stem":81,"icon":82},"Paquetes en Java","\u002Fclases-objetos\u002Fpaquetes","3.clases-objetos\u002F07.paquetes","i-material-icon-theme-folder-java-open",{"title":84,"path":85,"stem":86,"icon":87},"Las Excepciones","\u002Fclases-objetos\u002Fexcepciones","3.clases-objetos\u002F08.excepciones","i-catppuccin-java-exception",{"title":89,"path":90,"stem":91,"icon":45},"La clase JOptionPane","\u002Fclases-objetos\u002Fjoptionpane","3.clases-objetos\u002F09.joptionpane",{"title":93,"path":94,"stem":95,"icon":45},"Constructores y Accesores","\u002Fclases-objetos\u002Fconstructores","3.clases-objetos\u002F10.constructores",{"title":97,"path":98,"stem":99,"icon":100},"Tipos Enumerados (Enums)","\u002Fclases-objetos\u002Fenumerados","3.clases-objetos\u002F11.enumerados","i-catppuccin-java-enum",{"title":102,"path":103,"stem":104,"icon":105},"Modificadores de acceso static y final","\u002Fclases-objetos\u002Fmodificadores","3.clases-objetos\u002F12.modificadores","i-mdi-chart-box",{"title":107,"path":108,"stem":109,"icon":105},"El casting en Java","\u002Fclases-objetos\u002Fcasting","3.clases-objetos\u002F13.casting",{"title":111,"path":112,"stem":113},"Las Expresiones Regulares","\u002Fclases-objetos\u002Fexpresiones-regulares","3.clases-objetos\u002F14.expresiones-regulares",{"title":115,"path":116,"stem":117,"icon":105},"Clases Genéricas en Java","\u002Fclases-objetos\u002Fclases-genericas","3.clases-objetos\u002F15.clases-genericas",{"title":119,"icon":120,"path":121,"stem":122,"children":123,"page":42},"Funciones (Métodos)","i-material-symbols-function","\u002Fmetodos","4.metodos",[124,128,132,136,140,144,148,152,156],{"title":125,"path":126,"stem":127},"Funciones Genéricas","\u002Fmetodos\u002Ffuncion-generica","4.metodos\u002F01.funcion-generica",{"title":129,"path":130,"stem":131},"Métodos de Instancia y de Clase","\u002Fmetodos\u002Finstancia-clase","4.metodos\u002F02.instancia-clase",{"title":133,"path":134,"stem":135},"Sobrecarga de Funciones","\u002Fmetodos\u002Fsobrecarga","4.metodos\u002F03.sobrecarga",{"title":137,"path":138,"stem":139},"Alcance de Variables y Métodos","\u002Fmetodos\u002Falcance","4.metodos\u002F04.alcance",{"title":141,"path":142,"stem":143},"Recursividad","\u002Fmetodos\u002Frecursividad","4.metodos\u002F05.recursividad",{"title":145,"path":146,"stem":147},"Puntero this","\u002Fmetodos\u002Fthis","4.metodos\u002F06.this",{"title":149,"path":150,"stem":151},"Los argumentos variables (varargs)","\u002Fmetodos\u002Fvarargs","4.metodos\u002F07.varargs",{"title":153,"path":154,"stem":155},"La clase Arrays","\u002Fmetodos\u002Farrays","4.metodos\u002F08.arrays",{"title":157,"path":158,"stem":159},"Predicados Simples y Compuestos en Java","\u002Fmetodos\u002Fpredicados","4.metodos\u002F09.predicados",{"title":161,"path":162,"stem":163,"children":164,"icon":199},"Herencia","\u002Fherencia","5.herencia\u002F01.index",[165,167,171,175,179,183,187,191,195],{"title":166,"path":162,"stem":163},"¿Qué es la herencia?",{"title":168,"path":169,"stem":170},"Sobreescritura de métodos y uso de `super`","\u002Fherencia\u002Fsobeescritura","5.herencia\u002F02.sobeescritura",{"title":172,"path":173,"stem":174},"Tipos de herencia","\u002Fherencia\u002Ftipos-herencia","5.herencia\u002F03.tipos-herencia",{"title":176,"path":177,"stem":178},"La clase Object en Java","\u002Fherencia\u002Fobject","5.herencia\u002F04.object",{"title":180,"path":181,"stem":182},"Polimorfismo","\u002Fherencia\u002Fpolimorfismo","5.herencia\u002F05.polimorfismo",{"title":184,"path":185,"stem":186},"Clases y Funciones Abstractas","\u002Fherencia\u002Fabstract","5.herencia\u002F06.abstract",{"title":188,"path":189,"stem":190},"Interfaces","\u002Fherencia\u002Finterfaces","5.herencia\u002F07.interfaces",{"title":192,"path":193,"stem":194},"Funciones e Interfaces","\u002Fherencia\u002Ffunciones-interfaces","5.herencia\u002F08.funciones-interfaces",{"title":196,"path":197,"stem":198},"Interfaces y Funciones Lambda","\u002Fherencia\u002Flambda-interface","5.herencia\u002F09.lambda-interface","i-material-symbols-heritage",{"title":201,"path":202,"stem":203,"children":204,"icon":199},"Arreglos","\u002Farreglos","6.arreglos\u002F01.index",[205,207,211,215,219,223,227],{"title":206,"path":202,"stem":203},"Los arreglos en Java",{"title":208,"path":209,"stem":210},"Los arreglos","\u002Farreglos\u002Farray","6.arreglos\u002F02.array",{"title":212,"path":213,"stem":214},"Matrices","\u002Farreglos\u002Fmatrices","6.arreglos\u002F03.matrices",{"title":216,"path":217,"stem":218},"Comparadores","\u002Farreglos\u002Fcomparator","6.arreglos\u002F04.comparator",{"title":220,"path":221,"stem":222},"Arreglos dinámicos: ArrayList","\u002Farreglos\u002Farraylist","6.arreglos\u002F05.arraylist",{"title":224,"path":225,"stem":226},"Arreglos Relacionales: HashMap","\u002Farreglos\u002Fhashmap","6.arreglos\u002F06.hashmap",{"title":228,"path":229,"stem":230},"La clase Stream en Java","\u002Farreglos\u002Fstream","6.arreglos\u002F07.stream",{"title":232,"icon":199,"path":233,"stem":234,"children":235,"page":42},"Archivos e Interfaz de Usuario","\u002Farchivos-ui","7.archivos-ui",[236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316],{"title":237,"path":238,"stem":239},"El paquete Swing","\u002Farchivos-ui\u002Fswing","7.archivos-ui\u002F01.swing",{"title":241,"path":242,"stem":243},"La clase JFrame y el JPanel","\u002Farchivos-ui\u002Fjpanel","7.archivos-ui\u002F02.jpanel",{"title":245,"path":246,"stem":247},"Los Layouts en Swing","\u002Farchivos-ui\u002Flayout","7.archivos-ui\u002F03.layout",{"title":249,"path":250,"stem":251},"Iniciando con Swing","\u002Farchivos-ui\u002Finiciando","7.archivos-ui\u002F04.iniciando",{"title":253,"path":254,"stem":255},"Las clases Color y Font en Swing","\u002Farchivos-ui\u002Fcolor-font","7.archivos-ui\u002F05.color-font",{"title":257,"path":258,"stem":259},"Etiquetas en Swing","\u002Farchivos-ui\u002Fetiquetas","7.archivos-ui\u002F06.etiquetas",{"title":261,"path":262,"stem":263},"Personalizando la apariencia de los componentes en Swing","\u002Farchivos-ui\u002Fpersonalizando","7.archivos-ui\u002F07.personalizando",{"title":265,"path":266,"stem":267},"Sobrescribiendo el método drawComponent() en Swing","\u002Farchivos-ui\u002Fdraw","7.archivos-ui\u002F08.draw",{"title":269,"path":270,"stem":271},"Manejando eventos en Swing","\u002Farchivos-ui\u002Feventos","7.archivos-ui\u002F09.eventos",{"title":273,"path":274,"stem":275},"Personalización de Componentes mediante la Extensión de Clases en Swing","\u002Farchivos-ui\u002Fextends-component","7.archivos-ui\u002F10.extends-component",{"title":277,"path":278,"stem":279},"Gradientes","\u002Farchivos-ui\u002Fgradientes","7.archivos-ui\u002F11.gradientes",{"title":281,"path":282,"stem":283},"Botones en Swing","\u002Farchivos-ui\u002Fbotones","7.archivos-ui\u002F12.botones",{"title":285,"path":286,"stem":287},"Los delegadores en Swing","\u002Farchivos-ui\u002Fdelegadores","7.archivos-ui\u002F13.delegadores",{"title":289,"path":290,"stem":291},"UI para nuestro RPG: Parte 1","\u002Farchivos-ui\u002Frpg-ui-1","7.archivos-ui\u002F14.rpg-ui-1",{"title":293,"path":294,"stem":295},"UI para nuestro RPG: Parte 2","\u002Farchivos-ui\u002Frpg-ui-2","7.archivos-ui\u002F15.rpg-ui-2",{"title":297,"path":298,"stem":299},"Los Streams Entrada y Salida","\u002Farchivos-ui\u002Fstreams","7.archivos-ui\u002F16.streams",{"title":301,"path":302,"stem":303},"Archivo tipo Objeto","\u002Farchivos-ui\u002Farchivo-objeto","7.archivos-ui\u002F17.archivo-objeto",{"title":305,"path":306,"stem":307},"UI para nuestro RPG: Parte 3","\u002Farchivos-ui\u002Frpg-ui-3","7.archivos-ui\u002F18.rpg-ui-3",{"title":309,"path":310,"stem":311},"UI para nuestro RPG: Parte 4","\u002Farchivos-ui\u002Frpg-ui-4","7.archivos-ui\u002F19.rpg-ui-4",{"title":313,"path":314,"stem":315},"UI para nuestro RPG: Parte 5","\u002Farchivos-ui\u002Frpg-ui-5","7.archivos-ui\u002F20.rpg-ui-5",{"title":317,"path":318,"stem":319},"UI para nuestro RPG: Parte 6","\u002Farchivos-ui\u002Frpg-ui-6","7.archivos-ui\u002F21.rpg-ui-6",{"title":321,"icon":322,"path":323,"stem":324,"children":325,"page":42},"Ejemplos","i-check-circle","\u002Fejemplos","8.ejemplos",[326,330,334,338,342],{"title":327,"path":328,"stem":329,"icon":105},"Ejemplo 1: Validando entradas con JOptionPane","\u002Fejemplos\u002Fejemplo-01","8.ejemplos\u002F01.ejemplo-01",{"title":331,"path":332,"stem":333},"Ejemplo 02: Uso de clases genéricas en Java","\u002Fejemplos\u002Fejemplo-02","8.ejemplos\u002F02.ejemplo-02",{"title":335,"path":336,"stem":337},"Ejemplo 03: Uso de Enum, Excepciones en Java","\u002Fejemplos\u002Fejemplo-03","8.ejemplos\u002F03.ejemplo-03",{"title":339,"path":340,"stem":341},"Ejemplo 4: Clase con funciones genéricas de validación","\u002Fejemplos\u002Fejemplo-04","8.ejemplos\u002F04.ejemplo-04",{"title":343,"path":344,"stem":345},"Ejemplo 5: Sistema de Gestión de Empleados","\u002Fejemplos\u002Fejemplo-05","8.ejemplos\u002F05.ejemplo-05",{"title":347,"icon":322,"path":348,"stem":349,"children":350,"page":42},"Actividades","\u002Factividades","9.actividades",[351,355,360,364,368,372,376,380,384,388,392,396,400,404,408],{"title":352,"path":353,"stem":354,"icon":105},"Actividad 1: Infografía sobre el proceso de compilación","\u002Factividades\u002Fact-01","9.actividades\u002F01.act-01",{"title":356,"path":357,"stem":358,"icon":359},"Actividad 2: Modelando Diagramas de Clases UML","\u002Factividades\u002Fact-02","9.actividades\u002F02.act-02","i-material-icon-theme-uml",{"title":361,"path":362,"stem":363,"icon":45},"Actividad 3: Creando Clases y Objetos en Java","\u002Factividades\u002Fact-03","9.actividades\u002F03.act-03",{"title":365,"path":366,"stem":367},"Actividad 4: Validando entradas de datos","\u002Factividades\u002Fact-04","9.actividades\u002F04.act-04",{"title":369,"path":370,"stem":371,"icon":105},"Actividad 5: Implementando una clase genérica","\u002Factividades\u002Fact-05","9.actividades\u002F05.act-05",{"title":373,"path":374,"stem":375,"icon":105},"Actividad 6: Expandiendo InputValidator con Predicados y Function","\u002Factividades\u002Fact-06","9.actividades\u002F06.act-06",{"title":377,"path":378,"stem":379,"icon":105},"Actividad 7: Gestor de Biblioteca con InputValidator","\u002Factividades\u002Fact-07","9.actividades\u002F07.act-07",{"title":381,"path":382,"stem":383,"icon":105},"Actividad 8: Calculadora de Figuras Geométricas","\u002Factividades\u002Fact-08","9.actividades\u002F08.act-08",{"title":385,"path":386,"stem":387,"icon":105},"Actividad 9: gestión de una empresa agroalimentaria","\u002Factividades\u002Fact-09","9.actividades\u002F09.act-09",{"title":389,"path":390,"stem":391,"icon":105},"Actividad 10: Sistema de gestión de clínicas veterinarias","\u002Factividades\u002Fact-10","9.actividades\u002F10.act-10",{"title":393,"path":394,"stem":395},"Definición de Proyecto Evolutivo","\u002Factividades\u002Frpg","9.actividades\u002F11.rpg",{"title":397,"path":398,"stem":399},"Actividad 11: Creación de Personajes","\u002Factividades\u002Fact-11","9.actividades\u002F12.act-11",{"title":401,"path":402,"stem":403},"Actividad 12: El Inventario y los Objetos","\u002Factividades\u002Fact-12","9.actividades\u002F13.act-12",{"title":405,"path":406,"stem":407},"Actividad 13: El combate por turnos","\u002Factividades\u002Fact-13","9.actividades\u002F14.act-13",{"title":409,"path":410,"stem":411},"Actividad 14: Guardando y Cargando","\u002Factividades\u002Fact-14","9.actividades\u002F15.act-14",{"id":413,"title":305,"body":414,"description":2922,"extension":2923,"links":2924,"meta":2925,"navigation":466,"path":306,"seo":2926,"stem":307,"__hash__":2927},"docs\u002F7.archivos-ui\u002F18.rpg-ui-3.md",{"type":415,"value":416,"toc":2913},"minimark",[417,422,426,430,438,956,973,987,991,997,1399,1413,2193,2206,2221,2226,2232,2369,2494,2507,2511,2514,2892,2899,2902,2906,2909],[418,419,421],"h2",{"id":420},"continuando-con-la-ui-para-nuestro-rpg","Continuando con la UI para nuestro RPG",[423,424,425],"p",{},"En esta tercera parte de la serie sobre la UI para nuestro RPG, continuamos desarrollando la interfaz gráfica utilizando Java Swing. En las partes anteriores, hemos creado una ventana básica y añadido algunos componentes iniciales. Ahora, vamos a añadir más componentes y funcionalidades para mejorar la experiencia del usuario.",[418,427,429],{"id":428},"el-campo-de-texto-para-el-nombre-del-personaje","El campo de texto para el nombre del personaje",[423,431,432,433,437],{},"Una de las funcionalidades que queremos añadir es un campo de texto donde el jugador pueda ingresar el nombre de su personaje. Para esto, utilizaremos la clase ",[434,435,436],"code",{},"JTextField"," de Swing. Aquí te muestro cómo hacerlo:",[439,440,446],"pre",{"className":441,"code":442,"filename":443,"language":444,"meta":445,"style":445},"language-java shiki shiki-themes github-dark","package app.game.rpg.ui.components.inputs;\n\nimport app.game.rpg.ui.components.borders.RPGRoundedBorder;\nimport app.game.rpg.utils.FontCache;\n\nimport javax.swing.*;\nimport javax.swing.border.CompoundBorder;\nimport javax.swing.border.EmptyBorder;\nimport java.awt.*;\nimport java.io.IOException;\nimport java.util.Objects;\n\npublic class RPGInputText extends JTextField {\n\n    public RPGInputText() {\n\n        super();\n        Font font;\n        try {\n            font = Font.createFont(Font.TRUETYPE_FONT, Objects.requireNonNull(getClass().getResourceAsStream(\"\u002Ffonts\u002FBoldPixels.ttf\"))).deriveFont(Font.PLAIN, 22f);\n        } catch (FontFormatException | IOException e) {\n            throw new RuntimeException(e);\n        }\n        setFont(font);\n        setBorder(new CompoundBorder(new RPGRoundedBorder(3, 10),\n                new EmptyBorder(5, 5, 5, 5)));\n        setOpaque(false);\n    }\n\n    @Override\n    public void paint(Graphics g) {\n\n        Graphics2D g2d = (Graphics2D) g;\n        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);\n        g2d.setColor(getBackground());\n        g2d.fillRoundRect(0, 0, getWidth(), getHeight(), 10, 10);\n        super.paint(g);\n        g2d.dispose();\n    }\n}\n","app\u002Fgame\u002Frpg\u002Fui\u002Fcomponents\u002Finputs\u002FRPGInputText.java","java","",[434,447,448,461,468,477,485,490,505,513,521,533,541,549,554,576,581,592,597,606,612,620,674,693,708,714,723,758,787,800,806,811,820,839,844,855,867,883,921,935,945,950],{"__ignoreMap":445},[449,450,453,457],"span",{"class":451,"line":452},"line",1,[449,454,456],{"class":455},"snl16","package",[449,458,460],{"class":459},"s95oV"," app.game.rpg.ui.components.inputs;\n",[449,462,464],{"class":451,"line":463},2,[449,465,467],{"emptyLinePlaceholder":466},true,"\n",[449,469,471,474],{"class":451,"line":470},3,[449,472,473],{"class":455},"import",[449,475,476],{"class":459}," app.game.rpg.ui.components.borders.RPGRoundedBorder;\n",[449,478,480,482],{"class":451,"line":479},4,[449,481,473],{"class":455},[449,483,484],{"class":459}," app.game.rpg.utils.FontCache;\n",[449,486,488],{"class":451,"line":487},5,[449,489,467],{"emptyLinePlaceholder":466},[449,491,493,495,498,502],{"class":451,"line":492},6,[449,494,473],{"class":455},[449,496,497],{"class":459}," javax.swing.",[449,499,501],{"class":500},"sDLfK","*",[449,503,504],{"class":459},";\n",[449,506,508,510],{"class":451,"line":507},7,[449,509,473],{"class":455},[449,511,512],{"class":459}," javax.swing.border.CompoundBorder;\n",[449,514,516,518],{"class":451,"line":515},8,[449,517,473],{"class":455},[449,519,520],{"class":459}," javax.swing.border.EmptyBorder;\n",[449,522,524,526,529,531],{"class":451,"line":523},9,[449,525,473],{"class":455},[449,527,528],{"class":459}," java.awt.",[449,530,501],{"class":500},[449,532,504],{"class":459},[449,534,536,538],{"class":451,"line":535},10,[449,537,473],{"class":455},[449,539,540],{"class":459}," java.io.IOException;\n",[449,542,544,546],{"class":451,"line":543},11,[449,545,473],{"class":455},[449,547,548],{"class":459}," java.util.Objects;\n",[449,550,552],{"class":451,"line":551},12,[449,553,467],{"emptyLinePlaceholder":466},[449,555,557,560,563,567,570,573],{"class":451,"line":556},13,[449,558,559],{"class":455},"public",[449,561,562],{"class":455}," class",[449,564,566],{"class":565},"svObZ"," RPGInputText",[449,568,569],{"class":455}," extends",[449,571,572],{"class":565}," JTextField",[449,574,575],{"class":459}," {\n",[449,577,579],{"class":451,"line":578},14,[449,580,467],{"emptyLinePlaceholder":466},[449,582,584,587,589],{"class":451,"line":583},15,[449,585,586],{"class":455},"    public",[449,588,566],{"class":565},[449,590,591],{"class":459},"() {\n",[449,593,595],{"class":451,"line":594},16,[449,596,467],{"emptyLinePlaceholder":466},[449,598,600,603],{"class":451,"line":599},17,[449,601,602],{"class":500},"        super",[449,604,605],{"class":459},"();\n",[449,607,609],{"class":451,"line":608},18,[449,610,611],{"class":459},"        Font font;\n",[449,613,615,618],{"class":451,"line":614},19,[449,616,617],{"class":455},"        try",[449,619,575],{"class":459},[449,621,623,626,629,632,635,638,641,644,647,650,653,655,659,662,665,668,671],{"class":451,"line":622},20,[449,624,625],{"class":459},"            font ",[449,627,628],{"class":455},"=",[449,630,631],{"class":459}," Font.",[449,633,634],{"class":565},"createFont",[449,636,637],{"class":459},"(Font.TRUETYPE_FONT, Objects.",[449,639,640],{"class":565},"requireNonNull",[449,642,643],{"class":459},"(",[449,645,646],{"class":565},"getClass",[449,648,649],{"class":459},"().",[449,651,652],{"class":565},"getResourceAsStream",[449,654,643],{"class":459},[449,656,658],{"class":657},"sU2Wk","\"\u002Ffonts\u002FBoldPixels.ttf\"",[449,660,661],{"class":459},"))).",[449,663,664],{"class":565},"deriveFont",[449,666,667],{"class":459},"(Font.PLAIN, ",[449,669,670],{"class":500},"22f",[449,672,673],{"class":459},");\n",[449,675,677,680,683,686,690],{"class":451,"line":676},21,[449,678,679],{"class":459},"        } ",[449,681,682],{"class":455},"catch",[449,684,685],{"class":459}," (FontFormatException | IOException ",[449,687,689],{"class":688},"s9osk","e",[449,691,692],{"class":459},") {\n",[449,694,696,699,702,705],{"class":451,"line":695},22,[449,697,698],{"class":455},"            throw",[449,700,701],{"class":455}," new",[449,703,704],{"class":565}," RuntimeException",[449,706,707],{"class":459},"(e);\n",[449,709,711],{"class":451,"line":710},23,[449,712,713],{"class":459},"        }\n",[449,715,717,720],{"class":451,"line":716},24,[449,718,719],{"class":565},"        setFont",[449,721,722],{"class":459},"(font);\n",[449,724,726,729,731,734,737,739,741,744,746,749,752,755],{"class":451,"line":725},25,[449,727,728],{"class":565},"        setBorder",[449,730,643],{"class":459},[449,732,733],{"class":455},"new",[449,735,736],{"class":565}," CompoundBorder",[449,738,643],{"class":459},[449,740,733],{"class":455},[449,742,743],{"class":565}," RPGRoundedBorder",[449,745,643],{"class":459},[449,747,748],{"class":500},"3",[449,750,751],{"class":459},", ",[449,753,754],{"class":500},"10",[449,756,757],{"class":459},"),\n",[449,759,761,764,767,769,772,774,776,778,780,782,784],{"class":451,"line":760},26,[449,762,763],{"class":455},"                new",[449,765,766],{"class":565}," EmptyBorder",[449,768,643],{"class":459},[449,770,771],{"class":500},"5",[449,773,751],{"class":459},[449,775,771],{"class":500},[449,777,751],{"class":459},[449,779,771],{"class":500},[449,781,751],{"class":459},[449,783,771],{"class":500},[449,785,786],{"class":459},")));\n",[449,788,790,793,795,798],{"class":451,"line":789},27,[449,791,792],{"class":565},"        setOpaque",[449,794,643],{"class":459},[449,796,797],{"class":500},"false",[449,799,673],{"class":459},[449,801,803],{"class":451,"line":802},28,[449,804,805],{"class":459},"    }\n",[449,807,809],{"class":451,"line":808},29,[449,810,467],{"emptyLinePlaceholder":466},[449,812,814,817],{"class":451,"line":813},30,[449,815,816],{"class":459},"    @",[449,818,819],{"class":455},"Override\n",[449,821,823,825,828,831,834,837],{"class":451,"line":822},31,[449,824,586],{"class":455},[449,826,827],{"class":455}," void",[449,829,830],{"class":565}," paint",[449,832,833],{"class":459},"(Graphics ",[449,835,836],{"class":688},"g",[449,838,692],{"class":459},[449,840,842],{"class":451,"line":841},32,[449,843,467],{"emptyLinePlaceholder":466},[449,845,847,850,852],{"class":451,"line":846},33,[449,848,849],{"class":459},"        Graphics2D g2d ",[449,851,628],{"class":455},[449,853,854],{"class":459}," (Graphics2D) g;\n",[449,856,858,861,864],{"class":451,"line":857},34,[449,859,860],{"class":459},"        g2d.",[449,862,863],{"class":565},"setRenderingHint",[449,865,866],{"class":459},"(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);\n",[449,868,870,872,875,877,880],{"class":451,"line":869},35,[449,871,860],{"class":459},[449,873,874],{"class":565},"setColor",[449,876,643],{"class":459},[449,878,879],{"class":565},"getBackground",[449,881,882],{"class":459},"());\n",[449,884,886,888,891,893,896,898,900,902,905,908,911,913,915,917,919],{"class":451,"line":885},36,[449,887,860],{"class":459},[449,889,890],{"class":565},"fillRoundRect",[449,892,643],{"class":459},[449,894,895],{"class":500},"0",[449,897,751],{"class":459},[449,899,895],{"class":500},[449,901,751],{"class":459},[449,903,904],{"class":565},"getWidth",[449,906,907],{"class":459},"(), ",[449,909,910],{"class":565},"getHeight",[449,912,907],{"class":459},[449,914,754],{"class":500},[449,916,751],{"class":459},[449,918,754],{"class":500},[449,920,673],{"class":459},[449,922,924,926,929,932],{"class":451,"line":923},37,[449,925,602],{"class":500},[449,927,928],{"class":459},".",[449,930,931],{"class":565},"paint",[449,933,934],{"class":459},"(g);\n",[449,936,938,940,943],{"class":451,"line":937},38,[449,939,860],{"class":459},[449,941,942],{"class":565},"dispose",[449,944,605],{"class":459},[449,946,948],{"class":451,"line":947},39,[449,949,805],{"class":459},[449,951,953],{"class":451,"line":952},40,[449,954,955],{"class":459},"}\n",[423,957,958,959,962,963,965,966,969,970,972],{},"Como puedes ver, hemos creado una clase ",[434,960,961],{},"RPGInputText"," que extiende de ",[434,964,436],{},". En el constructor, configuramos la fuente personalizada y el borde redondeado utilizando una clase ",[434,967,968],{},"RPGRoundedBorder"," que hemos creado previamente. Además, sobrescribimos el método ",[434,971,931],{}," para dibujar un fondo redondeado detrás del campo de texto.",[423,974,975,976,978,979,982,983,986],{},"Algo importante en este caso es que estamos utilizando una fuente personalizada, por lo que es necesario cargarla desde un archivo de recursos. Para esto, utilizamos el método ",[434,977,652],{}," para obtener un ",[434,980,981],{},"InputStream"," de la fuente y luego la cargamos utilizando ",[434,984,985],{},"Font.createFont",". Si ocurre algún error al cargar la fuente, lanzamos una excepción.",[418,988,990],{"id":989},"barra-de-progreso-para-la-salud-del-personaje","Barra de progreso para la salud del personaje",[423,992,993,994,437],{},"Otra funcionalidad que queremos añadir es una barra de progreso para mostrar la salud del personaje. Para esto, utilizaremos la clase ",[434,995,996],{},"JProgressBar",[439,998,1001],{"className":441,"code":999,"filename":1000,"language":444,"meta":445,"style":445},"package app.game.rpg.ui.components.bars;\n\nimport app.game.rpg.ui.components.borders.RPGRoundedBorder;\nimport app.game.rpg.ui.components.delegates.RPGProgressBarUI;\n\nimport javax.swing.*;\nimport java.awt.*;\n\npublic abstract class RPGProgressBar extends JProgressBar {\n\n    protected Color startColor;\n    protected Color endColor;\n    protected int radius=5;\n\n    public RPGProgressBar(int min, int max) {\n        super(min, max);\n\n        setOpaque(false);\n        setBorder(new RPGRoundedBorder(3, radius));\n        setStringPainted(true);\n        setFont(new Font(\"Arial\", Font.BOLD, 18));\n        setForeground(Color.white);\n\n        \u002F\u002F 🔥 Asignamos UI personalizada\n        setUI(new RPGProgressBarUI());\n    }\n\n    public void setBarColor(Color start, Color end) {\n        this.startColor = start;\n        this.endColor = end;\n        repaint();\n    }\n\n    public Color getStartColor() {\n        return startColor;\n    }\n\n    public Color getEndColor() {\n        return endColor;\n    }\n\n    public int getRadius() {\n        return radius;\n    }\n}\n","app\u002Fgame\u002Frpg\u002Fui\u002Fcomponents\u002Fbars\u002FRPGProgressBar.java",[434,1002,1003,1010,1014,1020,1027,1031,1041,1051,1055,1074,1078,1086,1093,1109,1113,1136,1143,1147,1157,1174,1186,1211,1219,1223,1229,1243,1247,1251,1274,1287,1299,1306,1310,1314,1326,1334,1338,1342,1353,1360,1364,1369,1381,1389,1394],{"__ignoreMap":445},[449,1004,1005,1007],{"class":451,"line":452},[449,1006,456],{"class":455},[449,1008,1009],{"class":459}," app.game.rpg.ui.components.bars;\n",[449,1011,1012],{"class":451,"line":463},[449,1013,467],{"emptyLinePlaceholder":466},[449,1015,1016,1018],{"class":451,"line":470},[449,1017,473],{"class":455},[449,1019,476],{"class":459},[449,1021,1022,1024],{"class":451,"line":479},[449,1023,473],{"class":455},[449,1025,1026],{"class":459}," app.game.rpg.ui.components.delegates.RPGProgressBarUI;\n",[449,1028,1029],{"class":451,"line":487},[449,1030,467],{"emptyLinePlaceholder":466},[449,1032,1033,1035,1037,1039],{"class":451,"line":492},[449,1034,473],{"class":455},[449,1036,497],{"class":459},[449,1038,501],{"class":500},[449,1040,504],{"class":459},[449,1042,1043,1045,1047,1049],{"class":451,"line":507},[449,1044,473],{"class":455},[449,1046,528],{"class":459},[449,1048,501],{"class":500},[449,1050,504],{"class":459},[449,1052,1053],{"class":451,"line":515},[449,1054,467],{"emptyLinePlaceholder":466},[449,1056,1057,1059,1062,1064,1067,1069,1072],{"class":451,"line":523},[449,1058,559],{"class":455},[449,1060,1061],{"class":455}," abstract",[449,1063,562],{"class":455},[449,1065,1066],{"class":565}," RPGProgressBar",[449,1068,569],{"class":455},[449,1070,1071],{"class":565}," JProgressBar",[449,1073,575],{"class":459},[449,1075,1076],{"class":451,"line":535},[449,1077,467],{"emptyLinePlaceholder":466},[449,1079,1080,1083],{"class":451,"line":543},[449,1081,1082],{"class":455},"    protected",[449,1084,1085],{"class":459}," Color startColor;\n",[449,1087,1088,1090],{"class":451,"line":551},[449,1089,1082],{"class":455},[449,1091,1092],{"class":459}," Color endColor;\n",[449,1094,1095,1097,1100,1103,1105,1107],{"class":451,"line":556},[449,1096,1082],{"class":455},[449,1098,1099],{"class":455}," int",[449,1101,1102],{"class":459}," radius",[449,1104,628],{"class":455},[449,1106,771],{"class":500},[449,1108,504],{"class":459},[449,1110,1111],{"class":451,"line":578},[449,1112,467],{"emptyLinePlaceholder":466},[449,1114,1115,1117,1119,1121,1124,1127,1129,1131,1134],{"class":451,"line":583},[449,1116,586],{"class":455},[449,1118,1066],{"class":565},[449,1120,643],{"class":459},[449,1122,1123],{"class":455},"int",[449,1125,1126],{"class":688}," min",[449,1128,751],{"class":459},[449,1130,1123],{"class":455},[449,1132,1133],{"class":688}," max",[449,1135,692],{"class":459},[449,1137,1138,1140],{"class":451,"line":594},[449,1139,602],{"class":500},[449,1141,1142],{"class":459},"(min, max);\n",[449,1144,1145],{"class":451,"line":599},[449,1146,467],{"emptyLinePlaceholder":466},[449,1148,1149,1151,1153,1155],{"class":451,"line":608},[449,1150,792],{"class":565},[449,1152,643],{"class":459},[449,1154,797],{"class":500},[449,1156,673],{"class":459},[449,1158,1159,1161,1163,1165,1167,1169,1171],{"class":451,"line":614},[449,1160,728],{"class":565},[449,1162,643],{"class":459},[449,1164,733],{"class":455},[449,1166,743],{"class":565},[449,1168,643],{"class":459},[449,1170,748],{"class":500},[449,1172,1173],{"class":459},", radius));\n",[449,1175,1176,1179,1181,1184],{"class":451,"line":622},[449,1177,1178],{"class":565},"        setStringPainted",[449,1180,643],{"class":459},[449,1182,1183],{"class":500},"true",[449,1185,673],{"class":459},[449,1187,1188,1190,1192,1194,1197,1199,1202,1205,1208],{"class":451,"line":676},[449,1189,719],{"class":565},[449,1191,643],{"class":459},[449,1193,733],{"class":455},[449,1195,1196],{"class":565}," Font",[449,1198,643],{"class":459},[449,1200,1201],{"class":657},"\"Arial\"",[449,1203,1204],{"class":459},", Font.BOLD, ",[449,1206,1207],{"class":500},"18",[449,1209,1210],{"class":459},"));\n",[449,1212,1213,1216],{"class":451,"line":695},[449,1214,1215],{"class":565},"        setForeground",[449,1217,1218],{"class":459},"(Color.white);\n",[449,1220,1221],{"class":451,"line":710},[449,1222,467],{"emptyLinePlaceholder":466},[449,1224,1225],{"class":451,"line":716},[449,1226,1228],{"class":1227},"sAwPA","        \u002F\u002F 🔥 Asignamos UI personalizada\n",[449,1230,1231,1234,1236,1238,1241],{"class":451,"line":725},[449,1232,1233],{"class":565},"        setUI",[449,1235,643],{"class":459},[449,1237,733],{"class":455},[449,1239,1240],{"class":565}," RPGProgressBarUI",[449,1242,882],{"class":459},[449,1244,1245],{"class":451,"line":760},[449,1246,805],{"class":459},[449,1248,1249],{"class":451,"line":789},[449,1250,467],{"emptyLinePlaceholder":466},[449,1252,1253,1255,1257,1260,1263,1266,1269,1272],{"class":451,"line":802},[449,1254,586],{"class":455},[449,1256,827],{"class":455},[449,1258,1259],{"class":565}," setBarColor",[449,1261,1262],{"class":459},"(Color ",[449,1264,1265],{"class":688},"start",[449,1267,1268],{"class":459},", Color ",[449,1270,1271],{"class":688},"end",[449,1273,692],{"class":459},[449,1275,1276,1279,1282,1284],{"class":451,"line":808},[449,1277,1278],{"class":500},"        this",[449,1280,1281],{"class":459},".startColor ",[449,1283,628],{"class":455},[449,1285,1286],{"class":459}," start;\n",[449,1288,1289,1291,1294,1296],{"class":451,"line":813},[449,1290,1278],{"class":500},[449,1292,1293],{"class":459},".endColor ",[449,1295,628],{"class":455},[449,1297,1298],{"class":459}," end;\n",[449,1300,1301,1304],{"class":451,"line":822},[449,1302,1303],{"class":565},"        repaint",[449,1305,605],{"class":459},[449,1307,1308],{"class":451,"line":841},[449,1309,805],{"class":459},[449,1311,1312],{"class":451,"line":846},[449,1313,467],{"emptyLinePlaceholder":466},[449,1315,1316,1318,1321,1324],{"class":451,"line":857},[449,1317,586],{"class":455},[449,1319,1320],{"class":459}," Color ",[449,1322,1323],{"class":565},"getStartColor",[449,1325,591],{"class":459},[449,1327,1328,1331],{"class":451,"line":869},[449,1329,1330],{"class":455},"        return",[449,1332,1333],{"class":459}," startColor;\n",[449,1335,1336],{"class":451,"line":885},[449,1337,805],{"class":459},[449,1339,1340],{"class":451,"line":923},[449,1341,467],{"emptyLinePlaceholder":466},[449,1343,1344,1346,1348,1351],{"class":451,"line":937},[449,1345,586],{"class":455},[449,1347,1320],{"class":459},[449,1349,1350],{"class":565},"getEndColor",[449,1352,591],{"class":459},[449,1354,1355,1357],{"class":451,"line":947},[449,1356,1330],{"class":455},[449,1358,1359],{"class":459}," endColor;\n",[449,1361,1362],{"class":451,"line":952},[449,1363,805],{"class":459},[449,1365,1367],{"class":451,"line":1366},41,[449,1368,467],{"emptyLinePlaceholder":466},[449,1370,1372,1374,1376,1379],{"class":451,"line":1371},42,[449,1373,586],{"class":455},[449,1375,1099],{"class":455},[449,1377,1378],{"class":565}," getRadius",[449,1380,591],{"class":459},[449,1382,1384,1386],{"class":451,"line":1383},43,[449,1385,1330],{"class":455},[449,1387,1388],{"class":459}," radius;\n",[449,1390,1392],{"class":451,"line":1391},44,[449,1393,805],{"class":459},[449,1395,1397],{"class":451,"line":1396},45,[449,1398,955],{"class":459},[423,1400,1401,1402,1405,1406,1408,1409,1412],{},"En esta clase ",[434,1403,1404],{},"RPGProgressBar",", extendemos de ",[434,1407,996],{}," y añadimos propiedades para los colores de inicio y fin de la barra, así como un radio para las esquinas redondeadas. En el constructor, configuramos la apariencia de la barra, incluyendo un borde redondeado y una fuente personalizada para el texto que muestra el porcentaje. Además, asignamos una UI personalizada utilizando la clase ",[434,1410,1411],{},"RPGProgressBarUI",", que se encargará de dibujar la barra con un degradado de colores que veremos a continuación.",[439,1414,1417],{"className":441,"code":1415,"filename":1416,"language":444,"meta":445,"style":445},"package app.game.rpg.ui.components.delegates;\n\nimport app.game.rpg.ui.components.bars.RPGProgressBar;\n\nimport javax.swing.*;\nimport javax.swing.border.Border;\nimport javax.swing.plaf.basic.BasicProgressBarUI;\nimport java.awt.*;\n\npublic class RPGProgressBarUI extends BasicProgressBarUI {\n\n    @Override\n    protected void paintDeterminate(Graphics g, JComponent c) {\n\n        Graphics2D g2 = (Graphics2D) g.create();\n\n        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,\n                RenderingHints.VALUE_ANTIALIAS_ON);\n        g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,\n                RenderingHints.VALUE_TEXT_ANTIALIAS_ON);\n\n        RPGProgressBar bar = (RPGProgressBar) c;\n\n        int width = bar.getWidth();\n        int height = bar.getHeight();\n\n        int value = bar.getValue();\n        int max = bar.getMaximum();\n\n        int progressWidth = (int) (width * (value \u002F (double) max));\n\n        int radius = bar.getRadius();\n\n        \u002F\u002F 🔲 Fondo\n        g2.setColor(new Color(30, 30, 30));\n        g2.fillRoundRect(0, 0, width, height, radius, radius);\n\n        \u002F\u002F ❤️ Progreso con degradado\n        Point startPoint = new Point(0, 0);\n        Point endPoint = new Point(width, 0);\n        float[] fractions = {0f, 0.45f, 1f};\n        Color[] colors = {bar.getStartColor(), bar.getEndColor(), bar.getStartColor()};\n        LinearGradientPaint gradient = new LinearGradientPaint(startPoint, endPoint, fractions, colors);\n        g2.setPaint(gradient);\n        g2.fillRoundRect(0, 0, progressWidth, height, radius, radius);\n\n        \u002F\u002F 🟡 Borde reutilizable\n        Border border = bar.getBorder();\n        if (border != null) {\n            border.paintBorder(bar, g2, 0, 0, width, height);\n        }\n\n        \u002F\u002F 🔤 Texto centrado\n        String text = \"%s\u002F%s\".formatted(value, max);\n        FontMetrics fm = g2.getFontMetrics();\n        int textWidth = fm.stringWidth(text);\n        int textHeight = fm.getAscent();\n        int textX = (width - textWidth) \u002F 2;\n        int textY = (height + textHeight) \u002F 2 - 2;\n        g2.setFont(bar.getFont());\n        g2.setColor(bar.getForeground());\n        g2.drawString(text, textX, textY);\n\n        g2.dispose();\n    }\n}\n","app\u002Fgame\u002Frpg\u002Fui\u002Fcomponents\u002Fdelegates\u002FRPGProgressBarUI.java",[434,1418,1419,1426,1430,1437,1441,1451,1458,1465,1475,1479,1494,1498,1504,1525,1529,1544,1548,1558,1563,1572,1577,1581,1591,1595,1612,1627,1631,1647,1663,1667,1700,1704,1720,1724,1729,1757,1774,1778,1783,1805,1823,1852,1879,1894,1904,1921,1926,1932,1947,1964,1985,1990,1995,2001,2020,2036,2055,2072,2098,2128,2144,2158,2169,2174,2183,2188],{"__ignoreMap":445},[449,1420,1421,1423],{"class":451,"line":452},[449,1422,456],{"class":455},[449,1424,1425],{"class":459}," app.game.rpg.ui.components.delegates;\n",[449,1427,1428],{"class":451,"line":463},[449,1429,467],{"emptyLinePlaceholder":466},[449,1431,1432,1434],{"class":451,"line":470},[449,1433,473],{"class":455},[449,1435,1436],{"class":459}," app.game.rpg.ui.components.bars.RPGProgressBar;\n",[449,1438,1439],{"class":451,"line":479},[449,1440,467],{"emptyLinePlaceholder":466},[449,1442,1443,1445,1447,1449],{"class":451,"line":487},[449,1444,473],{"class":455},[449,1446,497],{"class":459},[449,1448,501],{"class":500},[449,1450,504],{"class":459},[449,1452,1453,1455],{"class":451,"line":492},[449,1454,473],{"class":455},[449,1456,1457],{"class":459}," javax.swing.border.Border;\n",[449,1459,1460,1462],{"class":451,"line":507},[449,1461,473],{"class":455},[449,1463,1464],{"class":459}," javax.swing.plaf.basic.BasicProgressBarUI;\n",[449,1466,1467,1469,1471,1473],{"class":451,"line":515},[449,1468,473],{"class":455},[449,1470,528],{"class":459},[449,1472,501],{"class":500},[449,1474,504],{"class":459},[449,1476,1477],{"class":451,"line":523},[449,1478,467],{"emptyLinePlaceholder":466},[449,1480,1481,1483,1485,1487,1489,1492],{"class":451,"line":535},[449,1482,559],{"class":455},[449,1484,562],{"class":455},[449,1486,1240],{"class":565},[449,1488,569],{"class":455},[449,1490,1491],{"class":565}," BasicProgressBarUI",[449,1493,575],{"class":459},[449,1495,1496],{"class":451,"line":543},[449,1497,467],{"emptyLinePlaceholder":466},[449,1499,1500,1502],{"class":451,"line":551},[449,1501,816],{"class":459},[449,1503,819],{"class":455},[449,1505,1506,1508,1510,1513,1515,1517,1520,1523],{"class":451,"line":556},[449,1507,1082],{"class":455},[449,1509,827],{"class":455},[449,1511,1512],{"class":565}," paintDeterminate",[449,1514,833],{"class":459},[449,1516,836],{"class":688},[449,1518,1519],{"class":459},", JComponent ",[449,1521,1522],{"class":688},"c",[449,1524,692],{"class":459},[449,1526,1527],{"class":451,"line":578},[449,1528,467],{"emptyLinePlaceholder":466},[449,1530,1531,1534,1536,1539,1542],{"class":451,"line":583},[449,1532,1533],{"class":459},"        Graphics2D g2 ",[449,1535,628],{"class":455},[449,1537,1538],{"class":459}," (Graphics2D) g.",[449,1540,1541],{"class":565},"create",[449,1543,605],{"class":459},[449,1545,1546],{"class":451,"line":594},[449,1547,467],{"emptyLinePlaceholder":466},[449,1549,1550,1553,1555],{"class":451,"line":599},[449,1551,1552],{"class":459},"        g2.",[449,1554,863],{"class":565},[449,1556,1557],{"class":459},"(RenderingHints.KEY_ANTIALIASING,\n",[449,1559,1560],{"class":451,"line":608},[449,1561,1562],{"class":459},"                RenderingHints.VALUE_ANTIALIAS_ON);\n",[449,1564,1565,1567,1569],{"class":451,"line":614},[449,1566,1552],{"class":459},[449,1568,863],{"class":565},[449,1570,1571],{"class":459},"(RenderingHints.KEY_TEXT_ANTIALIASING,\n",[449,1573,1574],{"class":451,"line":622},[449,1575,1576],{"class":459},"                RenderingHints.VALUE_TEXT_ANTIALIAS_ON);\n",[449,1578,1579],{"class":451,"line":676},[449,1580,467],{"emptyLinePlaceholder":466},[449,1582,1583,1586,1588],{"class":451,"line":695},[449,1584,1585],{"class":459},"        RPGProgressBar bar ",[449,1587,628],{"class":455},[449,1589,1590],{"class":459}," (RPGProgressBar) c;\n",[449,1592,1593],{"class":451,"line":710},[449,1594,467],{"emptyLinePlaceholder":466},[449,1596,1597,1600,1603,1605,1608,1610],{"class":451,"line":716},[449,1598,1599],{"class":455},"        int",[449,1601,1602],{"class":459}," width ",[449,1604,628],{"class":455},[449,1606,1607],{"class":459}," bar.",[449,1609,904],{"class":565},[449,1611,605],{"class":459},[449,1613,1614,1616,1619,1621,1623,1625],{"class":451,"line":725},[449,1615,1599],{"class":455},[449,1617,1618],{"class":459}," height ",[449,1620,628],{"class":455},[449,1622,1607],{"class":459},[449,1624,910],{"class":565},[449,1626,605],{"class":459},[449,1628,1629],{"class":451,"line":760},[449,1630,467],{"emptyLinePlaceholder":466},[449,1632,1633,1635,1638,1640,1642,1645],{"class":451,"line":789},[449,1634,1599],{"class":455},[449,1636,1637],{"class":459}," value ",[449,1639,628],{"class":455},[449,1641,1607],{"class":459},[449,1643,1644],{"class":565},"getValue",[449,1646,605],{"class":459},[449,1648,1649,1651,1654,1656,1658,1661],{"class":451,"line":802},[449,1650,1599],{"class":455},[449,1652,1653],{"class":459}," max ",[449,1655,628],{"class":455},[449,1657,1607],{"class":459},[449,1659,1660],{"class":565},"getMaximum",[449,1662,605],{"class":459},[449,1664,1665],{"class":451,"line":808},[449,1666,467],{"emptyLinePlaceholder":466},[449,1668,1669,1671,1674,1676,1679,1681,1684,1686,1689,1692,1694,1697],{"class":451,"line":813},[449,1670,1599],{"class":455},[449,1672,1673],{"class":459}," progressWidth ",[449,1675,628],{"class":455},[449,1677,1678],{"class":459}," (",[449,1680,1123],{"class":455},[449,1682,1683],{"class":459},") (width ",[449,1685,501],{"class":455},[449,1687,1688],{"class":459}," (value ",[449,1690,1691],{"class":455},"\u002F",[449,1693,1678],{"class":459},[449,1695,1696],{"class":455},"double",[449,1698,1699],{"class":459},") max));\n",[449,1701,1702],{"class":451,"line":822},[449,1703,467],{"emptyLinePlaceholder":466},[449,1705,1706,1708,1711,1713,1715,1718],{"class":451,"line":841},[449,1707,1599],{"class":455},[449,1709,1710],{"class":459}," radius ",[449,1712,628],{"class":455},[449,1714,1607],{"class":459},[449,1716,1717],{"class":565},"getRadius",[449,1719,605],{"class":459},[449,1721,1722],{"class":451,"line":846},[449,1723,467],{"emptyLinePlaceholder":466},[449,1725,1726],{"class":451,"line":857},[449,1727,1728],{"class":1227},"        \u002F\u002F 🔲 Fondo\n",[449,1730,1731,1733,1735,1737,1739,1742,1744,1747,1749,1751,1753,1755],{"class":451,"line":869},[449,1732,1552],{"class":459},[449,1734,874],{"class":565},[449,1736,643],{"class":459},[449,1738,733],{"class":455},[449,1740,1741],{"class":565}," Color",[449,1743,643],{"class":459},[449,1745,1746],{"class":500},"30",[449,1748,751],{"class":459},[449,1750,1746],{"class":500},[449,1752,751],{"class":459},[449,1754,1746],{"class":500},[449,1756,1210],{"class":459},[449,1758,1759,1761,1763,1765,1767,1769,1771],{"class":451,"line":885},[449,1760,1552],{"class":459},[449,1762,890],{"class":565},[449,1764,643],{"class":459},[449,1766,895],{"class":500},[449,1768,751],{"class":459},[449,1770,895],{"class":500},[449,1772,1773],{"class":459},", width, height, radius, radius);\n",[449,1775,1776],{"class":451,"line":923},[449,1777,467],{"emptyLinePlaceholder":466},[449,1779,1780],{"class":451,"line":937},[449,1781,1782],{"class":1227},"        \u002F\u002F ❤️ Progreso con degradado\n",[449,1784,1785,1788,1790,1792,1795,1797,1799,1801,1803],{"class":451,"line":947},[449,1786,1787],{"class":459},"        Point startPoint ",[449,1789,628],{"class":455},[449,1791,701],{"class":455},[449,1793,1794],{"class":565}," Point",[449,1796,643],{"class":459},[449,1798,895],{"class":500},[449,1800,751],{"class":459},[449,1802,895],{"class":500},[449,1804,673],{"class":459},[449,1806,1807,1810,1812,1814,1816,1819,1821],{"class":451,"line":952},[449,1808,1809],{"class":459},"        Point endPoint ",[449,1811,628],{"class":455},[449,1813,701],{"class":455},[449,1815,1794],{"class":565},[449,1817,1818],{"class":459},"(width, ",[449,1820,895],{"class":500},[449,1822,673],{"class":459},[449,1824,1825,1828,1831,1833,1836,1839,1841,1844,1846,1849],{"class":451,"line":1366},[449,1826,1827],{"class":455},"        float",[449,1829,1830],{"class":459},"[] fractions ",[449,1832,628],{"class":455},[449,1834,1835],{"class":459}," {",[449,1837,1838],{"class":500},"0f",[449,1840,751],{"class":459},[449,1842,1843],{"class":500},"0.45f",[449,1845,751],{"class":459},[449,1847,1848],{"class":500},"1f",[449,1850,1851],{"class":459},"};\n",[449,1853,1854,1857,1860,1862,1865,1867,1870,1872,1874,1876],{"class":451,"line":1371},[449,1855,1856],{"class":455},"        Color",[449,1858,1859],{"class":459},"[] colors ",[449,1861,628],{"class":455},[449,1863,1864],{"class":459}," {bar.",[449,1866,1323],{"class":565},[449,1868,1869],{"class":459},"(), bar.",[449,1871,1350],{"class":565},[449,1873,1869],{"class":459},[449,1875,1323],{"class":565},[449,1877,1878],{"class":459},"()};\n",[449,1880,1881,1884,1886,1888,1891],{"class":451,"line":1383},[449,1882,1883],{"class":459},"        LinearGradientPaint gradient ",[449,1885,628],{"class":455},[449,1887,701],{"class":455},[449,1889,1890],{"class":565}," LinearGradientPaint",[449,1892,1893],{"class":459},"(startPoint, endPoint, fractions, colors);\n",[449,1895,1896,1898,1901],{"class":451,"line":1391},[449,1897,1552],{"class":459},[449,1899,1900],{"class":565},"setPaint",[449,1902,1903],{"class":459},"(gradient);\n",[449,1905,1906,1908,1910,1912,1914,1916,1918],{"class":451,"line":1396},[449,1907,1552],{"class":459},[449,1909,890],{"class":565},[449,1911,643],{"class":459},[449,1913,895],{"class":500},[449,1915,751],{"class":459},[449,1917,895],{"class":500},[449,1919,1920],{"class":459},", progressWidth, height, radius, radius);\n",[449,1922,1924],{"class":451,"line":1923},46,[449,1925,467],{"emptyLinePlaceholder":466},[449,1927,1929],{"class":451,"line":1928},47,[449,1930,1931],{"class":1227},"        \u002F\u002F 🟡 Borde reutilizable\n",[449,1933,1935,1938,1940,1942,1945],{"class":451,"line":1934},48,[449,1936,1937],{"class":459},"        Border border ",[449,1939,628],{"class":455},[449,1941,1607],{"class":459},[449,1943,1944],{"class":565},"getBorder",[449,1946,605],{"class":459},[449,1948,1950,1953,1956,1959,1962],{"class":451,"line":1949},49,[449,1951,1952],{"class":455},"        if",[449,1954,1955],{"class":459}," (border ",[449,1957,1958],{"class":455},"!=",[449,1960,1961],{"class":500}," null",[449,1963,692],{"class":459},[449,1965,1967,1970,1973,1976,1978,1980,1982],{"class":451,"line":1966},50,[449,1968,1969],{"class":459},"            border.",[449,1971,1972],{"class":565},"paintBorder",[449,1974,1975],{"class":459},"(bar, g2, ",[449,1977,895],{"class":500},[449,1979,751],{"class":459},[449,1981,895],{"class":500},[449,1983,1984],{"class":459},", width, height);\n",[449,1986,1988],{"class":451,"line":1987},51,[449,1989,713],{"class":459},[449,1991,1993],{"class":451,"line":1992},52,[449,1994,467],{"emptyLinePlaceholder":466},[449,1996,1998],{"class":451,"line":1997},53,[449,1999,2000],{"class":1227},"        \u002F\u002F 🔤 Texto centrado\n",[449,2002,2004,2007,2009,2012,2014,2017],{"class":451,"line":2003},54,[449,2005,2006],{"class":459},"        String text ",[449,2008,628],{"class":455},[449,2010,2011],{"class":657}," \"%s\u002F%s\"",[449,2013,928],{"class":459},[449,2015,2016],{"class":565},"formatted",[449,2018,2019],{"class":459},"(value, max);\n",[449,2021,2023,2026,2028,2031,2034],{"class":451,"line":2022},55,[449,2024,2025],{"class":459},"        FontMetrics fm ",[449,2027,628],{"class":455},[449,2029,2030],{"class":459}," g2.",[449,2032,2033],{"class":565},"getFontMetrics",[449,2035,605],{"class":459},[449,2037,2039,2041,2044,2046,2049,2052],{"class":451,"line":2038},56,[449,2040,1599],{"class":455},[449,2042,2043],{"class":459}," textWidth ",[449,2045,628],{"class":455},[449,2047,2048],{"class":459}," fm.",[449,2050,2051],{"class":565},"stringWidth",[449,2053,2054],{"class":459},"(text);\n",[449,2056,2058,2060,2063,2065,2067,2070],{"class":451,"line":2057},57,[449,2059,1599],{"class":455},[449,2061,2062],{"class":459}," textHeight ",[449,2064,628],{"class":455},[449,2066,2048],{"class":459},[449,2068,2069],{"class":565},"getAscent",[449,2071,605],{"class":459},[449,2073,2075,2077,2080,2082,2085,2088,2091,2093,2096],{"class":451,"line":2074},58,[449,2076,1599],{"class":455},[449,2078,2079],{"class":459}," textX ",[449,2081,628],{"class":455},[449,2083,2084],{"class":459}," (width ",[449,2086,2087],{"class":455},"-",[449,2089,2090],{"class":459}," textWidth) ",[449,2092,1691],{"class":455},[449,2094,2095],{"class":500}," 2",[449,2097,504],{"class":459},[449,2099,2101,2103,2106,2108,2111,2114,2117,2119,2121,2124,2126],{"class":451,"line":2100},59,[449,2102,1599],{"class":455},[449,2104,2105],{"class":459}," textY ",[449,2107,628],{"class":455},[449,2109,2110],{"class":459}," (height ",[449,2112,2113],{"class":455},"+",[449,2115,2116],{"class":459}," textHeight) ",[449,2118,1691],{"class":455},[449,2120,2095],{"class":500},[449,2122,2123],{"class":455}," -",[449,2125,2095],{"class":500},[449,2127,504],{"class":459},[449,2129,2131,2133,2136,2139,2142],{"class":451,"line":2130},60,[449,2132,1552],{"class":459},[449,2134,2135],{"class":565},"setFont",[449,2137,2138],{"class":459},"(bar.",[449,2140,2141],{"class":565},"getFont",[449,2143,882],{"class":459},[449,2145,2147,2149,2151,2153,2156],{"class":451,"line":2146},61,[449,2148,1552],{"class":459},[449,2150,874],{"class":565},[449,2152,2138],{"class":459},[449,2154,2155],{"class":565},"getForeground",[449,2157,882],{"class":459},[449,2159,2161,2163,2166],{"class":451,"line":2160},62,[449,2162,1552],{"class":459},[449,2164,2165],{"class":565},"drawString",[449,2167,2168],{"class":459},"(text, textX, textY);\n",[449,2170,2172],{"class":451,"line":2171},63,[449,2173,467],{"emptyLinePlaceholder":466},[449,2175,2177,2179,2181],{"class":451,"line":2176},64,[449,2178,1552],{"class":459},[449,2180,942],{"class":565},[449,2182,605],{"class":459},[449,2184,2186],{"class":451,"line":2185},65,[449,2187,805],{"class":459},[449,2189,2191],{"class":451,"line":2190},66,[449,2192,955],{"class":459},[423,2194,2195,2196,1405,2198,2201,2202,2205],{},"En la clase ",[434,2197,1411],{},[434,2199,2200],{},"BasicProgressBarUI"," y sobrescribimos el método ",[434,2203,2204],{},"paintDeterminate"," para personalizar la forma en que se dibuja la barra de progreso. Utilizamos un degradado de colores para el progreso y dibujamos un fondo oscuro para el resto de la barra. Además, centramos el texto que muestra el valor actual y el máximo.",[2207,2208,2209,2210,2213,2214,2217,2218,2220],"note",{},"Recuerda que puedes hacer uso de cualquier tipo de degradado, no solo lineales. Experimenta con ",[434,2211,2212],{},"RadialGradientPaint"," o ",[434,2215,2216],{},"ConicalGradientPaint"," para obtener efectos más interesantes y adapta la clase ",[434,2219,1404],{}," según tus necesidades para dicho degradado.",[2222,2223,2225],"h3",{"id":2224},"creando-las-barras-de-salud-y-maná","Creando las barras de salud y maná",[423,2227,2228,2229,2231],{},"Ahora que tenemos nuestra clase ",[434,2230,1404],{},", podemos crear instancias específicas para la salud y el maná de nuestro personaje. Aquí te muestro cómo hacerlo:",[439,2233,2236],{"className":441,"code":2234,"filename":2235,"language":444,"meta":445,"style":445},"package app.game.rpg.ui.components.bars;\n\nimport java.awt.*;\n\npublic class RPGLifeBar extends RPGProgressBar{\n\n    public RPGLifeBar() {\n        super(75, 125);\n        this.startColor = new Color(255, 0, 0);\n        this.endColor = new Color(145, 1, 1);\n    }\n}\n","app\u002Fgame\u002Frpg\u002Fui\u002Fcomponents\u002Fbars\u002FRPGLifeBar.java",[434,2237,2238,2244,2248,2258,2262,2278,2282,2290,2306,2333,2361,2365],{"__ignoreMap":445},[449,2239,2240,2242],{"class":451,"line":452},[449,2241,456],{"class":455},[449,2243,1009],{"class":459},[449,2245,2246],{"class":451,"line":463},[449,2247,467],{"emptyLinePlaceholder":466},[449,2249,2250,2252,2254,2256],{"class":451,"line":470},[449,2251,473],{"class":455},[449,2253,528],{"class":459},[449,2255,501],{"class":500},[449,2257,504],{"class":459},[449,2259,2260],{"class":451,"line":479},[449,2261,467],{"emptyLinePlaceholder":466},[449,2263,2264,2266,2268,2271,2273,2275],{"class":451,"line":487},[449,2265,559],{"class":455},[449,2267,562],{"class":455},[449,2269,2270],{"class":565}," RPGLifeBar",[449,2272,569],{"class":455},[449,2274,1066],{"class":565},[449,2276,2277],{"class":459},"{\n",[449,2279,2280],{"class":451,"line":492},[449,2281,467],{"emptyLinePlaceholder":466},[449,2283,2284,2286,2288],{"class":451,"line":507},[449,2285,586],{"class":455},[449,2287,2270],{"class":565},[449,2289,591],{"class":459},[449,2291,2292,2294,2296,2299,2301,2304],{"class":451,"line":515},[449,2293,602],{"class":500},[449,2295,643],{"class":459},[449,2297,2298],{"class":500},"75",[449,2300,751],{"class":459},[449,2302,2303],{"class":500},"125",[449,2305,673],{"class":459},[449,2307,2308,2310,2312,2314,2316,2318,2320,2323,2325,2327,2329,2331],{"class":451,"line":523},[449,2309,1278],{"class":500},[449,2311,1281],{"class":459},[449,2313,628],{"class":455},[449,2315,701],{"class":455},[449,2317,1741],{"class":565},[449,2319,643],{"class":459},[449,2321,2322],{"class":500},"255",[449,2324,751],{"class":459},[449,2326,895],{"class":500},[449,2328,751],{"class":459},[449,2330,895],{"class":500},[449,2332,673],{"class":459},[449,2334,2335,2337,2339,2341,2343,2345,2347,2350,2352,2355,2357,2359],{"class":451,"line":535},[449,2336,1278],{"class":500},[449,2338,1293],{"class":459},[449,2340,628],{"class":455},[449,2342,701],{"class":455},[449,2344,1741],{"class":565},[449,2346,643],{"class":459},[449,2348,2349],{"class":500},"145",[449,2351,751],{"class":459},[449,2353,2354],{"class":500},"1",[449,2356,751],{"class":459},[449,2358,2354],{"class":500},[449,2360,673],{"class":459},[449,2362,2363],{"class":451,"line":543},[449,2364,805],{"class":459},[449,2366,2367],{"class":451,"line":551},[449,2368,955],{"class":459},[439,2370,2373],{"className":441,"code":2371,"filename":2372,"language":444,"meta":445,"style":445},"package app.game.rpg.ui.components.bars;\n\nimport java.awt.*;\n\npublic class RPGManaBar extends RPGProgressBar {\n\n    public RPGManaBar() {\n        super(25, 100);\n        setBarColor(new Color(0, 0, 255), new Color(1, 1, 145));\n    }\n}\n","app\u002Fgame\u002Frpg\u002Fui\u002Fcomponents\u002Fbars\u002FRPGManaBar.java",[434,2374,2375,2381,2385,2395,2399,2414,2418,2426,2442,2486,2490],{"__ignoreMap":445},[449,2376,2377,2379],{"class":451,"line":452},[449,2378,456],{"class":455},[449,2380,1009],{"class":459},[449,2382,2383],{"class":451,"line":463},[449,2384,467],{"emptyLinePlaceholder":466},[449,2386,2387,2389,2391,2393],{"class":451,"line":470},[449,2388,473],{"class":455},[449,2390,528],{"class":459},[449,2392,501],{"class":500},[449,2394,504],{"class":459},[449,2396,2397],{"class":451,"line":479},[449,2398,467],{"emptyLinePlaceholder":466},[449,2400,2401,2403,2405,2408,2410,2412],{"class":451,"line":487},[449,2402,559],{"class":455},[449,2404,562],{"class":455},[449,2406,2407],{"class":565}," RPGManaBar",[449,2409,569],{"class":455},[449,2411,1066],{"class":565},[449,2413,575],{"class":459},[449,2415,2416],{"class":451,"line":492},[449,2417,467],{"emptyLinePlaceholder":466},[449,2419,2420,2422,2424],{"class":451,"line":507},[449,2421,586],{"class":455},[449,2423,2407],{"class":565},[449,2425,591],{"class":459},[449,2427,2428,2430,2432,2435,2437,2440],{"class":451,"line":515},[449,2429,602],{"class":500},[449,2431,643],{"class":459},[449,2433,2434],{"class":500},"25",[449,2436,751],{"class":459},[449,2438,2439],{"class":500},"100",[449,2441,673],{"class":459},[449,2443,2444,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2468,2470,2472,2474,2476,2478,2480,2482,2484],{"class":451,"line":523},[449,2445,2446],{"class":565},"        setBarColor",[449,2448,643],{"class":459},[449,2450,733],{"class":455},[449,2452,1741],{"class":565},[449,2454,643],{"class":459},[449,2456,895],{"class":500},[449,2458,751],{"class":459},[449,2460,895],{"class":500},[449,2462,751],{"class":459},[449,2464,2322],{"class":500},[449,2466,2467],{"class":459},"), ",[449,2469,733],{"class":455},[449,2471,1741],{"class":565},[449,2473,643],{"class":459},[449,2475,2354],{"class":500},[449,2477,751],{"class":459},[449,2479,2354],{"class":500},[449,2481,751],{"class":459},[449,2483,2349],{"class":500},[449,2485,1210],{"class":459},[449,2487,2488],{"class":451,"line":535},[449,2489,805],{"class":459},[449,2491,2492],{"class":451,"line":543},[449,2493,955],{"class":459},[423,2495,2496,2497,2500,2501,1405,2504,2506],{},"En estas clases ",[434,2498,2499],{},"RPGLifeBar"," y ",[434,2502,2503],{},"RPGManaBar",[434,2505,1404],{}," y configuramos los colores específicos para cada barra. La barra de vida utiliza tonos rojos, mientras que la barra de maná utiliza tonos azules. Puedes ajustar los valores máximos y mínimos según las necesidades de tu juego y crear las barras que necesites para otros recursos como la experiencia, la energía, etc.",[418,2508,2510],{"id":2509},"integrando-los-componentes-en-el-panel-de-personaje","Integrando los componentes en el panel de personaje",[423,2512,2513],{},"Finalmente, podemos integrar estos componentes en el panel de personaje para mostrar la información relevante del personaje. Aquí te muestro un ejemplo de cómo hacerlo:",[439,2515,2518],{"className":441,"code":2516,"filename":2517,"language":444,"meta":445,"style":445},"package app.game.rpg.ui.panels;\n\nimport app.game.rpg.ui.components.bars.RPGLifeBar;\nimport app.game.rpg.ui.components.bars.RPGManaBar;\nimport app.game.rpg.ui.components.textfields.RPGInputText;\nimport javax.swing.*;\nimport java.awt.*;\n\npublic class RPGCharacterPanel extends JPanel {\n\n    private RPGLifeBar lifeBar;\n    private RPGManaBar manaBar;\n    private RPGInputText nameField;\n\n    public RPGCharacterPanel() {\n        setLayout(new BorderLayout());\n        setBackground(new Color(20, 20, 20));\n\n        \u002F\u002F 🧑‍🦲 Campo de texto para el nombre del personaje\n        nameField = new RPGInputText();\n        nameField.setPreferredSize(new Dimension(200, 40));\n        add(nameField, BorderLayout.NORTH);\n\n        \u002F\u002F ❤️ Barra de vida\n        lifeBar = new RPGLifeBar();\n        lifeBar.setPreferredSize(new Dimension(300, 30));\n        add(lifeBar, BorderLayout.CENTER);\n\n        \u002F\u002F 🔵 Barra de maná\n        manaBar = new RPGManaBar();\n        manaBar.setPreferredSize(new Dimension(300, 30));\n        add(manaBar, BorderLayout.SOUTH);\n    }\n\n    public void updateCharacterStats(int health, int mana) {\n        lifeBar.setValue(health);\n        manaBar.setValue(mana);\n    }\n}\n","app\u002Fgame\u002Frpg\u002Fui\u002Fpanels\u002FRPGCharacterPanel.java",[434,2519,2520,2527,2531,2538,2545,2552,2562,2572,2576,2592,2596,2604,2611,2618,2622,2630,2644,2670,2674,2679,2692,2719,2727,2731,2736,2749,2773,2780,2784,2789,2802,2825,2832,2836,2840,2865,2875,2884,2888],{"__ignoreMap":445},[449,2521,2522,2524],{"class":451,"line":452},[449,2523,456],{"class":455},[449,2525,2526],{"class":459}," app.game.rpg.ui.panels;\n",[449,2528,2529],{"class":451,"line":463},[449,2530,467],{"emptyLinePlaceholder":466},[449,2532,2533,2535],{"class":451,"line":470},[449,2534,473],{"class":455},[449,2536,2537],{"class":459}," app.game.rpg.ui.components.bars.RPGLifeBar;\n",[449,2539,2540,2542],{"class":451,"line":479},[449,2541,473],{"class":455},[449,2543,2544],{"class":459}," app.game.rpg.ui.components.bars.RPGManaBar;\n",[449,2546,2547,2549],{"class":451,"line":487},[449,2548,473],{"class":455},[449,2550,2551],{"class":459}," app.game.rpg.ui.components.textfields.RPGInputText;\n",[449,2553,2554,2556,2558,2560],{"class":451,"line":492},[449,2555,473],{"class":455},[449,2557,497],{"class":459},[449,2559,501],{"class":500},[449,2561,504],{"class":459},[449,2563,2564,2566,2568,2570],{"class":451,"line":507},[449,2565,473],{"class":455},[449,2567,528],{"class":459},[449,2569,501],{"class":500},[449,2571,504],{"class":459},[449,2573,2574],{"class":451,"line":515},[449,2575,467],{"emptyLinePlaceholder":466},[449,2577,2578,2580,2582,2585,2587,2590],{"class":451,"line":523},[449,2579,559],{"class":455},[449,2581,562],{"class":455},[449,2583,2584],{"class":565}," RPGCharacterPanel",[449,2586,569],{"class":455},[449,2588,2589],{"class":565}," JPanel",[449,2591,575],{"class":459},[449,2593,2594],{"class":451,"line":535},[449,2595,467],{"emptyLinePlaceholder":466},[449,2597,2598,2601],{"class":451,"line":543},[449,2599,2600],{"class":455},"    private",[449,2602,2603],{"class":459}," RPGLifeBar lifeBar;\n",[449,2605,2606,2608],{"class":451,"line":551},[449,2607,2600],{"class":455},[449,2609,2610],{"class":459}," RPGManaBar manaBar;\n",[449,2612,2613,2615],{"class":451,"line":556},[449,2614,2600],{"class":455},[449,2616,2617],{"class":459}," RPGInputText nameField;\n",[449,2619,2620],{"class":451,"line":578},[449,2621,467],{"emptyLinePlaceholder":466},[449,2623,2624,2626,2628],{"class":451,"line":583},[449,2625,586],{"class":455},[449,2627,2584],{"class":565},[449,2629,591],{"class":459},[449,2631,2632,2635,2637,2639,2642],{"class":451,"line":594},[449,2633,2634],{"class":565},"        setLayout",[449,2636,643],{"class":459},[449,2638,733],{"class":455},[449,2640,2641],{"class":565}," BorderLayout",[449,2643,882],{"class":459},[449,2645,2646,2649,2651,2653,2655,2657,2660,2662,2664,2666,2668],{"class":451,"line":599},[449,2647,2648],{"class":565},"        setBackground",[449,2650,643],{"class":459},[449,2652,733],{"class":455},[449,2654,1741],{"class":565},[449,2656,643],{"class":459},[449,2658,2659],{"class":500},"20",[449,2661,751],{"class":459},[449,2663,2659],{"class":500},[449,2665,751],{"class":459},[449,2667,2659],{"class":500},[449,2669,1210],{"class":459},[449,2671,2672],{"class":451,"line":608},[449,2673,467],{"emptyLinePlaceholder":466},[449,2675,2676],{"class":451,"line":614},[449,2677,2678],{"class":1227},"        \u002F\u002F 🧑‍🦲 Campo de texto para el nombre del personaje\n",[449,2680,2681,2684,2686,2688,2690],{"class":451,"line":622},[449,2682,2683],{"class":459},"        nameField ",[449,2685,628],{"class":455},[449,2687,701],{"class":455},[449,2689,566],{"class":565},[449,2691,605],{"class":459},[449,2693,2694,2697,2700,2702,2704,2707,2709,2712,2714,2717],{"class":451,"line":676},[449,2695,2696],{"class":459},"        nameField.",[449,2698,2699],{"class":565},"setPreferredSize",[449,2701,643],{"class":459},[449,2703,733],{"class":455},[449,2705,2706],{"class":565}," Dimension",[449,2708,643],{"class":459},[449,2710,2711],{"class":500},"200",[449,2713,751],{"class":459},[449,2715,2716],{"class":500},"40",[449,2718,1210],{"class":459},[449,2720,2721,2724],{"class":451,"line":695},[449,2722,2723],{"class":565},"        add",[449,2725,2726],{"class":459},"(nameField, BorderLayout.NORTH);\n",[449,2728,2729],{"class":451,"line":710},[449,2730,467],{"emptyLinePlaceholder":466},[449,2732,2733],{"class":451,"line":716},[449,2734,2735],{"class":1227},"        \u002F\u002F ❤️ Barra de vida\n",[449,2737,2738,2741,2743,2745,2747],{"class":451,"line":725},[449,2739,2740],{"class":459},"        lifeBar ",[449,2742,628],{"class":455},[449,2744,701],{"class":455},[449,2746,2270],{"class":565},[449,2748,605],{"class":459},[449,2750,2751,2754,2756,2758,2760,2762,2764,2767,2769,2771],{"class":451,"line":760},[449,2752,2753],{"class":459},"        lifeBar.",[449,2755,2699],{"class":565},[449,2757,643],{"class":459},[449,2759,733],{"class":455},[449,2761,2706],{"class":565},[449,2763,643],{"class":459},[449,2765,2766],{"class":500},"300",[449,2768,751],{"class":459},[449,2770,1746],{"class":500},[449,2772,1210],{"class":459},[449,2774,2775,2777],{"class":451,"line":789},[449,2776,2723],{"class":565},[449,2778,2779],{"class":459},"(lifeBar, BorderLayout.CENTER);\n",[449,2781,2782],{"class":451,"line":802},[449,2783,467],{"emptyLinePlaceholder":466},[449,2785,2786],{"class":451,"line":808},[449,2787,2788],{"class":1227},"        \u002F\u002F 🔵 Barra de maná\n",[449,2790,2791,2794,2796,2798,2800],{"class":451,"line":813},[449,2792,2793],{"class":459},"        manaBar ",[449,2795,628],{"class":455},[449,2797,701],{"class":455},[449,2799,2407],{"class":565},[449,2801,605],{"class":459},[449,2803,2804,2807,2809,2811,2813,2815,2817,2819,2821,2823],{"class":451,"line":822},[449,2805,2806],{"class":459},"        manaBar.",[449,2808,2699],{"class":565},[449,2810,643],{"class":459},[449,2812,733],{"class":455},[449,2814,2706],{"class":565},[449,2816,643],{"class":459},[449,2818,2766],{"class":500},[449,2820,751],{"class":459},[449,2822,1746],{"class":500},[449,2824,1210],{"class":459},[449,2826,2827,2829],{"class":451,"line":841},[449,2828,2723],{"class":565},[449,2830,2831],{"class":459},"(manaBar, BorderLayout.SOUTH);\n",[449,2833,2834],{"class":451,"line":846},[449,2835,805],{"class":459},[449,2837,2838],{"class":451,"line":857},[449,2839,467],{"emptyLinePlaceholder":466},[449,2841,2842,2844,2846,2849,2851,2853,2856,2858,2860,2863],{"class":451,"line":869},[449,2843,586],{"class":455},[449,2845,827],{"class":455},[449,2847,2848],{"class":565}," updateCharacterStats",[449,2850,643],{"class":459},[449,2852,1123],{"class":455},[449,2854,2855],{"class":688}," health",[449,2857,751],{"class":459},[449,2859,1123],{"class":455},[449,2861,2862],{"class":688}," mana",[449,2864,692],{"class":459},[449,2866,2867,2869,2872],{"class":451,"line":885},[449,2868,2753],{"class":459},[449,2870,2871],{"class":565},"setValue",[449,2873,2874],{"class":459},"(health);\n",[449,2876,2877,2879,2881],{"class":451,"line":923},[449,2878,2806],{"class":459},[449,2880,2871],{"class":565},[449,2882,2883],{"class":459},"(mana);\n",[449,2885,2886],{"class":451,"line":937},[449,2887,805],{"class":459},[449,2889,2890],{"class":451,"line":947},[449,2891,955],{"class":459},[423,2893,2894,2895,2898],{},"Este es un ejemplo de cómo integrar las barras de vida y maná en un panel de personaje. En este panel, también hemos añadido un campo de texto para el nombre del personaje. Puedes personalizar el diseño y la disposición de los componentes según tus necesidades, utilizando diferentes layouts o añadiendo más elementos como iconos, habilidades, etc. La función ",[434,2896,2897],{},"updateCharacterStats"," te permite actualizar los valores de salud y maná en tiempo real, lo que es útil para reflejar los cambios durante el juego.",[423,2900,2901],{},"Recuerda que al final, tu interfaz de usuario debe ser intuitiva y fácil de entender para los jugadores, así que no dudes en experimentar con diferentes diseños y estilos para encontrar el que mejor se adapte a tu juego.",[418,2903,2905],{"id":2904},"conclusión","Conclusión",[423,2907,2908],{},"En esta sección, hemos creado un sistema de barras de progreso personalizadas para representar la salud y el maná de un personaje en un juego RPG. Hemos utilizado Java Swing para diseñar estas barras con un estilo único, utilizando degradados de colores y bordes redondeados para mejorar su apariencia. Además, hemos integrado estas barras en un panel de personaje que también incluye un campo de texto para el nombre del personaje. Este enfoque modular te permite reutilizar los componentes y personalizarlos según las necesidades de tu juego, lo que facilita la creación de una interfaz de usuario atractiva y funcional para tus jugadores.",[2910,2911,2912],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":445,"searchDepth":463,"depth":463,"links":2914},[2915,2916,2917,2920,2921],{"id":420,"depth":463,"text":421},{"id":428,"depth":463,"text":429},{"id":989,"depth":463,"text":990,"children":2918},[2919],{"id":2224,"depth":470,"text":2225},{"id":2509,"depth":463,"text":2510},{"id":2904,"depth":463,"text":2905},"En esta tercera parte de la serie sobre la UI para nuestro RPG, continuamos desarrollando la interfaz gráfica utilizando Java Swing, añadiendo más componentes y funcionalidades para mejorar la experiencia del usuario.","md",null,{"editButton":42},{"title":305,"description":2922},"McnMXbSx_NF5dp7gsaNpnmaMrTXqL7FLLte2Pr2nzdU",[2929,2931],{"title":301,"path":302,"stem":303,"description":2930,"children":-1},"En este capítulo se explica cómo manejar archivos de tipo objeto en Java, utilizando las clases ObjectInputStream y ObjectOutputStream para leer y escribir objetos completos en archivos.",{"title":309,"path":310,"stem":311,"description":2932,"children":-1},"En esta cuarta parte de la serie sobre la creación de una interfaz de usuario para nuestro RPG, se profundiza en la implementación de características avanzadas y mejoras en la experiencia del usuario.",1779479576041]