Juego educativo semanal o intento de timekiller en inglés

Pasé cientos de horas en juegos según las estadísticas de Steam, y miles, si cuentas en todas las plataformas. Pero lo que me llamó la atención fue la relación de tiempo en algunos casos. Me tomó 8.5 horas completar el gran Bioshock Infinite, pero Sacura Clicker tardó 12 minutos más. Clicker Heroes tiene más de cuarenta horas, casi lo mismo que Torchlight 2. El truco es que lo recordaba y tenía una buena idea del tiempo dedicado a los grandes juegos. Pero los pequeños juguetes no recordaban por completo, me robaron el tiempo sin ser notados y me quitaron entre cinco y diez minutos durante semanas y meses.

Cuando me di cuenta de esto, pensé que sería bueno atornillar una turbina a esta bailarina. Es decir, hacer un timekiller útil: un juego simple que no robará, pero invertirá mi tiempo durante cinco a diez minutos. Por ejemplo, en el vocabulario de inglés.



Una vez compré un montón de tarjetas con palabras en inglés y las leí en un minibús camino a la oficina. Luego abandonó la oficina y el hábito desapareció, me olvidé de las tarjetas. Tuvo que sacudir su mochila, y cuando diferentes palabras cayeron del bolsillo lateral superior con un ventilador, me di cuenta: ¡este es el partido 2! Un juego en el que debes hacer parejas (a diferencia del partido 3, donde toman tres o más).

Los Timekillers con el principio de "hacer una pareja" se conocen desde hace mucho tiempo, por ejemplo, el juego de computadora mahjong solitario (que no debe confundirse con el clásico juego chino de juego, que fue jugado por Sammo Hung en las películas de acción de Hong Kong).


KDE Games Mahjong

El solitario Mahjong tiene una variación simplificada de Mahjong Connect, donde los chips se presentan en un diseño simple, sin pirámides rizadas. En Wikipedia, puede leer que se llama Shisen-Sho, pero si desea buscar muestras en Google, el primer nombre será más adecuado.

Sospecho que la primera versión fue hecha por un programador como yo, que no tenía experiencia en la programación de un mahjong completo con un diseño complicado, pero el juego de repente se hizo popular y generó su propia rama de clones.


Los juegos de KDE Shiseen-sho o Mahjong Connect popularmente

Mire las tarjetas de palabras y Mahjong Connect, que encajan perfectamente, y hay parejas. Solo queda convertir cada carta en un par de fichas.

Fichas y diseño de juego


Cinco palabras nuevas en cada sesión y algunas palabras más repetidas de las anteriores: esta es la idea de la que comencé. Esto significaba que al menos unas 20 fichas deberían estar involucradas en el juego.

En cada chip fue necesario colocar al menos una palabra con buena legibilidad. Las tarjetas de papel le permiten colocar una gran cantidad de texto, pero las fichas con tales proporciones serían demasiado grandes. Además, realmente quería mantener la sensación de "como si fuera mahjong", y esto significaba que un chip de juego debería ser muy compacto en forma y texto. Si gira el nudillo del mahjong 90 grados, obtendrá suficiente espacio para el texto.

Después de modelar un diseño de juego con tales nudillos en un editor gráfico (Fireworks 2003, si tienes curiosidad), vi que el juego se ve bastante aburrido. Después de mirar nuevamente las capturas de pantalla con mahjongs, intenté agregar diferentes elementos gráficos para animar la imagen. Y luego me di cuenta: puedes agregar una gema a cada par. Entonces funcionará no solo como un elemento de animación, dando al menos un parecido externo a los juguetes casuales, sino también como una pista.


Versión borrador del campo de juego con diferentes opciones para fichas

La versión final resultó así: tres gemas para 10-11 pares de palabras. Esto dio una pista con una posibilidad de coincidencia aleatoria de alrededor del 25%. Si olvida la palabra, puede ver las fichas con las mismas palabras.

Un elemento de diseño adicional que acelera la orientación es una bandera gris que marca todas las palabras en un idioma (ruso). La idea original era etiquetar un elemento de un par, no un signo nacional, por lo que no hice tricolor ni nada por el estilo.



Parece casi una trampa, pero no quería hacer un examen o una prueba de conocimiento completo. El examen es estresante, y necesitaba el juego más fácil y divertido para que durante el juego se formara un sentimiento de victoria y confianza en sí mismo. Creo que esta es una de las cualidades más importantes de los cronometradores de culto como Bejeweled o Zuma. El jugador recorre el límite óptimo entre su habilidad y su incapacidad, se divierte y vuelve al juego una y otra vez.

