GUI

Introducción

GUI es la función de creación UI/UX de Suika3.

En Suika3, los botones se definen en un modo GUI dedicado y funcionan en de manera sincrónica, es decir, llamar a una GUI da como resultado un clic en un botón o una cancelación.

Devoluciones de llamada asincrónicas, como mostrar botones mientras se etiqueta texto La ejecución se evita intencionalmente porque puede ser difícil para programadores principiantes para entender y gestionar.

Un archivo GUI contiene una lista de definiciones de botones. Cada botón incluye un tipo de comportamiento, imágenes inactivas y suspendidas, y adicionales propiedades. Los botones se asignan a capas de animación y la animación Los archivos se pueden activar cuando cambia el estado de un botón.

---

Muestra de GUI

# Global settings section.
global {
    fadein:       0.2;            # Fading-in time in seconds.
    fadeout:      0.2;            # Fading-out time in seconds.
}

# A block describes a button.
# The name of a block can be whatever you like and it won't affect anything.
button1 {
    # Layer ID (`1`-`32`)
    # `1` means the top-most and `32` means the bottom-most in the GUI layers, respectively.
    id: 1;
 
    # Behavior Type (`goto` means go to a label when clicked.)
    type: goto;

    # Label to go to.
    label: button1_clicked;

    # Position
    x: 39;
    y: 99;

    # `width:` and `height:` are omissible as they can be inferred from the image size.

    # Images
    image-idle:  gui/item-idle.png;    # Shown when the button is not pointed.
    image-hover: gui/item-hover.png;   # Shown when the button is pointed.
    image-press: gui/item-press.png;   # Shown when the button is pressed.

    # Animations
    anime-idle:  gui/item-idle.anime;   # Executed when the button state is changed to `idle`.
    anime-hover: gui/item-hover.anime;  # Executed when the button state is changed to `hover`.
    anime-press: gui/item-press.anime;  # Executed when the button is pressed.

    # Note that `press` is not an independent state, it's an additional flag to the state `hover`.
    # When a `hover` anime runs, `idle` anime will be canceled.
    # And when `idle` anime runs, `hover` anime will be canceled.
    # However, `press` anime doesn't cancel anything.
}

En la sección global, puede especificar opciones para la GUI.

Otras secciones se interpretan como definiciones de botones. Aquí, button1 crea un botón en la posición (39, 99). Si se hace clic en el botón, se producirá un salto llamado goto.

---

Tipos de botones

noaction

Una imagen en la que no se puede hacer clic.

background {
    type: noaction;
    x: 0;
    y: 0;
    image-idle: idle.png;
}

goto

Un botón en el que se puede hacer clic. Cuando se hace clic, la ejecución de la etiqueta salta a una etiqueta especificada por el parámetro label:.

button1 {
    type: goto;
    label: label_clicked_button1;
    x: 0;
    y: 0;
    image-idle:  idle.png;
    image-hover: hover.png;
}

gui

Un botón en el que se puede hacer clic. Cuando se hace clic, la ejecución de la GUI se encadena a una nueva GUI especificada por el parámetro file:.

button1 {
    type: gui;
    label: gui2.gui;
    x: 0;
    y: 0;
    image-idle:  idle.png;
    image-hover: hover.png;
}

mastervol

Un control deslizante para configurar el volumen principal.

slider1 {
    type: mastervol;
    x: 0;
    y: 0;
    image-idle:  idle.png;   # Slider base bar
    image-hover: hover.png;  # Slider base bar (bright)
    image-knob:  knob.png;   # Slider knob
}

bgmvol

Un control deslizante para configurar el volumen de BGM.

Este control deslizante establece el volumen que se almacenará en el archivo de datos de guardado global. Esto es diferente al volumen que se establecerá mediante la etiqueta [volume] y se almacenará en los datos guardados locales.

slider1 {
    type: bgmvol;
    x: 0;
    y: 0;
    image-idle:  idle.png;   # Slider base bar
    image-hover: hover.png;  # Slider base bar (bright)
    image-knob:  knob.png;   # Slider knob
}

sevol

Un control deslizante para configurar el volumen SE.

Este control deslizante establece el volumen que se almacenará en el archivo de datos de guardado global. Esto es diferente al volumen que se establecerá mediante la etiqueta [volume] y se almacenará en los datos guardados locales.

slider1 {
    type: bgmvol;
    x: 0;
    y: 0;
    image-idle:  idle.png;   # Slider base bar
    image-hover: hover.png;  # Slider base bar (bright)
    image-knob:  knob.png;   # Slider knob
}

voicevol

Un control deslizante para configurar el volumen SE.

Este control deslizante establece el volumen que se almacenará en el archivo de datos de guardado global. Esto es diferente al volumen que se establecerá mediante la etiqueta [volume] y se almacenará en los datos guardados locales.

slider1 {
    type: bgmvol;
    x: 0;
    y: 0;
    image-idle:  idle.png;   # Slider base bar
    image-hover: hover.png;  # Slider base bar (bright)
    image-knob:  knob.png;   # Slider knob
}

charactervol

Un control deslizante para establecer un volumen por carácter.

El índice de caracteres se pasa mediante el parámetro index:. El índice 0 es para caracteres no definidos y del 1 al 32 para caracteres definidos.

slider1 {
    type: charactervol;
    index: 1;  # Character Index
    x: 0;
    y: 0;
    image-idle:  idle.png;   # Slider base bar
    image-hover: hover.png;  # Slider base bar (bright)
    image-knob:  knob.png;   # Slider knob
}

textspeed

