Jogo educacional semanal ou tentativa de timekiller em inglês

Passei centenas de horas em jogos de acordo com as estatísticas do Steam e milhares, se você contar em todas as plataformas. Mas o que me impressionou foi a razão do tempo em alguns casos. Levei 8,5 horas para concluir o ótimo Bioshock Infinite, mas Sacura Clicker levou mais 12 minutos. O Clicker Heroes tem mais de quarenta horas, quase o mesmo que o Torchlight 2. O truque é que eu lembrei e tive uma boa idéia do tempo gasto em grandes jogos. Mas os brinquedinhos não se lembram completamente, eles roubaram meu tempo despercebido, levando cinco a dez minutos por semanas e meses.

Quando percebi isso, pensei que seria bom parafusar uma turbina nessa bailarina. Ou seja, criar um timekiller útil - um jogo simples que não rouba, mas investe meu tempo por cinco a dez minutos. Por exemplo, no vocabulário em inglês.



Certa vez, comprei um monte de cartões com palavras em inglês e os li em um microônibus a caminho do escritório. Então ele saiu do escritório e o hábito desapareceu, eu esqueci os cartões. Ele sacudiu a mochila e, quando palavras diferentes caíram do bolso superior com um ventilador, eu percebi - esse é o jogo 2! Um jogo em que você precisa fazer pares (ao contrário do jogo 3, onde eles levam três ou mais).

Os assassinos de tempo com o princípio de “fazer um casal” são conhecidos há muito tempo - por exemplo, o jogo de computador mahjong solitaire (que não deve ser confundido com o clássico jogo chinês, jogado por Sammo Hung nos filmes de ação de Hong Kong).


Mahjong do KDE Games

O Mahjong Solitaire possui uma variação simplificada do Mahjong Connect, onde os chips são dispostos em um layout simples, sem pirâmides encaracoladas. Na Wikipedia, você pode ler que é chamado Shisen-Sho, mas se você quiser pesquisar no Google samples, o primeiro nome será mais adequado.

Eu suspeito que a primeira versão foi feita por um programador como eu, que não tinha experiência em programar um mahjong completo com um layout complicado - mas o jogo de repente se tornou popular e gerou seu próprio ramo de clones.


Shiseen-sho ou Mahjong Connect do KDE

Veja os cartões de palavras e o Mahjong Connect - eles se encaixam perfeitamente - e há casais. Resta apenas transformar cada carta em um par de fichas.

Chips e design de jogabilidade


Cinco novas palavras em cada sessão e mais algumas palavras repetidas das anteriores - essa é a ideia da qual comecei. Isso significava que pelo menos cerca de 20 fichas deveriam estar envolvidas no jogo.

Em cada chip era necessário colocar pelo menos uma palavra com boa legibilidade. Os cartões de papel permitem que você coloque bastante texto, mas os chips com essas proporções seriam muito grandes. Além disso, eu realmente queria manter a sensação de "como se mahjong", e isso significava que um chip de jogo deveria ser muito compacto em forma e texto. Se você girar a junta do mahjong 90 graus, você terá espaço suficiente para o texto.

Tendo modelado um layout de jogo com essas juntas em um editor gráfico (Fireworks 2003, se você estiver curioso), vi que o jogo parece muito chato. Tendo olhado novamente para as capturas de tela com mahjongs, tentei adicionar diferentes elementos gráficos para animar a imagem. E então me dei conta - você pode simplesmente adicionar uma gema a cada par. Então, ele funcionará não apenas como um elemento de animação, dando pelo menos uma semelhança externa com brinquedos casuais, mas também como uma dica.


Versão preliminar do campo de jogo com diferentes opções para fichas

A versão final ficou assim - três gemas para 10 a 11 pares de palavras. Isso deu uma dica com uma chance de coincidência aleatória de cerca de 25%. Se você esquecer a palavra - poderá ver as fichas com as mesmas palavras.