¿Qué pasa con las reglas? Tomé otro paso en la simplificación de Mahjong Connect y me permití hacer pares de cualquier chip coincidente, y no solo aquellos que estaban desbloqueados. Hay dos razones por las que esto sucedió. La primera es que no tenía a mano el código mahjong listo y probé solo el emparejamiento. El segundo es que descubrí que las fichas con palabras en diferentes idiomas en sí mismas complican el juego y emparejarlas ya crea la sensación de un juego.

Mirando hacia el futuro: si haces una conexión completa y haces mahjong con las mismas fichas, en realidad será mucho más fácil jugar. El hecho es que las restricciones adicionales en las fichas reducirán la elección y el jugador solo puede verificar todas las fichas que sean adecuadas para gemas que son libres de gemas, y esto dará un fuerte aumento en la probabilidad de coincidencia de 25% a 50 o incluso cien, dependiendo del diseño.

Pero no importa cuán fácil sea jugar o hacer trampa, el objetivo principal en un juego así se cumplirá: el cerebro del jugador constantemente coincidirá con un par de palabras en sus idiomas nativos y extranjeros. Si alguien logra hacer un asesino de tiempo, entonces docenas de horas se convertirán en un beneficio para los jugadores, sin importar cómo hagan trampa. Aunque el aprendizaje consciente siempre es mejor.

Programacion


Para este proyecto, utilicé JavaScript normal y el motor de juego Phaser.io 2.10.2. Por qué los juegos HTML5 son buenos: te permiten proporcionar rápidamente acceso para probar y ejecutar prototipos. Ya me las arreglé para asegurarme en otros proyectos de que, como medio para crear un juego HTML5 multiplataforma, no es muy bueno (una reducción notable en FPS en teléfonos débiles, problemas de compatibilidad entre navegadores, la necesidad de pensar en puentes hacia la API nativa en algunos casos). Pero como herramienta para construir prototipos web y juguetes web, es una buena opción.

Como en el caso de la caravana post-nuclear , comencé a desarrollar compilando un modelo del estado del juego, es decir, una clase de datos con campos que simplemente reflejan el progreso actual del jugador.

