Registrarse

[pokecrystal] Cambiar las interfaces de batalla

DGamers64

RomHacker Novato
¡Hola! Como algunos sabréis hace tiempo estoy trabajando en pokeemerald y pokecrystal. He estado buscando bastante y no he encontrado ningún tutorial de cómo modificar las interfaces de batalla en pokecrystal, y además por el momento en la wiki oficial de pret lo tienen marcado como tarea pendiente, por lo que después de investigar durante un tiempo he descubierto cómo.
En este tutorial aprenderemos a modificar las zonas indicadas en los recuadros rojos de abajo, y podremos añadir también nuevos tiles, ahora veréis.
pokecrystal-0.png
Para cambiar los gráficos de estas pokeballs iremos a "gfx/battle/balls.png" y lo modificaremos a nuestro gusto, siempre teniendo en cuenta varias cosas:
1.-Esto son tiles, como si fuera un mapa, y las medidas de cada uno son de 8x8.

2.-Las paletas se pueden modificar casi seguro, pero yo no he encontrado ninguna parte donde poder modificarlas, por lo que si alguien sabe como, por favor comentalo.

3.-Recuerda que la primera ball significa que está normal y puede ser utilizado, la segunda que tiene un efecto como quemaduras, envenenamiento etc., la tercera significa que el pokémon está debilitado o es un huevo, y por último, la cuarta, significa que ese espacio está vacío.
1619237752036.png
Para modificar los gráficos del enemigo hay que ir a:
1.-"gfx/battle/enemy_hp_bar_border.png" ~ Para modificar la :L de el indicador de nivel, recuerda comprobar que sólo mide 8x8 y está dentro de donde debería, por ejemplo, si vas a modificarlo para poner :N o Nv o lo que sea sólo puede ocupar este espacio. El resto de componentes de esta imagen ya diré a que se refieren más adelante.
1619237592668.png

2.-"gfx/battle/hp_exp_bar_border.png" ~ Para modificar todo el borde tendréis que venir a este archivo. Si queréis quitarlo, NO BORRÉIS lo que está dentro, ya que puede haber otros sitios donde se usen (Spoiler: Los hay) y podrían mostrarse espacios en blanco en sitios donde no queráis que se muestren. Para desactivar las cosas que aparecen aquí lo indicaré más adelante. (Lo digo porque posiblemente queráis quitar esta barra.)
Sin título.png

1619238593664.png

3.-"gfx/font/font.png" ~ Para cambiar las fuentes tendréis que venir aquí aunque os recomiendo cambiar también "gfx/font/english.png", a la vez que esta para cambiar las fuentes de todo el juego, ya que a veces se pedirá la fuente a un archivo y otras a otro.
font.png
Para cambiar la barra vertical en la derecha de los datos de tu Pokémon tienes que ir a "gfx/battle/hp_exp_bar_border.png" y modificar el primer tile y el quinto tile, y de "gfx/battle/enemy_hp_bar_border.png" el primer tile.
Para cambiar la barra de vida o como a mi me gusta llamarla, HP Bar, tenemos que cambiar "gfx/font/font_battle_extra.png".
Esta usa 1 paleta de 4 colores (realmente 6):
-Negro #000000 ~ Dibujado como Negro #000000
-Gris Oscuro #555555 ~ Dibujado como verde, amarillo, o rojo; dependiendo de la vida que tengas.
-Gris Claro #aaaaaa ~ Dibujado como amarillo ocre #F7D67B usado para HP:
-Blanco #FFFFFF ~ Dibujado como Blanco #FFFFFF
Antes de que modifiqueis nada hay que explicar varias cosas antes:
font_battle_extra.png

1.- Esto es lo que aparece a la izquierda de la hp_bar, es una imagen que podéis modificar para que ponga lo que queráis, además recordad que son 2 tiles de 8x8 por lo que en total tenéis 16x8 para poner lo que queráis, aún así luego os enseño como añadir más tiles en pantalla.

2.- Con esto tenéis que tener mucho cuidado ya que cada la hp_bar funciona a través de tiles.