Um elemento de design adicional que acelera a orientação é uma bandeira cinza que marca todas as palavras em um idioma (russo). A idéia original era rotular um elemento de um par, não um sinal nacional, então eu não fiz tricolor ou qualquer outra coisa assim.



Parece quase trapaça, mas eu não queria fazer um exame ou um teste de conhecimento completo. O exame é estressante, e eu precisava da jogabilidade mais fácil e agradável, para que durante o jogo um sentimento de vitória e autoconfiança se formasse. Eu acho que essa é uma das qualidades mais importantes dos caçadores de tempo do culto, como Bejeweled ou Zuma. O jogador percorre a fronteira ideal entre sua habilidade e incapacidade, se divertindo e retornando ao jogo novamente.

E as regras - dei outro passo na simplificação do Mahjong Connect e me permitiu fazer pares de quaisquer fichas correspondentes, e não apenas as que foram desbloqueadas. Há duas razões pelas quais isso aconteceu. A primeira é que eu não tinha código de mahjong pronto e testei apenas o emparelhamento. A segunda é que descobri que fichas com palavras em diferentes idiomas complicam a jogabilidade e combiná-las já cria a sensação de um jogo.

Olhando para o futuro - se você fizer uma conexão completa e fizer o mahjong com as mesmas fichas, será realmente muito mais fácil jogar. O fato é que restrições adicionais sobre as fichas restringem a escolha e o jogador pode verificar apenas todas as fichas adequadas para gemas que são gratuitas para gemas - e isso dará um aumento acentuado na probabilidade de coincidência de 25% para 50 ou até cem, dependendo do layout.

Mas não importa quão fácil seja jogar ou trapacear, o objetivo principal de um jogo desse tipo ainda será atingido - o cérebro do jogador corresponderá constantemente a algumas palavras em seus idiomas nativo e estrangeiro. Se alguém conseguir fazer um timekiller, então dezenas de horas serão um benefício para os jogadores, não importa como eles trapaceiem. Embora o aprendizado consciente seja sempre sempre melhor.

Programação


Para este projeto, usei JavaScript regular e o mecanismo de jogo Phaser.io 2.10.2. Por que os jogos HTML5 são bons - eles permitem que você forneça rapidamente acesso para testar e executar protótipos. Já consegui garantir em outros projetos que, como forma de criar um jogo multiplataforma, o HTML5 não é muito bom (uma queda perceptível no FPS em telefones fracos, problemas de compatibilidade entre navegadores, a necessidade de pensar em pontes para a API nativa em alguns casos). Mas como uma ferramenta para criar protótipos e brinquedos da Web, é uma boa escolha.

Como no caso da caravana pós-nuclear , comecei a desenvolver compilando um modelo do estado do jogo - ou seja, uma classe de dados com campos que simplesmente refletem o progresso atual do jogador.

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 salvar e carregar o estado do jogo no JS baseado em navegador, basta serializar e desserializar esse modelo ao gravar e ler no armazenamento local - e assim obtemos o progresso salvo no computador do usuário em apenas algumas linhas.

Colocar chips em campo, processar cliques do mouse e uma tela sensível ao toque na Phaser são implementados de maneira bastante simples. Possui a classe Group, que permite alinhar automaticamente todos os objetos visuais adicionados a ela de acordo com uma determinada grade.

No entanto, apenas retângulos regulares (ou grades, se você definir uma etapa grande) podem ser feitos dessa maneira, o que parece bastante primitivo. Portanto, escrevi minha função de layout, na qual cada segunda linha é deslocada pela metade dos chips - resulta no layout dos "tijolos".

 //    -        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++; } } } 

Mas tive que resolver os principais problemas do dicionário.

Jogos de dicionários e fontes


A primeira coisa que chama a atenção de todos, se eles ainda não se apressaram - o comprimento dos chips não é suficiente para exibir adequadamente todas as palavras no dicionário. Você pode resolver isso alterando arbitrariamente o tamanho da fonte, dependendo do tamanho da palavra.


Tamanho de fonte diferente para diferentes comprimentos - parece um pouco louco, na minha opinião