function GameState() { this.pairKey = "ru-en"; // Key   ,    this.pairJsonUrl = "somePath/ru-en.json"; //        this.matched = 0; //       this.gold = 0; // .   ,      this.errors = 0; //   //    //  =   //  Phaser.ArrayUtils.numberArray   - ,    this.portions = Phaser.ArrayUtils.numberArray(Balance.PORTION_AMOUNT-1) .map(function (portion, index) { return new PortionSaveData(); }); this.portion = 0; //   //  this.options = { tutorial: true, //     } } 

Para guardar y cargar el estado del juego en el JS basado en navegador, es suficiente simplemente serializar y deserializar este modelo al escribir y leer en el almacenamiento local, y así conseguimos que el progreso se guarde en la computadora del usuario en solo un par de líneas.

Poner chips en el campo, procesar clics del mouse y una pantalla táctil en Phaser se implementan de manera bastante simple. Tiene la clase Group, que le permite alinear automáticamente todos los objetos visuales agregados de acuerdo con una cuadrícula dada.

Sin embargo, solo los rectángulos regulares (o cuadrículas, si establece un paso grande) se pueden hacer de esta manera, lo que parece bastante primitivo. Por lo tanto, escribí mi función de diseño, en la que cada segunda fila se desplaza por la mitad de los chips: resulta el diseño de los "ladrillos".

 //    -        function layAsBricks(group, offsetBase) { offsetBase = offsetBase || Math.floor(AppConfig.CHIP_WIDTH / 2); var N = group.length; var i = 0, row, col, COLS = getColAmount(N), ROWS = N / COLS; var offsetX, min = Math.floor(offsetBase / 2), max = offsetBase + min; var lastWidth = 0, lastX = 0; var nextChip; for (row = 0; row < ROWS; row++) { if (row % 2 > 0) offsetX = offsetBase; else offsetX = 0; lastWidth = 0; lastX = 0; for (col = 0; col < COLS; col++) { nextChip = group.children[i]; if (nextChip === undefined) break; group.children[i].y = row * AppConfig.CHIP_HEIGHT; group.children[i].x = lastX + lastWidth; lastX = group.children[i].x; lastWidth = group.children[i].width; group.children[i].x += offsetX; i++; } } } 

Pero tuve que resolver los problemas principales con el diccionario.

Juegos de diccionario y fuentes


Lo primero que llamará la atención de todos, si aún no se han apresurado, la longitud de las fichas no es suficiente para mostrar adecuadamente todas las palabras en el diccionario. Puede resolver esto cambiando arbitrariamente el tamaño de la fuente dependiendo de la longitud de la palabra.


Diferentes tamaños de fuente para diferentes longitudes: en mi opinión, parece un poco loco

Pero esta opción me pareció demasiado mala, así que decidí simplemente filtrar el diccionario y dejar solo palabras de no más de 9 caracteres en ambos casos (ruso e inglés). En mi caso, esto era permisible, porque tomé el diccionario de frecuencia como base, es decir, las palabras en él estaban ordenadas por frecuencia de uso. En las primeras mil palabras de más de 9 caracteres, había muy pocas, y en las diez primeras, es decir, las más frecuentes, no había ninguna.

Un límite de 9 caracteres es adecuado en la etapa de verificar el concepto para las palabras más comunes, pero si desarrolla un prototipo, tarde o temprano tendrá que hacer algo al respecto. Lo más probable es que cambie las proporciones de las fichas o aumente su tamaño. Para el idioma alemán, esto tendrá que hacerse incluso en el marco de los primeros cientos de palabras más populares, y también quiero probar el alemán, recuerde los años escolares.

El segundo punto es la coincidencia visual de las letras en inglés y ruso. El ruso "no" y el inglés en mayúsculas a menudo coinciden solo con el píxel. Un diccionario de frecuencias mejora este efecto porque estas palabras cortas terminan en una lección casi al principio.


El ruso NO y el inglés HE en mayúscula se ven iguales

La bandera gris ayudó débilmente, las palabras estaban confundidas. Después de las primeras quejas de los evaluadores, cambié el caso de las inscripciones a las minúsculas habituales. Y luego vi el siguiente error: las letras comenzaron a bailar, en algunas palabras flotando verticalmente por un píxel completo.



La razón fue porque utilicé una sola fuente ráster para la salida (formada como un conjunto de imágenes de letras en el mismo tamaño), ajustándola según sea necesario. En la mayoría de los casos, esto funciona sin problemas, pero las letras redondas aparecen en letras pequeñas, a veces se come un píxel, lo que da el efecto de bailar.
Moralidad: una fuente de trama para textos pequeños debe prepararse inmediatamente en el tamaño correcto
Después de preparar una fuente separada, todos dejaron de bailar y se pararon estrictamente a lo largo de la línea de base.



Si va a utilizar Phaser u otro motor HTML5 en sus proyectos, aquí hay otro consejo: muestre la fuente ráster inmediatamente en el color que se utilizará en el juego. De lo contrario, esto ejerce una presión adicional sobre el procesador, que en juegos con un montón de acciones y efectos puede conducir a un fuerte hundimiento de FPS. Además, incluso en el último Chrome móvil en algunas tabletas Android, el color "no nativo" especificado por la fuente de mapa de bits puede no mostrarse mediante programación; el resultado será el predeterminado.

Y, por supuesto, el diccionario para un juego de este tipo está mejor conectado como un archivo descargable por separado; esto permitirá que se actualice si se notan errores tipográficos u opciones dudosas.

Por ejemplo, mi versión del diccionario parece haber sido compilada a partir de matrices de textos traducidos, teniendo en cuenta el contexto, por lo que el "qué" en las primeras lecciones allí se tradujo como "eso". Está claro que, en este sentido, esta partícula se usa con mucha más frecuencia que la pregunta, pero para aprender sin contexto no es adecuada.

Mi conclusión principal del vocabulario es que las partículas y otras palabras que son altamente sensibles al contexto no son adecuadas para aprender en pares tan puros. Las opciones de solución que veo son hacer un juguete separado en partículas o crear chips con textos más largos. La segunda opción parece más lógica, porque no sabrá leer y escribir con una sola palabra y necesita aprender completamente el idioma con contexto, al menos con la ayuda de pequeñas expresiones. Y eso significa que todavía hay mucha experimentación por delante.

Tutorial


Al principio probé un juego en el que las fichas simplemente se distribuían, y fue interesante, porque la jugabilidad se redujo a recordar con alegría expresiones ya conocidas y esto dio la sensación de una victoria fácil, lo cual era necesario. Pero luego me di cuenta de que esto no funcionaría con un lenguaje completamente desconocido. Por lo tanto, tuve que agregar la opción de aprendizaje: antes del comienzo de la lección, el juego muestra las fichas en los pares correctos y luego las mezcla.



Técnicamente, esto se implementa de la siguiente manera: el nivel se presenta inicialmente como de costumbre, es decir, en un orden aleatorio. Luego, si la opción tutorial está activada, se inicia una función que recuerda las coordenadas iniciales de los chips, les agrega animación de vuelo y diseños en pares de trabajo, y luego todo vuelve a su lugar. Dado que el cálculo y la preparación del tutorial se lleva a cabo antes del inicio del primer ciclo de actualización (redibujando la pantalla), al usuario le parece que el juego muestra primero las fichas en el orden correcto y luego las baraja aleatoriamente.

En el motor Phaser, Group tiene un método aleatorio que funciona como barajar una matriz regular, pero al mismo tiempo actualiza el índice Z. Esta es una función muy conveniente, que sin duda será útil para la implementación de mahjong completo y otros juegos, donde hay al menos una tercera dimensión condicional y los elementos se superponen entre sí.

El algoritmo del comienzo del juego parece simple: tomamos N pares del diccionario de pares para una lección dada, formamos elementos de chips visuales a partir de ellos, luego hacemos una mezcla aleatoria y lo construimos en una cuadrícula; obtenemos un diseño pseudoaleatorio.

El proceso inverso tiene lugar en el tutorial: la función de clasificación se llama en la matriz de chips, donde el parámetro id del par del diccionario es un parámetro significativo, de esta manera los chips se ordenan uno tras otro en pares, después de lo cual queda colocarlos en dos columnas.

Progreso


Para monitorear el progreso, agregué pequeños indicadores al menú de inicio y un asterisco, que debería aparecer cuando todos los niveles se completen en cien palabras. La captura de pantalla muestra una situación artificial con una estrella de prueba.



Me llevé al Sultán con la cara de Cartman en Craftpix.net. Caminaba con el mismo kit gratuito que los diamantes. Solo para darle vida al protector de pantalla. Aunque, si no te gustan los Sultanes o Cartman, admito que el movimiento no es particularmente exitoso.

Conclusiones y perspectivas


Estoy seguro de que el timekiller de entrenamiento es un timekiller real, y no es posible este prototipo que hice. Y cuando aparecen en grandes cantidades, el mundo puede cambiar para mejor. Como mínimo, millones de personas no perderán cientos de horas.

Si tienes a mano un código para un juego regular en combinación y algunos días libres, intenta experimentar, al menos con algunas palabras. Puede tomar el archivo JSON terminado aquí . Tiene más de mil pares, los formé con un margen.

Todos los juegos de match3 y match2, con bolas, diamantes, fichas de mahjong, peces y cachorros, con un diseño dinámico fractal como Zuma o un campo estático, como en la mayoría de los juegos, esta es esencialmente una tarea para hacer combinaciones, seleccionar grupos de acuerdo con algún criterio .

En los juegos actuales, este signo no lleva ninguna carga útil, la gente simplemente combina bolas rojas y verdes, caramelos de gelatina a rayas translúcidas y cachorros de mermelada pegajosa. ¿Pero qué pasa si estos cachorros están saturados de vitaminas saludables? Recuerdo que aprendí varias palabras en inglés de Fallout y Heroes Might and Magic, lo que significa que existen tales vitaminas.

Mi prototipo del juego se puede probar aquí . Hay una selección de diferentes cientos y niveles, preservación, progreso y mil de las palabras en inglés más comunes. El diseño está diseñado para monitores de escritorio o tabletas. Cada nivel está diseñado para varios minutos, contiene 5 palabras nuevas y 6 repetidas de las anteriores (de acuerdo con la fórmula de muestreo aleatorio 3, 2, 1).

Actualizado el 13.06.18 : se agregaron transiciones entre cientos de palabras y saludos al pasar el último nivel en cada cien. También se eliminan del diccionario algunos pares contextuales que no tienen sentido en traducciones individuales. Trabajo optimizado con memoria.

Source: https://habr.com/ru/post/es413391/


All Articles