Código:
[H//P]{//---//---//---//---//-   //   // }[]
Esto es una representación de como funciona la hp_bar. Las // significan que cambia el tile. Como podéis observar se va pintando la línea de vida con estos tiles (los tiles se invierten horizontalmente cuando son dibujados) y estos representan el final de la línea, o como puse en el código de arriba //- //.

3.- Esto es un tile más que añade ahí que, repito, más adelante enseñare a hacer.

4.- Aquí los únicos gráficos que podéis cambiar son las letras y los bordes, los cuáles puedo enseñar en otro tutorial cómo cambiarlos, pero aún así es muy fácil.
La Exp Bar funciona exactamente igual a la HP Bar, sólo que utiliza el archivo "gfx/battle/expbar.png"
Para cambiar de posición los bordes del enemigo tendremos 2 opciones:

1.-Desactivar los bordes
Para desactivar los bordes del enemigo, los que enseñe más arriba, se puede hacer quitando una sola línea de código en "engine/battle/core.asm" en la función DrawEnemyHUD.
Código:
farcall DrawEnemyHUDBorder
Para encontrar la línea de código tan solo tenéis que hacer Ctrl+F y pegarla ahí. Esta es la vía más sencilla para hacer esto, pero tiene un inconveniente, y es que la pokeball que indica que el pokémon salvaje está capturado se incluye dentro de este, por lo que al hacer esto estariamos desactivandola también.
Por eso yo siempre tiro de la segunda opción.

2.- Modificar lo que se muestra en los bordes
Esta vía es mucho más compleja que la anterior, pero a cambio tendréis un mejor resultado.
Para modificar esto tendréis que ir a "engine/battle/trainer_huds.asm" y modificar la función DrawEnemyHUDBorder.
Código:
DrawEnemyHUDBorder:
    ld hl, .tiles
    ld de, wTrainerHUDTiles
    ld bc, .tiles_end - .tiles
    call CopyBytes
    hlcoord 1, 2
    ld de, 1 ; start on left
    call PlaceHUDBorderTiles
    ld a, [wBattleMode]
    dec a
    ret nz
    ld a, [wTempEnemyMonSpecies]
    dec a
    call CheckCaughtMon
    ret z
    hlcoord 1, 1
    ld [hl], $5d
    ret

.tiles
    db $6d ; left side
    db $74 ; bottom left
    db $78 ; bottom right
    db $76 ; bottom side
.tiles_end
Aquí se define todo lo que tiene el borde del enemigo. Lo que nos interesa aquí es quitar todo menos el indicador de que el Pokémon está capturado. Para hacerlo modificaremos la función así.
Código:
DrawEnemyHUDBorder:
    ld hl, .tiles
    ld de, wTrainerHUDTiles
    ld bc, .tiles_end - .tiles
    call CopyBytes
    hlcoord 1, 2
    ld de, 1 ; start on left
    ld a, [wTempEnemyMonSpecies]
    dec a
    call CheckCaughtMon
    ret z
    hlcoord 1, 1
    ld [hl], $5d
    ret

.tiles
    db $6d ; left side
    db $74 ; bottom left
    db $78 ; bottom right
    db $76 ; bottom side
.tiles_end
Como veis solamente hemos quitado 4 líneas de código, y hemos quitado ya el borde con esto. Podéis comprobar a compilar y veréis que ya no está ahí. Si capturáis un pokémon y luego os enfrentáis a él debería aparecer el indicador si lo habéis hecho de esta manera, si lo habéis hecho de la otra no.
Si os habéis fijado en el código anterior hay una instrucción que se llama hlcoord _, _, pues esto como el propio nombre indica son las coordenadas de los tiles.
El punto 0,0 es el de arriba a la izquierda, y el punto de abajo a la derecha es 19, 17, y para calcular que punto queréis es bastante fácil. Tan solo tenéis que sacar una screenshot del mGBA, o del emulador que tengáis, os recomiendo mGBA, con F12, la editáis con paint y en el punto donde queráis mover algo ponéis el cursor. Abajo a la izquierda os aparecerán unas coordenadas, pues este número lo dividís entre 8, le quitáis las decimales y le restáis 1, enhorabuena ya tienes unas coordenadas. Cabe decir que el primer tile va de las coordenadas 0 a la 7, el segundo de las coordenadas 8 a la 15, y así consecutivamente, por lo que tendréis que tener eso en cuenta.

Las coordenadas de cada dato aparecen en los siguientes puntos:
Código:
DrawEnemyHUD:
    xor a
    ldh [hBGMapMode], a

    hlcoord 1, 0
    lb bc, 4, 11
    call ClearBox

    farcall DrawEnemyHUDBorder

    ld a, [wTempEnemyMonSpecies]
    ld [wCurSpecies], a
    ld [wCurPartySpecies], a
    call GetBaseData
    ld de, wEnemyMonNickname
    hlcoord 1, 0
    call Battle_DummyFunction
    call PlaceString
    ld h, b
    ld l, c
    dec hl

    ld hl, wEnemyMonDVs
    ld de, wTempMonDVs
    ld a, [wEnemySubStatus5]
    bit SUBSTATUS_TRANSFORMED, a
    jr z, .ok
    ld hl, wEnemyBackupDVs
.ok
    ld a, [hli]
    ld [de], a
    inc de
    ld a, [hl]
    ld [de], a

    ld a, TEMPMON
    ld [wMonType], a
    callfar GetGender
    ld a, " "
    jr c, .got_gender
    ld a, "♂"
    jr nz, .got_gender
    ld a, "♀"

.got_gender
    hlcoord 9, 1
    ld [hl], a

    hlcoord 6, 1
    push af
    push hl
    ld de, wEnemyMonStatus
    predef PlaceNonFaintStatus
    pop hl
    pop bc
    jr nz, .skip_level
    ld a, b
    cp " "
    jr nz, .print_level
    dec hl
1.-En los 2 primeros hlcoords está limpiando un espacio en la pantalla para dibujar cosas aquí, es recomendable que no lo toquéis si no sabéis que estáis haciendo.
2.-El siguiente hlcoord hace referencia al nombre del Pokémon rival. (La coordenada es la de la primera letra)
3.-El siguiente está ya en .got_gender y este hace referencia a la posición del símbolo del género.
4.-La posterior coordenada se refiere al nivel del pokémon rival, que al igual que el nombre, es solo la primera letra.

Con esto ya tendríamos todo lo que son las coordenadas de los datos del enemigo.
Cuando me refiero a datos del player quiero decir los datos de tu pokémon pero el juego se refiere a estos como PlayerHUD así que así lo llamaremos.
Los únicos cambios aquí con los datos del enemigo son los siguientes:
1.-Las coordenadas cambian, obviamente
2.-El código, el cuál es el siguiente:
Código:
DrawPlayerHUD:
    xor a
    ldh [hBGMapMode], a

    ; Clear the area
    hlcoord 9, 7
    lb bc, 5, 11
    call ClearBox

    farcall DrawPlayerHUDBorder

    hlcoord 18, 9
    ld [hl], $73 ; vertical bar
    call PrintPlayerHUD

    ; HP bar
    hlcoord 10, 9
    ld b, 1
    xor a ; PARTYMON
    ld [wMonType], a
    predef DrawPlayerHP

    ; Exp bar
    push de
    ld a, [wCurBattleMon]
    ld hl, wPartyMon1Exp + 2
    call GetPartyLocation
    ld d, h
    ld e, l

    hlcoord 10, 11
    ld a, [wTempMonLevel]
    ld b, a
    call FillInExpBar
    pop de
    ret
Aquí viene a ser un poco lo mismo, pero aún así tenéis comentarios en el propio código que os indica que son.
Si os habéis fijado cerca de las hlcoords aparece a veces un $Nº el cuál hace referencia a un tile. Por ejemplo si queréis cambiar el tile que aparezca ahí tendréis que cambiar el número por otro, si por ejemplo en vez de poner una barra vertical queréis poner una curva de la derecha hacia abajo, como aparece en el archivo "gfx/battle/enemy_hp_bar_border.png" (aquí es donde se coje esta barra vertical) tendréis que poner $75 en vez de $76 porque es el anterior. No sé si me he explicado muy bien pero bueno si no os ha quedado claro os basta con modifcar los gráficos y ya.
Para modificar los comandos de batalla, estilo lo que dice, la caja y esas cosas es muy sencillo, lo explicaré ahora porque para esto va mejor aquí, pero que sepáis que esto os sirve para cualquier menú del juego, aunque para los menús posiblemente haga algún otro tutorial más extenso.
Vayamos al grano, para modificar este menú tenéis que ir a "engine/battle/menu.asm" y buscar está función:
Código:
BattleMenuHeader:
    db MENU_BACKUP_TILES ; flags
    menu_coords 0, 12, SCREEN_WIDTH - 1, SCREEN_HEIGHT - 1
    dw .MenuData
    db 1 ; default option

.MenuData:
    db STATICMENU_CURSOR | STATICMENU_DISABLE_B ; flags
    dn 2, 2 ; rows, columns
    db 8 ; spacing
    dba .Text
    dbw BANK(@), NULL

.Text:
    db "FIGHT@"
    db "POKéMON@"
    db "PACK@"
    db "RUN@"
Todos los menús del juego se representan de la misma manera:
1.-El header, donde dices las coordenadas del lado izq, arriba, der, y abajo respectivamente, (donde dice SCREEN_WIDTH - 1 significa el ancho de la pantalla, que es 19, menos 1. Lo mismo para el SCREEN_HEIGHT pero en el eje vertical.) y donde dices cuál es la opción por defecto seleccionada.

2.-El data, donde dices los atributos del menú, los tiles de espacio que hay entre la primera letra de una columna y la primera letra de otra columna (spacing), por lo que esto solo afecta cuando hay varias columnas en vuestro menú, y las filas y columnas.

3.-Y el texto del menú, donde el primer texto que le pasas es la primera opción, el segundo la segunda opción etc. si os fijáis el orden va por filas, o sea en la primera fila están las primeras opciones, en vez de en columnas como estamos acostumbrados algunos.

Tener mucho cuidado al modificar algunas cosas ya que podría saliros algo mal y saliros gráficos basura por pantalla.
Para añadir tiles es muy simple. Tan solo tenéis que ir a "engine/battle/core.asm" e ir a la función DrawPlayerHUD, si os fijáis las cosas que se printean van separadas:
Código:
    ; Clear the area
    hlcoord 9, 7
    lb bc, 5, 11
    call ClearBox

    farcall DrawPlayerHUDBorder

    hlcoord 18, 9
    ld [hl], $73 ; vertical bar
    call PrintPlayerHUD

    ; HP bar
    hlcoord 10, 9
    ld b, 1
    xor a ; PARTYMON
    ld [wMonType], a
    predef DrawPlayerHP
Para añadir nuevos tiles tan solo tenemos que añadir las 3 mismas líneas que contienen la vertical bar debajo de la vertical bar (por mantener un orden) pero cambiado valores:
Código:
hlcoord X, Y
ld [hl], $XX ; El nombre de lo que quieras
call PrintPlayerHUD
El $XX significa que tienes que poner ahí un número, de los cuáles próximamente haré una lista con todos los gráficos que correponden a todos los números.
El hlcoord es lo de siempre, coordenadas
El call no os recomiendo tocarlo ya que si lo hacéis, bueno, no os funcionará.

Y con esto ya estaría, podéis hacer cosas muy buenas con esto, como por ejemplo dejar una simetría entre la barra de vida y de experiencia, tal y como muestro más abajo.
Con esto estaría todo lo que me acuerdo ahora, si hay algo más lo pongo, pero que sepáis que con esta info podéis hacer interfaces tan chulas como estas:

pokecrystal-3.png

Si tenéis más info que añadir dejarla aquí, muchas gracias ; )
 
Última edición:

Kaktus

Miembro insignia
Miembro insignia
¡¡Diez de diez!!

El cambio visual es muy notorio y mola muchísimo más tu versión. Espero que alguien le de utilidad a este tuto, porque está muy bien documentado. ¡Te animo a que sigas así! ^^
 

ACE10

Héroe de WaH
No sabía de la existencia de este tutorial y aporte
La verdad muy bien explicado y muchas gracias por traerlo.
 
Arriba