Mas essa opção me pareceu muito ruim, então decidi filtrar o dicionário e deixar apenas palavras com mais de 9 caracteres nos dois casos (russo e inglês). No meu caso, isso era permitido, porque eu tomei o dicionário de frequência como base - ou seja, as palavras nele foram classificadas por frequência de uso. Nas primeiras mil palavras com mais de 9 caracteres, havia muito poucas e, entre as dez principais, ou seja, as mais frequentes, não havia nenhuma.

Um limite de 9 caracteres é adequado no estágio de verificação do conceito para as palavras mais comuns, mas se você desenvolver um protótipo, mais cedo ou mais tarde terá que fazer algo a respeito. Muito provavelmente, mude as proporções dos chips ou aumente seu tamanho. Para o idioma alemão, isso terá que ser feito mesmo dentro da estrutura das primeiras centenas de palavras mais populares - e eu também quero testar o alemão, lembre-se dos anos escolares.

O segundo ponto é a coincidência visual das letras em inglês e russo. Russo "não" e inglês, em maiúsculas, muitas vezes coincidem apenas com o pixel. Um dicionário de frequência aprimora esse efeito porque essas palavras curtas terminam em uma lição quase no início.


NÃO russo e inglês HE em maiúsculas têm a mesma aparência

A bandeira cinza ajudou fracamente, as palavras estavam confusas. Após as primeiras queixas dos testadores, mudei o caso das inscrições para as minúsculas comuns. E então eu vi o próximo bug - as letras começaram a dançar, em algumas palavras flutuando verticalmente por um pixel inteiro.



O motivo foi que eu usei uma fonte raster única para a saída (formada como um conjunto de figuras em letras do mesmo tamanho), escalando-a conforme necessário. Na maioria dos casos, isso ocorre sem problemas, mas as letras redondas aparecem em letras minúsculas - às vezes um pixel é consumido, o que dá o efeito de dançar.
Moralidade: uma fonte rasterizada para textos pequenos deve ser preparada imediatamente no tamanho certo
Depois de preparar uma fonte separada, todo mundo parou de dançar e permaneceu estritamente ao longo da linha de base.



Se você usará o Phaser ou outro mecanismo HTML5 em seus projetos, aqui está outra dica: exiba a fonte rasterizada imediatamente na cor que será usada no jogo. Caso contrário, isso coloca um estresse adicional no processador, que em jogos com várias ações e efeitos pode levar a um forte subsidência do FPS. Além disso, mesmo no Chrome móvel mais recente em alguns tablets Android, a cor "não nativa" definida pela fonte de bitmap programaticamente pode não ser exibida de todo - a saída será o padrão.

E, é claro, o dicionário para esse jogo é melhor conectado como um arquivo para download em separado - isso permitirá que seja atualizado se erros de digitação ou opções duvidosas forem notadas.

Por exemplo, minha versão do dicionário parece ter sido compilada a partir de matrizes de textos traduzidos, levando em consideração o contexto, de modo que o "o quê" nas primeiras lições foi traduzido como "isso". É claro que, nesse sentido, essa partícula é usada com muito mais frequência do que a questão, mas para aprender sem contexto não é adequado.

Minha principal conclusão de vocabulário é que partículas e outras palavras altamente sensíveis ao contexto não são adequadas para aprender em pares tão puros. As opções de solução que vejo são fazer um brinquedo separado em partículas ou criar chips com textos mais longos. A segunda opção parece mais lógica, porque você não será alfabetizado com apenas uma palavra e precisará aprender completamente o idioma com o contexto, pelo menos com a ajuda de pequenas expressões. E isso significa - ainda há muita experimentação pela frente!

Tutorial


No início, testei um jogo no qual as fichas eram simplesmente dispostas - e foi interessante, porque a jogabilidade foi reduzida a recordar com alegria expressões já conhecidas e isso deu a sensação de uma vitória fácil, necessária. Mas então percebi que isso não funcionaria com uma linguagem completamente desconhecida. Portanto, tive que adicionar a opção de aprendizado - antes do início da lição, o jogo mostra as fichas nos pares corretos e depois as mistura.