Un control deslizante para establecer la velocidad del texto.

slider1 {
    type: textspeed;
    x: 0;
    y: 0;
    image-idle:  idle.png;   # Slider base bar
    image-hover: hover.png;  # Slider base bar (bright)
    image-knob:  knob.png;   # Slider knob
}

autospeed

Un control deslizante para configurar la velocidad del modo automático.

slider1 {
    type: textspeed;
    x: 0;
    y: 0;
    image-idle:  idle.png;   # Slider base bar
    image-hover: hover.png;  # Slider base bar (bright)
    image-knob:  knob.png;   # Slider knob
}

preview

Un área de texto para obtener una vista previa de la fuente, el idioma y la velocidad.

preview1 {
    type: preview;
    x: 0;
    y: 0;
    image-idle: idle.png;
}

fullscreen

Un botón en el que se puede hacer clic. Al hacer clic, el motor entrará en modo de pantalla completa.

fullscreen1 {
    type: fullscreen;
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
    image-disable: disable.png;  # For when in the full screen mode.
}

window

Un botón en el que se puede hacer clic. Al hacer clic, el motor entrará en modo de ventana.

window1 {
    type: window;
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
    image-disable: disable.png;  # For when in the windowed mode.
}

default

Un botón en el que se puede hacer clic. Cuando se hace clic, restablece todas las configuraciones.

reset1 {
    type: default;
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
}

savepage

Un botón en el que se puede hacer clic. Cuando se hace clic, cambia la página de la pantalla de guardar.

savepage1 {
    type: savepage;
    index: 0; # Page index (0-)
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
    image-active:  active.png;  # For when the page is active.
}

save

Un botón en el que se puede hacer clic. Cuando se hace clic, ejecuta un guardado.

save1 {
    type: save;
    index: 0; # Index in apage. actual save slot = page * saveslots + index

    x: 0;
    y: 0;

    image-idle: system/save/save-item-idle.png;
    image-hover: system/save/save-item-hover.png;

    index-x:   10;   # Number
    index-y:   0;
    date-x:    60;   # Date
    date-y:    0;
    thumb-x:   27;   # Thumbnail
    thumb-y:   77;
    chapter-x: 260;  # Chapter title
    chapter-y: 48;
    msg-x:     260;  # Last message
    msg-y:     96;
}

load

Un botón en el que se puede hacer clic. Al hacer clic, ejecuta una carga.

load1 {
    type: load;
    index: 0; # Index in apage. actual save slot = page * saveslots + index

    x: 0;
    y: 0;

    image-idle: system/load/load-item-idle.png;
    image-hover: system/load/load-item-hover.png;

    index-x:   10;   # Number
    index-y:   0;
    date-x:    60;   # Date
    date-y:    0;
    thumb-x:   27;   # Thumbnail
    thumb-y:   77;
    chapter-x: 260;  # Chapter title
    chapter-y: 48;
    msg-x:     260;  # Last message
    msg-y:     96;
}

auto

Un botón en el que se puede hacer clic. Cuando se hace clic, inicia el modo automático.

auto1 {
    type: auto;
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
}

skip

Un botón en el que se puede hacer clic. Cuando se hace clic, inicia el modo de omisión.

skip1 {
    type: skip;
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
}

title

Un botón en el que se puede hacer clic. Cuando se hace clic, el motor vuelve al archivo NovelML especificado.

title1 {
    type: title;
    file: title.novel;
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
}

history

Un botón en el que se puede hacer clic. Muestra un elemento del historial de mensajes.

history {
    type: history;
    index: 0; # Index in a page
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;

    name-x: 20;   # Name
    name-y: 10;
    text-x:  20;  # Text (for when there is a name)
    text-y:  50;
    msg-x:  20;   # Message (for when no name)
    msg-y:  10;
}

historyscroll

Una barra de desplazamiento vertical para la pantalla de historial.

scroll1 {
    type: historyscroll;
    x: 1200;
    y: 40;

    image-idle:  system/history/history-bar-idle.png;
    image-hover: system/history/history-bar-hover.png;
    image-knob:  system/history/history-bar-knob.png;
}

historyscroll-horizontal

Una barra de desplazamiento horizontal para la pantalla del historial de escritura vertical.

scroll1 {
    type: historyscroll-horizontal;
    x: 40;
    y: 650;

    image-idle:  system/history/history-bar-idle.png;
    image-hover: system/history/history-bar-hover.png;
    image-knob:  system/history/history-bar-knob.png;
}

cancel

Un botón en el que se puede hacer clic. Al hacer clic, la GUI se cancelará.

cancel1 {
    type: cancel;
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
}

var

Un área de texto para mostrar un valor de variable. Se utiliza para editar nombres.

var1 {
    type: var;
    variable: variable_name;
    x: 0;
    y: 0;
    image-idle:    idle.png;
}

char

Un botón para agregar un carácter a una variable. Se utiliza para editar nombres.

char1 {
    type: char;
    variable: variable_name; # Variable name.
    msg: A;                  # Text to append.
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
}

language

Un botón para cambiar el idioma.

language_english1 {
    type: language;
    langu: en;
    x: 0;
    y: 0;
    image-idle:    idle.png;
    image-hover:   hover.png;
    image-disable: disable.png; # For when English is active.
}

---

Opciones de botones comunes

puntos:

pointse: btn-change.ogg; indica que se reproduce un archivo de efectos de sonido atrás cuando el cursor del mouse ingresa al botón.

haga clic en:

clickse: click.ogg; indica que se reproduce un archivo de efectos de sonido cuando se hace clic en el botón.