Tecnicamente, isso é implementado da seguinte maneira - o nível é inicialmente definido como de costume, ou seja, em uma ordem aleatória. Em seguida, se a opção do tutorial estiver ativada, é lançada uma função que lembra as coordenadas iniciais dos chips, adiciona animação e layouts de vôo a eles em pares de trabalho e tudo volta ao seu lugar. Como o cálculo e a preparação do tutorial ocorrem antes do início do primeiro ciclo de atualização (redesenhando a tela), parece ao usuário que o jogo primeiro exibe as fichas na ordem correta e as mistura aleatoriamente.

No mecanismo da Phaser, o Group possui um método de reprodução aleatória que funciona como embaralhar uma matriz regular, mas atualiza simultaneamente o índice Z. Essa é uma função muito conveniente, que certamente será útil para a implementação de mahjong completo e outros jogos em que há pelo menos uma terceira dimensão condicional e os elementos se sobrepõem.

O algoritmo do início do jogo parece simples - pegamos N pares do dicionário de pares para uma determinada lição, formamos elementos visuais de chips a partir deles, depois fazemos um shuffle e construímos em uma grade - obtemos um layout pseudo-aleatório.

O processo inverso ocorre no tutorial - a função de classificação é chamada na matriz de chips, onde o parâmetro id do par de dicionário é um parâmetro significativo - dessa forma, os chips são organizados um após o outro em pares, após o que resta colocá-los em duas colunas.

Progresso


Para monitorar o progresso, adicionei pequenos indicadores ao menu Iniciar e um asterisco, que deve aparecer quando todos os níveis forem concluídos em cem palavras. A captura de tela mostra uma situação artificial com uma estrela de teste.



Levei o sultão com o rosto de Cartman no Craftpix.net - ele andou com o mesmo kit grátis de diamantes. Apenas para apimentar o protetor de tela. Embora, se você não gosta dos sultões ou Cartman, admito que a mudança não é particularmente bem-sucedida.

Conclusões e Perspectivas


Estou certo de que o timekiller de treinamento é um timekiller real, e não esse protótipo que eu fiz é possível. E quando eles aparecem em grandes números, o mundo pode mudar para melhor. No mínimo, milhões de pessoas não desperdiçam centenas de horas.

Se você tiver em mãos um código para um jogo regular em combinação e alguns dias livres, tente experimentar, pelo menos com algumas palavras. Você pode pegar o arquivo JSON finalizado aqui . Tem mais de mil pares, eu formei com uma margem.

Todos os jogos match3 e match2 - com bolas, diamantes, chips de mahjong, peixes e filhotes, com um layout dinâmico fractal como Zuma ou um campo estático, como na maioria dos jogos - essa é essencialmente uma tarefa de fazer combinações, selecionar grupos de acordo com algum critério .

Nos jogos atuais, esse sinal não carrega carga, as pessoas simplesmente combinam bolas vermelhas e verdes, balas de geléia listrada translúcida e filhotes de geléia de marmelada. Mas e se esses filhotes estiverem saturados com vitaminas saudáveis? Lembro que aprendi várias palavras em inglês com Fallout e Heroes Might and Magic, o que significa que essas vitaminas existem.

Meu protótipo do jogo pode ser testado aqui . Há uma escolha de centenas e níveis diferentes, preservação, progresso e mil das palavras mais comuns em inglês. O layout foi desenvolvido para monitores ou tablets de mesa. Cada nível é projetado por vários minutos, contém 5 novas palavras e 6 repetidas das anteriores (de acordo com a fórmula de amostragem aleatória 3, 2, 1).

Atualizado em 13.06.18 : adicionadas transições entre centenas de palavras e saudações ao passar o último nível em cada cem. Também são removidos do dicionário alguns pares contextuais que não fazem sentido em traduções únicas. Trabalho otimizado com memória.

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


All Articles